手机验证码60秒倒计时

<!--手机号输入框-->
<div class="login_box">
<input type="number" placeholder="请输入手机号" class="phoneInput" v-model="mobile"/>
<span v-if="codeShow" style="color:red;" @click="getPhoneCode">获取验证码</span>
<!-- 倒计时 -->
<span v-if="!codeShow" class="count">{{count}}秒后重试</span>
</div>

data() {
return {
codeShow: true,
count: '',
timer: null,
mobile: "", //手机号
};
},
getPhoneCode() { //获取短信验证码
var Reg = /^[1][34578][0-9]{9}$/;
// 正则验证
if (Reg.test(this.mobile)) {
this.$toast('验证码发送成功');
const TIME_COUNT = 60;
if (!this.timer) {
this.count = TIME_COUNT;
this.codeShow = false;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--;
} else {
this.codeShow = true;
clearInterval(this.timer);
this.timer = null;
}
}, 1000)
}
let code = {
mobile: this.mobile,
sms_type: "login"
}
getSmsCode(code).then(res => {
console.log(res)
})
} else {
this.$toast('手机号码格式不正确');
}
}

 

posted @ 2021-04-20 16:44  在学习编程的lsy呀  阅读(174)  评论(0编辑  收藏  举报