<view class="sendCode">
<button size="mini" :disabled="btnDis" @tap="sendCode">{{btnText}}</button>
</view>
btnDis: false,// 发送验证码按钮不禁用
btnText: "发送验证码",// 提示
// 发送验证码
async sendCode() {
//手机号校验
/*........*/
// 手机号没问题时发送验证码
/*........*/
uni.showToast({
title: '发送成功'
});
// 开启倒计时
this.countDown();
},
// 验证码倒计时
countDown() {
// 初始化定时器
let t = null;
// 倒计时1分钟
let timer = 60;
// 按钮禁用
this.btnDis = true;
// 计时器清零
clearInterval(t);
// 按钮显示时间
this.btnText = `${timer}s`;
t = setInterval(() => {
// 当倒计时完时,显示重新发送,按钮开启
if (timer == 0) {
clearInterval(t);
this.btnText = "重新发送";
this.btnDis = false;
return;
}
// 实现倒计时效果
timer--;
this.btnText = `${timer}s`;
}, 1000)
}