yicangzongtai_app_240321/pages/user/distribution/withdraw.vue

<template>
	<view class="container">
		<navbar :config="config" backColor="#666666"></navbar>
		<view class="u-plr30">
		<!-- <view class="wd-bgImg">
			<image src="../../../static/my-top-bgImg.png"></image>
			<view class="moneyInfo">
				<view class="u-flex-center-sb" style="padding: 38rpx 22rpx;">
					<view class="u-FFF">
						<view class="u-font30">已提现：<text class="u-font24">￥</text> <text class="u-font28">102.00</text> </view>
						<view class="u-font30 mt40">待提现：<text class="u-font24">￥</text> <text class="u-font28">102.00</text> </view>
					</view>
					<view class="detail-btn" @click="goWdDetail">
						<button>
							<text class="iconfont">&#xe63d;</text>
							<text class="u-font24 u-ml10">提现明细</text>
						</button>
					</view>
				</view>
			</view>
		</view> -->
		<view class="u-bg-fff u-p30 u-mt20">
			<view class="u-flex-center-sb">
				<view>
					<text>可提现金额</text>
					<text class="u-ml20 u-FF0000 u-bold u-font36">{{walletInfo.commission_able}}</text>
				</view>
				<view @click="goWallet">
					<text class="iconfont">&#xe638;</text>
				</view>
			</view>
			<view class="u-mt30 u-flex u-999">
				<view>
					<text>待入账</text><text class="u-ml20">{{walletInfo.wait_account}}</text>
				</view>
				<view class="u-ml30">
					<text>冻结中</text><text class="u-ml20">{{walletInfo.freezing}}</text>
				</view>
			</view>
		</view>
		
		<!--提现记录-->
		<view class="u-bg-fff u-flex-center-sb u-p30 u-mt20" @click="goWdDetail">
			<view>提现记录</view>
			<view class="iconfont u-font24 u-666"> &#xe6c7;</view>
		</view>
			<view class="wdInput u-mt20">
				<view class="u-999">提现金额(最低提现佣金{{walletInfo.min_extract}}元)</view>
				<view class="u-mt20 input u-flex">
					<text>￥</text>
					<input class="u-ml10" maxlength="10" type="digit" @input="getMoney" v-model="dataForm.money" placeholder="提现金额" />
				</view>
			</view>

			<view class="bg-fff">
				<view class="u-flex-center-sb u-1A1A1A" v-if="dataForm.payment_term== 2" @click="openBankCard">
					<view class="u-flex">
						<text class="u-font30">提现方式</text>
						<view class="ml46 u-font28" v-if="bankCardList.length>0">
							<view>
								<image :src="bankIcon" class="img30"></image>
								<text class="u-ml20">{{dataForm.bank_name}}</text>
							</view>
							<view class="u-999 u-mt5 u-ml45 u-flex">
							尾号
							<rich-text :nodes="$mUtil.cutOut(dataForm.withdraw_account)"></rich-text>
							储蓄卡</view>
						</view>
						<view class="ml46 u-font28" v-else>
							添加银行卡
						</view>
					</view>
					<view class="iconfont u-font24 u-666"> &#xe6c7;</view>
				</view>
				<!--支付宝，微信-->
				<view class="zfb-wx" v-if="dataForm.payment_term != 2">
					<view class="u-flex-center-sb u-1A1A1A" @click="openBankCard">
						<view class="u-flex">
							<text class="u-font30 u-bold">提现方式</text>
							<view class="ml46 u-font28">
								<view v-if="dataForm.payment_term==1"><text class="iconfont u-font40 payIcon">&#xe627;</text> <text>支付宝</text></view>
								<view v-if="dataForm.payment_term==0"><text class="iconfont u-font40 wxIcon">&#xe606;</text> <text>微信</text></view>
							</view>
						</view>
						<view class="iconfont u-font24 u-666"> &#xe6c7;</view>
					</view> 
					<view class="u-mt50 zhInput">
						<view class="u-flex-center">
							<view class="wt112">姓 名：</view>
							<input class="ml56" maxlength="16" @input="getName" :value="dataForm.payee" placeholder="请输入姓名" />
						</view>
						<view class="u-flex-center u-mt20">
							<view class="wt112">手机号：</view>
							<input class="ml56" maxlength="11" @input="getMobile" type="number" :value="dataForm.withdraw_mobile" placeholder="请输入手机号" />
						</view>
						<view class="u-flex-center u-mt20">
							<view class="wt112">{{dataForm.payment_term==1?'支付宝':'微信'}} ：</view>
							<input class="ml56"  maxlength="30" @input="getWithdrawAccount" :value="dataForm.withdraw_account" placeholder="请输入账号" />
						</view>
					</view>
				</view>
			</view>

			<view class="apply-btn" @click="requestWithdrawal">
				<button class="u-btn-two">提交申请</button>
			</view>
		</view>

		<!--弹窗选择银行卡-->
		<uniPopup type="bottom" ref="uniPopup">
			<view class="popup">
				<view class="bg-top">
					<text class="iconfont u-999" @click="close">&#xe612;</text>
					<text class="u-text-center ml200">选择优先付款方式</text>
				</view>
				<view class="bankCardList">
					<view v-for="(item,index) in bankCardList" :key="item.id">
						<!--index 下标，2 是类型自定义（下面支付宝，微信一样）-->
						<view class="item u-flex" @click="pitchOn(index,2)">
							<image :src="item.icon"></image>
							<view class="u-ml25 rh-br u-flex-sb" >
								<view class="u-flex">
									<text>{{item.bank_name}}</text>
									（<rich-text :nodes="$mUtil.cutOut(item.card_num)"></rich-text>）
								</view>
								<text class="iconfont pull-right" v-if="pitchOnIndex==index">&#xe63e;</text>
							</view>
						</view>
					</view>

					<!--添加银行卡-->
					<view class="item u-flex" @click="goAddBankCard">
						<text class="iconfont">&#xe81a;</text>
						<view class="u-ml25 rh-br">
							<text>添加银行卡</text>
						</view>
					</view>

					<!--支付宝-->
					<view class="item u-flex" @click="pitchOn(-1,1)">
						<image :src="imgUrl+'/alipay.png'"></image>
						<view class="u-ml25 rh-br">
							<text>支付宝</text>
							<text class="iconfont pull-right" v-if="pitchOnIndex==-1">&#xe63e;</text>
						</view>
					</view>
					<view class="item u-flex" @click="pitchOn(-2,0)">
						<image :src="imgUrl+'/weChat.png'"></image>
						<view class="u-ml25 rh-br">
							<text>微信</text>
							<text class="iconfont pull-right" v-if="pitchOnIndex==-2">&#xe63e;</text>
						</view>
					</view>
				</view>
			</view>
		</uniPopup>

	</view>
</template>

<script>
	import uniPopup from "../../../components/uni-popup/uni-popup.vue"
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '提现',
					color: '#1A1A1A',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#FFF"],
					statusBarFontColor: '#1A1A1A'
				},
				bankCardList: [], //银行卡列表
				dataForm: {
					money: '', //提现金额
					payment_term: 2, // * 收款方式：      * 0微信，      * 1支付宝，      * 2银行线下      * 3现金支付
					payee: '', //收款人
					withdraw_account: '', //提现账户
					withdraw_mobile: '', //提现手机
					bank_name: '', //银行名称
				},
				bankIcon: '',
				pitchOnIndex:-3,
				addCard:true,
				walletInfo:{
					min_extract:0,
					wait_account:0,
					freezing:0
				},//账户信息
				imgUrl: this.$mConfig.staticUrl
			}
		},
		onLoad() {
			let that = this
			//获取账户信息
			this.getAccountMsg()
			//获取银行卡列表
			this.getBankCardList()
		},
		methods: {
			//获取账户信息
			getAccountMsg(){
				this.$http.get('/withdraw/getWalletInfo', {}).then(async res => {
					if (res && res.code == 200) {
						if(res.data){
							this.walletInfo = res.data
						}
					}
					})
			},			
			//获取银行卡列表
			getBankCardList(){
				this.$http.get('/member/bankcard/bankCardList', {}).then(async res => {
					if (res && res.code == 200) {
						this.bankCardList = res.list
						//默认提方式为用户银行卡列表第一张银行卡
						if(res.list.length>0){
							this.dataForm.bank_name= res.list[0].bank_name
							this.dataForm.withdraw_account= res.list[0].card_num
							this.bankIcon = res.list[0].icon
							this.dataForm.payee =res.list[0].name
							this.dataForm.withdraw_mobile = res.list[0].mobile
						}
					}
				})
			},			
			//打开弹窗银行卡列表
			openBankCard() {
				this.$refs.uniPopup.open();
				// console.log(this.pitchOnIndex)
			},
			//关闭弹窗
			close() {
				this.$refs.uniPopup.close();
			},
			//选择提现方式
			pitchOn(index, type) {
				this.pitchOnIndex = index
				this.dataForm.payment_term = type
				if (type == 2) {
					this.dataForm.bank_name = this.bankCardList[index].bank_name
					this.dataForm.withdraw_account = this.bankCardList[index].card_num
					this.bankIcon = this.bankCardList[index].icon
				} else {
					this.dataForm.bank_name = ''
					this.dataForm.withdraw_account = ''
				}
				this.$refs.uniPopup.close();
			},
			//跳转提现明细
			goWdDetail() {
				uni.navigateTo({
					url: "wdDetail"
				})
			},
			//跳到添加银行卡
			goAddBankCard() {
				uni.navigateTo({
					url: "../bankCard/addBankCard"
				})
			},
			//跳转到钱包明细
			goWallet(){
				uni.navigateTo({
					url: "./wallet"
				})
				},
			//获取输入提现金额
			getMoney(e) {
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.dataForm.money= e.target.value
				})
			},
			//获取提现人姓名
			getName(e) {
				// console.log(e.target.value)
				this.dataForm.payee = e.target.value
			},
			getMobile(e){
				this.dataForm.withdraw_mobile = e.target.value
			},
			//获取提现人账号
			getWithdrawAccount(e) {
				this.dataForm.withdraw_account = e.target.value
			},
			//申请提现
			requestWithdrawal() {
				if (!this.dataForm.money) {
					this.$mUtil.toast('请输入提现金额')
					return false
				}
				if (this.dataForm.money < this.walletInfo.min_extract) {
					this.$mUtil.toast('提现金额超出您的最低提现金额')
					return false
				}
				if (this.dataForm.payment_term === '') {
					this.$mUtil.toast('请选择提现方式')
					return false
				}
				if(this.dataForm.payment_term == 2){
					if(!this.dataForm.bank_name){
						this.$mUtil.toast('请先添加银行卡')
						return false
					}
					
				}
				if (this.dataForm.payment_term == 0 || this.dataForm.payment_term == 1) {
					if (!this.dataForm.payee) {
						this.$mUtil.toast('请输入姓名')
						return false
					}
					if(!this.dataForm.withdraw_mobile.match(this.$mConfig.telRegex)){
						this.$mUtil.toast('请输入正确手机号')
						return false
					}
					if (!this.dataForm.withdraw_account) {
						this.$mUtil.toast('请输入账户')
						return false
					}
				}
				this.$http.post('/withdraw/memberWithdraw', this.dataForm).then(async res => {
					if (res && res.code == 200) {
						this.$mUtil.toast('申请成功')
						setTimeout(() => {
							uni.navigateBack({
							  success: () => {
							    let page = getCurrentPages().pop();  //跳转页面成功之后
							    if (!page) {
							      return;
							    } else {
							      page.onLoad(page.options);// page自带options对象.
							    }
							  }
							})
						}, 2000)
					}else{
						this.$mUtil.toast(res.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.wt112 {
		width: 140rpx;
	}

	.img30 {
		width: 30rpx;
		height: 30rpx;
	}

	.wd-bgImg {
		position: relative;
		padding: 25rpx 0rpx;

		image {
			width: 100%;
			height: 200rpx;
			vertical-align: bottom;
		}

		.moneyInfo {
			position: absolute;
			top: 25rpx;
			width: 92%;

			.mt40 {
				margin-top: 40rpx;
			}

			.detail-btn button {
				height: 56rpx;
				line-height: 30rpx;
				border-radius: 28px;
				opacity: 0.82;
				padding: 10rpx 30rpx;
				background-color: #EED9A9;
				color: #0B844A;
			}
		}
	}

	.wdInput {
		background-color: #FFFFFF;
		border-radius: 18rpx 18rpx 0px 0rpx;
		padding: 40rpx 22rpx 32rpx;

		.input {
			height: 80rpx;
			line-height: 80rpx;
			font-size: 60rpx;
			border-bottom: 1rpx solid #D9D9D9;
			padding-bottom: 25rpx;

			input {
				height: 80rpx;
				line-height: 80rpx;
				font-size: 36rpx;
			}
		}
	}

	.bg-fff {
		background-color: #FFFFFF;
		padding: 26rpx 22rpx 36rpx;
		border-radius: 0rpx 0rpx 18px 18rpx;
	}

	.ml46 {
		margin-left: 46rpx;
	}

	.apply-btn {
		margin-top: 80rpx;

		button {
			background: #0B844A;
			color: #FFFFFF;
		}
	}

	.zfb-wx {
		padding-bottom: 24rpx;

		.payIcon {
			color: #00aaef;
			font-size: 32rpx;
			margin-right: 18rpx;
		}

		.wxIcon {
			color: rgb(37, 171, 56);
			font-size: 32rpx;
			margin-right: 18rpx;
		}
	}

	.zhInput input {
		width: 62%;
		height: 70rpx;
		line-height: 70rpx;
		padding: 0rpx 20rpx;
		border: 1rpx solid #D9D9D9;
		border-radius: 6rpx;
	}

	.popup {
		width: 100%;
		.bg-top {
			background-color: #F5F5F5;
			padding: 20rpx 30rpx;
			border-radius: 18rpx 18rpx 0px 0px;
		}
		.bankCardList {
			background-color: #FFFFFF;
			padding: 0rpx 30rpx;
			padding-bottom: 185rpx;
			.item {
				height: 84rpx;
				line-height: 84rpx;
				image {
					width: 48rpx;
					height: 42rpx;
					margin-top: 20rpx;
					vertical-align: bottom;
				}
				.rh-br {
					width: 100%;
					border-bottom: 1rpx solid #E6E6E6;
				}
				.pull-right {
					float: right !important;
				}
			}
		}
	}

	.ml56 {
		margin-left: 56rpx;
	}

	.ml200 {
		margin-left: 200rpx;
	}
</style>