From 508163a40bbd31520aab762d5be747c43af09e50 Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期三, 20 七月 2022 14:13:53 +0800
Subject: [PATCH] fix: [login] 客戶登入

---
 PAMapp/pages/login/index.vue |  116 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 files changed, 112 insertions(+), 4 deletions(-)

diff --git a/PAMapp/pages/login/index.vue b/PAMapp/pages/login/index.vue
index b9d611e..e9b152d 100644
--- a/PAMapp/pages/login/index.vue
+++ b/PAMapp/pages/login/index.vue
@@ -58,6 +58,26 @@
             </div>
           </div>
 
+          <div class="pam-paragraph">
+            <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">
@@ -99,7 +119,7 @@
             <el-row>
               <el-button
                   v-if="onPhoneVerifyStep === 'APPLY_OTP'"
-                  :disabled="!phoneNumber || !phoneValid"
+                  :disabled="!phoneNumber || !phoneValid || !verificationCode || verificationCode.length !== 4"
                   @click="applyOtpVerification('MOBILE')"
                   icon="icon-arrow"
                 >
@@ -147,7 +167,7 @@
 
             <el-row v-show="!showEmailVerifyField">
               <el-button
-                  :disabled="!email || !emailValid"
+                  :disabled="!email || !emailValid || !verificationCode || verificationCode.length !== 4"
                   @click="applyOtpVerification('EMAIL')"
                   icon="icon-arrow"
                 >
@@ -358,6 +378,9 @@
   emailResendInterval: any;
   emailOtpIndexKey!: string;
 
+  verificationCode = '';
+  imgSrc = '';
+
   autoRedirectCounter = 3;
   autoRedirectInterval: any;
 
@@ -386,6 +409,7 @@
   mounted() {
     this.parsePhoneOtpTimeFromStorage();
     this.parseEmailOtpTimeFromStorage();
+    this.regenerateImgOfVerification();
   }
 
   private parsePhoneOtpTimeFromStorage() {
@@ -425,11 +449,17 @@
 
   //////////////////////////////////////////////////////////
 
+  regenerateImgOfVerification(): void {
+    loginService.getImgOfVerification().then( imgOfBase64 =>
+      this.imgSrc = imgOfBase64
+    );
+  };
+
   //////////////////// ��
   login() {
     const login: LoginVerify = this.setLoginInfo();
     this.removeOtpTime();
-    loginService.loginVerify(login, this.otpCode).then(res => {
+    loginService.loginVerify(login).then(res => {
       this.storageIdToken(res.id_token);
       this.storageRole(Role.USER);
       this.phoneSuccessConfirmVisable = true;
@@ -499,7 +529,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);
@@ -780,4 +810,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