修改

pages/activityList/activity/bankCard.vue

@@ -4,9 +4,13 @@
 		<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 style="border: #000000 1upx solid;">{{bank}}</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>
@@ -32,9 +36,15 @@
 			<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="confirm">确定</u-button>
+			<u-button class="custom-style" shape="circle" @click="bind">确定绑定</u-button>
 		</view>
 	</view>
 </template>
@@ -43,14 +53,66 @@
 	export default {
 		data() {
 			return {
-				bank: '',
+				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>
@@ -62,7 +124,7 @@
 		padding-bottom: 30upx;
 		margin: -120upx 30upx 30upx 30upx;
 	}
-	.custom-style-sm {
+	.custom-style {
 		background-color: #5b3ee7;
 		color: #ffffff;
 	}