|
|
@@ -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;
|
|
|
}
|
lyqu