保誠-保戶業務員媒合平台
Mila
2021-11-29 98891d1d1bcaa414f336b9c05ad94d39fe9cb1bc
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;