yicangzongtai_app_240321/pages/operationCenter/withdraw.vue

<template>
	<view class="main">
		<navbar :config="config" backColor="#666"></navbar>
		<view class="canWithdrawCls">
			<view>
				<view>可提现服务积分：</view>
				<view class="canWithdrawCls_val"><text>{{walletInfo.commission_able}}</text></view>
			</view>
			<view class="u-mt20 markBox">
				<view class="u-mr30">待入账 <view><text></text>{{walletInfo.wait_account}}</view>
				</view>
				<view>冻结中 <view><text></text>{{walletInfo.freezing}}</view>
				</view>
			</view>
		</view>

		<view class="withdrawCls">
			<view class="withdrawCls_lab">提现服务积分
				<!-- <text>（最低提现佣金1公益服务积分）</text> -->
				<text>（最低提现佣金{{walletInfo.min_extract}}）</text>
			</view>
			<view class="withdrawCls_val">
				<!-- <text>￥</text> -->
				<input @input="getMoney" maxlength="10" type="digit" v-model="dataForm.public_service_points"
					placeholder-style="color:#CCCCCC" placeholder="提现服务积分" />
			</view>
			<view class="bg-fff">
				<view class="u-flex-center-sb u-1A1A1A" @click="openBankCard">
					<view class="u-flex">
						<text class="u-font30">提现方式</text>
						<view class="ml46 u-font28" v-if="bankCardList.length>0&&dataForm.payment_term== 2">
							<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-if="bankCardList.length<=0&&dataForm.payment_term== 2">
							添加银行卡
						</view>
						<view class="ml46 u-font28 sBox" v-if="dataForm.payment_term==1">
							<image :src="imgUrl+'/alipay.png'" class="img30"></image>
							支付宝
						</view>
						<view class="ml46 u-font28 sBox" v-if="dataForm.payment_term==0">
							<image :src="imgUrl+'/weChat.png'" class="img30"></image>
							微信
						</view>
						<view class="ml46 u-font28" v-if="dataForm.payment_term==4">
							提现到公益积分
						</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>
		<view class="btnBox">
			<view @click="requestWithdrawal">提交申请</view>
		</view>

		<uni-popup class="submit-popup" ref="submitPopup" type="center" :mask-click="false">
			<view class="content-box">
				<view class="title">提交完成</view>
				<view class="content">
					<image class="success-icon" src="/static/common/success-icon.png"></image>
					<view class="tip">
					</view>
					<button class="btn" @click="closePopup()">确 定</button>
				</view>
			</view>
		</uni-popup>
		<!-- <u-select v-model="show"  :list="list" @confirm="getSel"></u-select> -->
		<!--弹窗选择银行卡-->
		<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 class="item u-flex" @click="pitchOn(-3,4)">
						<view class="u-ml25 rh-br">
							<text>提现到公益积分</text>
							<text class="iconfont pull-right" v-if="pitchOnIndex==-3">&#xe63e;</text>
						</view>
					</view>
				</view>
			</view>
		</uniPopup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				config: {
					back: true,
					title: '提现',
					color: '#1A1A1A',
					backgroundColor: [1, "#ffffff"],
					statusBarFontColor: 'black',
				},
				value: "",
				show: false,
				dataForm: {
					public_service_points: '', //提现金额
					payment_term: 2, // * 收款方式：      * 0微信，      * 1支付宝，      * 2银行线下      * 3现金支付
					payee: '', //收款人
					withdraw_account: '', //提现账户
					withdraw_mobile: '', //提现手机
					bank_name: '', //银行名称
				},
				bankIcon: '',
				pitchOnIndex: 0,
				addCard: true,
				walletInfo: {
					min_extract: 0,
					wait_account: 0,
					freezing: 0
				}, //账户信息
				imgUrl: this.$mConfig.staticUrl,
				bankCardList: [],
			}
		},
		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
							this.dataForm.user_bank_id = this.bankCardList[0].id
						}
					}
				})
			},
			//打开弹窗银行卡列表
			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
					this.dataForm.user_bank_id = this.bankCardList[index].id
				} else {
					this.dataForm.user_bank_id = null
				}
				this.$refs.uniPopup.close();
			},
			//跳转提现明细
			goWdDetail() {
				uni.navigateTo({
					url: "wdDetail"
				})
			},
			//跳到添加银行卡
			goAddBankCard() {
				uni.navigateTo({
					url: "/pages/user/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.public_service_points = e.target.value ?e.target.value*1:''
				})
			},
			//获取提现人姓名
			// 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.public_service_points) {
					this.$mUtil.toast('请输入提现服务积分')
					return false
				}
				if (this.dataForm.public_service_points < 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" scoped>
	.canWithdrawCls {
		font-size: 28rpx;
		color: #1A1A1A;
		padding: 60rpx;
		border-bottom: 8rpx solid #F5F5F5;

		.markBox {
			text {
				display: inline-block;
				width: 10rpx;
			}
		}

		>view {
			display: flex;

			.canWithdrawCls_val {
				font-size: 24rpx;
				align-items: baseline;

				text {
					font-size: 36rpx;
					color: #FF0000;
				}
			}

			>view {
				display: flex;

				text {
					font-size: 24rpx;
					color: #808080;
				}

				>view {
					color: #808080;
				}
			}
		}
	}

	.withdrawCls {
		padding: 40rpx 60rpx;

		.withdrawCls_lab {
			font-size: 28rpx;
			color: #1A1A1A;

			text {
				color: #808080;
			}
		}

		.withdrawCls_val {
			display: flex;
			align-items: center;
			font-size: 60rpx;
			padding: 30rpx 0;
			border-bottom: 3rpx dashed #808080;

			text {
				color: #181818;
			}

			input {
				margin-left: 10rpx;
				font-size: 42rpx;
			}
		}

		.withdrawTypeCls {
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;

			.withdrawTypeCls_lab {
				font-size: 30rpx;
				color: #1A1A1A;
			}

			.withdrawTypeCls_val {
				font-size: 28rpx;
				color: #999999;

				.selLab {
					color: #1A1A1A;
				}
			}

			.withdrawTypeCls_dir {
				color: #808080;
			}
		}
	}

	.btnBox {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #FFFFFF;
		padding: 30rpx 30rpx 60rpx 30rpx;

		>view {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			color: #FFFFFF;
			padding: 20rpx 0;
			background: #0B844A;
			border-radius: 40rpx;
		}
	}

	.content-box {
		width: 440rpx;
		padding-bottom: 50rpx;
	}

	.bg-fff {
		background-color: #FFFFFF;
		padding: 26rpx 0rpx 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;
	}

	.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;
			}
		}
	}

	.u-flex-sb {
		display: flex;
		justify-content: space-between;
	}

	.sBox {
		display: flex;
		align-items: center;

		>image {
			margin-right: 10rpx;
		}
	}
</style>