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

青旅半醒 2023-07-23 15:56 42阅读 0赞

用vue写手机号绑定如下，

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70][]

第二步.出现60s倒计时

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 2][]

代码：

<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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70]: /images/20230528/a445adc4d5a64916baaa2cfc4806b5d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 1]: /images/20230528/340388507aee41d3bde1867c83a3fd26.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 2]: /images/20230528/a49c588144894570b865b2599a8f696a.png