QianNiaoUser/pagesT/money/addWithdrawal.vue

<template>
	<!-- 申请提现 -->
	<view class="Withdrawal" :class="['qn-page-' + theme]">
		<view class="w-view w-channel clearfix" @click="openPay">
			<view class="float_left">转出方式</view>
			<view class="float_right">
				<text v-if="cash_out_form.reflectType">{{ cash_out_form.reflectType }}</text>
				<text v-else class="w-input-place">请选择</text>
				<text class="ibonfont ibonjinru"></text>
			</view>
		</view>
		<view class="w-view clearfix" v-if="cash_out_form.reflectType">
			<view class="float_left">姓名</view>
			<view class="float_right">
				<input type="text" placeholder-class="w-input-place" placeholder="请输入真实姓名" class="w-input" v-model="cash_out_form.reflectInfo.name" />
			</view>
		</view>
		<block v-if="cash_out_form.reflectType === '微信钱包'">
			<view class="w-view clearfix">
				<view class="float_left">微信账号</view>
				<view class="float_right">
					<input placeholder-class="w-input-place" class="w-input" placeholder="请输入微信账号" type="text" v-model="cash_out_form.reflectInfo.account" />
				</view>
			</view>
		</block>
		<block v-if="cash_out_form.reflectType === '支付宝'">
			<view class="w-view clearfix">
				<view class="float_left">支付宝账号</view>
				<view class="float_right">
					<input placeholder-class="w-input-place" class="w-input" placeholder="请输入支付宝账号" type="text" v-model="cash_out_form.reflectInfo.account" />
				</view>
			</view>
		</block>
		<block v-if="cash_out_form.reflectType === '银行卡'">
			<view class="w-view clearfix">
				<view class="float_left">开户银行</view>
				<view class="float_right">
					<input placeholder-class="w-input-place" placeholder="请输入开户银行" class="w-input" type="text" v-model="cash_out_form.reflectInfo.bankName" />
				</view>
			</view>
			<view class="w-view clearfix">
				<view class="float_left">银行卡号</view>
				<view class="float_right">
					<input placeholder-class="w-input-place" placeholder="请输入银行卡号" class="w-input" type="number" v-model="cash_out_form.reflectInfo.account" />
				</view>
			</view>
			<view class="w-view clearfix">
				<view class="float_left">确认卡号</view>
				<view class="float_right"><input placeholder-class="w-input-place" placeholder="请再次输入银行卡号" class="w-input" type="text" v-model="agin_card_num" /></view>
			</view>
		</block>
		<view class="w-view w-money">
			<view class="w-tit">
				<text>提现金额</text>
				<text class="w-tit-r">最少提现金额{{ min_money }}元</text>
			</view>
			<view class="w-money-input-view">
				<text class="rmb-ic">¥</text>
				<input class="w-money-input" type="number" v-model="cash_out_form.money" />
			</view>
		</view>
		<view class="clearfix w-tip">
			<view class="float_left">
				<text>可提现：¥{{ userInfo.memberBalance }}</text>
				<!-- <text>（手续费：10%）</text> -->
			</view>
			<view class="float_right primary-color" @click="allWitjdrawal">全部提现</view>
		</view>
		<view class="w-btn w-btn-on" @click="withdrawalsAdd">
			<u-loading :show="isLoding"></u-loading>
			<text style="margin-left: 10rpx;">提现</text>
		</view>
		<u-popup mode="bottom" v-model="payPop" :border-radius="12">
			<view class="pay-pop-view">
				<view class="pay-sel-title clearfix">
					<text class="float_left">提现方式</text>
					<text class="float_right ibonfont ibonguanbi1" @click="closePayPop"></text>
				</view>
				<view class="pay-ul">
					<view class="pay-li" @click="paymentChange('微信钱包')">
						<text class="ibonfont ibonweixinzhifu"></text>
						<view class="pay-name clearfix">
							<text class="float_left">微信钱包</text>
							<text class="float_right ibonfont primary-color" :class="[cash_out_form.reflectType === '微信钱包' ? 'ibonxuanze_xuanzhong' : 'ibonxuanze']"></text>
						</view>
					</view>
					<view class="pay-li" @click="paymentChange('支付宝')">
						<text class="ibonfont ibonumidd17"></text>
						<view class="pay-name clearfix">
							<text class="float_left">支付宝</text>
							<text class="float_right ibonfont primary-color" :class="[cash_out_form.reflectType === '支付宝' ? 'ibonxuanze_xuanzhong' : 'ibonxuanze']"></text>
						</view>
					</view>
					<view class="pay-li" @click="paymentChange('银行卡')">
						<text class="ibonfont ibonyinhangqia"></text>
						<view class="pay-name clearfix">
							<text class="float_left">银行卡</text>
							<text class="float_right ibonfont primary-color" :class="[cash_out_form.reflectType === '银行卡' ? 'ibonxuanze_xuanzhong' : 'ibonxuanze']"></text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
// import { getOpenid } from '@/access/common.js';
export default {
	data() {
		return {
			min_money: 1, // 最少提现
			isLoding: false,
			payPop: false,
			cash_out_form: {
				customerId: '',
				reflectType: '', //提现方式
				money: 0, // 输入提现金额
				reflectInfo: {
					name: '', // 提现者姓名
					account: '', // 提现账号
					bankName: '' //银行名称
				},
				remark: ''
			},
			agin_card_num: '', //确认卡号
			userInfo: {}
		};
	},

	onShow() {
		this.getCustomerInfo();
	},
	methods: {
		// 获取用户信息
		getCustomerInfo() {
			this.$u.api.getCustomerInfo().then(({ data }) => {
				this.userInfo = data;
				this.$store.commit('commit_userStatus', data);
			});
		},
		// 申请提现
		withdrawalsAdd() {
			if (this.cash_out_form.reflectType === '支付宝') {
				if (!this.$u.trim(this.cash_out_form.reflectInfo.name)) {
					this.$u.toast('请输入您的真实姓名');
					return;
				}
				if (!this.$u.trim(this.cash_out_form.reflectInfo.account)) {
					this.$u.toast('请输入您的支付宝账号');
					return;
				}
			} else if (this.cash_out_form.reflectType === '银行卡') {
				if (!this.$u.trim(this.cash_out_form.reflectInfo.name)) {
					this.$u.toast('请输入您的真实姓名');
					return;
				}
				if (!this.$u.trim(this.cash_out_form.reflectInfo.bankName)) {
					this.$u.toast('请选择银行名称');
					return;
				}
				if (!this.$u.trim(this.cash_out_form.reflectInfo.account)) {
					this.$u.toast('请输入您的银行账号');
					return;
				}
				if (!this.$u.trim(this.agin_card_num)) {
					this.$u.toast('请再次输入您的银行账号');
					return;
				}
				if (this.agin_card_num !== this.cash_out_form.reflectInfo.account) {
					this.$u.toast('确认卡号与银行卡号不一致');
					return;
				}
			} else {
				if (!this.$u.trim(this.cash_out_form.reflectInfo.name)) {
					this.$u.toast('请输入您的真实姓名');
					return;
				}
				if (!this.$u.trim(this.cash_out_form.reflectInfo.account)) {
					this.$u.toast('请输入您的微信手机号');
					return;
				}
				if (!this.$u.trim(this.cash_out_form.reflectInfo.account)) {
					this.$u.toast('请输入您的微信账号');
					return;
				}
			}
			if (!this.cash_out_form.money) {
				this.$u.toast('请输入要提现金额');
				return;
			}
			if (Number(this.cash_out_form.money) < this.min_money) {
				this.$u.toast('最低提现金额为' + this.min_money + '元');
				return;
			}
			if (Number(this.cash_out_form.money) > Number(this.userInfo.memberBalance)) {
				this.$u.toast('可提现金额不足');
				return;
			}
			this.isLoding = true;
			this.$u.api
				.addReflectDetail({
					...this.cash_out_form,
					customerId: this.userInfo.id
				})
				.then(res => {
					this.isLoding = false;
					this.$u.toast('提现申请成功');
					setTimeout(res => {
						this.goPage('/pages/user/user', 'switchTab');
					}, 2000);
				})
				.catch(res => {
					this.isLoding = false;
				});
		},
		// 全部提现按钮点击事件
		allWitjdrawal() {
			this.cash_out_form.money = this.cash_out_form.nowMoney;
		},
		// 自动提现
		paymentChange(val) {
			this.cash_out_form.reflectType = val;
			this.closePayPop();
		},
		closePayPop() {
			this.payPop = false;
			this.cash_out_form.reflectInfo.account = '';
			this.cash_out_form.reflectInfo.bankName = '';
		},
		openPay() {
			this.payPop = true;
		}
	}
};
</script>

<style lang="scss">
.Withdrawal {
	width: 702upx;
	margin: 20upx auto;
	padding: 0 24upx 50upx;
	background-color: #ffffff;
	font-size: 28upx;
	.w-view {
		border-bottom: 1px solid #f5f5f5;
		padding: 24upx 0;
		.ibonjinru {
			font-size: 28upx;
			color: #666;
			height: 32upx;
			margin-left: 10upx;
		}
		.w-input {
			width: 480rpx;
		}
		.w-input-place {
			color: #b0b3bf;
			font-size: 26upx;
		}
		.w-tit {
			.w-tit-r {
				margin-left: 10upx;
				font-size: 24upx;
				color: #b0b3bf;
			}
		}
	}
	.w-money {
		.w-money-input-view {
			padding-top: 40upx;
			.rmb-ic {
				font-size: 60upx;
				font-weight: bold;
				display: inline-block;
				vertical-align: middle;
				height: 70upx;
			}
			.w-money-input {
				display: inline-block;
				width: 580upx;
				height: 70upx;
				font-size: 60upx;
				padding-left: 20upx;
				font-weight: bold;
				vertical-align: middle;
				padding-top: 6rpx;
			}
		}
	}
	.w-tip {
		font-size: 24upx;
		padding: 20upx 0 50upx;
	}
	.w-btn {
		margin: 0 auto;
		width: 660upx;
		line-height: 70upx;
		height: 70upx;
		color: #666;
		text-align: center;
		font-size: 28upx;
		border-radius: 70upx;
		background-color: #eee;
	}
	.w-btn-on {
		color: #fff;
		background-color: #fe582e;
	}
}
.pay-pop-view {
	background-color: #ffffff;
	border-top-left-radius: 12upx;
	border-top-right-radius: 12upx;
	padding-bottom: 40upx;
	font-size: 28upx;
	.pay-sel-title {
		padding: 0 30upx;
		line-height: 88upx;
		font-weight: bold;
		font-size: 32upx;
		.ibonfont {
			color: #999;
			font-weight: 400;
			width: 50rpx;
			text-align: center;
			font-size: 24rpx;
		}
	}
	.pay-btn {
		width: 690upx;
		height: 80upx;
		line-height: 80upx;
		color: #fff;
		font-size: 32upx;
		text-align: center;
		margin: 20upx auto 0;
		border-radius: 80upx;
	}
	.pay-ul {
		.pay-tip {
			font-size: 24upx;
			color: #999999;
			line-height: 32upx;
			padding: 20upx 30upx 0;
		}
		.pay-li {
			line-height: 100upx;

			.ibonfont {
				padding-left: 30upx;
				font-size: 46upx;
				vertical-align: middle;
				margin-right: 24upx;
			}
			.ibonweixinzhifu {
				color: #04be02;
			}
			.ibonumidd17 {
				color: #108ee9;
			}
			.ibonyinhangqia {
				color: #f2b844;
			}
			.pay-name {
				width: 650upx;
				display: inline-block;
				padding-right: 30upx;
				vertical-align: middle;
				border-bottom: 1px solid #f5f5f5;
				.ibonxuanze,
				.ibonxuanze_xuanzhong {
					margin-right: 0;
					padding-left: 0;
					font-size: 38upx;
				}
			}
		}
		.pay-li:last-child {
			.pay-name {
				border-bottom: 0 none;
			}
		}
	}
}
</style>