From c75b2fc79f5aa811ba3f5d028633f3765a017bbb Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期二, 30 十一月 2021 19:30:07 +0800
Subject: [PATCH] Merge branch 'master' of https://192.168.0.10:8443/r/pcalife/PAM
---
PAMapp/pages/accountSetting/index.vue | 310 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 306 insertions(+), 4 deletions(-)
diff --git a/PAMapp/pages/accountSetting/index.vue b/PAMapp/pages/accountSetting/index.vue
index d20f84a..ff8eec9 100644
--- a/PAMapp/pages/accountSetting/index.vue
+++ b/PAMapp/pages/accountSetting/index.vue
@@ -1,13 +1,315 @@
<template>
- <div>�犖撣唾�身摰�</div>
+<div class="account-page">
+ <div class="account-page-title">�犖撣唾�身摰�</div>
+ <section class="account-card" :class="{'edit': !userNameDisabled }">
+ <div class="header">
+ <div class="block">
+ <div class="setting-title">憪��</div>
+ <div class="contact-type">
+ <input
+ :disabled="userNameDisabled"
+ v-model="userNameValue"
+ ref="userName"
+ class="input name-input"
+ >
+ <div class="error-txt">
+ <span v-show="!nameValid" class="error">甇斗���‵</span>
+ </div>
+ </div>
+
+ </div>
+ <i class="icon-edit icon" @click="editField('userName')" :class="{'icon-color-change': !userNameDisabled}"></i>
+ </div>
+
+ </section>
+
+ <section class="account-card" :class="{'edit': !userPhoneDisabled }">
+ <div class="header">
+ <div class="block">
+ <div class="setting-title">蝬��</div>
+ <div class="contact-type">
+ ����Ⅳ
+ <input
+ :disabled="userPhoneDisabled"
+ v-model="phoneValue"
+ :class="{
+ 'is-invalid': !phoneValid
+ }"
+ ref="userPhone"
+ class="contact-input input"
+ :placeholder="phoneValue || '撠������Ⅳ'"
+ >
+ <div class="error-txt">
+ <span v-show="!phoneValid" class="error">����Ⅳ�撘�炊</span>
+ </div>
+ </div>
+ </div>
+
+ <i class="icon-edit icon"
+ @click="editField('userPhone')"
+ :class="{'icon-color-change': !userPhoneDisabled}"></i>
+ </div>
+
+ </section>
+
+ <section class="account-card" :class="{'edit': !userEmailDisabled }">
+ <div class="header">
+ <div class="block">
+ <div class="setting-title">蝬��</div>
+ <div class="contact-type">Email
+ <input
+ :disabled="userEmailDisabled"
+ v-model="emailValue"
+ :class="{
+ 'is-invalid': !emailValid
+ }"
+ ref="userEmail"
+ class="contact-input input"
+ :placeholder="emailValue || '撠���� Email'"
+ >
+ <div class="error-txt">
+ <span v-show="!emailValid" class="error">靽∠拳�撘�炊</span>
+ </div>
+ </div>
+ </div>
+
+ <i class="icon-edit icon" @click="editField('userEmail')"
+ :class="{'icon-color-change': !userEmailDisabled}"></i>
+ </div>
+
+ </section>
+
+ <div class="account-setting-btn mb-30">
+ <el-button
+ :disabled="isSubmitBtnDisabled"
+ @click.native="updateAccountSetting">�</el-button>
+ </div>
+
+</div>
</template>
-<script>
-export default {
+<script lang="ts">
+import { Vue,Component } from 'vue-property-decorator'
+import { getUserAccountSetting, updateAccountSetting } from '~/assets/ts/api/consultant';
+import { UserSetting } from '~/assets/ts/models/account.model';
+
+@Component
+export default class AccountSetting extends Vue {
+ _userSetting!: UserSetting;
+ userNameDisabled = true;
+ userPhoneDisabled = true;
+ userEmailDisabled = true ;
+ userNameValue = '';
+ phoneValue = '' ;
+ emailValue = '' ;
+
+ onEditMode = false;
+ formValidStatus = {
+ name: true,
+ phone: true,
+ email: true,
+ };
+
+ get nameValid(): boolean {
+ this.formValidStatus.name = this.userNameValue ? true : false;
+ return this.formValidStatus.name;
+ }
+
+ get phoneValid(): boolean {
+ const rule = /^09[0-9]{8}$/;
+ this.formValidStatus.phone = this.phoneValue ? rule.test(this.phoneValue) : true;
+ return this.formValidStatus.phone;
+ }
+
+ get emailValid(): boolean {
+ const rule = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
+ this.formValidStatus.email = this.emailValue ? rule.test(this.emailValue) : true;;
+ return this.formValidStatus.email;
+ }
+
+ editField(fieldName: string): void {
+ this.onEditMode = true;
+ const enablePromise = new Promise((resolve, reject) => { // 甇斤promise隤��
+ resolve((this as any)[`${fieldName}Disabled`] = false);
+ });
+ const targetInput = this.$refs[fieldName] as any;
+ enablePromise.then((_) => {
+ targetInput.focus();
+ });
+ }
+
+ get isSubmitBtnDisabled(): boolean {
+ const isFormValid = this.formValidStatus.name && this.formValidStatus.phone && this.formValidStatus.email;
+ return !isFormValid || !this.onEditMode
+ || (!this.phoneValue && !this.emailValue);
+ }
+
+ updateAccountSetting(): void {
+ // const dataChanged = (): boolean => {
+ // return this._userSetting.name !== this.userNameValue
+ // || this._userSetting.phone !== this.phoneValue
+ // || this._userSetting.email !== this.emailValue;
+ // };
+ // if (dataChanged) {
+
+ // }
+ if (!this.onEditMode) return;
+ const editSettingInfo: UserSetting = {
+ name: this.userNameValue,
+ phone: this.phoneValue,
+ email: this.emailValue
+ }
+ updateAccountSetting(editSettingInfo).then((res: any) => {
+ console.log('updateRes:', res);
+ this.resetSettingForm();
+ });
+ }
+
+ private resetSettingForm(): void {
+ this.onEditMode = false;
+ this.userNameDisabled = true;
+ this.userPhoneDisabled = true;
+ this.userEmailDisabled = true ;
+ }
+
+ mounted(){
+ getUserAccountSetting().then((userInfo: UserSetting)=>{
+ this._userSetting = {
+ name: userInfo.name || '',
+ phone: userInfo.phone || '',
+ email: userInfo.email || '',
+ };
+
+ this.phoneValue = this._userSetting.phone!;
+ this.userNameValue = this._userSetting.name!;
+ this.emailValue = this._userSetting.email!;
+ })
+ }
}
+
+
</script>
-<style lang="">
+<style lang="scss" scoped>
+.account-page{
+ .block{
+ display: flex;
+ }
+ .account-page-title{
+ font-size: 20px;
+ margin-bottom: 34px;
+ }
+ .account-card{
+ display: flex;
+ flex-direction: column;
+ border-bottom: 1px solid gray;
+ margin-bottom: 33px;
+ .contact-type{
+ width: 184px;
+ margin-right: 16px;
+ font-size: 20px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ }
+ &.edit {
+ input {
+ border: 1px solid lightgray;
+ background-color: #fff;
+ }
+ }
+ }
+ .account-setting-btn{
+ display: flex;
+ justify-content: center;
+ }
+}
+.error-txt{
+ padding-bottom: 10px;
+ .error {
+ @extend .smTxt_bold;
+ @extend .text--primary;
+ height: 16px;
+ }
+}
+.name-input{
+ width: 184px;
+ height:27px;
+ margin-bottom: 20px;
+ font-size: 20px;
+ margin-top: -3px;
+ }
+.setting-title{
+ margin-left: 28px;
+ margin-bottom:10px;
+ width: 58px;
+ font-size: 20px;
+ }
+.header{
+ display: flex;
+ align-items: baseline;
+ justify-content: space-evenly;
+}
+.contact-input{
+ font-size: 20px;
+ margin-bottom: 10px;
+ text-overflow: ellipsis;
+ margin-top: 10px;
+ width: 184px;
+}
+.input{
+ border: 0;
+ background-color: rgba(0,0,0,0) ;
+ outline-color: gainsboro;
+}
+.input:focus{
+ background-color: #fff;
+}
+.icon-color-change{
+ color:$PRIMARY_RED;
+ font-size: 20px;
+}
+.icon{
+ font-size:20px;
+ // color:#1B365D;
+}
+@include desktop{
+
+ .header{
+ display: flex;
+ align-items: baseline;
+ justify-content: space-between;
+ }
+ .setting-title{
+ margin-bottom:10px;
+ width: 58px;
+ font-size: 18px;
+ font-weight: bold;
+ }
+ .account-page{
+ .account-page-title{
+ font-size: 20px;
+ margin-bottom: 34px;
+ font-weight: bold;
+ }
+ }
+ .account-card{
+ display: flex;
+ flex-direction: column;
+ border-bottom: 1px solid gray;
+ margin-bottom: 33px;
+ .contact-type{
+ margin-left: 10px;
+ font-size: 20px;
+ }
+ }
+ .name-input{
+ width: 550px;
+ }
+ .contact-input{
+ width:550px
+ }
+ }
</style>
\ No newline at end of file
--
Gitblit v1.8.0