update: [login] 客戶登入 新增圖驗證碼

Tomas

2022-07-20 38d7cc3ee70e1de015ea03ee3f1330be0054b6c7

 PAMapp/pages/login/index.vue

@@ -82,7 +82,7 @@
          <template v-if="connectDevice === 'MOBILE'">
            <div v-show="showPhoneOtpCodeField">
              <el-row type="flex" justify="space-between">
                  <div class="mdTxt">輸入驗證碼</div>
                  <div class="mdTxt">輸入 OTP 驗證碼</div>
                  <div class="otp-count-timer">
                    {{counterTime(otpCounterSec)}}
                  </div>
@@ -95,11 +95,11 @@
                    'is-invalid': !otpCode
                  }"
                  v-model="otpCode"
                  placeholder="請輸入驗證碼"
                  placeholder="請輸入 OTP 驗證碼"
                  >
              </el-row>
              <div class="error mt-5 mb-10">
                  <span v-show="otpCounterSec === 0">驗證碼已過期，請重發驗證碼</span>
                  <span v-show="otpCounterSec === 0">OTP 驗證碼已過期，請重發 OTP 驗證碼</span>
              </div>

              <el-row>
@@ -108,7 +108,7 @@
                  @click="resentOtp('MOBILE')"
                  icon="icon-arrow"
                >
                  重發驗證碼<span
                  重發 OTP 驗證碼<span
                    class="pam-field-title__hint pl-5"
                    v-if="otpResendCounter !== 0"
                  >({{ otpResendCounter }})</span>
@@ -133,7 +133,7 @@
          <template v-if="connectDevice === 'EMAIL'">
            <el-row v-show="showEmailVerifyField">
              <el-row type="flex" justify="space-between">
                  <div class="mdTxt">輸入驗證碼</div>
                  <div class="mdTxt">輸入 OTP 驗證碼</div>
                  <div class="otp-count-timer">
                    {{counterTime(emailCounterSec)}}
                  </div>
@@ -146,11 +146,11 @@
                    'is-invalid': !emailOtpCode
                  }"
                  v-model="emailOtpCode"
                  placeholder="請輸入驗證碼"
                  placeholder="請輸入 OTP 驗證碼"
                  >
              </el-row>
              <div class="error mt-5 mb-10">
                  <span v-show="emailCounterSec === 0">驗證碼已過期，請重發驗證碼</span>
                  <span v-show="emailCounterSec === 0">OTP 驗證碼已過期，請重發 OTP 驗證碼</span>
              </div>

              <el-button
@@ -158,7 +158,7 @@
                icon="icon-arrow"
                @click="resentOtp('EMAIL')"
              >
                重發驗證碼<span
                重發 OTP 驗證碼<span
                    v-if="emailResendCounter !== 0"
                    class="pam-field-title__hint pl-5"
                  >({{ emailResendCounter }})</span>
@@ -568,6 +568,8 @@
        this.emailResendCounter -= 1;
      }
      if (this.emailCounterSec === 0) {
        this.verificationCode = '';
        this.regenerateImgOfVerification();
        clearInterval(this.emailResendInterval);
      }
    }, 1000)
@@ -580,7 +582,9 @@
        this.otpResendCounter -= 1;
      }
      if (this.otpCounterSec === 0) {
        clearInterval(this.otpInterval)
        this.verificationCode = '';
        this.regenerateImgOfVerification();
        clearInterval(this.otpInterval);
      }
    }, 1000)
  }