前期准备SpringBoot集成腾讯云短信
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ebd661043694ffad6fded66b89a3f6d1.png)
<template>
<el-form :model="phoneForm" :rules="phoneRules" ref="phoneForm" label-position="left" label-width="0px" class="demo-ruleForm login-container1">
<el-form-item prop="phone">
<el-input type="text" v-model="phoneForm.phone" auto-complete="off" placeholder="请输入手机号码"></el-input>
</el-form-item>
<el-form-item prop="smsCode">
<el-col :span="10">
<el-input
v-model="phoneForm.smsCode"
placeholder="短信验证码"
clearable
maxlength="6"
/>
</el-col>
<el-col :span="13">
<el-button id="btn" type="primary" style="width:60%;" @click="sendCode('phoneForm')" >{{smsBtn}}</el-button>
</el-col>
</el-form-item>
<el-form-item style="width:100%;">
<el-button type="primary" style="width:48%;" @click.native.prevent="reset">重 置</el-button>
<el-button type="primary" style="width:48%;" @click.native.prevent="smsLogin" :loading="logining">登 录</el-button>
</el-form-item>
</el-form>
</template>
export default {
name: 'Login',
data() {
let checkPhone = (rule, value, callback) =>{
let reg = /^1[3|4|5|7|8][0-9]\d{8}$/
if(reg.test(value)){
return callback()
}
callback(new Error('请输入正确的手机号'))
}
return{
phoneForm:{
phone:'',
code: '',
},
phoneRules:{
phone: [
{ required: true, message:'请输入正确的联系方式', trigger: 'blur'
,validator: checkPhone, trigger:'blur'}
],
smsCode: [
{required: true, message: '验证码不能为空', trigger: 'blur'}
]
},
smsBtn: '发送验证码',
checked: true
};
},
methods: {
sendCode(phoneForm){
this.$refs[phoneForm].validateField('phone',valid => {
if(valid){
this.$message({
"message": '手机号格式错误'
})
return;
}
else{
this.time=60
document.getElementById("btn").disabled=true;
let smsInfo = {phone:this.phoneForm.phone, smsCode:this.phoneForm.smsCode}
this.$api.login.smsCode(JSON.stringify(smsInfo)).then((res) => {
if(res.code == 200) {
this.$message.success("发送成功")
let timer = setInterval(()=>{
this.time --;
this.smsBtn = `${this.time}s重新发送`
if(this.time === 0){
this.smsBtn = '重新发送';
document.getElementById("btn").disabled=false;
this.time = 60
clearInterval(timer)
timer=null;
}
},1000)
}
else{
this.$message({
"message": '发送失败' +res.msg, type:"error"
})
}
}).catch(function(res) {
alert(res);
});
}
})
},
smsLogin(){
let smsInfo = {phone:this.phoneForm.phone, smsCode:this.phoneForm.smsCode}
this.$refs.phoneForm.validate(valid => {
if (!valid) return
})
this.$api.login.verifyCode(JSON.stringify(smsInfo)).then((res)=>{
if(res.code == 200){
}else{
this.$message({message: '验证码错误, ' + res.msg, type: 'error'})
}
}).catch(function(res) {
alert(res);
});
},
reset() {
this.$refs.phoneForm.resetFields();
},
}