qianniaoMp/pagesT/NewPartner/apply_cash.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="cashTypeIndex>-1">{{ cashType.length>0 ? cashType[cashTypeIndex].title:""}}</text>
				<text v-else class="w-input-place">请选择</text>
				<text class="ibonfont ibonjinru"></text>
			</view>
		</view>
		<view class="w-view clearfix" v-if="cashType.length>0">
			<view class="float_left">姓名</view>
			<view class="float_right">
				<input type="text" placeholder-class="w-input-place" placeholder="请输入真实姓名" class="w-input" v-model="subData.bank_name" />
			</view>
		</view>
		
		<view class="w-view clearfix" v-if="cashTypeIndex>-1 && cashType[cashTypeIndex].code == 'bank'">
			<view class="float_left">开户银行</view>
			<view class="float_right">
				<input placeholder-class="w-input-place" class="w-input" placeholder="请输入开户银行" type="text" v-model="subData.bank_ad" />
			</view>
		</view>
		<view class="w-view clearfix">
			<view class="float_left">
				{{cashTypeIndex>-1 && cashType[cashTypeIndex].code == 'bank' ? "银行卡号" : "提现账号"}}
			</view>
			<view class="float_right">
				<input placeholder-class="w-input-place" class="w-input" :placeholder="cashTypeIndex>-1 && cashType[cashTypeIndex].code == 'bank' ? '请输入银行卡号' : '请输入提现账号'" type="text" v-model="subData.bank_num" />
			</view>
		</view>
		<view class="w-view clearfix" v-if="cashTypeIndex>-1 && cashType[cashTypeIndex].code == 'bank'">
			<view class="float_left">确认卡号</view>
			<view class="float_right">
				<input placeholder-class="w-input-place" class="w-input" placeholder="请输入确认卡号" type="number" v-model="subData.bank_num_agin" />
			</view>
		</view>


		<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="subData.money" />
			</view>
		</view>
		<view class="clearfix w-tip">
			<view class="float_left">
				<text>可提现：¥{{ dataInfo.balance }}</text>
				<!-- <text>（手续费：10%）</text> -->
			</view>
			<view class="float_right primary-color" @click="allWitjdrawal">全部提现</view>
		</view>
		<view class="w-btn w-btn-on" @click="subForm">
			<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"  v-for="(item,index) in cashType" :key="index" @click="paymentChange(index)">
						<text class="ibonfont ibonweixinzhifu" :class="item.icon?item.icon:'ibonyinhangqia'"></text>
						<view class="pay-name clearfix">
							<text class="float_left">{{item.title}}</text>
							<text class="float_right ibonfont primary-color" :class="[cashTypeIndex === index ? 'ibonxuanze_xuanzhong' : 'ibonxuanze']"></text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-modal v-model="tip_show" content="抱歉,您未设置支付密码,无法提现余额" :show-cancel-button="true" confirm-text="立即设置" cancel-text="取消" @confirm="setPassword"></u-modal>
		<!-- 余额支付密码弹窗 -->
		<u-keyboard default="" ref="uKeyboard" mode="number" :mask="true" :mask-close-able="false" :dot-enabled="false"
			v-model="pwd_show" :safe-area-inset-bottom="true" :tooltip="false" @change="balancePopChange"
			@backspace="onBackspace">
			<view>
				<view class="u-text-center u-padding-20 balance-money">
					<text>密码验证</text>
					<view class="u-padding-10 close" data-flag="false" @tap="inputShowPop(false)">
						<u-icon name="close" color="#333333" size="28"></u-icon>
					</view>
				</view>
				<view class="u-flex u-row-center">
					<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="balance_pwd"
						:disabled-keyboard="true" @finish="inputFinish"></u-message-input>
				</view>
				<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">密码键盘</view>
			</view>
		</u-keyboard>
		
	</view>
</template>

<script>
// import { getOpenid } from '@/access/common.js';
export default {
	data() {
		return {
			min_money: 1, // 最少提现
			isLoding: false,
			payPop: false,
			
			tip_show: false, // 余额支付提示
			pwd_show: false, // 余额支付密码输入弹窗
			balance_pwd: '', // 余额支付密码
			
			
			
			
			cashType:[],
			cashTypeIndex:-1,
			dataInfo:{balance:0.00},
			subData:{
				money:"",
				bank_type:"",
				bank_name:"",
				bank_ad:"",
				bank_num:"",
				bank_num_agin:"",
			},
			payCheckStatus:false,
		};
	},
	computed: {
		userInfo() {
			return this.$store.state.userStatus;
		}
	},

	onShow() {
		this.getPartnerInfo();
		
	},
	methods: {
		subCheckPayPassword(){
			if (this.userInfo.payPassword) {
				//输入支付密码
				this.inputShowPop();
			} else {
				this.tip_show = true;
			}
		},
		// 密码弹窗显示
		inputShowPop(flag = true) {
			this.balance_pwd = '';
			this.pwd_show = flag;
		},
		// 余额密码输入完成
		inputFinish() {
			// 唤起支付
			// this.subForm();
		},
		// 去设置支付密码
		setPassword() {
			this.goPage('/pagesT/money/PayPassword');
		},
		//键盘退格键被点击
		onBackspace(e) {
			if (this.balance_pwd.length > 0) {
				this.balance_pwd = this.balance_pwd.substring(0, this.balance_pwd.length - 1);
			}
		},
		// 余额支付密码键盘按键被点击(不包含退格键被点击)
		balancePopChange(val) {
			if (this.balance_pwd.length < 6) {
				this.balance_pwd += val;
			}
			if (this.balance_pwd.length >= 6) {
				// 唤起密码验证
				this.checkPayPassword();
			}
		},
		
		// 支付密码校验
		checkPayPassword() {
			uni.showLoading();
			this.$u.api.checkPayPassword({id: this.userInfo.id,payPassword: this.balance_pwd}).then(res => {
				this.payCheckStatus = true;
				this.inputShowPop(false);
				this.subForm();
			}).catch(res => {
				this.balance_pwd = '';
			});
		},
		

		getPartnerCashType() {
			var that = this;
			this.$u.api.getPartnerCashType().then(res=>{
				if(res.data && res.data.length>0){
					that.cashType = res.data;
				}
			})
		},
		getPartnerInfo(){
			var that = this;
			this.$u.api.getCommissionPartnerData().then(res=>{
				if(res.data && res.data.id>0){
					that.dataInfo = res.data;
					that.getPartnerCashType();
				}
			});
		},

		
		// 申请提现
		subForm() {
			var postData = this.subData,that = this;
			if(!this.payCheckStatus){
				that.subCheckPayPassword();
				return;
			}
			
			
			if(this.isLoding==true){
				return false;
			}
			if(this.cashTypeIndex<0 || this.cashType.length<=0){
				this.$api.msg('请选择提现方式');
				return;
			}
			postData.bank_type = this.cashType[this.cashTypeIndex].title || "";
			if(!this.$_utils.isDefine(postData.bank_type)){
				this.$api.msg('请选择提现方式');
				return;
			}
			if(!this.$_utils.isDefine(postData.bank_name)){
				this.$api.msg('请输入您的真实姓名');
				return;
			}
			var code = this.cashType[this.cashTypeIndex].code;
			if(this.cashType[this.cashTypeIndex].code == "bank"){
				if(!this.$_utils.isDefine(postData.bank_ad)){
					this.$api.msg('请输入您的开户行');
					return;
				}
				if(!this.$_utils.isDefine(postData.bank_num)){
					this.$api.msg('请输入您的银行卡号');
					return;
				}
				if(!this.$_utils.isDefine(postData.bank_num_agin)){
					this.$api.msg('请再次输入您的银行卡号');
					return;
				}
				if(postData.bank_num!=postData.bank_num_agin){
					this.$api.msg('两次卡号输入不一致');
					return;
				}
			}else{
				if(!this.$_utils.isDefine(postData.bank_num)){
					this.$api.msg('请输入您的提现账号');
					return;
				}
				if(code=="wxpay" && !this.$_utils.isMobile(postData.bank_num)){
					this.$api.msg('请输入正确微信手机账号');
					return;
				}
				postData.bank_ad = this.cashType[this.cashTypeIndex].title;
			}
			if(!this.$_utils.isMoney(postData.money)){
				this.$api.msg('请输入正确的提现金额');
				return;
			}
			if (Number(postData.money) < this.min_money) {
				this.$api.msg('最低提现金额为' + this.min_money + '元');
				return;
			}
			if (Number(postData.money) > Number(this.dataInfo.balance)) {
				this.$api.msg('可提现金额不足');
				return;
			}
			
			this.isLoding = true;
			this.$u.api.partnerCashApply(postData).then(res => {
				that.isLoding = false;
				if(res.errorcode==0){
					that.$api.msg("提现成功");
					setTimeout(res => {
						that.goPage('/pages/user/user', 'switchTab');
					}, 1500);
				}else{
					that.$api.msg(res.data);
				}
			}).catch(res => {
				that.isLoding = false;
			});
		},
		// 全部提现按钮点击事件
		allWitjdrawal() {
			this.subData.money = this.dataInfo.balance;
		},
		// 自动提现
		paymentChange(index) {
			this.cashTypeIndex = index;
			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>