fixed#83152: 個資同意按鍵偵測bug

Tomas

2021-11-29 226df351f1f02838566659923b3bc1b84eb5b459

fixed#83152: 個資同意按鍵偵測bug

 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 {