web-retail-h5/pages/mine/bindBank/bindBank.vue

<template>
	<view class="content">
		<view class="theform">
			<u--form labelPosition="left" :model="dataForm" :rules="rules" ref="uForm">
				<u-form-item label-width="200rpx" :label="'银行卡号'" borderBottom prop="cardNumber" ref="item1">
					<u--input v-model="dataForm.cardNumber" disabledColor="#F5F5F5;" border="none"></u--input>
				</u-form-item>
				<u-form-item borderBottom label-width="200rpx" :label="'银行名称'" prop="bankName"
					@click="showAmount = true; " ref="item1">
					<u--input v-model="dataForm.bankName" disabledColor="#ffffff" :placeholder="'请选择'"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>


				<u-form-item label-width="200rpx" :label="'开户支行'" prop="subBankName" borderBottom ref="item1">
					<u--input v-model="dataForm.subBankName" disabledColor="#F5F5F5;" border="none"></u--input>
				</u-form-item>
				<u-form-item label-width="200rpx" :label="'真实姓名'" prop="accountName" borderBottom ref="item1">
					<u--input :placeholder="'请输入'" v-model="dataForm.accountName" border="none"></u--input>
				</u-form-item>
				<u-form-item label-width="200rpx" :label="'证件号码'" prop="idCard" borderBottom ref="item1">
					<u--input v-model="dataForm.idCard" :placeholder="'请输入'" disabledColor="#F5F5F5;"
						border="none"></u--input>
				</u-form-item>
				<u-form-item label-width="200rpx" :label="'联系方式'" prop="phone" borderBottom ref="item1">
					<u--input  v-model="dataForm.phone" :placeholder="'请输入'" maxlength="20" border="none"></u--input>
				</u-form-item>
				<u-form-item v-if="userInfo.pkCountry==1&&cancode" label-width="200rpx" :label="'验证码'"
					prop="verificationCode" borderBottom ref="item1">
					<u--input v-model="dataForm.verificationCode" :placeholder="'请输入'" border="none"></u--input>
					<u-button @tap='getCode' class="getcodes" type="primary" shape="circle" :text="tips"
						color="#2FBC42"></u-button>
				</u-form-item>

				<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
				<u-picker @cancel='showAmount=false' :show="showAmount" ref="uPicker" :columns="bankCardChioceList"
					@confirm="confirm" keyName='bankName'></u-picker>
			</u--form>

		</view>
		<view class="btnbox">
			<u-button class="subbtn" @click="submit">{{'确定'}}</u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import * as ban from "@/config/balance.js"
	export default {
		data() {
			return {
				showAmount: false,
				dataForm: {
					bankName: "",
					cardNumber: "",
					pkBank: "",
					subBankName: "",
					accountName: "",
					idCard: "",

				},
				bankCardChioceList: [],
				rules: {
					cardNumber: [{
						type: 'string',
						required: true,
						message: '请输入',
						trigger: ['blur', 'change']
					}],
					subBankName: [{
						type: 'string',
						required: true,
						message: '请输入',
						trigger: ['blur', 'change']
					}],
					accountName: [{
						type: 'string',
						required: true,
						message: '请输入',
						trigger: ['blur', 'change']
					}],
					idCard: [{
						type: 'string',
						required: true,
						message: '请输入',
						trigger: ['blur', 'change']
					}],
					phone: [{
						type: 'string',
						required: true,
						message: '请输入',
						trigger: ['blur', 'change']
					}],
					verificationCode: [{
						type: 'string',
						required: true,
						message: '请输入',
						trigger: ['blur', 'change']
					}],
					bankName: [{
						required: true,
						message: '请选择',
						trigger: ['change']
					}],
				},
				tips: '',
				// refCode: null,
				seconds: 60,
				ifpass: false,
				userInfo: {},
				cancode: true, //判断是否是白名单

			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('User')
			this.getList()
			this.checkIfWhite();

		},
		methods: {
			checkIfWhite() {
				ban.checkIfWhite().then((res) => {
					if (res.code == 200 && res.flag == "N") {
						this.cancode = true;
					} else if (res.code == 200 && res.flag == "Y") {
						this.cancode = false;
					}
				});
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.dataForm.phone && this.$u.test.mobile(this.dataForm.phone)) {
					if (this.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码'
						})
						ban.getVerification({
							phone: this.dataForm.phone
						}).then((res) => {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						})
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				} else {
					uni.$u.toast(this.dataForm.phone ? '手机号格式不正确' : '请先输入手机号')
					return
				}
			},
			end() {
				// uni.$u.toast('倒计时结束');
			},
			start() {
				// uni.$u.toast('倒计时开始');
			},
			getList() {
				ban.getBankCardChoiceList().then(res => {
					this.bankCardChioceList = [res.data]
				})

			},
			bindBank() {
				if (!this.ifpass &&this.cancode &&this.userInfo.pkCountry == 1) {
					uni.$u.toast('验证码错误')
					return
				}
				ban.bindWalletBankAdd(this.dataForm).then(res => {
					if (res.code == 200) {
						uni.$u.toast(res.msg)
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}
				})

			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					// 没有三方接口 临机写死
					this.ifpass = true;
					this.bindBank();

					return
					if (this.userInfo.pkCountry == 1) {
						if(this.cancode){
							ban.verifyBankCard(this.dataForm).then((res) => {
									if (res.code == 200) {
										this.ifpass = true;
										this.bindBank();
									} else {
										this.ifpass = false;
										uni.$u.toast(res.msg)
									}
								})
								.catch((err) => {
									this.ifpass = false;
								});
						}else{
							this.ifpass = true;
							this.bindBank();
						}
					} else {
						this.bindBank()
					}

				}).catch(errors => {
					uni.$u.toast('校验失败')
					return false
				})
			},
			confirm(e) {
				this.dataForm.bankName = e.value[0].bankName
				this.dataForm.pkBank = e.value[0].pkId
				this.showAmount = false
			},

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #F2F2F2;

		.theform {
			margin-top: 6rpx;
			background: #FFFFFF;
			padding: 20rpx 23rpx 0rpx 23rpx;

			.contentye {
				font-size: 28rpx;
				margin-left: 200rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
			}

		}

		.btnbox {
			margin-top: 38rpx;
			padding: 0 20rpx;

			.subbtn {
				background: #005BAC;
				border-radius: 46rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.getcodes {
			width: 197rpx;
			height: 76rpx;
			background: #2FBC42;
			border-radius: 38rpx;
			color: #fff;
		}


	}
</style>