From b6661a090e8bcf8f45be24a01b6a7bb08e3aaff1 Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期三, 08 十二月 2021 08:50:04 +0800
Subject: [PATCH] refactor: pages component - separate vue files
---
PAMapp/pages/consultantLogin/index.vue | 202 --------------------------------------------------
1 files changed, 2 insertions(+), 200 deletions(-)
diff --git a/PAMapp/pages/consultantLogin/index.vue b/PAMapp/pages/consultantLogin/index.vue
index 283f867..e59a9ca 100644
--- a/PAMapp/pages/consultantLogin/index.vue
+++ b/PAMapp/pages/consultantLogin/index.vue
@@ -55,206 +55,8 @@
</div>
</template>
-<script lang="ts">
- import { Vue, Component , namespace } from 'nuxt-property-decorator';
- import { AxiosError } from 'axios';
- import { getImgOfVerification, logInToConsultant, getVerificationStatus } from '~/assets/ts/api/consultant';
- import { Role } from '~/assets/ts/models/enum/Role';
- import ErrorMessageBox from '~/assets/ts/errorService';
-
- const roleStorage = namespace('localStorage');
- @Component({
- layout: 'home'
- })
- export default class ConsultantLogin extends Vue {
- @roleStorage.Mutation storageIdToken!: (token: string) => void;
- @roleStorage.Mutation storageRole!: (role: string) => void;
- @roleStorage.Mutation storageConsultantId!:(id:string) => void;
- isRememberUserName = false;
- isShowPassword = false;
- imgSrc = '';
- verificationCode='';
- consultantDto = {
- username: '',
- password: '',
- }
-
- get isAlreadyDone():boolean{
- return !!(this.verificationCode && this.consultantDto.username && this.consultantDto.password);
- }
-
- mounted() {
- this.getInitUserName();
- this.regenerateImgOfVerification();
- };
-
- private getInitUserName(): void {
- const username = localStorage.getItem('consultantUserName')
- if (username) {
- this.consultantDto.username = username;
- this.isRememberUserName = true;
- }
- }
-
- public regenerateImgOfVerification(): void {
- getImgOfVerification().then( imgOfBase64 =>
- this.imgSrc = imgOfBase64
- );
- };
-
- public isRememberChange():void{
- this.isRememberUserName = !this.isRememberUserName;
- this.storeUserName();
- }
-
- public sendInfo():void{
- this.isAlreadyDone ? this.verify() : ErrorMessageBox('隢Ⅱ隤董����Ⅳ隞亙���Ⅳ��憛怠神摰');
- }
-
- private verify():void{
- getVerificationStatus(this.verificationCode).then( verifySuccess => {
- if(verifySuccess.data){
- this.loginWithConsultant()
- }else{
- this.clearValue();
- this.regenerateImgOfVerification();
- ErrorMessageBox('撽�Ⅳ頛詨�隤�');
- }
- });
- }
-
- private loginWithConsultant(): void {
- logInToConsultant(this.consultantDto).then(res => {
- this.storageIdToken(res.data.id_token);
- this.storageRole(Role.ADMIN);
- this.storageConsultantId(this.consultantDto.username)
- this.storeUserName();
- this.$router.push('/myAppointmentList/appointmentList');
- }).catch((error:AxiosError)=>{
- this.checkHttpErrorStatus(error);
- });
- }
- private checkHttpErrorStatus(error:any):void{
- this.clearValue();
- this.regenerateImgOfVerification();
- switch (error.response.status) {
- case 401:
- const errorMsg = error.response.data.detail;
- ErrorMessageBox(errorMsg);
- break;
-
- default:
- ErrorMessageBox('',error);
- break;
- }
- }
-
- private storeUserName(): void {
- localStorage.setItem('consultantUserName', this.isRememberUserName ? this.consultantDto.username : '');
- };
-
- private clearValue():void{
- if (!this.isRememberUserName) this.consultantDto.username='';
- this.consultantDto.password = '';
- this.verificationCode = '';
- }
- };
-
-</script>
+<script src="./consultant-login.component.ts"></script>
<style lang="scss" scoped>
- .mt-20 {
- margin-top: 20px;
- }
-
- .mt-25 {
- margin-top: 25px;
- }
-
- .w-55 {
- width: 55% !important;
- }
-
- .position-r {
- position: relative;
- }
-
- .pam-consultant-login {
- margin: auto;
- width: 336px;
- font-size: 20px;
- color: $PRIMARY_BLACK;
-
- &__header {
- text-align: center;
- font-size: 24px;
- font-weight: bold;
- letter-spacing: 1.2;
- color: $PRIMARY_BLACK;
- }
-
- &__title {
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
-
- &__input {
- width: 100%;
- outline: 0;
- border: 1px solid #CCCCCC;
- border-radius: 10px;
- font-size: 20px;
- height: 50px;
- padding: 10px 90px 10px 15px;
- overflow: auto;
- box-sizing: border-box;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
-
- &Icon {
- position: absolute;
- display: flex;
- align-items: center;
- top: 15px;
- right: 15px;
- }
- }
-
- &__forgot-password {
- color: $PRIMARY_RED;
- text-decoration: none;
- font-size: 16px;
- }
-
- &__verifyBlock {
- display: flex;
- justify-content: space-between;
- }
-
- &__verifyImg {
- width: 126px;
- height: 50px;
- border:1px #cccccc solid;
- img {
- width: 100%;
- height: 100%;
- }
- }
-
- &__confirmBlock {
- display: flex;
- justify-content: center;
- }
-
- &__confirm {
- color: $PRIMARY_WHITE;
- width: 80px;
- height: 50px;
- border-radius: 30px;
- border: 1px solid $LIGHT_GREY;
- background-color: $PRIMARY_RED;
- }
- }
-
+ @import "./consultant-login.component.scss";
</style>
--
Gitblit v1.8.0