uni-app-applet/pagesA/distributionCenter/distributionCenter.vue

<template>
	<view>
		<!-- 状态栏 -->
		<status-nav :navBarTitle="'分销中心'"></status-nav>
		<!-- 容器 -->
		<container-subgroup>	
			<view slot="content">
				<!-- 标题 -->
				<view class="fon30 col0 mar-s30 mar-x10 tcenter">我的佣金</view>
				<!-- 佣金 -->
				<view class="fon72 peili-colorRed tcenter bold">￥{{commission}}</view>
				<!-- 统计 -->
				<view class="disja mar-s30">
					<view class="disjcac fc">
						<view class="fon24 colpeili">累计收益</view>
						<view class="fon36 col0 bold mar-s20">￥{{distributionInfo.commission_total || 0}}</view>
					</view>
					<view class="disjcac fc">
						<view class="fon24 colpeili">累计提现</view>
						<view class="fon36 col0 bold mar-s20">￥{{distributionInfo.withdrawal_total || 0}}</view>
					</view>
					<view class="disjcac fc">
						<view class="fon24 colpeili">分享好友</view>
						<view class="fon36 col0 bold mar-s10">{{distributionInfo.invite_count || 0}}</view>
					</view>
				</view>
				<!-- 提现按钮 -->
				<view @tap="tuneEv" class="withdrawal-btn radius30 colf fon36 tcenter peili-backColor mar-s50 mar-x30">立即提现</view>
				<!-- 佣金记录 -->
				<view class="fon36 col0 bold pad-sx20 bbot">佣金记录</view>
				<!-- 列表 -->
				<view v-if="dataList.length">
					<view class="bbot pad-sx20" v-for="(item,index) in dataList" :key="index">
						<view class="disjbac">
							<view class="fon30 col0 bold">{{item.name}}</view>
							<!-- <view class="fon24 colpeili">{{item.status}}</view> -->
						</view>
						<view class="disjbac mar-s20">
							<view class="fon24 colpeili">{{item.created_at}}</view>
							<view class="fon30 peili-colorRed bold">{{item.num}}</view>
						</view>
					</view>
				</view>
				<!-- 暂无 -->
				<pitera v-if="total==dataList.length"></pitera>
			</view>
		</container-subgroup>	
		<!-- 提现弹框 -->
		<view v-show="showwithdrawal" :style="{top: statusBarHeight+'px'}" @tap="showwithdrawal=false" class="withdrawal-box">
			<view @tap.stop="showwithdrawal=true" class="bacf radius20 pad30 posir fon30 col0 mar-zy50 mar-s100">
				<view class="tcenter">提现申请</view>
				<view class="mar-s20">
					<view class="fon24 colpeili">提现金额</view>
					<input type="text" class="pad-sx10 width100 bbot" v-model="commissionPrice" placeholder="请输入金额" placeholder-style="color:#000000;" />
				</view>
				<view class="mar-s20">
					<view class="fon24 colpeili">微信号码</view>
					<input type="text" class="pad-sx10 width100 bbot" v-model="wechatStr" placeholder="请输入微信号码" placeholder-style="color:#000000;" />
				</view>
				<view @tap="commissionExchange" class="withdrawal-btn radius30 colf fon36 tcenter peili-backColor mar-s70">立即提现</view>
				<!-- 关闭按钮 -->
				<image @tap.stop="showwithdrawal=false" src="/static/public/icon-close-01.png" mode="" lazy-load></image>
			</view>
		</view>
	</view>
</template>

<script>
	import pitera from '@/components/nothing/pitera.vue';
	export default {
		components:{
			pitera
		},
		data() {
			return {
				statusBarHeight:uni.getSystemInfoSync().statusBarHeight + 50,
				commission:0, // 我的佣金
				dataList:[
					{
						name:'提现',
						created_at:'2022-2-19 16:56:18',
						num:300,
					},
					{
						name:'提现',
						created_at:'2022-2-19 16:56:18',
						num:300,
					},
					{
						name:'提现',
						created_at:'2022-2-19 16:56:18',
						num:300,
					},
					{
						name:'提现',
						created_at:'2022-2-19 16:56:18',
						num:300,
					},
					{
						name:'提现',
						created_at:'2022-2-19 16:56:18',
						num:300,
					},
					{
						name:'提现',
						created_at:'2022-2-19 16:56:18',
						num:300,
					},
					{
						name:'提现',
						created_at:'2022-2-19 16:56:18',
						num:600,
					}
				],
				showwithdrawal:false, // 是否显示提现弹框
				distributionInfo:{}, // 分销数据详情
				commissionPrice:'' ,// 输入金额
				wechatStr:'',//微信号
				page:1,
				size:10,
				total:0
			}
		},
		onReachBottom() {
			if(this.total!=this.dataList.length){
				this.page++;
				// 调取查询分享信息事件
				this.checkCommissionEv();
			}
		},
		onLoad(options) {
			if(uni.getStorageSync('phone_active')){
				// 调取佣金信息事件
				this.checkCommissionEv();
			}
		},
		methods: {
			// 查询佣金信息
			checkCommissionEv(){
				this.$requst.post('/api/user/commission',{page:this.page,size:this.size}).then(res=>{
					if(res.code==0){
						if(this.page==1) this.dataList = [];
						// 分销中心数字信息
						this.distributionInfo = res.data;
						// 累计首页
						this.distributionInfo.commission = this.$toolAll.tools.addXiaoShu(this.distributionInfo.commission);
						// 累计提现
						this.distributionInfo.withdrawal_total = this.$toolAll.tools.addXiaoShu(this.distributionInfo.withdrawal_total);
						// 我的佣金
						this.commission = this.distributionInfo.commission;
						// 设置总数
						this.total = this.distributionInfo.log.total;
						// 设置列表
						this.dataList = this.dataList.concat(this.distributionInfo.log.list);
						// console.log(this.total,this.dataList.length)
					}
				})
			},
			// 调起弹框
			tuneEv(){
				if(this.commission*1 == 0 ){
					this.$toolAll.tools.showToast('剩余佣金不足');
				} else {
					this.showwithdrawal = true;
				}
			},
			// 发起提现
			commissionExchange(){
				if(!this.commissionPrice || this.commissionPrice==0){
					this.$toolAll.tools.showToast('请输入提现金额');
				} else if(!this.wechatStr){
					this.$toolAll.tools.showToast('请输入微信号');
				} else {
					this.$requst.post('/api/user/commission-withdrawal',{commission:this.commissionPrice,wechat:this.wechatStr}).then(res=>{
						if(res.code==0){
							this.$toolAll.tools.showToast('申请提现已提交');
							this.page = 1;
							setTimeout(()=>{
								// 关闭提现弹框
								this.showwithdrawal = false;
								// 更新数据-调取佣金信息事件
								this.checkCommissionEv();
							},2000)
						}
					})
				}
			}
		}
	}
</script>

<style>

</style>