一：<div class="flex align-items-center">
<van-button
plain
:loading="isLoadingYzm"
:class="{'border-0':codeSrc}"
color="#80CA63"
style="background:#FFFFFF;margin-top:5%"
@click="getYzm5"
>
<span v-if="showtime===null" >获取验证码</span>
<span v-else>{{showtime}}</span>
</van-button>
</div>
二：data()定义
// 计时器,注意需要进行销毁
timeCounter: null,
// null 则显示按钮 秒数则显示读秒
showtime: null,
三：methods里设置倒计时
// 1，倒计时显示处理
countDownText(s) {
this.showtime = `${s}s后重新获取`
},
//2， 倒计时 60秒 不需要很精准
countDown(times) {
const self = this;
// 时间间隔 1秒
const interval = 1000;
let count = 0;
self.timeCounter = setTimeout(countDownStart, interval);
function countDownStart() {
if (self.timeCounter == null) {
return false;
}
count++
self.countDownText(times - count + 1);
if (count > times) {
clearTimeout(self.timeCounter)
self.showtime = null;
} else {
self.timeCounter = setTimeout(countDownStart, interval)
}
}
},
//3，注册根据手机号获取验证码
getYzm() {
// 根据短信注册账号
if (this.phone == "") {
window.vant.Toast("请输入手机号码");
return;
} else {
if (!/^1[3456789]\d{9}$/.test(this.phone)) {
window.vant.Toast("手机号码有误，请重填");
return false;
}
}
this.API.sendMsg({
phone: this.phone
})
.then(res => {
if (res.code == 200) {
this.countDown(60);
window.vant.Toast(res.msg);
} else {
// this.isLoadingYzm = false;
window.vant.Toast(res.msg);
}
})
.catch(err => {
console.log(err);
});
},
