hire-wx-houxuanren/pagesD/bank-add.vue

<template>
	<view class="bank-add u-flex-col u-col-center">
		<view class="titlee" style="text-align: left;width: 100%;">
			只能绑定与实名账号一致的用户的银行卡
		</view>
		<view class="back">
			<view class="" style="margin-bottom: 40rpx;">
				<u-input placeholder="请输入银行名称" border="none" style="margin-bottom: 40rpx;" v-model="bank_type_name">
					<u--text text="银行名称" color="#000" slot="prefix" margin="0 3px 0 0" style="width: 188rpx;"></u--text>
				</u-input>
			</view>
			<view class="" style="margin-bottom: 40rpx;">
				<u-input placeholder="请输入银行卡卡号" border="none" style="margin-bottom: 40rpx;" v-model="bank_no">
					<u--text text="银行卡号" color="#000" slot="prefix" margin="0 3px 0 0" style="width: 188rpx;"></u--text>
				</u-input>
			</view>
			<view class="" style="margin-bottom: 40rpx;">
				<u-input placeholder="请输入开户行" border="none" v-model="bank_name">
					<u--text text="开户行" color="#000" slot="prefix" margin="0 3px 0 0" style="width: 188rpx;"></u--text>
				</u-input>
			</view>
			<view class="" style="margin-bottom: 40rpx;">
				<u-input placeholder="请输入持卡人姓名" border="none" v-model="bank_user">
					<u--text text="持卡人姓名" color="#000" slot="prefix" margin="0 3px 0 0"
						style="width: 188rpx;"></u--text>
				</u-input>
			</view>
			<view class="" style="margin-bottom: 40rpx;">
				<u-input placeholder="请输入银行预留号码" border="none" v-model="bank_mobile">
					<u--text text="手机号" color="#000" slot="prefix" margin="0 3px 0 0" style="width: 188rpx;"></u--text>
				</u-input>
			</view>
			<view class="">
				<u-input placeholder="请输入验证码" border="none" v-model="code">
					<u--text text="验证码" color="#000" slot="prefix" margin="0 3px 0 0" style="width: 188rpx;"></u--text>
					<template slot="suffix">
						<u-code ref="uCode" @change="codeChange" seconds="20" changeText="X秒重新获取"></u-code>
						<u-button @tap="getCode" :text="tips" type="success" size="large" :plain="true"
							customStyle="border:0rpx;color:#0C66C2">{{tips}}</u-button>
					</template>
					<!-- 			<text class="send" @click="getCode" v-if="!timeEnd && !verificationTime ">获取验证码</text>
					<text class="send" v-else-if="verificationTime">{{verificationTime}}s</text>
					<text class="send" @click="getCode" v-else-if="timeEnd">重新获取验证码</text> -->
				</u-input>
			</view>
		</view>
		<view class="add-btn" @click="save">
			保存
		</view>
	</view>
</template>

<script>
	import {
		setBank,
		getCode,
		check
	} from "@/units/inquire.js"
	export default {
		data() {
			return {
				bank_name: "",
				bank_no: "",
				bank_user: "",
				bank_mobile: "",
				code: "",
				tips: "",
				bank_type_name: '' //银行名称
			}
		},
		onLoad() {

		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (!this.bank_type_name) {
					this.$u.toast('请填写银行名称')
					return
				}
				if (!this.bank_no) {
					this.$u.toast('请填写银行卡号')
					return
				}
				if (!this.bank_name) {
					this.$u.toast('请填写银行名称')
					return
				}
				if (!this.bank_user) {
					this.$u.toast('请填写持卡人姓名')
					return
				}
				if (!this.bank_mobile) {
					this.$u.toast('请填写银行预留号码')
					return
				}
				getCode({
					mobile: this.bank_mobile,
					event: 'bindBankCard'
				}).then(res => {
					if (res.code == 1) {
						uni.showLoading({
							title: '正在获取验证码'
						})
						setTimeout(() => {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}, 2000);
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				})
			},
			save() {
				if (!this.code) {
					this.$u.toast('请输入验证码')
					return
				}
				uni.showLoading({
					mask: true,
					title: "请稍后"
				})
				// 检验验证码
				// check({
				// 	mobile: this.bank_mobile,
				// 	event: "bindBankCard",
				// 	captcha: this.code
				// }).then(res => {
				// 	if (res.code == 1) {
				setBank({
					bank_type_name: this.bank_type_name,
					bank_name: this.bank_name,
					bank_no: this.bank_no,
					bank_user: this.bank_user,
					bank_mobile: this.bank_mobile,
					code: this.code
				}).then(res => {
					this.$u.toast(res.msg)
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateBack()
						}, 800)
					}
				})
				// } 
				// 	else {
				// 		this.$u.toast(res.msg)
				// 	}
				// })

			}
		},
	}
</script>

<style lang="scss">
	.titlee {
		font-size: 26rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #444444;
	}

	.bank-add {
		background: #F3F3F3;
		height: 100vh;
		padding: 20rpx 32rpx 0;
		box-sizing: border-box;

		.back {
			width: 686rpx;
			// height: 540rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 36rpx 24rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
		}

		.add-btn {
			height: 92rpx;
			background: #0C66C2;
			border-radius: 20rpx;
			margin-top: 60rpx;
			width: 100%;
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 92rpx;
			text-align: center;
		}
	}
</style>
<style scoped>
	::v-deep .u-text__value {
		width: 188rpx;
	}

	::v-deep .u-button--square {
		border: 2rpx solid rgba(0, 0, 0, 0) !important;
	}

	::v-deep .u-button--plain {
		background: rgba(0, 0, 0, 0) !important;
	}
</style>