cyzh-SoundOfMusic-H5/pages/activityList/activity/bankCard.vue

<template>
	<view>
		<view class="bg-img" style="background-image: url('https://upload-file-data.obs.cn-south-1.myhuaweicloud.com/5f263a5a6e7c4f2493e0325f28ab659a-bgimg.png');height: 310upx;"></view>
		<view class="container">
			<view class="text-bold" style="font-size: 40upx;padding: 30upx 0upx 10upx 40upx;">绑定银行卡</view>
			<view class="padding-left-lg" style="font-size: 28upx;">请如实填写一下资料</view>
			<u-picker mode="selector" v-model="bankShow"  :default-selector="[0]" :range="selector" @confirm="confirm"></u-picker>
			<view class="flex align-center" style="padding: 30upx 60upx 20upx 60upx;">
				<view style="width: 160upx;font-family: PingFang SC;font-weight: bold;color: #000000;"><text class="text-red">*</text>选择银行</view>
				<view class="flex justify-between align-center" style="width: 200upx;height: 60upx;border: #565656 1upx solid;border-radius: 16upx;" @click="bankShow = true">
					<view class="padding-left-sm">{{bank}}</view>
					<view class="padding-right-xs cuIcon-unfold"></view>
				</view>
			</view>
			<view style="padding: 0 60upx;">
				<u-line color="#d4d4d4"></u-line>
			</view>
			<view class="flex align-center" style="padding: 20upx 60upx;">
				<view style="width: 160upx;font-family: PingFang SC;font-weight: bold;color: #000000;"><text class="text-red">*</text>银行卡号</view>
				<u-input v-model="cardNum" placeholder="请输入银行卡号" :clearable="false" />
			</view>
			<view style="padding: 0 60upx;">
				<u-line color="#d4d4d4"></u-line>
			</view>
			<view class="flex align-center" style="padding: 20upx 60upx;">
				<view style="width: 160upx;font-family: PingFang SC;font-weight: bold;color: #000000;"><text class="text-red">*</text>选择银行</view>
				<u-input v-model="name" placeholder="请输入真实姓名" :clearable="false" />
			</view>
			<view style="padding: 0 60upx;">
				<u-line color="#d4d4d4"></u-line>
			</view>
			<view class="flex align-center" style="padding: 20upx 60upx;">
				<view style="width: 160upx;font-family: PingFang SC;font-weight: bold;color: #000000;"><text class="text-red">*</text>手机号码</view>
				<u-input v-model="phone" placeholder="请输入手机号码" :clearable="false" />
			</view>
			<view style="padding: 0 60upx;">
				<u-line color="#d4d4d4"></u-line>
			</view>
			<view class="flex align-center" style="padding: 20upx 60upx;">
				<view style="width: 160upx;font-family: PingFang SC;font-weight: bold;color: #000000;"><text class="text-white">*</text>验证码</view>
				<u-input v-model="code" placeholder="请输入验证码" :clearable="false" />
				<button class="cu-btn round" style="width: 150upx;background-color: #5d41ed;color: #ffffff;" @click="checking" v-if="!state">验证码</button>
				<button class="cu-btn round" style="width: 150upx;background-color: #5d41ed;color: #ffffff;" v-else>{{currentTime}}s</button>
			</view>
		</view>
		<view class="footer-fixed padding">
			<u-button class="custom-style" shape="circle" @click="bind">确定绑定</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bankShow: false,
				bank: '招商银行',
				cardNum: '',
				name: '',
				phone: '',
				code: '',
				state: false,		//是否开启倒计时
				totalTime: 120,		//总时间，单位秒
				recordingTime: 0, 	//记录时间变量
				currentTime: 0, 	//显示时间变量
				selector: ['招商银行', '建设银行', '农业银行', '工商银行', '中信银行', '平安银行'],
			}
		},
		methods: {
			confirm(index) {
				this.bank = this.selector[index];
			},
			checking() {
				if(!this.$u.test.mobile(this.phone)) {
					uni.showToast({
						icon: "none",
						title: "请输入正确的手机号码"
					})
					return;
				}
				//把显示时间设为总时间
				this.currentTime = this.totalTime;
				//开始倒计时
				this.state = true;
				//执行倒计时
				this.checkingTime();
			},
			checkingTime() {
				let that = this;
				//判断是否开启
				if (this.state) {
					//判断显示时间是否已到0，判断记录时间是否已到总时间
					if (this.currentTime > 0 && this.recordingTime <= this.totalTime) {
						//记录时间增加 1
						this.recordingTime = this.recordingTime + 1;
						//显示时间，用总时间 - 记录时间
						this.currentTime = this.totalTime - this.recordingTime;
						//1秒钟后，再次执行本方法
						setTimeout(() => { 	
							//定时器内，this指向外部，找不到vue的方法，所以，需要用that变量。
							that.checkingTime();
						}, 1000)
					} else {
						//时间已完成，还原相关变量
						this.state = false;		//关闭倒计时
						this.recordingTime = 0;	//记录时间为0
						this.currentTime = this.totalTime;	//显示时间为总时间
					}
				} else {
					//倒计时未开启，初始化默认变量
					this.state = false;
					this.recordingTime = 0;
					this.currentTime = this.totalTime;
				}
			},
		}
	}
</script>

<style>
	.container {
		border-radius: 36upx;
		background-color: #ffffff;
		padding-bottom: 30upx;
		margin: -120upx 30upx 30upx 30upx;
	}
	.custom-style {
		background-color: #5b3ee7;
		color: #ffffff;
	}
</style>