From abfd26bb700d93a92da6a04703b0187d4acaaeb5 Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期三, 22 十二月 2021 10:13:02 +0800
Subject: [PATCH] refactor: move ts folder to shared folder

---
 PAMapp/pages/login/index.vue |  207 ++++++++++++++++++++++++++++-----------------------
 1 files changed, 114 insertions(+), 93 deletions(-)

diff --git a/PAMapp/pages/login/index.vue b/PAMapp/pages/login/index.vue
index 93525b9..8e60407 100644
--- a/PAMapp/pages/login/index.vue
+++ b/PAMapp/pages/login/index.vue
@@ -157,7 +157,6 @@
           </template>
       </div>
 
-
       <el-row type="flex" justify="center" class="pam-login-page__action-bar mt-30">
         <el-button
           type="primary"
@@ -168,15 +167,13 @@
         </el-button>
       </el-row>
 
-      <el-dialog
-        title="甇∟�雿輻��"
-        :custom-class="'pam-register-dialog'"
-        :visible.sync="registerDialogVisible"
-        :fullscreen="true"
-        :close-on-click-modal="false"
-        :show-close="false"
-        center>
-        <span>
+      <PopUpFrame
+        :isOpen.sync="registerDialogVisible"
+        :dialogWidth="'90%'"
+        class="pam-register-dialog"
+        @closePopUp="isReadContract = false"
+      >
+          <div class="subTitle text--center mb-20">甇∟�雿輻��</div>
           <el-row>
             <input
               class="pam-input"
@@ -194,13 +191,13 @@
           </el-row>
           <el-row class="pt-10">
             <div
+              v-if="registerDialogVisible"
               class="mdTxt pam-register-dialog__contract"
               ref="contract"
               @scroll="detectContractReadStatus">
               <h3>����犖鞈��鈭��</h3>
               <p class="mt-10">
-              �摰�犖鞈��風瘜��������犖鞈����������
-              �銝�����
+              �摰�犖鞈��風瘜��������犖鞈���������銝�����
               <p>
 
               <p class="mt-10">
@@ -219,13 +216,11 @@
               </p>
 
               <p class="mt-10">
-              �������������平���暑�������銝剛瘞���������犖鞈�
-              ����
+              �������������平���暑�������銝剛瘞���������犖鞈���
               </p>
 
               <p class="mt-10">
-              鈭���������摰���甈∩誑憭�璆凋�撱��恐撠����誑��隞
-              ���������銋����嚗�������犖鞈���
+              鈭���������摰���甈∩誑憭�璆凋�撱��恐撠����誑��隞���������銋����嚗�������犖鞈���
               </p>
 
               <p class="mt-10">
@@ -271,23 +266,23 @@
               </label>
             </div>
           </el-row>
-        </span>
-        <span slot="footer" class="dialog-footer">
-          <el-button
-            type="primary"
-            :disabled="!name || !agreeContract || !isReadContract"
-            @click="applyAccount"
-            >撱箇�撣唾��
-          </el-button>
-        </span>
-      </el-dialog>
+          <div class="text--center mt-10">
+            <el-button
+              type="primary"
+              :disabled="!name || !agreeContract || !isReadContract"
+              @click="applyAccount"
+              >撱箇�撣唾��
+            </el-button>
+          </div>
+      </PopUpFrame>
 
       <PopUpFrame class="pam-popUpFrame"
-        :isOpen.sync="emailOtpConfirmVisable">
+        :isOpen.sync="emailOtpConfirmVisable"
+      >
         <div class="pam-popUp-title text--center">撌脣������</div>
         <div class="pam-popUp-title text--center">{{email}}</div>
         <div class="pam-popUp-title text--center">隢��摮隞嗡蒂摰������</div>
-        <div class="pam-popUp-confirm-bolck pam-paragraph">
+        <div class="pam-popUp-confirm-bolck mt-30">
           <div class="text--center">
             <el-button
                 type="primary"
@@ -298,29 +293,37 @@
       </PopUpFrame>
 
       <PopUpFrame class="pam-popUpFrame"
-        :isOpen.sync="registerSuccessConfirmVisable">
+        :isOpen.sync="registerSuccessConfirmVisable"
+        @closePopUp="confirmApplySuccess"
+      >
           <div class="pam-popUp-title text--center">
             甇∟�����������垣閰ｇ�“���誑�����{ connectDevice === 'MOBILE' ? '����Ⅳ' : 'Email'}}���蝜�
           </div>
-          <div class="pam-popUp-confirm-bolck pam-paragraph">
+          <div class="pam-popUp-txt text--center mb-10 mt-5"
+          >�撠�歲��...{{autoRedirectCounter}}蝘�</div>
+          <div class="pam-popUp-confirm-bolck mt-30">
             <div class="text--center">
               <el-button
                   type="primary"
-                  @click="confirmApplySuccess"
+                  @click="registerSuccessConfirmVisable = false"
               >������</el-button>
             </div>
           </div>
       </PopUpFrame>
 
       <PopUpFrame class="pam-popUpFrame"
-        :isOpen.sync="phoneSuccessConfirmVisable">
-          <div class="pam-popUp-title text--center mb-50"
+        :isOpen.sync="phoneSuccessConfirmVisable"
+        @closePopUp="confirmApplySuccess"
+      >
+          <div class="pam-popUp-title text--center"
           >甇∟�������</div>
-          <div class="pam-popUp-confirm-bolck pam-paragraph">
+          <div class="pam-popUp-txt text--center mb-30 mt-5 xsTxt"
+          >�撠�歲��...{{autoRedirectCounter}}蝘�</div>
+          <div class="pam-popUp-confirm-bolck mt-30">
             <div class="text--center">
               <el-button
                   type="primary"
-                  @click="confirmApplySuccess"
+                  @click="phoneSuccessConfirmVisable = false"
               >������</el-button>
             </div>
           </div>
@@ -332,9 +335,14 @@
 <script lang="ts">
 import { namespace } from 'nuxt-property-decorator';
 import { Vue, Component, Ref } from 'vue-property-decorator';
-import { LoginRequest, LoginVerify, loginVerify, OtpInfo, register, RegisterInfo, sendOtp } from '~/assets/ts/api/consultant';
-import ErrorMessageBox from '~/assets/ts/errorService';
-import { Role } from '~/assets/ts/models/enum/Role';
+import ErrorMessageBox from '~/shared/errorService';
+import { OtpErrorCode } from '~/shared/models/enum/otpErrorCode';
+import { Role } from '~/shared/models/enum/role';
+import { LoginRequest } from '~/shared/models/loginRequest.model';
+import { LoginVerify } from '~/shared/models/loginVerify.model';
+import { OtpInfo } from '~/shared/models/otpInfo.model';
+import { RegisterInfo } from '~/shared/models/registerInfo';
+import loginService from '~/shared/services/login.service';
 
 const roleStorage = namespace('localStorage');
 
@@ -349,18 +357,21 @@
   phoneNumber = '';
   otpCode = '';
   onPhoneVerifyStep: 'APPLY_OTP' | 'INPUT_OTP' | 'SUBMIT_OTP' = 'APPLY_OTP';
-  otpCounterSec = 900;
+  otpCounterSec = 300;
   otpResendCounter = 30;
   otpInterval: any;
   phoneOtpInfo!: OtpInfo;
 
   email = '';
   onEmailVerifyResendStatus: 'APPLY_OTP' | 'CAN_RESEND' = 'APPLY_OTP';
-  emailCounterSec = 900;
+  emailCounterSec = 300;
   emailResendCounter = 30;
   emailOtpCode = '';
   emailResendInterval: any;
   emailOtpInfo!: OtpInfo;
+
+  autoRedirectCounter = 3;
+  autoRedirectInterval: any;
 
   name = '';
   agreeContract = false;
@@ -374,6 +385,9 @@
 
   applyAccount_onAction = false;
 
+  previousPath = '';
+
+  /////////////////////////////////////////////////////
   mounted() {
     const phoneOtpTime = localStorage.getItem('phoneOtpTime');
     const emailOtpTime = localStorage.getItem('emailOtpTime');
@@ -386,6 +400,22 @@
       this.emailDiffTime(parseEmailOtpTime);
     }
   }
+
+  beforeRouteEnter (to, from, next) {
+      next(vm => {
+        console.log(from.path, 'beforeRouteEnter');
+        vm.previousPath = from.path;
+      })
+  }
+
+  destroyed() {
+    this.removeOtpTime();
+    clearInterval(this.otpInterval);
+    clearInterval(this.emailResendInterval);
+    clearInterval(this.autoRedirectInterval);
+  }
+
+  //////////////////////////////////////////////////////////
 
   detectContractReadStatus(event: any): void {
     const scrollTop = Math.round(event.target.scrollTop);
@@ -437,11 +467,14 @@
       loginType: isMobile ? 'SMS' : 'EMAIL',
       account: isMobile ? this.phoneNumber : this.email,
     }
-    sendOtp(loginInfo).then(otpInfo => {
+    loginService.sendOtp(loginInfo).then(otpInfo => {
       if (otpInfo.success) {
         this.storageOtpTime(type, otpInfo);
         this.startOtpSetting(type);
         this.startOtpCount(type);
+      } else {
+        const errorMsg = OtpErrorCode[otpInfo.failCode] ? OtpErrorCode[otpInfo.failCode]:'OTP蝟餌絞�隤�';
+        ErrorMessageBox(errorMsg);
       }
     });
   };
@@ -473,10 +506,11 @@
     this.applyAccount_onAction = true;
     const registerInfo = this.setRegisterInfo();
 
-    register(registerInfo).then(res => {
-      this.storageIdToken(res.data.id_token);
+    loginService.register(registerInfo).then(res => {
+      this.storageIdToken(res.id_token);
       this.storageRole(Role.USER);
       this.storagePhoneOrEmail(registerInfo);
+      this.autoRedirect();
       this.registerSuccessConfirmVisable = true;
     }).catch(() => {
       this.applyAccount_onAction = false;
@@ -486,25 +520,30 @@
   confirmApplySuccess(): void {
     this.phoneSuccessConfirmVisable = false;
     this.registerSuccessConfirmVisable = false;
-    this.$router.go(-1);
+    this.redirect();
   }
 
   login() {
     const login: LoginVerify = this.setLoginInfo();
     this.removeOtpTime();
-    loginVerify(login).then(res => {
-      this.storageIdToken(res.data.id_token);
+    loginService.loginVerify(login).then(res => {
+      this.storageIdToken(res.id_token);
       this.storageRole(Role.USER);
       this.phoneSuccessConfirmVisable = true;
+      this.autoRedirect();
       this.storagePhoneOrEmail(this.setRegisterInfo());
     }).catch(error => {
       this.checkHttpErrorStatus(error);
     });
   }
+
+
+  //////////////////////////////////////////////////////////////////
   private checkHttpErrorStatus(error:any):void{
     switch (error.response.status) {
         case 401:
-          ErrorMessageBox('',error);
+          const errorMsg = OtpErrorCode[error.response?.data?.detail] ? OtpErrorCode[error.response?.data?.detail]:'OTP蝟餌絞�隤�';
+          ErrorMessageBox(errorMsg);
           break;
         case 403:
           this.registerDialogVisible = true;
@@ -521,10 +560,22 @@
       }
   }
 
-  destroyed() {
-    this.removeOtpTime();
-    clearInterval(this.otpInterval);
-    clearInterval(this.emailResendInterval);
+  private autoRedirect() {
+    this.autoRedirectInterval = setInterval(() => {
+      this.autoRedirectCounter -= 1;
+
+      if (this.autoRedirectCounter === 0) {
+        clearInterval(this.autoRedirectInterval);
+        this.redirect();
+      }
+    }, 1000)
+  }
+
+  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('/');
   }
 
   private phoneDiffTime(parseOtpTime: any) {
@@ -567,11 +618,11 @@
     if (type === 'MOBILE') {
       clearInterval(this.otpInterval);
       this.otpResendCounter = 30;
-      this.otpCounterSec = 900;
+      this.otpCounterSec = 300;
     } else {
       clearInterval(this.emailResendInterval);
       this.emailResendCounter = 30;
-      this.emailCounterSec = 900;
+      this.emailCounterSec = 300;
     }
   }
 
@@ -700,10 +751,11 @@
   }
 
 .pam-register-dialog__contract {
-  $DEVICE_EXTRA_HEIGHT: 42px;
+  $DEVICE_EXTRA_HEIGHT: 80px;
   $ALIGN_PADDING: 60px;
-  $TOP_CONTENT_HEIGHT: 186px;
-  $BOTTOM_CONTENT_HEIGHT: 131px;
+  $TOP_CONTENT_HEIGHT: 211px;
+  $BOTTOM_CONTENT_HEIGHT: 141px;
+  // text-align:start;
   max-height: calc(100vh - $DEVICE_EXTRA_HEIGHT - $ALIGN_PADDING - $TOP_CONTENT_HEIGHT - $BOTTOM_CONTENT_HEIGHT);
   overflow-y: scroll;
   border-radius: 6px;
@@ -713,18 +765,6 @@
     height: 335px;
   }
 }
-
-  .pam-register-dialog__contract {
-    $DEVICE_EXTRA_HEIGHT: 42px;
-    $ALIGN_PADDING: 60px;
-    $TOP_CONTENT_HEIGHT: 186px;
-    $BOTTOM_CONTENT_HEIGHT: 131px;
-    max-height: calc(100vh - $DEVICE_EXTRA_HEIGHT - $ALIGN_PADDING - $TOP_CONTENT_HEIGHT - $BOTTOM_CONTENT_HEIGHT);
-    overflow-y: scroll;
-    border-radius: 6px;
-    border: 1px solid #707070;
-    padding: 20px;
-  }
 
   .pam-radio {
     color: $PRIMARY_RED;
@@ -738,31 +778,6 @@
     i {
       font-size: 27px;
       padding-right: 5px;
-    }
-  }
-
-  .pam-register-dialog {
-    padding: 30px 20px;
-    display: flex;
-    flex-direction: column;
-    border-radius: 0;
-    &.el-dialog {
-      border-radius: 0;
-    }
-    .el-dialog__header {
-      padding: 0;
-      margin-bottom: 30px;
-      .el-dialog__title {
-        @extend .subTitle;
-      }
-    }
-    .el-dialog__body {
-      flex: 1;
-      padding: 0;
-      margin-bottom: 30px;
-    }
-    .el-dialog__footer {
-      padding: 0 !important;
     }
   }
 
@@ -781,6 +796,12 @@
       font-size: 20px;
       line-height: 27px;
   }
+
+  .pam-popUp-txt {
+    font-size: 18px;
+    color: $MID_GREY;
+  }
+
   .disabled {
     color: #A7A8AA;
   }

--
Gitblit v1.8.0