vue写手机号绑定+验证，点击获取和重新获取验证码

用vue写手机号绑定如下，

第一步，首先得是点击获取 ,60s倒计时

 第二步.出现60s倒计时

第三步.点击获取完，出现重新获取按钮，点击后重新获取并实现倒计时60s 

代码：

 

 
<template>
  <div id="weixinAuth" class="clearfix">
    <div class="container">
      <div class="weixin-header">
        <p>手机号绑定<p/>
      </div>
       <div class="weixin-form">
         <el-form
        :model="ruleForm"
        status-icon
        ref="ruleForm"
        label-width="0px"
        class="demo-ruleForm ruleForm"
      >
        <div class="steps-form">
          <el-form-item prop="mobile">
            <el-row type="flex" class="row-bg header_fidx" :span="24">            
              <el-col :span="6" class="col_row1 col_txt2">
                <a class="grid-content">手机号：</a>
              </el-col>
              <el-col :span="18" class="col_row1 col_txt1">
                <a class="grid-content">
                  <input
                    v-model.trim="ruleForm.mobile"
                    type="text"
                    placeholder="请输入手机号"
                    class="form-input"
                    name="mobile"
                    clearable
                  />
                </a>         
              </el-col>        
            </el-row>
          </el-form-item>
          <el-form-item prop="verify">
            <el-row type="flex" class="row-bg header_fidx" :span="24">          
              <el-col :span="6" class="col_row2 col_txt2">
                <a class="grid-content">验证码：</a>
              </el-col>
              <el-col :span="10" class="col_row2 col_txt1">
                <a class="grid-content">
                  <input
                    v-model.trim="ruleForm.verify"
                    type="text"
                    placeholder="请输入验证码"
                    class="form-input"
                    name="verify"
                    clearable
                  />
                </a>
              </el-col>
              <el-col :span="8" class="col_row2 col_txt1">
                <a class="grid-content">             
                  <div  @click="getCode()"  v-show="isgetCode"  class="getCode-button">点击获取</div>                  
                  <div
                  v-show="!isgetCode"
                    @click="reacquire()"
                    v-bind:class="{ active: isActive }"
                    class="verifyPhone-button"
                  >
                    <span v-show="isActive">重新获取</span>
                    <span v-show="!isActive">{{count}}s</span>
                  </div>
                </a>
              </el-col>
              
            </el-row>
          </el-form-item>
         
        </div>
        <div class="form-bottom">
          <el-form-item>
            <el-button type="primary" class="form-bottom-button"   @click="submitForm('ruleForm')" >确认</el-button>
          </el-form-item>
        </div>
      </el-form>
       </div>
       
    </div>
  </div>
</template>

<script>
import  {errorOpen,successOpen} from '@/assets/JS/message';
const TIME_COUNT = 60;
export default {
  name: "weixin_auth",

  components: {},

  data() {
    return {
      isgetCode:true,
      isActive: false,
      count: 0,
      timer: null,
      ruleForm: {
        mobile: "",
        verify: "",
      }
    };
  },

  created() {},
  mounted() {
 
  },
  methods: {
       getCode(ruleForm) {
         this.isgetCode=false;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.isActive = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.isActive = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    //重新获取验证码
    reacquire() {
       this.isgetCode=false;
      var reacquireObj = {
        mobile: this.mobile,
        retoken: this.$route.query.getToken
      };
      // console.log(reacquireObj);
      this.$index
        .API_RESETPWDSMS(reacquireObj)
        .then(res => {
          // console.log(res);
          if (res.errcode == 0) {
           successOpen( `${res.msg}`);
            this.getCode();
          } else if (res.errcode == 401) {
            errorOpen(`${res.error}`);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
   
   submitForm(value) {
      var authReg = /^\d{4}$/; //4位纯数字验证码
      var mPattern = /^1[3-9]\d{9}$/; //手机号码
      // var valueReg = /^\s*$/g; //非空
      var notempty = /^\\S+$/; //非空
      let smg = this.ruleForm;
      var obj = {
        sign: this.sign,
        mobile: smg.mobile,
        verify: smg.verify
      };
      // console.log(obj);
      this.$index
        .API_FIDEPWD(obj)
        .then(res => {
          // console.log(res);
          if (res.errcode == 0) {
            if (
              mPattern.test(smg.mobile) === false ||
              authReg.test(smg.verify) === false
            ) {
              if (mPattern.test(smg.mobile) === false) {
                this.$toast("请输入正确的号码，且不能有空值!");
              } else if (authReg.test(smg.verify) === false) {
                this.$toast("请输入正确的验证码，且不能有空值！");
              }   
            } else {
              successOpen( `${res.msg}`);
             
              //成功的回调
            }
          } else {
              errorOpen(`${res.error}`);
            
          }
        })
        .catch(err => {
          console.log(err);
        });
    },




  }
};
</script>
<style lang='less' scoped>
#weixinAuth{
    background: #fff;
    position: relative;
    width: 100vw;
    height: 100vh;
    .container{
     width: 90%;
     height: 55%;
     position: absolute;
     top: 15%;
     left: 5%;
    }
    .weixin-header{
      width: 100%;
      height: 30%;
      position: absolute;
      top: 0px;   
      color: #409EFF; 
      font-weight: 500;
      font-size: 32px;
      text-align: center;
    }
    .weixin-form{
      width: 100%;
      height: 70%;
      position: absolute;
      bottom: 0rem;    
    }
  .steps-form {
                width: 100%;
                overflow: hidden;
                text-align: center;
                position: absolute;
                top: 0rem;
                line-height: 3.75rem;  
                .grid-content {
                    max-height: 3.75rem;
                    line-height: 3.75rem;
                }
    
                .row-bg {
                    background-color: #fff;
                }
    
                .col_row1 {
                    border-top:0.0625rem solid #ebeef5;
                    border-right: 0rem solid #ebeef5;
                    border-bottom: 0.0625rem solid #ebeef5;
                    border-left: 0rem solid #ebeef5;
                }
                .col_row2 {
                    border-top:0rem solid #ebeef5;
                    border-right: 0rem solid #ebeef5;
                    border-bottom: 0.0625rem solid #ebeef5;
                    border-left: 0rem solid #ebeef5;
                }
                .col_txt1 {
                    text-align: left;
                }
                .col_txt2 {
                    text-align: center;
                }
            
    
                .header_fidx {
                    position: relative;
                }
    
                .el-form-item {
                    margin-bottom: 0rem !important;
                }
    
                input:focus {
                    outline: none;
                  }
                input {
                    outline: medium;
                    border: none
                }
    
                .form-input {
                    width: 100%;
                    max-height: 3.125rem;
                    line-height: 3.125rem;
                    position: relative;
                }
    
                .getCode-button{
                    color: #FFF;
                    background-color: #409EFF;
                    border: .0625rem solid #409EFF;            
                    border-radius: .3125rem;
                    width: 5.5625rem;
                    height: 2.375rem;
                    line-height: 2.375rem;
                    margin-top: .625rem;
                    text-align: center;
                    font-size: 1rem;
                }
    
                .verifyPhone-button {
                    border: .0625rem solid #ccc;
                    background: #f7f7f7;
                    color: #999;
                    border-radius: .3125rem;
                    width: 5.5625rem;
                    height: 2.375rem;
                    line-height: 2.375rem;
                    margin-top: .625rem;
                    text-align: center;
                    font-size: 1rem;
                }
    
                .active {
                    border: .0625rem solid #3980ea;
                    background: #fff;
                    color: #3980ea;
                }
    
                .mobileData {
                    color: #999;
                }
            }
    
            .form-bottom {
                width: 100%;
                height: 3.5rem;
                position: absolute;
                bottom: 0rem;   
                .form-bottom-button {
                    width: 90%;
                    position: relative;
                    left: 5%;
                }
            }
    
        
  }
</style>