From ac235850a9287dae6977c964213176fa7c86b140 Mon Sep 17 00:00:00 2001 From: Tomas <tomasysh@gmail.com> Date: 星期四, 09 十二月 2021 14:42:20 +0800 Subject: [PATCH] Merge branch 'refactor/separate-vue' of ssh://192.168.0.10:29418/pcalife/PAM into refactor/separate-vue --- PAMapp/pages/consultantLogin/index.vue | 196 ++++-------------------------------------------- 1 files changed, 19 insertions(+), 177 deletions(-) diff --git a/PAMapp/pages/consultantLogin/index.vue b/PAMapp/pages/consultantLogin/index.vue index bda41c9..e59a9ca 100644 --- a/PAMapp/pages/consultantLogin/index.vue +++ b/PAMapp/pages/consultantLogin/index.vue @@ -6,215 +6,57 @@ <div class="pam-consultant-login__title">撣唾��</div> <div class="position-r mt-10"> <input type="text" - v-model="consultantDto.account" + v-model="consultantDto.username" class="pam-consultant-login__input" placeholder="頛詨eService撣唾��"> - <div class="pam-consultant-login__inputIcon text--primary cursor--pointer" - @click="recordAccount"> - <i :class="[isRemember ? 'icon-checkbox-1' : 'icon-checkbox','pr-5']"></i> + <div class="pam-consultant-login__inputIcon text--primary cursor--pointer fix-chrome-click--issue" + @click="isRememberChange"> + <i :class="[isRememberUserName ? 'icon-checkbox-1' : 'icon-checkbox','pr-5']"></i> 閮�� </div> </div> </div> <div class="pam-paragraph"> - <div class="pam-consultant-login__title "> - <div>撖Ⅳ</div> - <a class="pam-consultant-login__forgot-password cursor--pointer" - :href="forgotPasswordLink" - target="_blank" - rel="靽�犖憯�"> - 敹��Ⅳ嚗� - </a> - </div> + <div class="pam-consultant-login__title ">撖Ⅳ</div> <div class="position-r mt-10"> - <input :type="[isShowPassword ? 'text' : 'password']" + <input :type="[ isShowPassword ? 'text' : 'password']" v-model="consultantDto.password" class="pam-consultant-login__input" placeholder="頛詨eService撖Ⅳ"> - <div class="pam-consultant-login__inputIcon cursor--pointer" + <div class="pam-consultant-login__inputIcon cursor--pointer fix-chrome-click--issue" @click="isShowPassword = !isShowPassword"> - <i :class="[isShowPassword ? 'icon-eye-1 fs-25' : 'icon-eye' , 'text--primary']"></i> + <i :class="[isShowPassword ? 'icon-eye':'icon-eye-1 fs-25', 'text--primary']"></i> </div> </div> </div> <div class="pam-paragraph"> <div class="pam-consultant-login__title"> - <div>撽�Ⅳ</div> - <div class="text--dark-blue fs-16 cursor--pointer" - @click="regenerateCode">������</div> + <div>撽�Ⅳ <span class="text--dark-blue fs-16">(����之撠神)</span></div> + <div class="text--primary fs-16 cursor--pointer fix-chrome-click--issue" + @click="regenerateImgOfVerification">������</div> </div> <div class="pam-consultant-login__verifyBlock mt-10"> <div class="w-55"> <input type="text" - v-model="consultantDto.verificationCode" + v-model="verificationCode" + maxlength="4" class="pam-consultant-login__input"> </div> <div class="pam-consultant-login__verifyImg"> - <img src="~/assets/images/logo.png" alt="撽�Ⅳ"> + <img :src="imgSrc" alt="撽�Ⅳ"> </div> </div> </div> <div class="pam-consultant-login__confirmBlock pam-paragraph"> - <button class="pam-consultant-login__confirm cursor--pointer" - @click="fakeLogin">�</button> + <button class="pam-consultant-login__confirm cursor--pointer fix-chrome-click--issue" + @click="sendInfo">�</button> </div> </div> </div> </template> -<script lang="ts"> - import { Vue, Component} from 'vue-property-decorator'; - import { getForgotPasswordLink , getVerificationCodeImg , login } from '~/assets/ts/api/consultant'; - import { Role } from '../../components/NavBar.vue'; - @Component({ - layout: 'default' - }) - export default class ConsultantLogin extends Vue { - isRemember = false; - isShowPassword = false; - consultantDto = { - account: '', - password: '', - verificationCode: '', - } - forgotPasswordLink = ''; - imgOfVerificationCode=''; - mounted() { - this.regenerateCode(); - this.getLinkOfForgotPassword(); - }; - private getLinkOfForgotPassword():void{ - getForgotPasswordLink().then(link=>{ - console.log('link',link); - this.forgotPasswordLink = link; - }); - }; - recordAccount(): void { - this.isRemember = !this.isRemember; - if (this.isRemember) { - console.log('sotre account'); - } - }; - regenerateCode(): void { - getVerificationCodeImg().then((imgOfbase64:any)=>{ - this.imgOfVerificationCode = imgOfbase64; - }); - }; - // loginWithConsultant():void{ - // console.log('consultantDto',this.consultantDto); - // logInToConsultant(this.consultantDto).then(res=>{ - // localStorage.setItem('roleOfState',Role.CONSULTANT); - // this.$router.push('/myAppointmentList/appointmentList'); - // }); - // } +<script src="./consultant-login.component.ts"></script> - fakeLogin(): void { - const user = { - username: 'admin', - password: 'admin' - } - console.log('user',user); - login(user).then((res) => { - localStorage.setItem('id_token', res.data.id_token); - localStorage.setItem('roleOfState',Role.ADMIN) - this.$router.push('/myAppointmentList/appointmentList'); - }) - } - }; - -</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; - border: 1px black solid; - height: 50px; - 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; - } - } - +<style lang="scss" scoped> + @import "./consultant-login.component.scss"; </style> -- Gitblit v1.8.0