xiongmao/pages/my/bind-bank-card/bind-bank-card.vue

<!-- 绑定银行卡 -->
<template>
	<view class="wrap">
		<view class="module">
			<view class="row">
				<view class="label">
					真实姓名
				</view>
				<input type="text" v-model="params.real_name" class="input" placeholder="请输入真实姓名" placeholder-class="placeholder" />
			</view>
			<view class="row">
				<view class="label">
					银行卡号
				</view>
				<input type="text" v-model="params.card_no" class="input" placeholder="请输入银行卡号" placeholder-class="placeholder" />
			</view>
			<view class="row">
				<view class="label">
					银行名称
				</view>
				<input type="text" v-model="params.bank_name" class="input" placeholder="请输入银行名称" placeholder-class="placeholder" />
			</view>
			<view class="row">
				<view class="label">
					手机号码
				</view>
				<input type="text" v-model="params.phone" class="input" placeholder="请输入手机号码" placeholder-class="placeholder" />
				<button v-if="countDown <= 0" @tap="sendSms()" type="default" class="get-code">发送验证码</button>
				<button v-else type="default" class="get-code">{{countDown}}秒后重发</button>
			</view>
			<view class="row">
				<view class="label">
					验证码
				</view>
				<input type="text" v-model="params.code" class="input" placeholder="请输入验证码" placeholder-class="placeholder" />
			</view>
		</view>
		<view class="btn-box">
			<button type="default" class="active">立即绑定</button>
		</view>
	</view>
</template>

<script>
	import { generalSendSms, userCenterBindBankAccount } from '../../../common/service.js';
	import { validatorFun } from '../../../common/utils/util';
	export default {
		data() {
			return {
				params: {
					account_id: '',  // 记录id(修改时必传)
					phone: '',  // 手机号
					code: '',  // 验证码
					real_name: '',  // 真实姓名
					card_no: '',  // 账号
					bank_name: '',  // 所属银行
				},
				countDown: 0,
			}
		},
		methods: {
			bindBankAccount() {
				const params = this.params;
				const errList = validatorFun(params, [
					['real_name', ['notNull', '请输入真实姓名']],
					['card_no', ['notNull', '请输入银行卡号']],
					['bank_name', ['notNull', '请输入银行名称']],
					['phone', ['notNull', '请输入手机号码'], ['isMobile', '请输入正确手机号']],
					['code', ['notNull', '请输入验证码']],
				]);
				if (errList.length > 0) {
					return uni.showToast({
						icon: 'none',
						title: errList[0].errMsg,
					});
				}
				userCenterBindBankAccount({
					data: params,
					success: ({code, msg, data}) => {
						if (code == 1) {
							setTimeout(() => {
								uni.navigateBack({
									delta: 1,
								});
							}, 1000);
						}
						uni.showToast({
							icon: 'none',
							title: msg,
						});
					}
				});
			},
			sendSms() {
				const params = this.params;
				const errList = validatorFun(params, [
					['phone', ['notNull', '请输入手机号'], ['isMobile', '请输入正确手机号']],
				]);
				if (errList.length > 0) {
					return uni.showToast({
						icon: 'none',
						title: errList[0].errMsg,
					});
				}
				generalSendSms({
					data: {
						phone: params.phone,
					},
					success: ({code, msg, data}) => {
						if (code == 1) {
							this.countDownFn();
						}
						uni.showToast({
							icon: 'none',
							title: msg,
						});
					},
				});
			},
			countDownFn() {
				let num = 60;
				const fn = () => {
					if (num == 0) return;
					this.countDown = --num;
					setTimeout(() => fn(), 1000);
				};
				fn();
			},
		}
	}
</script>

<style scoped lang="scss">
	@import "./bind-bank-card.css";
</style>