vue--获取手机短信验证码前端

1、初始化秒：

return { //初始值 show: 'false', count: '', }

2、页面中：

获取验证码 {{count}}s后重试

【vue--获取手机短信验证码】接口调用：

// 获取短信验证码 getCode() { if(this.validatePhone()){ this.vaTime() let params={phone:this.form.phone} sendCode(params).then(res => { if(res.code===200){ this.$message({ message: '验证码已发送成功', type: 'success' }); } }).catch((error) => { console.log(error) }) } }, // 判断手机号是否合法 validatePhone(){ if(!this.form.phone) { this.$message({ message: '手机号码不能为空', type: 'error' }); } else if(!/^1[3|4|5|7|8][0-9]\d{8}$/.test(this.form.phone)) { this.$message({ message: '请输入正确是手机号', type: 'error' }); } else { return true } }, // 验证码倒计时 vaTime(){ this.count = 120; this.show = false; let timer=0 timer = setInterval(() => { if (this.count > 0 && this.count <= 120) { this.count--; } else { this.show = true; clearInterval(timer); timer = 0; } }, 1000); }, // 提交 handSubmit() { this.$refs.form.validate(valid => { if (valid) { // 验证码校验 let params={ code:this.form.code, number:this.form.phone } //后台接口校验验证码 checkCode(params).then(res => { if(res.code===200){ this.loading = true; // 所有信息提交 pmadApplyRecord (this.form).then(res => { console.log(res) this.loading = false; this.show = true; this.$message({ message: '信息提交成功', type: 'success' }); this.open= false; }).catch(() => { this.loading = false; }) }else if(res.code===500){ this.$message({ message: '验证码错误,请输入正确的验证码', type: 'error' }); } }).catch((error) => { console.log(error) }) } }); }