保誠-保戶業務員媒合平台
Mila
2021-12-23 9de780116757fc0025b6bd47b0957af22bf2829b
PAMapp/pages/login/index.vue
@@ -170,7 +170,6 @@
      <PopUpFrame
        :isOpen.sync="registerDialogVisible"
        :dialogWidth="'90%'"
        :drawerSize="'95%'"
        class="pam-register-dialog"
        @closePopUp="isReadContract = false"
      >
@@ -198,8 +197,7 @@
              @scroll="detectContractReadStatus">
              <h3>蒐集個人資料告知事項</h3>
              <p class="mt-10">
              遵守個人資料保護法規定,在您提供個人資料予本處前,依法告
              知下列事項:
              遵守個人資料保護法規定,在您提供個人資料予本處前,依法告知下列事項:
              <p>
              <p class="mt-10">
@@ -218,13 +216,11 @@
              </p>
              <p class="mt-10">
              四、除蒐集之目的涉及國際業務或活動外,本處僅於中華民國領域內利用您的個人資
              料。
              四、除蒐集之目的涉及國際業務或活動外,本處僅於中華民國領域內利用您的個人資料。
              </p>
              <p class="mt-10">
              五、本處將於原蒐集之特定目的、本次以外之產業之推廣、宣導及輔導、以及其他公
              務機關請求行政協助之目的範圍內,合理利用您的個人資料。
              五、本處將於原蒐集之特定目的、本次以外之產業之推廣、宣導及輔導、以及其他公務機關請求行政協助之目的範圍內,合理利用您的個人資料。
              </p>
              <p class="mt-10">
@@ -282,12 +278,11 @@
      <PopUpFrame class="pam-popUpFrame"
        :isOpen.sync="emailOtpConfirmVisable"
        :drawerSize="'35%'"
      >
        <div class="pam-popUp-title text--center">已將驗證訊息發送至</div>
        <div class="pam-popUp-title text--center">{{email}}</div>
        <div class="pam-popUp-title text--center">請查看電子郵件並完成驗證流程</div>
        <div class="pam-popUp-confirm-bolck pam-paragraph">
        <div class="pam-popUp-confirm-bolck mt-30">
          <div class="text--center">
            <el-button
                type="primary"
@@ -300,14 +295,13 @@
      <PopUpFrame class="pam-popUpFrame"
        :isOpen.sync="registerSuccessConfirmVisable"
        @closePopUp="confirmApplySuccess"
        :drawerSize="'35%'"
      >
          <div class="pam-popUp-title text--center">
            歡迎您登入成功,如您預約諮詢,顧問會以您留下的{{ connectDevice === 'MOBILE' ? '手機號碼' : 'Email'}}與您聯繫
          </div>
          <div class="pam-popUp-txt text--center mb-10 mt-5"
          >即將轉跳頁面...{{autoRedirectCounter}}秒</div>
          <div class="pam-popUp-confirm-bolck pam-paragraph">
          <div class="pam-popUp-confirm-bolck mt-30">
            <div class="text--center">
              <el-button
                  type="primary"
@@ -320,13 +314,12 @@
      <PopUpFrame class="pam-popUpFrame"
        :isOpen.sync="phoneSuccessConfirmVisable"
        @closePopUp="confirmApplySuccess"
        :drawerSize="'30%'"
      >
          <div class="pam-popUp-title text--center"
          >歡迎您登入成功</div>
          <div class="pam-popUp-txt text--center mb-30 mt-5 xsTxt"
          >即將轉跳頁面...{{autoRedirectCounter}}秒</div>
          <div class="pam-popUp-confirm-bolck pam-paragraph">
          <div class="pam-popUp-confirm-bolck mt-30">
            <div class="text--center">
              <el-button
                  type="primary"
@@ -342,10 +335,14 @@
<script lang="ts">
import { namespace } from 'nuxt-property-decorator';
import { Vue, Component, Ref } from 'vue-property-decorator';
import { LoginRequest, LoginVerify, loginVerify, OtpInfo, register, RegisterInfo, sendOtp } from '~/assets/ts/api/consultant';
import ErrorMessageBox from '~/assets/ts/errorService';
import { OtpErrorCode } from '~/assets/ts/models/enum/otpErrorCode';
import { Role } from '~/assets/ts/models/enum/Role';
import { OtpErrorCode } from '~/shared/models/enum/otpErrorCode';
import { Role } from '~/shared/models/enum/Role';
import { LoginRequest } from '~/shared/models/loginRequest.model';
import { LoginVerify } from '~/shared/models/loginVerify.model';
import { OtpInfo } from '~/shared/models/otpInfo.model';
import { RegisterInfo } from '~/shared/models/registerInfo';
import loginService from '~/shared/services/login.service';
import messageBoxService from '~/shared/services/message-box.service';
const roleStorage = namespace('localStorage');
@@ -360,14 +357,14 @@
  phoneNumber = '';
  otpCode = '';
  onPhoneVerifyStep: 'APPLY_OTP' | 'INPUT_OTP' | 'SUBMIT_OTP' = 'APPLY_OTP';
  otpCounterSec = 900;
  otpCounterSec = 300;
  otpResendCounter = 30;
  otpInterval: any;
  phoneOtpInfo!: OtpInfo;
  email = '';
  onEmailVerifyResendStatus: 'APPLY_OTP' | 'CAN_RESEND' = 'APPLY_OTP';
  emailCounterSec = 900;
  emailCounterSec = 300;
  emailResendCounter = 30;
  emailOtpCode = '';
  emailResendInterval: any;
@@ -389,6 +386,8 @@
  applyAccount_onAction = false;
  previousPath = '';
  /////////////////////////////////////////////////////
  mounted() {
    const phoneOtpTime = localStorage.getItem('phoneOtpTime');
    const emailOtpTime = localStorage.getItem('emailOtpTime');
@@ -401,6 +400,22 @@
      this.emailDiffTime(parseEmailOtpTime);
    }
  }
  beforeRouteEnter (to, from, next) {
      next(vm => {
        console.log(from.path, 'beforeRouteEnter');
        vm.previousPath = from.path;
      })
  }
  destroyed() {
    this.removeOtpTime();
    clearInterval(this.otpInterval);
    clearInterval(this.emailResendInterval);
    clearInterval(this.autoRedirectInterval);
  }
  //////////////////////////////////////////////////////////
  detectContractReadStatus(event: any): void {
    const scrollTop = Math.round(event.target.scrollTop);
@@ -452,14 +467,14 @@
      loginType: isMobile ? 'SMS' : 'EMAIL',
      account: isMobile ? this.phoneNumber : this.email,
    }
    sendOtp(loginInfo).then(otpInfo => {
    loginService.sendOtp(loginInfo).then(otpInfo => {
      if (otpInfo.success) {
        this.storageOtpTime(type, otpInfo);
        this.startOtpSetting(type);
        this.startOtpCount(type);
      } else {
        const errorMsg = OtpErrorCode[otpInfo.failCode] ? OtpErrorCode[otpInfo.failCode]:'OTP系統錯誤';
        ErrorMessageBox(errorMsg);
        messageBoxService.showErrorMessage(errorMsg);
      }
    });
  };
@@ -491,8 +506,8 @@
    this.applyAccount_onAction = true;
    const registerInfo = this.setRegisterInfo();
    register(registerInfo).then(res => {
      this.storageIdToken(res.data.id_token);
    loginService.register(registerInfo).then(res => {
      this.storageIdToken(res.id_token);
      this.storageRole(Role.USER);
      this.storagePhoneOrEmail(registerInfo);
      this.autoRedirect();
@@ -506,6 +521,43 @@
    this.phoneSuccessConfirmVisable = false;
    this.registerSuccessConfirmVisable = false;
    this.redirect();
  }
  login() {
    const login: LoginVerify = this.setLoginInfo();
    this.removeOtpTime();
    loginService.loginVerify(login).then(res => {
      this.storageIdToken(res.id_token);
      this.storageRole(Role.USER);
      this.phoneSuccessConfirmVisable = true;
      this.autoRedirect();
      this.storagePhoneOrEmail(this.setRegisterInfo());
    }).catch(error => {
      this.checkHttpErrorStatus(error);
    });
  }
  //////////////////////////////////////////////////////////////////
  private checkHttpErrorStatus(error:any):void{
    switch (error.response.status) {
        case 401:
          const errorMsg = OtpErrorCode[error.response?.data?.detail] ? OtpErrorCode[error.response?.data?.detail]:'OTP系統錯誤';
          messageBoxService.showErrorMessage(errorMsg);
          break;
        case 403:
          this.registerDialogVisible = true;
          setTimeout(() => {
            const isScrollBarNeedless = this.contract.scrollHeight <= this.contract.clientHeight;
            if (isScrollBarNeedless) {
              this.isReadContract = true;
            }
          }, 1000);
          break;
        default:
          messageBoxService.showErrorMessage('',error);
          break;
      }
  }
  private autoRedirect() {
@@ -524,54 +576,6 @@
    const find = backToPrevious.findIndex(item => this.previousPath.includes(item));
    console.log(this.previousPath, find, 'redirect');
    find > -1 ? this.$router.go(-1) : this.$router.push('/');
  }
  beforeRouteEnter (to, from, next) {
      next(vm => {
        console.log(from.path, 'beforeRouteEnter');
        vm.previousPath = from.path;
      })
    }
  login() {
    const login: LoginVerify = this.setLoginInfo();
    this.removeOtpTime();
    loginVerify(login).then(res => {
      this.storageIdToken(res.data.id_token);
      this.storageRole(Role.USER);
      this.phoneSuccessConfirmVisable = true;
      this.autoRedirect();
      this.storagePhoneOrEmail(this.setRegisterInfo());
    }).catch(error => {
      this.checkHttpErrorStatus(error);
    });
  }
  private checkHttpErrorStatus(error:any):void{
    switch (error.response.status) {
        case 401:
          const errorMsg = OtpErrorCode[error.response?.data?.detail] ? OtpErrorCode[error.response?.data?.detail]:'OTP系統錯誤';
          ErrorMessageBox(errorMsg);
          break;
        case 403:
          this.registerDialogVisible = true;
          setTimeout(() => {
            const isScrollBarNeedless = this.contract.scrollHeight <= this.contract.clientHeight;
            if (isScrollBarNeedless) {
              this.isReadContract = true;
            }
          }, 1000);
          break;
        default:
          ErrorMessageBox('',error);
          break;
      }
  }
  destroyed() {
    this.removeOtpTime();
    clearInterval(this.otpInterval);
    clearInterval(this.emailResendInterval);
    clearInterval(this.autoRedirectInterval);
  }
  private phoneDiffTime(parseOtpTime: any) {
@@ -614,11 +618,11 @@
    if (type === 'MOBILE') {
      clearInterval(this.otpInterval);
      this.otpResendCounter = 30;
      this.otpCounterSec = 900;
      this.otpCounterSec = 300;
    } else {
      clearInterval(this.emailResendInterval);
      this.emailResendCounter = 30;
      this.emailCounterSec = 900;
      this.emailCounterSec = 300;
    }
  }
@@ -747,10 +751,11 @@
  }
.pam-register-dialog__contract {
  $DEVICE_EXTRA_HEIGHT: 42px;
  $DEVICE_EXTRA_HEIGHT: 80px;
  $ALIGN_PADDING: 60px;
  $TOP_CONTENT_HEIGHT: 186px;
  $BOTTOM_CONTENT_HEIGHT: 131px;
  $TOP_CONTENT_HEIGHT: 211px;
  $BOTTOM_CONTENT_HEIGHT: 141px;
  // text-align:start;
  max-height: calc(100vh - $DEVICE_EXTRA_HEIGHT - $ALIGN_PADDING - $TOP_CONTENT_HEIGHT - $BOTTOM_CONTENT_HEIGHT);
  overflow-y: scroll;
  border-radius: 6px;