From d671c283604d805d528e42cca6560a1a271278e6 Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期五, 26 八月 2022 10:59:34 +0800
Subject: [PATCH] fix: 背景自動執行 regenerateImgOfVerification 引發的畫面卡死問題

---
 PAMapp/pages/login/index.vue |  224 +++++++++++++++++++++++++++++++++++++++++---------------
 1 files changed, 164 insertions(+), 60 deletions(-)

diff --git a/PAMapp/pages/login/index.vue b/PAMapp/pages/login/index.vue
index 64a188b..6bada8e 100644
--- a/PAMapp/pages/login/index.vue
+++ b/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>
@@ -195,61 +217,41 @@
               class="mdTxt pam-register-dialog__contract"
               ref="contract"
               @scroll="detectContractReadStatus">
-              <h3>����犖鞈��鈭��</h3>
+              <h3>靽�犖憯賭��隞賣�������犖鞈��鈭��</h3>
               <p class="mt-10">
-              �摰�犖鞈��風瘜��������犖鞈���������銝�����
+              靽�犖憯賭��隞賣���嚗�迂��������犖鞈��風瘜�誑銝迂����洵�璇洵鈭��洵�璇洵銝�������蝡臬�銝�����蝡航底�嚗�
               <p>
 
               <p class="mt-10">
-              銝����銝��犖鞈��嚗�����僑�����澈���絞銝�蝺刻���批�璆准����
-              ��蝯⊥撘�(��雿���閰梯�Ⅳ�-MAIL����極雿��)蝑��隞�誑��
-              ���霅��犖銋����
+              銝���犖鞈�������市�瘜����������摰����犖鞈汙銋����澈��Ⅱ隤�
+              鈭箄澈靽 (001)��(040)�����平靘�成閬����鴽日�閬���銋���坐���(059)�����撮鴾��隞�������(069)��祥��恥�蝞∴坐�����(090)�雯鴾瑁頃���隞摮�����(148)�矽��絞閮��弦����(157)�隞�����平�閮��������摰�平���(181)��
               <p>
 
               <p class="mt-10">
-              鈭������犖鞈��風瘜����誘銋�������蝘��風�蝑�����
-              ���������犖鞈���
+              鈭�����犖鞈汙嚗�祕憪�����Ⅳ�摮隞嗡縑蝞勗�隞��撟喳慦�“�����垣閰X����閬������犖鞈���
               <p>
 
               <p class="mt-10">
-              銝���������������������犖鞈���
+              銝��犖鞈汙鴽銋�������情�撘��
+              (銝�)������膩����翵平���敹����成閬��靽������
+              (鈭�)���嚗�犖鞈��撠情���銋����
+              (銝�)撠情嚗������矽�甈����������撟喳�����誨��嚗������蝡舫���“����撅砌��嚗��
+              (���)�撘��瘜成閬����撘��
               </p>
 
               <p class="mt-10">
-              �������������平���暑�������銝剛瘞���������犖鞈���
+              ��������洵銝�������蝡臬停���靽����蝡臭��犖鞈汙敺�蝙銋���撘��
+              (銝�)敺���翵蝙銋����
+              �����閰U���閬賣���ˊ蝯西�ˊ���
+              ����隢�����迤��
+              ����隢��迫�����坐����������
+              (鈭�)翵蝙甈��撘����蝡臬�������祥摰X������� 0809-0809-68 銵蝙銝膩甈��(撠������ : �曹� ~ �曹�� 08:00-20:00 ���勗����� 09:00-17:30嚗������曹�-�望24撠��)��
               </p>
 
               <p class="mt-10">
-              鈭���������摰���甈∩誑憭�璆凋�撱��恐撠����誑��隞���������銋����嚗�������犖鞈���
+              鈭�蝡臬�銵捱摰�����犖鞈����嚗���蝡舀������蒂��撟喳����犖鞈����撌脣���膩鈭������蝡臭���������迤蝣箔�������瘜�蝙��撟喳�脰�“�������垣閰Y�����
               </p>
 
-              <p class="mt-10">
-              ���靘�犖鞈��風瘜洵 3 璇���停����犖鞈�����蝙銋���嚗�
-              (銝�) �閰X���閬賬��
-              (鈭�) 隢�ˊ蝯西�ˊ���
-              (銝�) 隢����甇���
-              (���) 隢��迫����������
-              (鈭�) 隢����
-              ����蝙銝膩甈��撠������������������痊隞颯�靘�
-              �犖鞈��風瘜洵 14 璇�������銵雿平鞎餌��
-              </p>
-
-              <p class="mt-10">
-              銝������迤蝣箔��犖鞈�����瘜����摰�����平����
-              </p>
-
-              <p class="mt-10">
-              �����平���閬���隞�������犖鞈����������銋痊��
-              </p>
-
-              <p class="mt-10">
-              銋��閫�甇支����蝚血��犖鞈��風瘜����������������迨���
-              ��嚗�敺��撽��
-              �犖鞈�������
-              銝��鈭箏歇�����眼���膩��鈭���
-              鈭�鈭箏��眼����������鈭箔��犖鞈��誑��隞����������
-              ���������
-              </p>
             </div>
           </el-row>
           <el-row class="pt-30">
@@ -355,6 +357,9 @@
   @roleStorage.Mutation
   storageRole!: (role:string) => void;
 
+  @roleStorage.Mutation
+  storageUserInfo!: (userInfo: RegisterInfo) => void;
+
   @Ref('contract') readonly contract!: any;
 
   connectDevice: 'MOBILE' | 'EMAIL' = 'MOBILE';
@@ -374,6 +379,9 @@
   emailOtpCode = '';
   emailResendInterval: any;
   emailOtpIndexKey!: string;
+
+  verificationCode = '';
+  imgSrc = '';
 
   autoRedirectCounter = 3;
   autoRedirectInterval: any;
@@ -396,7 +404,6 @@
 
   beforeRouteEnter (to, from, next) {
       next(vm => {
-        console.log(from.path, 'beforeRouteEnter');
         vm.previousPath = from.path;
       })
   }
@@ -404,6 +411,7 @@
   mounted() {
     this.parsePhoneOtpTimeFromStorage();
     this.parseEmailOtpTimeFromStorage();
+    this.regenerateImgOfVerification();
   }
 
   private parsePhoneOtpTimeFromStorage() {
@@ -442,6 +450,14 @@
   }
 
   //////////////////////////////////////////////////////////
+
+  regenerateImgOfVerification(): void {
+    loginService.getImgOfVerification().then( imgOfBase64 => {
+        this.imgSrc = imgOfBase64;
+        this.verificationCode = '';
+      }
+    );
+  };
 
   //////////////////// ��
   login() {
@@ -498,7 +514,6 @@
   private redirect() {
     const backToPrevious = ['questionnaire', 'myConsultantList'];
     const find = backToPrevious.findIndex(item => this.previousPath.includes(item));
-    console.log(this.previousPath, find, 'redirect');
     find > -1 ? this.$router.go(-1) : this.$router.push('/');
   }
 
@@ -518,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);
@@ -555,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);
@@ -567,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) {
@@ -591,6 +611,7 @@
       this.emailOtpCode = '';
     }
     this.removeOtpTime();
+    this.regenerateImgOfVerification();
   }
 
   private resetOtpSetting(type: string) {
@@ -598,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';
     }
   }
 
@@ -629,14 +652,17 @@
           }, 1000);
           break;
         default:
-          messageBoxService.showErrorMessage('',error);
+          const defaultErrorMsg = OtpErrorCode[error.response?.data?.title]
+          messageBoxService.showErrorMessage('',defaultErrorMsg);
           break;
       }
   }
 
   private storagePhoneOrEmail(registerInfo:RegisterInfo):void{
     const info = {...registerInfo, time: new Date()}
-    localStorage.setItem('userInfo',JSON.stringify(info));
+  // storageUserInfo!: (userInfo: RegisterInfo) => void;
+    this.storageUserInfo(info);
+    // localStorage.setItem('userInfo',JSON.stringify(info));
   }
 
   private removeOtpTime() {
@@ -796,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>

--
Gitblit v1.8.0