VUE短信验证码登录

前期准备SpringBoot集成腾讯云短信

<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 class="line" :span="2">-</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-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox> -->
            <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',
    //inject: ["reload"],
    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"
                })
                //this.reload();
              }
            }).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){
            //sessionStorage.setItem('user', res.data.username) // 保存用户到本地会话
            //sessionStorage.setItem('token', res.data.token)
        // 登录成功，跳转到主页
          }else{
            this.$message({message: '验证码错误, ' + res.msg, type: 'error'})
          }
        }).catch(function(res) {
          alert(res);
        });
      },
 reset() {
       
        this.$refs.phoneForm.resetFields();
      },
  }