效果如下图:(嘘,页面写的有点简陋,看效果!)
html:
<!--手机号输入框-->
<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>
js:
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('手机号码格式不正确');
}
}
代码个人简单分析:
在通过手机号和验证码进行登录时,点击获取验证码,判断手机号的格式是否正确,如果正确,就调用获取验证码的接口,传递两个参数,一个是
手机号
,一个是codeType类型
,根据接口需要 判断code值
是否等于200
,然后设置一个倒计时,一般为60秒
,在这60秒之内不能再次点击获取验证码。获取完之后再进行登录的一些其他操作。