vue 手机验证码逻辑

h5:

<div class="form-item-label">验证码</div>
<van-field class="form-item-field" v-model="form.code" type="number">
   <template #button>
       <div :class="['phone-code', { 'disabled': !checkPhoneNumber() || hasSendPhoneCode }]" @click="getPhoneCode">
         {{ hasSendPhoneCode ? `重发(${resendSeconds}s)` : '获取验证码' }}
       </div>
   </template>
</van-field>

JS

    checkPhoneNumber() {
      this.form.phoneNumber = this.form.phoneNumber.trim();
      const phoneNumber = this.form.phoneNumber;
      return phoneNumber.length > 0 && util.matchMobileNumber(phoneNumber);
    },
    async getPhoneCode() {
      if (this.hasSendPhoneCode) return;
      if (!this.checkPhoneNumber()) return;
      this.hasSendPhoneCode = true;
      try {
        const response = await getMobileCode({
          phoneNumber: this.form.phoneNumber.trim()
        });
        if (response.code !== 0) {
          Toast(response.msg);
          throw new Error();
        }
        this.resendCodeInternal();
      } catch (e) {
        console.log('e: ', e);
      }
    },
    resendCodeInternal() {
      this.timer = setInterval(() => {
        this.resendSeconds -= 1;
        if (this.resendSeconds === 0) {
          clearInterval(this.timer);
          this.hasSendPhoneCode = false;
          this.resendSeconds = 60;
        }
      }, 1000);
    },

// util
function matchMobileNumber(mobile) {
  const result = mobile.match(/^\d{11}$/);
  if (result) {
    return true;
  }
  return false;
}