jhlapp/pagesS/yg/gztq.vue

<template>
	<!-- 申请提现 -->
	<view class="Withdrawal">
		<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.reward }}</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: {},
				id: '',
			};
		},
		onLoad(opt) {
			this.id = opt.id
			
		},
		onShow() {
			this.getCustomerInfo();
		},
		methods: {
			// 获取用户信息
			getCustomerInfo() {
				this.$u.api.getYgdetail({
					request_id: this.id
				}).then(({
					data
				}) => {
					this.userInfo = 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.reward)) {
					this.$u.toast('可提现金额不足');
					return;
				}
				let data = {
					...this.cash_out_form,
					customerId: this.userInfo.id
				}
				this.isLoding = true;
				this.$u.api
					.addReflectDetail({
						...this.cash_out_form,
						staffId: this.userInfo.id,
					})
					.then(res => {
						this.isLoding = false;
						this.$u.toast('提现申请成功');
						setTimeout(res => {
							// this.goPage('/pages/user/user', 'switchTab');
							uni.navigateBack()
						}, 2000);
					})
					.catch(res => {
						this.isLoding = false;
					});
			},
			// 全部提现按钮点击事件
			allWitjdrawal() {
				this.cash_out_form.money = this.userInfo.reward;
			},
			// 自动提现
			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>