junzitang/pagesT/Distribution/Withdrawal.vue

<template>
	<!-- 申请提现 -->
	<view class="Withdrawal">
		<u-alert-tips v-if="!distributionSet.payType || !distributionSet.payType.length" type="warning" title="抱歉，管理员未配置提现方式" show-icon></u-alert-tips>
		<view class="w-view w-channel clearfix" @click="openPay">
			<view class="float_left">转出方式</view>
			<view class="float_right">
				<text v-if="cash_out_num">{{ cash_out_num }}</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_num && cash_out_num !== '微信钱包'">
			<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.accountContent.name" />
			</view>
		</view>
		<block v-if="cash_out_num === '支付宝'">
			<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.accountContent.account" />
				</view>
			</view>
		</block>
		<block v-if="cash_out_num === '银行卡'">
			<picker @change="bindBankChange" :value="bank_index" range-key="cardNum" :range="bank_list">
				<view class="w-view clearfix">
					<view class="float_left">选择银行</view>
					<view class="float_right clearfix" style="width: 480rpx;">
						<text class="float_left" v-if="cash_out_form.accountContent.bankName">{{ cash_out_form.accountContent.bankName }}</text>
						<text v-else class="w-input-place float_left">请选择</text>
						<text class="ibonfont ibonjinru float_right" style="margin-top: 4rpx;"></text>
					</view>
				</view>
			</picker>
			<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.accountContent.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_set.withdrawal || '提现' }}金额</text>
				<text class="w-tit-r">最少{{ text_set.withdrawal || '提现' }}金额{{ distributionSet.quota }}元</text>
			</view>
			<view class="w-money-input-view">
				<text class="rmb-icon">¥</text>
				<input class="w-money-input" type="text" v-model="cash_out_form.money" />
			</view>
		</view>
		<view class="clearfix w-tip">
			<text class="float_left">{{ text_set.commission_w || '可提现佣金' }}：¥{{ cash_out_form.nowMoney || 0 }}</text>
			<text class="float_right primary-color" @click="allWitjdrawal">全部{{ text_set.withdrawal || '提现' }}</text>
		</view>
		<view class="w-btn" @click="withdrawalsAdd" :class="[cash_out_form.money >= Number(distributionSet.quota) ? 'w-btn-on' : '']">{{ text_set.withdrawal || '提现' }}</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_set.withdrawal || '提现' }}方式</text>
					<text class="float_right ibonfont ibonguanbi" @click="closePayPop"></text>
				</view>
				<view class="pay-ul">
					<view class="pay-li" @click="paymentChange(4)" v-if="distributionSet.payType.indexOf(4) > -1">
						<text class="ibonfont ibonweixinzhifu"></text>
						<view class="pay-name clearfix">
							<text class="float_left">微信钱包</text>
							<text class="float_right ibonfont primary-color" :class="[payType === 4 ? 'ibonxuanze1' : 'ibonweixuanze']"></text>
						</view>
					</view>
					<block v-if="distributionSet.payType.indexOf(5) > -1">
						<!-- <view class="pay-tip">手动打款</view> -->
						<!-- 手动打款 -->
						<view class="pay-li" @click="withdrawTypeChange(4)" v-if="distributionSet.withdrawType.indexOf(4) > -1">
							<text class="ibonfont ibonumidd17"></text>
							<view class="pay-name clearfix">
								<text class="float_left">支付宝</text>
								<text
									class="float_right ibonfont primary-color"
									:class="[payType === 5 && withdrawType === 4 ? 'ibonxuanze1' : 'ibonweixuanze']"
								></text>
							</view>
						</view>
						<view class="pay-li" @click="withdrawTypeChange(5)" v-if="distributionSet.withdrawType.indexOf(5) > -1">
							<text class="ibonfont ibonyinhangqia"></text>
							<view class="pay-name clearfix">
								<text class="float_left">银行卡</text>
								<text
									class="float_right ibonfont primary-color"
									:class="[payType === 5 && withdrawType === 5 ? 'ibonxuanze1' : 'ibonweixuanze']"
								></text>
							</view>
						</view>
					</block>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
import { getOpenid } from '@/access/common.js';
export default {
	data() {
		return {
			isLoding: false,
			payPop: false,
			cash_out_form: {
				businessmanId: '', // 提现者分销商id
				type: 1, //1 微信钱包；2，支付宝；3，银行卡
				accountContent: {
					name: '', // 提现者姓名
					account: '', // 提现账号
					bankName: '' //银行名称
				},
				money: 0, // 输入提现金额
				nowMoney: 0 // 当前实际金额
			},
			bank_list: [], // 银行卡列表
			bank_index: 0, //选择银行卡下标
			text_set: {}, //文字设置
			cash_out_num: '', // 转出方式
			agin_card_num: '', //确认卡号
			payType: 4, // 自动提现
			distributionSet: {
				quota: 0,
				// 分销基础设置
				payType: [],
				withdrawType: []
			},
			cardNum: '', //银行卡
			withdrawType: 4 //手动提现  4:支付宝 5:银行卡',
		};
	},
	onLoad(options) {
		this.text_set = this.$store.state.distributionTextSet;
		if (this.text_set.commission_r) {
			uni.setNavigationBarTitle({
				title: '申请' + (this.text_set.withdrawal || '提现')
			});
		}
		// 判断申请方式
		this.distributionSet = this.$store.state.distributionSet;
		if (this.distributionSet.payType && this.distributionSet.payType.length) {
			this.payType = this.distributionSet.payType[0];
			if (this.payType === 5) {
				if (this.distributionSet.withdrawType && this.distributionSet.withdrawType.length) {
					this.withdrawType = this.distributionSet.withdrawType[0];
					this.cash_out_num = this.withdrawType === 4 ? '支付宝' : this.withdrawType === 5 ? '银行卡' : '';
				}
			} else {
				this.cash_out_num = '微信钱包';
			}
		}
		// 可提现金额
		if (options.balance) {
			this.cash_out_form.nowMoney = options.balance || 0;
		}
		// 银行卡列表
		if (this.distributionSet.withdrawInfo) {
			this.bank_list = this.distributionSet.withdrawInfo;
		}

		// 获取提现者分销商id
		this.cash_out_form.businessmanId = options.id;
		// 获取OPenID
		this.cash_out_form.accountContent.account = getOpenid();
	},
	methods: {
		// 申请提现
		 withdrawalsAdd() {
			if (this.cash_out_form.type === 2) {
				if (!this.cash_out_form.accountContent.name) {
					this.$api.msg('请输入您的真实姓名');
					return;
				}
				if (!this.cash_out_form.accountContent.account) {
					this.$api.msg('请输入您的支付宝账号');
					return;
				}
			}
			if (this.cash_out_form.type === 3) {
				if (!this.cash_out_form.accountContent.name) {
					this.$api.msg('请输入您的真实姓名');
					return;
				}
				if (!this.cash_out_form.accountContent.bankName) {
					this.$api.msg('请选择银行名称');
					return;
				}
				if (!this.cash_out_form.accountContent.account) {
					this.$api.msg('请输入您的银行账号');
					return;
				}
				if (!this.agin_card_num) {
					this.$api.msg('请再次输入您的银行账号');
					return;
				}
				if (this.agin_card_num !== this.cash_out_form.accountContent.account) {
					this.$api.msg('确认卡号与银行卡号不一致');
					return;
				}
			}
			if (!this.cash_out_form.money) {
				this.$api.msg('请输入要提现金额');
				return;
			}
			if (this.cash_out_form.money < Number(this.distributionSet.quota)) {
				this.$api.msg('最低提现金额为' + this.distributionSet.quota + '元');
				return;
			}
			if (this.cash_out_form.money > this.cash_out_form.nowMoney) {
				this.$api.msg('可提现金额不足');
				return;
			}
			this.$u.api.WithdrawalsAdd(this.cash_out_form).then(res=>{
				this.$api.msg('提现申请成功');
				this.goPage('/pagesT/Distribution/Application?id=' + res.data, 'redirectTo');
			});
		},
		// 全部提现按钮点击事件
		allWitjdrawal() {
			this.cash_out_form.money = this.cash_out_form.nowMoney;
		},
		// 选择银行change事件
		bindBankChange(e) {
			const index = e.target.value;
			this.bank_index = index;
			this.cash_out_form.accountContent.bankName = this.bank_list[index].cardNum;
		},
		// 自动提现
		paymentChange(val) {
			this.payType = val;
			switch (val) {
				case 4:
					this.cash_out_num = '微信钱包';
					this.cash_out_form.type = 1;
					break;
				case 5:
					this.cash_out_num = '手动提现';
					break;
			}
			this.closePayPop();
		},
		// 手动提现
		withdrawTypeChange(val) {
			this.payType = 5;
			this.withdrawType = val;
			switch (val) {
				case 4:
					this.cash_out_num = '支付宝';
					this.cash_out_form.type = 2;
					break;
				case 5:
					this.cash_out_num = '银行卡';
					this.cash_out_form.type = 3;
					break;
			}
			this.closePayPop();
		},

		closePayPop() {
			this.payPop=false
			this.cash_out_form.accountContent.account = '';
			this.cash_out_form.accountContent.bankName = '';
		},
		openPay() {
			if (!this.distributionSet.payType || !this.distributionSet.payType.length) {
				this.$api.msg('抱歉，管理员未配置提现方式');
				return;
			}
			this.payPop=true
		}
	}
};
</script>

<style lang="scss">
body {
	background: $page-color-base;
}
.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-icon {
				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;
		}
	}
	.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;
				.ibonweixuanze,
				.ibonxuanze1 {
					margin-right: 0;
					padding-left: 0;
					font-size: 38upx;
				}
			}
		}
		.pay-li:last-child {
			.pay-name {
				border-bottom: 0 none;
			}
		}
	}
}
</style>