yicangzongtai_app_240321/pages/user/distribution/distributionCentre.vue

<template>
	<view class="container">
		<navbar :config="config" backColor="#666666"></navbar>

		<view class="distribution">
			<!-- <image :src="imgUrl+'/distribution-top-bg.png'"></image> -->
			<div class="bg"></div>
			<view class="userInfo">
				<view class="u-plr30">
					<view class="head u-flex-center-sb">
						<view class="u-flex">
							<image v-if="accountInfo.head_photo" :src="accountInfo.head_photo"></image>
							<image v-else  :src="imgUrl+'/head-on.png'" mode=""></image>
							<view class="u-ml30 u-mt15">
								<view class="u-font30 u-1A1A1A u-text1" style="width: 350rpx;">{{accountInfo.nickname}}</view>
								<view class="u-mt5 u-02331F u-font24">邀请码:
								<text class="u-mr30">{{accountInfo.invitation_code}}</text> 
								<text class="u-FF0000" @click="copy(accountInfo.invitation_code)">复制</text> 
							</view>
							</view>
						</view>
						<view @click="goInvitationCode">
							<text class="iconfont font80">&#xe647;</text>
							<view class="u-font24 u-1A1A1A">分享码</view>
						</view>
					</view>
				</view>
				<view class="u-plr30">
					<view class="list-item u-mt30">
						<view class="u-flex">
							<view class="iconfont bg-E8F9EF">&#xeb99;</view>
							<text class="u-bold u-font28 u-1A1A1A u-ml15 u-mt15">可提现金额</text>
						</view>
						<view class="bg-fff u-mt20 u-flex-center-sb">
							<view class="u-FF0000 u-bold  u-font36 u-flex"> 
							<rich-text :nodes="$mUtil.priceBigSmall(accountInfo.commission_able)"></rich-text>
							</view>
							<view class="u-flex-center">
								<view class="wd-btn " @click="goWithdrawDeposit">
									<button class="u-font24">点击提现</button>
								</view>
								<view class="wd-btn u-ml10 bgc" @click="goWithdrawDeposittwo">
									<button class="u-font24">转入余额</button>
								</view>
							</view>
							
						</view>
					</view>
					<view class="list-item u-mt30">
						<view class="u-flex">
							<view class="iconfont bg-E8F9EF">&#xe673;</view>
							<text class="u-bold u-font28 u-1A1A1A u-ml15 u-mt15">我的伙伴</text>
						</view>
						<view class="bg-fff  u-mt20 u-flex-center-sb"  @click="goPartner">
							<view>直接伙伴</view>
							<view> <text class="u-FF0000">{{num}}</text> 人 <text class="iconfont u-font24 u-999 u-ml15">&#xe6c7;</text> </view>
						</view>
					</view>
					<view class="list-item u-mt30">
						<view class="u-flex-center-sb">
							<view class="u-flex-center">
								<view class="iconfont bg-E8F9EF">&#xe63c;</view>
								<text class="u-bold u-font28 u-1A1A1A u-ml15 u-mt15">分销订单</text>
							</view>
							<view class="u-flex-center" @click="getMoenyList">
								<text class="u-font24 u-999">历史订单</text>
								<text class="iconfont u-font24 u-999 u-mr30">&#xe6c7;</text>
							</view>
						</view>
						<view class="bg-fff u-mt20 u-flex-center-sa">
							<view>
								<view>本周订单</view>
								<view class="u-text-center u-mt10"> 
								<text class="u-FF0000 u-bold">{{userordergains.week_user_order_gains_num}}</text>  
								<text class="u-font20 u-666 u-ml5">单</text></view>
							</view>
							<view>
								<view>本月订单</view>
								<view class="u-text-center u-mt10"> 
								<text class="u-FF0000 u-bold">
								{{userordergains.month_user_order_gains_num}} </text>  
								<text class="u-font20 u-666 u-ml5">单</text></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--页面加载动画-->
		<ldLoading isFullScreen :active="loading"></ldLoading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '分销中心',
					color: '#1A1A1A',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#FFF"],
					statusBarFontColor: '#1A1A1A'
				},
				loading:true,
				accountInfo:{},//用户信息
				num:0,//伙伴个数
				userordergains:{},//分销订单
				imgUrl: this.$mConfig.staticUrl,
			}
		},
		onShow(options) {
			//获取用户信息
			this.$http.get('/account/getAccountInfo',).then(res => {
				if(res&&res.code==200){
				this.accountInfo = res.data
				}
			})
			//获取伙伴个数
			this.$http.get('/account/myPartnerNum',).then(res => {
				if(res&&res.code==200){
				this.num = res.data
				}
			})
			//获取分销订单
			this.$http.get('/userordergains/slim-statistics',).then(res => {
				this.loading =false
				if(res&&res.code==200){
				this.userordergains = res.data
				}
			})
		},
		methods:{
			//分润订单
			getMoenyList(){
				uni.navigateTo({
					url:"moneyList",
				})
			},
			//提现
			goWithdrawDeposit(){
				uni.navigateTo({
					url:"withdraw",
				})
			},
			//转入余额
			goWithdrawDeposittwo(){
				uni.navigateTo({
					url:"withdrawTwo",
				})
			},
			//我的伙伴
			goPartner(){
				uni.navigateTo({
					url:"partner"
				})
				},
			//跳转到邀请码页
			goInvitationCode(){
				uni.navigateTo({
					url:"../invitationCode/invitationCode"
				})
				},
			//复制邀请码
			copy(code){
				uni.setClipboardData({
					data: code,
					success: () => { 
					uni.showToast({
					title: '复制成功'
					})
					}
					});
				},
		}
	}
</script>

<style lang="scss">
	.distribution {
		position: relative;

		.bg {
			width: 100%;
			height: 185rpx;
			background-color: #0B844A;
		}

		.userInfo {
			position: absolute;
			top: 68rpx;
			width: 100%;
			.head {
				background-color: #FFFAEE;
				padding: 40rpx 30rpx 36rpx;
				border-radius: 20rpx;
				image {
					width: 106rpx;
					height: 106rpx;
					border: 4rpx solid #FFFFFF;
					border-radius: 50%;
				}
				.font80{
					font-size: 80rpx;
					color: #0B844A;
				}
			}
		}
		.list-item{
			.bg-E8F9EF{
				background-color: #E8F9EF;
				color: #56916D;
				padding: 10rpx;
				width: 50rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				border-radius: 50%;
			}
			.bg-fff{
				background-color: #FFFFFF;
				box-sizing: border-box;
				padding: 30rpx;
				border-radius: 20rpx;
				box-shadow: 0 0 20rpx #eee;
				
				.wd-btn button {
					width: 175rpx;
					height: 60rpx;
					border-radius: 30px;
					background-color: #F7F7F7;
				}
				
			}
			
		}
	}
</style>