美文网首页
获取验证码定时器

获取验证码定时器

作者: 琳媚儿 | 来源:发表于2020-11-05 11:22 被阅读0次
 <div v-if='isActive' @click="getVerifyCode()" style="height:6vh;width:8vw;margin-top:5.3vh;border:#479F74 solid 1px;font-size:2vh;line-height:6vh;text-align:center;color:#479F74;cursor:pointer;">
                获取验证码
              </div>
              <div v-else style="height:6vh;width:8vw;margin-top:5.3vh;border:#479F74 solid 1px;font-size:2vh;line-height:6vh;text-align:center;color:#479F74;">
                剩余{{countSec}}秒
              </div>
 data() {
    return {
          countSec:0,//倒计时
           query_code:{
                phonenum:'',
                code:'',
              },//验证码登录
     }
},
methods:{
        //获取手机验证码
    getVerifyCode() {
       if((!(/^[1]([3-9])[0-9]{9}$/.test(this.query_code.phonenum)))){
          this.$message.warning('请输入正确手机号')
          return false
        }
        //60秒loading
        this.isActive = false
        this.countSec = 30
        let timmer = setInterval(()=>{
          this.countSec--
          if(this.countSec<=0) {
            this.isActive = true
            clearInterval(timmer);
          }
        },1000)
        window._api.common_sendVerifyCode(this.query_code.phonenum).then(res => {
          console.log(res,"0-0-0-0-")
        })
    },
  }

相关文章

网友评论

      本文标题:获取验证码定时器

      本文链接:https://www.haomeiwen.com/subject/dkpovktx.html