获取验证码定时器

2020-11-05  本文已影响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-")
        })
    },
  }
上一篇 下一篇

猜你喜欢

热点阅读