school_uni/package2/myCenter/wallet.vue

<template>
	<!-- 我的钱包 -->
	<view class="page1">
		<view class="title">
			<view class="title-sreach">
				<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
					<uni-icons type="left" size="28"></uni-icons>
				</view>
				<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}">
					我的钱包
				</view>
			</view>
		</view>
		<view class="content">
			<view style="width: 100%;height: 100px;border: 1px solid red;" @tap="chooseLinkId('user')">
				<view>用户余额(元)</view>
				<view>{{balanceUser.depoBal}}</view>
				<view>
					钱包安全保障中
				</view>
				<view @tap.stop="userCommion('user',balanceUser.depoBal)" class="">
					提现
				</view>
			</view>
			<view style="display: flex;">
				<view style="flex: 1;border: 1px solid green;height: 80px;" @tap="chooseLinkId('worker')">
					<view>配送今日佣金(元)</view>
					<view>{{balanceWorker.depoBal}}</view>
					<view>配送可提现余额)</view>
					<view>{{balanceWorker.depoBalRel}}</view>
					<view @tap.stop="userCommion('worker',balanceWorker.depoBalRel)" class="">
						提现
					</view>
				</view>
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration">
					<swiper-item  @tap="chooseLinkId('shop',item)"  v-for="(item,index) in balanceShop" :key="index">
						<view style="flex: 1;border: 1px solid orange;height: 80px;">
							<view>{{item.shopName}}余额(元)</view>
							<view>{{item.balance}}</view>
							<view @tap.stop="userCommion('shop',item.balance,item)" class="">
								提现
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="">
				<view class="" style="display: flex;height: 30px;line-height: 30px;">
					<view class="" style="flex:1;">
						余额明细
					</view>
				</view>
				<view class="" style="display: flex;text-align: center;height: 80px;border: 1px solid #000;"  v-for="(item,index) in rewardLists" :key="index">
					<view style="flex: 1;text-align: left;">
						<img src="/static/images/dingdan/dd0.png" alt="" style="width: 50px;height: 50px;background-size: 100%;">
					</view>
					<view class="" style="flex: 1;">
						<view class="">
							{{item.dealingsWay}}
						</view>
					</view>
					<view class="" style="flex: 1;">
						<view class="">
							{{item.amount}}
						</view>
						<view class="">
							{{item.createTime}}
						</view>
					</view>
				</view>
				<uni-load-more :status="loadStatus" />
			</view>
		</view>
		<!-- 出层 -->
		<uni-popup ref="payPopup" background-color="#fff">
				<text style="color: #777; font-weight: normal; margin-right: 10rpx; font-size: 24rpx;">支付宝实名</text>
				<input type="text" v-model="aliName"
					style="width: 140rpx; border-bottom: 1px solid #ccc; text-align: center; font-size: 28rpx; font-weight: normal; height: 50rpx; min-height: 50rpx;"
					placeholder="名称" />
					<text style="color: #777; font-weight: normal; margin-right: 10rpx; font-size: 24rpx;">支付宝认证手机号</text>
					<input type="digit" v-model="aliAccount"
						style="width: 140rpx; border-bottom: 1px solid #ccc; text-align: center; font-size: 28rpx; font-weight: normal; height: 50rpx; min-height: 50rpx;"
						placeholder="手机号" />
					<text style="color: #777; font-weight: normal; margin-right: 10rpx; font-size: 24rpx;">提现金额</text>
					<input type="digit"  v-model="commionAmount"
						style="width: 140rpx; border-bottom: 1px solid #ccc; text-align: center; font-size: 28rpx; font-weight: normal; height: 50rpx; min-height: 50rpx;"
						placeholder="金额" />
			<view class="btn" style="background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));width: 90%;height: 100rpx;border-radius: 100rpx;text-align: center;font-size: 28rpx;font-weight: 700;line-height: 100rpx;margin: 40rpx auto;" @tap="wxPayment">
				确认提现
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: {},
				balanceUser:{},
				loadStatus: 'more',
				balanceWorker:{},
				rewardLists:[],
				aliName:'',
				aliAccount:'',
				commionType:'',
				shopId:'',
				workerId:'',
				userId:'',
				searchForm:{
					pageNum:1,
					pageSize:10
				},
				indicatorDots: false,
				interval: 4000,
				onlineWorkerInterval:4000,
				totalPages: 1,
				commionUrl:'',
				commionAmount:0,
				linkId:'',
				autoplay: true,
				balanceShop:[],
			}
		},
		onLoad(option) {
			
		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.balanceUser = 0
			this.balanceWorker = 0
			this.balanceShop = 0
			this.beginData();
		},
		onReachBottom() {
			
			if (this.searchForm.pageNum >= this.totalPages) return;
			// this.status = 'loading';
			this.searchForm.pageNum+=1;
			this.rewardList();
		
		},
		methods: {
			beginData(){
				this.tui.request("/worker/getAllDepo/", "GET", {userId:uni.getStorageSync('id')}, false, true).then((res) => {
					if (res.code == 200) {
						if(res.result.user){
							this.balanceUser = res.result.user
							this.linkId = res.result.user.id
							this.rewardList()
						}
						if(res.result.worker){
							this.balanceWorker = res.result.worker
						}
						if(res.result.shop){
							this.balanceShop = res.result.shop
						}
						that.$forceUpdate();
					} else {
						this.tui.toast(res.message)
					}
					uni.hideLoading()
				}).catch((res) => {})
			},
			//提现
			withDraw(){
				uni.showToast({
					title:'提现成功'
				})
			},
			userCommion(type,commion,item){
				if(type=='user'){
					this.commionUrl = '/app/returnCommission/handleReturnUser'
				}else if(type=='worker'){
					this.commionUrl = '/app/returnCommission/handleReturnWorker'
				}else{
					this.commionUrl = '/app/returnCommission/handleReturn'
					this.shopId = item.id
				}
				this.commionAmount = commion
				this.commionType = type
				this.$refs.payPopup.open();
			},
			wxPayment(){
				let that = this
				if(this.commionAmount < 1 || this.commionAmount > 5000){
					that.tui.toast('单笔提现金额应在1-5000之间')
					return
				}
				let data = {
					commission:this.commionAmount,
					aliName:this.aliName,
					aliAccount:this.aliAccount
				}
				if(this.commionType == 'user'){
					data.userId = this.balanceUser.id
				}else if(this.commionType == 'worker'){
					data.workerId = this.balanceWorker.workerId
				}else{
					data.shopId = this.shopId
				}
				that.tui.request(this.commionUrl, "POST", data, false, false).then((res) => {
					that.loadStatus = 'nomore';
					if (res.code == 200) {
						this.$refs.payPopup.close();
						this.beginData();
					} else {
						that.tui.toast(res.message)
						return
					}
					uni.hideLoading()
				}).catch((res) => {
					that.tui.toast(res.message)
				})
			},
			chooseLinkId(type,item){
				if(type == 'user'){
					this.linkId = this.balanceUser.id
				}else if(type == 'worker'){
					this.linkId = this.balanceWorker.workerId
				}else{
					this.linkId = item.id
				}
				this.rewardList();
			},
			rewardList(){
				this.loadStatus = 'loading'
				let that = this
				this.searchForm.linkUserId = this.linkId;
				that.tui.request("/mall/coupon/selectRewardByRegionId", "POST", this.searchForm, false, false).then((res) => {
					that.loadStatus = 'nomore';
					if (res.code == 200) {
						that.totalPages = res.result.pages
						if (that.searchForm.pageNum == 1) {
							that.rewardLists = res.result.records
						} else {
							that.rewardLists = [...that.rewardLists, ...res.result.records]
						}
						that.$forceUpdate()
					} else {
						that.tui.toast(res.message)
						return
					}
					uni.hideLoading()
				}).catch((res) => {})
			},
			back() {
				uni.navigateBack()
			}
		}
	
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		background: #F5F8F5;
		color: #00231C;
	}
	
	.page1 {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		position: relative;
	}
	
	.title{
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
		width: 100%;
		height: 54%;
	}
	
	.content{
		position: absolute;
		top: 200rpx;
		width: 95%;
		margin-left: 2.5%;
	}
	
	.title-sreach{
		width: 100%;
		display: flex;
		height: 200rpx;
		position: relative;
	}
	
	.back-btn{
		position: absolute;
		bottom: 0;
		left: 20rpx;
	}
	.title-name{
		padding-top: 110rpx;
		font-size: 36rpx;
		font-weight: 700;
		flex: 1;
		text-align: center;
	}
	.swiper-container {
	
		width: 100%;
		height: 100%;
	}
	
	.swiper-page {
		width: 100%;
		height: 100%;
	}
	
	.swiper {
		width: 100%;
		height: 500rpx;
		z-index: 99 !important;
	}
	
	.swiper img {
		width: 100%;
		height: 100%;
		z-index: 99 !important;
	}
</style>