huazhiyu/pages/fenxiao/fenxiao.vue

<template>
<view class="fenxiao">
	<view class="fenxiaoInfo">
		<view class="fxTop">
			<text class="tixian">佣金</text>
			<view class="fxIntro">
				<text>分销说明</text>
				<u-icon size="15" color="#c4b39b" name="more-circle"></u-icon>
			</view>
		</view>
	<!-- 	<view class="fxMiddle">
			<text>￥</text>
			<text class="num">22</text>
		</view> -->
		<view class="fxBottom">
			<view class="fxItem">
				<text class="num">￥{{totalObj.total_commission_amount}}</text>
				<text class="total">累计总获得</text>
			</view>
			<view class="fxItem">
				<text class="num">￥{{totalObj.today_commission_amount}}</text>
				<text class="total">今日获得</text>
			</view>
			<view class="fxItem">
				<text class="num">￥{{totalObj.seven_day_commission_amount}}</text>
				<text class="total">近7日获得</text>
			</view>
		</view>
	</view>
	<image class="line" src="../../static/image/line.png" mode="widthFix"></image>
	<view class="card">
		<u-cell-group :border="false">
			<u-cell icon="rmb-circle" :iconStyle="{'color':'#9f751f'}" @click="jump(1)" :titleStyle="{'color':'#9f751f'}" title="我的佣金" :isLink="true" :rightIconStyle="{'color':'#9f751f'}"></u-cell>
			<!-- <u-cell icon="file-text" :iconStyle="{'color':'#9f751f'}"  :titleStyle="{'color':'#9f751f'}" title="提现记录" :isLink="true" :rightIconStyle="{'color':'#9f751f'}"></u-cell> -->
			<u-cell icon="heart" :iconStyle="{'color':'#9f751f'}" @click="jump(2)" :titleStyle="{'color':'#9f751f'}" title="我的粉丝" :isLink="true" :rightIconStyle="{'color':'#9f751f'}"></u-cell>
			<u-cell icon="order" :iconStyle="{'color':'#9f751f'}" :titleStyle="{'color':'#9f751f'}" title="粉丝订单" :isLink="true" :rightIconStyle="{'color':'#9f751f'}"></u-cell>
		</u-cell-group>
	</view>
	
</view>
</template>

<script>
import {getUserCommissionStatistic} from '@/common/api.js'
export default{
	data(){
		return{
			totalObj:{
				"total_commission_amount": "",
				"today_commission_amount": "",
				"seven_day_commission_amount": ""
			}
		}
	},
	methods:{
		getInfo(){
			getUserCommissionStatistic().then(res=>{
				console.log(res,"nnn")
				this.totalObj = Object.assign({},this.totalObj,res.data)
			})
		},
		jump(type){
			switch (type){
				case 1:
					uni.navigateTo({
						url: '/pages/fenxiao/yongjin'
					})
					break;
				case 2:
					uni.navigateTo({
						url: '/pages/fenxiao/fans'
					})
					break;
				case 3:
					uni.navigateTo({
						url: '/pages/BrowsingHistory/BrowsingHistory'
					})
					break;
			}
		},
	},
	mounted(){
		this.getInfo()
	}
	
}
</script>

<style lang="scss" scoped>
.fenxiao{
	min-height: calc(100vh - 90rpx);
	border-top: 1px solid transparent;
	background: url('../../static/image/bg.png');
	background-size: contain;
	.fenxiaoInfo{
		width:80%;
		margin:14% auto 0 auto; 
		background: url('../../static/image/fenxiaobg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		border-radius: 15rpx;
		padding:30rpx;
	}
	.fxTop{
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.tixian{
			color: #9f751f;
			font-size: 30rpx;
		}
		.fxIntro{
			font-size: 30rpx;
			color: #c4b39b;
			display: flex;
			align-items: center;
			text{
				margin-right:10rpx;
			}
		}
	}
	.fxMiddle{
		font-size: 30rpx;
		margin:26rpx 0;
		color: #9f751f;
		text-align: center;
		.num{
			font-size: 58rpx;
			font-weight: normal;
			color: rgb(77, 154, 94);
		}
	}
	.fxBottom{
		display: flex;
		margin-top:50rpx;
		align-items: center;
		justify-content: space-between;
		.fxItem{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			
			.num{
				font-size: 32rpx;
				color: #9f751f;
			}
			.total{
				font-size: 26rpx;
				color: #7a5f26;
				margin-top:10rpx;
			}
		}
	}
	.line{
		width:100%;
		height:auto;
	}
	.card{
		margin-top: 8px;
		padding: 16px 22px;
	}
}
::v-deep .u-line{
	border:1px solid #9f751f !important;
}
::v-deep .u-cell__body{
	padding:30rpx 0 !important
}
</style>