From 98891d1d1bcaa414f336b9c05ad94d39fe9cb1bc Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期一, 29 十一月 2021 15:34:57 +0800
Subject: [PATCH] Merge branch 'master' of https://192.168.0.10:8443/r/pcalife/PAM

---
 PAMapp/pages/login/index.vue |   57 +++++++++++++++++++++++++++++++++++++++++++--------------
 1 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/PAMapp/pages/login/index.vue b/PAMapp/pages/login/index.vue
index 84e02bd..341d3f9 100644
--- a/PAMapp/pages/login/index.vue
+++ b/PAMapp/pages/login/index.vue
@@ -152,7 +152,7 @@
         <el-button
           type="primary"
           v-if="(connectDevice === 'MOBILE' && onPhoneVerifyStep === 'INPUT_OTP') || (connectDevice === 'EMAIL' && onEmailVerifyResendStatus === 'CAN_RESEND')"
-          :disabled="isLoginBtnDisabled"
+          :disabled="isSubmitBtnDisabled"
           @click="login">
           �
         </el-button>
@@ -161,7 +161,7 @@
       <el-dialog
         title="甇∟�雿輻��"
         :custom-class="'pam-register-dialog'"
-        :visible.sync="registerDialogVisable"
+        :visible.sync="registerDialogVisible"
         :fullscreen="true"
         :close-on-click-modal="false"
         :show-close="false"
@@ -185,7 +185,8 @@
           <el-row class="pt-10">
             <div
               class="mdTxt pam-register-dialog__contract"
-              @scroll="detectContructReadStatus">
+              ref="contract"
+              @scroll="detectContractReadStatus">
               <h3>����犖鞈��鈭��</h3>
               <p class="mt-10">
               �摰�犖鞈��風瘜��������犖鞈����������
@@ -248,15 +249,15 @@
           </el-row>
           <el-row class="pt-30">
             <div class="pam-agree-radio">
-              <label for="agreeControct" class="pam-radio"
+              <label for="agreeContract" class="pam-radio"
                 :class="{disabled: !isReadContract}">
                 <input
                   type="radio"
-                  id="agreeControct"
-                  @click="agreeControct = !agreeControct"
+                  id="agreeContract"
+                  @click="agreeContract = !agreeContract"
                   :disabled="!isReadContract"
-                  value="agreeControct">
-                  <i :class="agreeControct ?'icon-checkbox-1': 'icon-checkbox'"></i>����蒂蝜潛��
+                  value="agreeContract">
+                  <i :class="agreeContract ?'icon-checkbox-1': 'icon-checkbox'"></i>����蒂蝜潛��
               </label>
             </div>
           </el-row>
@@ -264,7 +265,7 @@
         <span slot="footer" class="dialog-footer">
           <el-button
             type="primary"
-            :disabled="!name || !agreeControct || !isReadContract"
+            :disabled="!name || !agreeContract || !isReadContract"
             @click="applyAccount"
             >撱箇�撣唾��
           </el-button>
@@ -320,7 +321,7 @@
 
 <script lang="ts">
 import { namespace } from 'nuxt-property-decorator';
-import { Vue, Component } from 'vue-property-decorator';
+import { Vue, Component, Ref } from 'vue-property-decorator';
 import { LoginRequest, LoginVerify, loginVerify, OtpInfo, register, RegisterInfo, sendOtp } from '~/assets/ts/api/consultant';
 import { Role } from '~/assets/ts/models/enum/Role';
 
@@ -330,6 +331,7 @@
 export default class Login extends Vue {
   @roleStorage.Mutation storageIdToken!: (token:string) => void;
   @roleStorage.Mutation storageRole!: (role:string) => void;
+  @Ref('contract') readonly contract!: any;
 
   connectDevice: 'MOBILE' | 'EMAIL' = 'MOBILE';
 
@@ -350,13 +352,13 @@
   emailOtpInfo!: OtpInfo;
 
   name = '';
-  agreeControct = false;
+  agreeContract = false;
   isReadContract = false;
 
   phoneSuccessConfirmVisable = false;
   emailOtpConfirmVisable = false;
 
-  registerDialogVisable = false;
+  registerDialogVisible = false;
   registerSuccessConfirmVisable = false;
 
   applyAccount_onAction = false;
@@ -374,13 +376,19 @@
     }
   }
 
-  detectContructReadStatus(event: any): void {
+  detectContractReadStatus(event: any): void {
     const scrollTop = Math.round(event.target.scrollTop);
     const height = event.target.scrollHeight - event.target.clientHeight;
     if (Math.floor(scrollTop/10) === (Math.floor(height/10))) {
       this.isReadContract = true;
     }
   };
+
+  get isSubmitBtnDisabled(): boolean {
+    return this.connectDevice === 'MOBILE'
+      ? (!this.otpCode || !this.phoneNumber || !this.phoneValid || !this.otpCounterSec)
+      : (!this.emailOtpCode || !this.email || !this.emailValid || !this.emailCounterSec)
+  }
 
   get phoneCounter() {
     let min = Math.floor(this.otpCounterSec / 60);
@@ -480,7 +488,13 @@
       this.storagePhoneOrEmail(this.setRegisterInfo());
     }).catch(error => {
       if (error.response.status === 401) {
-        this.registerDialogVisable = true;
+        this.registerDialogVisible = true;
+        setTimeout(() => {
+          const isScrollBarNeedless = this.contract.scrollHeight <= this.contract.clientHeight;
+          if (isScrollBarNeedless) {
+            this.isReadContract = true;
+          }
+        }, 1000);
       }
     })
   }
@@ -648,6 +662,21 @@
     }
   }
 
+.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;
+  @include desktop {
+    height: 335px;
+  }
+}
+
   .pam-register-dialog__contract {
     $DEVICE_EXTRA_HEIGHT: 42px;
     $ALIGN_PADDING: 60px;

--
Gitblit v1.8.0