短信验证码60倒计时

export default {
  data () {
    return {
      btnColor: '#ea5504',
      content: '发送验证码', // 按钮里显示的内容
      totalTime: 90, // 记录具体倒计时间 s
      typeBtn: 'warning',
      sendBtnDisabled: false, // 发送短信按钮状态
      captchaId: '', // 图形验证码验证id
      verifyFlag: false,
      imgCode: '',
      active: 0,
      activeType: '',
      formData: {
        userName: '',
        telephone: '',
        SMSVerCode: '',
        VerifyCode: ''
      },
      nameType: false,
      phoneType: false,
      phoneLicit: false,
      codeType: false,
      codeVerifyType: false
    }
  },
  directives: {
    fours: {
      inserted (el, bindings, vnode) { // 指令元素插入到页面时执行
        el.changeValue = function (e) {
          if (el.value.trim()) {
            switch (bindings.value) {
              case 'name':
                vnode.context['nameType'] = false
                break
              case 'phone':
                vnode.context['phoneType'] = false
                vnode.context['phoneLicit'] = !/^1\d{10}$/.test(el.value.trim())
                break
              case 'code' :
                vnode.context['codeType'] = false
                break
              case 'codeVerify' :
                vnode.context['codeVerifyType'] = false
                break
            }
          } else {
            vnode.context[`${bindings.value}Type`] = true
          }
        }
        el.onblur = function () {
          el.changeValue()
        }
        el.onfocus = function () {
          // 对比名称一样加边框颜色
          vnode.context['activeType'] = bindings.value
        }
        el.oninput = el.changeValue
      }
    }
  },
  methods: {
    // 计算class类名
    classObject (value) {
      return {
        active: this.activeType === value,
        bdColor: value === 'phone' && (this.phoneLicit || this[`${value}Type`])
      }
    },
    // 清除数据
    reset (value) {
      this.formData[value] = ''
    },
    // 发送验证码
    async sendCode () {
      let res = await getReportCode({
        captchaId: this.captchaId,
        captchaValue: this.formData.VerifyCode,
        clientId: 'h5',
        clientName: 'h5_mobile',
        mobile: this.formData.telephone
      })
      if (res.code === '30000') {
        this.verifyFlag = true
        this.createVerifyVode()
      }
      if (res.code === '30001') {
        this.$notify({
          message: res.message,
          color: '#ff9f0a',
          background: '#fff8ea'
        })
        this.createVerifyVode()
      }
      if (res.code === 1) {
        this.sendBtnDisabled = true
        this.typeBtn = 'info'
        this.btnColor = '#d9d9d9'
        this.content = this.totalTime + 's后重新获取'
        let timer = setInterval(() => {
          this.totalTime--
          this.content = this.totalTime + 's后重新获取'
          if (this.totalTime < 0) {
            clearInterval(timer)
            this.content = '发送验证码'
            this.totalTime = 90
            this.sendBtnDisabled = false
            this.typeBtn = 'warning'
            this.btnColor = '#ea5504'
          }
        }, 1000)
      }