vue 短信验证

直接贴代码：

HTML

<div class="phone">
   <div class="number">
        <p class="tip">手机号码<span style="color: #ff0000;">*</span></p>
        <input type="number" class="info" :placeholder="question.prompt_content" v-model="phoneObj"/>
   </div>
   <div class="number">
        <p class="tip">&nbsp;</p>
        <input type="number" class="checkPhone" placeholder="请输入验证码" v-model="checkNumberObj"/>
        <button :disabled="fetchCodeMsg || false" class="getCheckNumber" :class="{unselected: fetchCodeMsg}" @click="getCheckNumber(question.question_id)">{{timerCodeMsg||'获取验证码'}}</button>
   </div>
</div>

CSS

.number{
        height: torem(100px);
        line-height: torem(100px);
        padding-left: torem(20px);
        position: relative;
        float: left;
        width: 100%;
        border-bottom: 1px solid #dddddd;
        .unselected{
          background-color: #cccccc !important;
        }

　　　　　　.tip{
　　　　　　　　font-size: torem(28px);
　　　　　　　　color: #000000;
　　　　　　　　width: torem(260px);
　　　　　　　　position: relative;
　　　　　　　　float: left;
　　　　　　　　overflow: hidden;
　　　　　　　　white-space: nowrap;
　　　　　　　　text-overflow: ellipsis;
　　　　　　}

　　　　　　.info{
　　　　　　　　font-size: torem(28px);
　　　　　　　　color: #000000;
　　　　　　　　width: torem(450px);
　　　　　　}

　　　　　　.checkPhone{
　　　　　　　　width: torem(220px);
　　　　　　　　font-size: torem(28px);
　　　　　　　　color: #000000;
　　　　　　　　padding-right: torem(30px);
　　　　　　}

        .getCheckNumber{
          width: torem(180px);
          height: torem(54px);
          color: #ffffff;
          background-color: #2E97DD;
          font-size: torem(28px);
          position: relative;
          float: right;
          border-radius: torem(6px);
          text-align: center;
          line-height: torem(54px);
          margin-top: torem(24px);
          margin-right: torem(30px);
        }
      }

JS

data(){

　　return {

　　　　phoneObj: '',             // phoneOb

　　　　timerCodeMsg: '',         // timerCodeMsg

　　　　fetchCodeMsg: '',         // fetchCodeMsg

　　}

}

 

    getCheckNumber () {
      let newPhone = this.phoneObj
      if (!(/^1[34578]\d{9}$/.test(newPhone))) {
        Toast('手机号码有误，请重填')
        return false
      } else {
        this.$root._axios('post', 'CheckCodeApi/sendSmSodeReserve', {phone: newPhone})
        .then(res => {
          if (res.data.errcode === 0) {
            let sec = 60
            for (let i = 0; i <= 60; i++) {
              window.setTimeout(() => {
                if (sec != 0) {
                  this.timerCodeMsg = sec + '秒后重发'
                  this.fetchCodeMsg = true
                  sec--
                } else {
                  sec = 60 // 如果倒计时结束就让  获取验证码显示出来
                  this.timerCodeMsg = '重新发送'
                  this.fetchCodeMsg = false
                }
              }, i * 1000)
            }
          }
        })
      }
    }