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