vue 倒数60s 获取验证码

vue   倒数60s 获取验证码

1.页面代码

   <Form
      ref="formValidate"
      :model="form"
      :rules="ruleValidate"
      :label-width="80"
      label-position="left"
    >
    <FormItem class="code-input" label="验证码" prop="authCode">
        <Input
          v-model="form.authCode"
          placeholder="输入验证码"
        />
        <Button
          @click="getCode()"
          type="primary"
          :class="{ 'disabled-style': getCodeBtnDisable }"
          :disabled="getCodeBtnDisable"
          >{{ codeBtnWord }}</Button
        >
      </FormItem>
 </Form>

 2.数据

const wait = 61


data(){ 
    return {
        form: {
           authCode: ''
        },
        codeBtnWord: '获取验证码', // 获取验证码按钮文字
        waitTime: wait, // 获取验证码按钮失效时间
        ruleValidate: {
         
          authCode: [
            {
              min: 6,
              max: 6,
              required: true,
              message: '请输入6位验证码',
              trigger: 'blur'
            }
          ]
        }
    }
},

  computed: {
 
      getCodeBtnDisable: {
        get() {
          if (this.waitTime == wait) {
            if (this.phoneIsValidate && this.nameIsValidate) {
              return false
            }
            return true
          }
          return true
        },
       }
    },

3.函数 

      async getCode() {
        if (!this.getCodeBtnDisable) {
          let res = await api.sendPhoneAuthCode({
            phoneNumber: this.form.phoneNumber
          })
          console.log(res)
          if (res) {
            this.waitTime--
            this.getCodeBtnDisable = true
            this.codeBtnWord = `${this.waitTime}s 后重新获取`
            let timer = setInterval(() => {
              if (this.waitTime > 1) {
                this.waitTime--
                this.codeBtnWord = `${this.waitTime}s 后重新获取`
              } else {
                clearInterval(timer)
                this.codeBtnWord = '获取验证码'
                this.getCodeBtnDisable = false
                this.waitTime = wait
              }
            }, 1000)
          }
        }
      },