fix: 背景自動執行 regenerateImgOfVerification 引發的畫面卡死問題

Tomas

2022-08-26 d671c283604d805d528e42cca6560a1a271278e6

 PAMapp/pages/login/index.vue

@@ -9,10 +9,10 @@
            <el-row type="flex" class="pt-30">
              <el-button
                :class="{ 'active': connectDevice === 'MOBILE'}"
                @click="connectDevice = 'MOBILE'">手機號碼</el-button>
                @click="connectDevice = 'MOBILE'; regenerateImgOfVerification()">手機號碼</el-button>
              <el-button
                :class="{ 'active': connectDevice === 'EMAIL'}"
                @click="connectDevice = 'EMAIL'">Email</el-button>
                @click="connectDevice = 'EMAIL'; regenerateImgOfVerification()">Email</el-button>
            </el-row>
          </div>

@@ -58,11 +58,31 @@
            </div>
          </div>

          <div class="pam-paragraph" v-if="(!showPhoneOtpCodeField && !showEmailVerifyField)">
            <div class="pam-consultant-login__title">
              <div>圖型驗證碼 <span class="text--dark-blue fs-16">(區分大小寫)</span></div>
              <div class="text--primary fs-16 cursor--pointer fix-chrome-click--issue"
                style="margin-left: 16px"
                @click="regenerateImgOfVerification">重新產生</div>
            </div>
            <div class="pam-consultant-login__verifyBlock mt-10">
              <div class="w-55">
                <input type="text"
                  v-model="verificationCode"
                  maxlength="4"
                  class="pam-consultant-login__input">
              </div>
              <div class="pam-consultant-login__verifyImg">
                <img :src="imgSrc" alt="驗證碼">
              </div>
            </div>
          </div>

          <!-- mobile 驗證碼 -->
          <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>
@@ -75,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>
@@ -88,22 +108,23 @@
                  @click="resentOtp('MOBILE')"
                  icon="icon-arrow"
                >
                  重發驗證碼<span
                  重發 OTP 驗證碼<span
                    class="pam-field-title__hint pl-5"
                    v-if="otpResendCounter !== 0"
                  >({{ otpResendCounter }})</span>
                </el-button>

              </el-row>
            </div>

            <el-row>
              <el-button
                  v-if="onPhoneVerifyStep === 'APPLY_OTP'"
                  :disabled="!phoneNumber || !phoneValid"
                  :disabled="!phoneNumber || !phoneValid || verificationCode.length !== 4"
                  @click="applyOtpVerification('MOBILE')"
                  icon="icon-arrow"
                >
                  發送驗證碼
                  發送 OTP 驗證碼
                </el-button>
            </el-row>

@@ -113,7 +134,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>
@@ -126,11 +147,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
@@ -138,20 +159,21 @@
                icon="icon-arrow"
                @click="resentOtp('EMAIL')"
              >
                重發驗證碼<span
                重發 OTP 驗證碼<span
                    v-if="emailResendCounter !== 0"
                    class="pam-field-title__hint pl-5"
                    class="pam-｀field-title__hint pl-5"
                  >({{ emailResendCounter }})</span>
              </el-button>
            </el-row>

            <el-row v-show="!showEmailVerifyField">
            <el-row>
              <el-button
                  :disabled="!email || !emailValid"
                  v-if="onEmailVerifyResendStatus === 'APPLY_OTP'"
                  :disabled="!email || !emailValid || verificationCode.length !== 4"
                  @click="applyOtpVerification('EMAIL')"
                  icon="icon-arrow"
                >
                  發送驗證碼
                  發送 OTP 驗證碼
                </el-button>
            </el-row>
          </template>
@@ -358,6 +380,9 @@
  emailResendInterval: any;
  emailOtpIndexKey!: string;

  verificationCode = '';
  imgSrc = '';

  autoRedirectCounter = 3;
  autoRedirectInterval: any;

@@ -386,6 +411,7 @@
  mounted() {
    this.parsePhoneOtpTimeFromStorage();
    this.parseEmailOtpTimeFromStorage();
    this.regenerateImgOfVerification();
  }

  private parsePhoneOtpTimeFromStorage() {
@@ -424,6 +450,14 @@
  }

  //////////////////////////////////////////////////////////

  regenerateImgOfVerification(): void {
    loginService.getImgOfVerification().then( imgOfBase64 => {
        this.imgSrc = imgOfBase64;
        this.verificationCode = '';
      }
    );
  };

  //////////////////// 登入
  login() {
@@ -499,7 +533,7 @@
      loginType: isMobile ? 'SMS' : 'EMAIL',
      account: isMobile ? this.phoneNumber : this.email,
    }
    loginService.sendOtp(loginInfo).then(otpInfo => {
    loginService.sendOtp(loginInfo, this.verificationCode).then(otpInfo => {
      if (otpInfo.success) {
        this.storageOtpTime(type, otpInfo);
        this.startOtpSetting(type);
@@ -536,6 +570,9 @@
      this.emailCounterSec -= 1;
      if (this.emailResendCounter !== 0) {
        this.emailResendCounter -= 1;
        if (this.emailResendCounter === 0) {
          // this.regenerateImgOfVerification();
        }
      }
      if (this.emailCounterSec === 0) {
        clearInterval(this.emailResendInterval);
@@ -548,16 +585,18 @@
      this.otpCounterSec -= 1;
      if (this.otpResendCounter !== 0) {
        this.otpResendCounter -= 1;
        if (this.otpResendCounter === 0) {
          // this.regenerateImgOfVerification();
        }
      }
      if (this.otpCounterSec === 0) {
        clearInterval(this.otpInterval)
        clearInterval(this.otpInterval);
      }
    }, 1000)
  }

  resentOtp(type: string) {
    this.resetOtpSetting(type);
    this.applyOtpVerification(type);
  }

  deleteOtpInfo(type: string) {
@@ -572,6 +611,7 @@
      this.emailOtpCode = '';
    }
    this.removeOtpTime();
    this.regenerateImgOfVerification();
  }

  private resetOtpSetting(type: string) {
@@ -579,10 +619,12 @@
      clearInterval(this.otpInterval);
      this.otpResendCounter = 30;
      this.otpCounterSec = 300;
      this.onPhoneVerifyStep = 'APPLY_OTP';
    } else {
      clearInterval(this.emailResendInterval);
      this.emailResendCounter = 30;
      this.emailCounterSec = 300;
      this.onEmailVerifyResendStatus = 'APPLY_OTP';
    }
  }

@@ -780,4 +822,82 @@
      font-size: 16px;
    }
  }
    .pam-consultant-login {
    margin: auto;
    width: 336px;
    font-size: 20px;
    color: $PRIMARY_BLACK;

    &__header {
      text-align: center;
      font-size: 24px;
      font-weight: bold;
      letter-spacing: 1.2;
      color: $PRIMARY_BLACK;
    }

    &__title {
      display: flex;
      // justify-content: space-between;
      align-items: center;
    }

    &__input {
      width: 100%;
      outline: 0;
      border: 1px solid #CCCCCC;
      border-radius: 10px;
      font-size: 20px;
      height: 50px;
      padding: 10px 90px 10px 15px;
      overflow: auto;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;

      &Icon {
        position: absolute;
        display: flex;
        align-items: center;
        top: 15px;
        right: 15px;
      }
    }

    &__forgot-password {
      color: $PRIMARY_RED;
      text-decoration: none;
      font-size: 16px;
    }

    &__verifyBlock {
      display: flex;
      // justify-content: space-between;
    }

    &__verifyImg {
      margin-left: 8px;
      width: 126px;
      height: 50px;
      border:1px #cccccc solid;
      img {
        width: 100%;
        height: 100%;
      }
    }

    &__confirmBlock {
      display: flex;
      justify-content: center;
    }

    &__confirm {
      color: $PRIMARY_WHITE;
      width: 80px;
      height: 50px;
      border-radius: 30px;
      border: 1px solid $LIGHT_GREY;
      background-color: $PRIMARY_RED;
    }
  }
</style>