手机验证码获取

悠悠 2022-10-13 15:52 225阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70]

<el-form-item label="短信验证码" required>
                        <el-input v-model="ruleForm.verificationcode" placeholder="请添加验证码">
                          <el-button v-if="isdisabled" slot="suffix" style="color:#409EFF;" type="text" @click="getCodeBtn" >获取验证码</el-button>
                          <el-button v-else slot="suffix" style="color:#409EFF;" type="text" disabled>{
       { counts }}s后重新发送</el-button>
                        </el-input>
                      </el-form-item>

data () { 
        return { 
            isdisabled:true,
            counts: "",
            timer:null,
            ruleForm: { 
              phoneNumber: '',
              verificationcode: '',
            },
         }
      },
      getCodeBtn(){ 
          this.ruleForm.VerificationCode = ''
          if(this.ruleForm.phoneNumber == ""){ 
            this.$message.warning('请添加店长手机号');
            return;
          }
          if (!/^1[3456789]\d{9}$/.test(this.ruleForm.phoneNumber)) { 
            this.$message.warning("请输入正确的手机格式");
            return;
          }
          const TIME_COUNT = 60;
    			if (!this.timer) { 
    				this.counts = TIME_COUNT;
    				this.isdisabled = false;
    				this.timer = setInterval(() => { 
    					if (this.counts > 0 && this.counts <= TIME_COUNT) { 
    						this.counts--;
    						if(this.counts == 0){ 
                  this.isdisabled = true;
    						}
    					} else { 
    						clearInterval(this.timer);
    						this.timer = null;
    					}
    				}, 1000);
    			}
        },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70]: /images/20221005/4a9d6525bc2047caa381072e941da3a1.png