[ Update ] 串接顧問登入 完成 50% (驗證碼以及忘記密碼 尚未 ) 、 新增 api 錯誤訊息 。

劉鈞霖

2021-11-23 1b57ac5bea14a750b5ddf961c3a8510da18f3637

 PAMapp/pages/login/index.vue

@@ -4,7 +4,7 @@

      <div class="pam-paragraph">
        <div class="mdTxt">
        綁定方式
        驗證方式<small class="pam-field-title__hint pl-10">(顧問會以您指定的方式與您聯繫)</small>
        </div>
        <div class="pam-tags">
          <el-row type="flex" class="pt-10">
@@ -15,7 +15,6 @@
              :class="{ 'active': connectDevice === 'EMAIL'}"
              @click="connectDevice = 'EMAIL'">Email</el-button>
          </el-row>


        </div>
          <el-row type="flex" class="pt-10" v-show="connectDevice === 'MOBILE'">
@@ -213,18 +212,38 @@
        </span>
      </el-dialog>


      <PopUpFrame class="pam-popUpFrame"
        :isOpen.sync="applySuccessConfirmVisable">
          <div class="pam-popUp-title text--center">
            歡迎您登入成功，如您預約諮詢，顧問會以您留下的{{ connectDevice === 'MOBILE' ? '手機號碼' : 'Email'}}與您聯繫
          </div>
          <div class="pam-popUp-confirm-bolck pam-paragraph">
            <div class="text--center">
              <el-button
                  type="primary"
                  @click="confirmApplySuccess"
              >我知道了</el-button>
            </div>
          </div>
      </PopUpFrame>

      <el-button class="mt-30" @click="fakeLogin">客戶登入</el-button>
    </div>
</template>

<script lang="ts">
import { namespace } from 'nuxt-property-decorator';
import { Vue, Component } from 'vue-property-decorator';
import { login } from '~/assets/ts/api/consultant';
import { Role } from '../../components/NavBar.vue';
import { Role } from '~/assets/ts/models/enum/Role';

const roleStorage = namespace('localStorage');

@Component
export default class Login extends Vue {
  @roleStorage.Mutation storageIdToken!: (token:string) => void;
  @roleStorage.Mutation storageRole!: (role:string) => void;

  connectDevice: 'MOBILE' | 'EMAIL' = 'MOBILE';

  phoneNumber = '';
@@ -237,12 +256,13 @@
  emailResendCounter = 30;

  registerDialogVisable = false;
  applySuccessConfirmVisable = false;
  name = '';
  agreeControct = false;
  isReadContract = false;

  detectContructReadStatus(event: any): void {
    this.isReadContract = event.target.scrollTop === (event.target.scrollHeight - event.target.clientHeight);
    this.isReadContract = Math.round(event.target.scrollTop) === (event.target.scrollHeight - event.target.clientHeight);
  };

  get showPhoneOtpCodeField(): boolean {
@@ -258,8 +278,13 @@
  };

  applyAccount(): void {
    this.applySuccessConfirmVisable = true;
    console.log('apply new account!')
  };

  confirmApplySuccess(): void {
    this.applySuccessConfirmVisable = false
  }

  // TODO: 僅OTP認證開發前 暫時使用
   fakeLogin() {
@@ -268,8 +293,8 @@
            password: 'user',
        }
        login(user).then((res) => {
            localStorage.setItem('id_token', res.data.id_token);
            localStorage.setItem('roleOfState',Role.USER);
            this.storageIdToken(res.data.id_token);
            this.storageRole(Role.USER);
            this.$router.go(-1);
        })
  };