VUE手机号注册获取短信验证码

效果图：

 

HTML部分：

<el-form class="step-form1" ref="form1" :model="form1" :rules="rules1" label-width="120px">
  <el-form-item label="管理员手机号:" prop="userPhone">
    <el-input v-model="form1.userPhone" placeholder="请输入手机号"></el-input>
  </el-form-item>
  <el-form-item label="图形验证码:" prop="verCode">
    <el-input v-model="form1.verCode" placeholder="请输入图形验证码"></el-input>
    <el-image v-if="getVerImgCode" class="verimg" :src="getVerImgCode" @click="refreshCode()"></el-image>
  </el-form-item>
  <el-form-item label="短信验证码:" prop="smsCode">
    <el-input v-model="form1.smsCode" placeholder="请输入短信验证码"></el-input>
    <span class="send-sms-text" :class="{disabled: smsStatus === 2 || smsStatus === 4}" @click="getSms()">
      {{ (smsStatus === 1)?'获取验证码':smsStatus === 2?(smsNum+'s后重试'):smsStatus === 4?'获取中...':'重新获取'  }}
    </span>
  </el-form-item>
  <el-form-item label="密码:" prop="userPwsswd">
    <el-input type="password" v-model="form1.userPwsswd" show-password placeholder="请输入密码" autocomplete="new-password"></el-input>
  </el-form-item>
  <el-form-item label="确认密码:" prop="confirmPass">
    <el-input type="password" v-model="form1.confirmPass" show-password placeholder="请再次输入密码" autocomplete="new-password"></el-input>
  </el-form-item>
</el-form>

JS部分：

data() {
  return {
    baseUrl: 'https://xxx',
    smsTimer: null,
    smsNum: 60,
    smsStatus: 1, //1获取验证码2倒计时3重新获取4loading,
    randomNum: new Date().getTime(),
    form1: {
      userPhone: '',
      verCode: ''
    }
  }
},
computed: {
  getVerImgCode() {
    const reg = /^1[3456789]\d{9}$/
    if (this.form1.userPhone && reg.test(this.form1.userPhone)) {
      return `${this.baseUrl}/web/ml/mlogin/getVerCode.img?userPhone=${this.form1.userPhone}&t=${this.randomNum}`
    } else {
      return ''
    }
  }
},
methods: {
  // 获取验证码
  async getSms() {
    let errNum = 0;
    await this.$refs.form1.validateField(['userPhone', 'verCode'], (errMsg) => {
      if (errMsg) {
        errNum++
      }
    });
    if (errNum === 0 && this.smsStatus !== 2) {
      const params = {
        userPhone: this.form1.userPhone,
        code: this.form1.verCode
      }
      this.smsStatus = 4
      sendPhone(params).then(res => {
        if (res.success) {
          this.smsStatus = 2
          this.smsTimer = setInterval(() => {
            this.smsNum--
            if (this.smsNum === 0) {
              this.smsStatus = 3
              this.smsNum = 60
              clearInterval(this.smsTimer)
            }
          }, 1000)
        } else {
          this.smsStatus = 1
          this.$message.error(res.msg)
        }
      })
    }
  },
}

CSS部分：

.register-box{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  background-image: url('~@/assets/reg-bg.png');
  background-size: cover;
  background-repeat: no-repeat;
  .header{
    width: 1200px;
    margin: 20px auto 30px;
    img{
      height: 60px;
      // cursor: pointer;
    }
  }
  .title{
    font-size: 22px;
    padding-left: 30px;
    color: #232323;
  }
  .content{
    border-radius: 4px;
    width: 1200px;
    margin: auto;
    padding: 30px 0;
    margin-top: 20px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 10px;
    .step-box{
      display: flex;
      justify-content: center;
      margin: 20px 0 30px;
      .step-item{
        display: flex;
        flex-flow: column;
        align-items: center;
        width: 80px;
        .item-num{
          width: 48px;
          height: 48px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          background-color: #e0e0e0;
          border-radius: 50%;
          font-size: 24px;
        }
        .item-name{
          color: #8A8A8A;
          font-size: 18px;
          margin-top: 20px;
        }
        &.active{
          position: relative;
          &::before{
            position: absolute;
            content: "";
            border-radius: 50%;
            width: 68px;
            height: 68px;
            top: -10px;
            left: 6px;;
            background: #c9dcff;
          }
          .item-num{
            background-color: #0952e5;
            position: relative;
            z-index: 9;
          }
          .item-name{
            color: #0952e5;
          }
        }
        &.pass{
          .item-num{
            background-color: #b3cdff;
          }
          .item-name{
            color: #b3cdff;
          }
        }
      }
      .step-line{
        position: relative;
        top: 12px;
        img{
          height: 15px;
        }
      }
    }
    .step-form-title{
      margin: 0 40px 20px;
      padding-left: 10px;
      font-size: 18px;
      font-weight: bold;
      border-left: 4px solid #4195f6;
    }
    .el-icon-question, .send-sms-text, .long-time-check{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: -28px;
      cursor: pointer;
    }
    .send-sms-text{
      color: #0952E5;
      cursor: pointer;
      white-space: nowrap;
      position: absolute;
      right: 5px;
      &.disabled{
        color: #999;
        pointer-events: none;
      }
    }
    .long-time-check{
      right: -65px;
    }
    .verimg{
       position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 0;
      height: 28px;
    }
    /deep/ .el-input{
      width: 368px;
      height: 40px;
      background-color: #f8f8f8;
      .el-input__inner{
        background: unset !important;
        border: unset !important;
        height: 100%;;
      }
    }
    /deep/ .el-checkbox__input.is-checked .el-checkbox__inner{
      background: #0952E5 !important;
      border-color: #0952E5 !important;
    }
    /deep/ .el-upload--picture-card{
      width: 148px;
      height: 148px;
      line-height: 146px;
    }
    .step-form1{
      width: 480px;
      margin: auto;
      position: relative;
      right: 63px;
    }
    .step-form2{
      .el-input{
        width: 220px;
      }
    }
    .reg-success{
      text-align: center;
      img{
        width: 124px;
        height: 124px;
      }
      h3{
        font-size: 24px;
        color: #0952E5;
        font-weight: 500;
        margin: 20px 0;
      }
      p{
        font-size: 14px;
        color: #656565;
        margin: 10px 0;
      }
      .el-button{
        width: 174px;
        height: 40px;
        background-color: #0952E5 !important;
        margin-top: 40px;
      }
    }
    .footer{
      padding: 20px 0;
      text-align: center;
      margin-top: 10px;
      .isRead {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        margin-top: 30px;
        .isRead_center {
          margin:0 10px;
          color: #666;
          span {
            cursor: pointer;
            color: #0952E5 !important;
          }
        }
      }
      .el-button{
        width: 174px;
        height: 40px;
        border-radius: 8px;
        &.el-button--default{
          border: 1px solid #0952E5 !important;
          color: #0952E5 !important;
        }
        &.el-button--primary{
          background-color: #0952E5 !important;
          color: #fff !important;
        }
      }
    }
  }
  .upfile-tips{
    color: #fd9e11;
    a{
      color: #0952E5 !important;
      text-decoration: underline;
    }
  }
}