From 226df351f1f02838566659923b3bc1b84eb5b459 Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期一, 29 十一月 2021 11:44:36 +0800
Subject: [PATCH] fixed#83152: 個資同意按鍵偵測bug

---
 PAMapp/pages/login/index.vue |   47 +++++++++++++++++++++++++++++++----------------
 1 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/PAMapp/pages/login/index.vue b/PAMapp/pages/login/index.vue
index 865dc7f..f1cb6f7 100644
--- a/PAMapp/pages/login/index.vue
+++ b/PAMapp/pages/login/index.vue
@@ -119,8 +119,9 @@
       <el-row type="flex" justify="center" class="pam-login-page__action-bar mt-30">
         <el-button
           type="primary"
-          v-if="connectDevice === 'MOBILE' && onPhoneVerifyStep === 'INPUT_OTP'"
-          :disabled="!otpCode || !phoneNumber || !phoneValid"
+          v-if="connectDevice === 'MOBILE'
+              && onPhoneVerifyStep === 'INPUT_OTP'"
+          :disabled="isSubmitBtnDisabled"
           @click="phoneLogin">
           �
         </el-button>
@@ -129,7 +130,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"
@@ -153,7 +154,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">
               �摰�犖鞈��風瘜��������犖鞈����������
@@ -216,15 +218,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>
@@ -232,7 +234,7 @@
         <span slot="footer" class="dialog-footer">
           <el-button
             type="primary"
-            :disabled="!name || !agreeControct || !isReadContract"
+            :disabled="!name || !agreeContract || !isReadContract"
             @click="applyAccount"
             >撱箇�撣唾��
           </el-button>
@@ -288,7 +290,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, OtpInfo, register, RegisterInfo, sendOtp } from '~/assets/ts/api/consultant';
 import { Role } from '~/assets/ts/models/enum/Role';
 
@@ -298,6 +300,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';
 
@@ -309,6 +312,10 @@
   otpInterval: any;
   phoneOtpInfo!: OtpInfo;
 
+  get isSubmitBtnDisabled(): boolean {
+    return !this.otpCode || !this.phoneNumber || !this.phoneValid;
+  }
+
   email = '';
   onEmailVerifyResendStatus: 'APPLY_OTP' | 'CAN_RESEND' = 'APPLY_OTP';
   emailResendCounter = 30;
@@ -316,18 +323,18 @@
   emailOtpInfo!: OtpInfo;
 
   name = '';
-  agreeControct = false;
+  agreeContract = false;
   isReadContract = false;
 
   phoneSuccessConfirmVisable = false;
   emailOtpConfirmVisable = false;
 
-  registerDialogVisable = false;
+  registerDialogVisible = false;
   registerSuccessConfirmVisable = false;
 
   applyAccount_onAction = false;
 
-  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))) {
@@ -472,15 +479,22 @@
       indexKey: this.phoneOtpInfo.indexKey,
       otpCode: this.otpCode
     }
+
     loginVerify(login).then(res => {
       this.storageIdToken(res.data.id_token);
       this.storageRole(Role.USER);
       this.phoneSuccessConfirmVisable = true;
     }).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);
       }
-    })
+    });
   }
 
   destroyed() {
@@ -530,6 +544,7 @@
   border-radius: 6px;
   border: 1px solid #707070;
   padding: 20px;
+  max-height: 335px;
 }
 
 .pam-radio {

--
Gitblit v1.8.0