From ae4db5435180c44b37f521c463b17f2023ac1d8c Mon Sep 17 00:00:00 2001
From: wayne <wayne8692wayne8692@gmail.com>
Date: 星期五, 18 二月 2022 09:25:50 +0800
Subject: [PATCH] [update] 若顧問停用時，將無法登入 (文案待確認)
---
PAMapp/pages/accountSetting/index.vue | 424 ++++++++++++++++++++++++++++++++++++----------------
1 files changed, 293 insertions(+), 131 deletions(-)
diff --git a/PAMapp/pages/accountSetting/index.vue b/PAMapp/pages/accountSetting/index.vue
index e1c8058..bf3a713 100644
--- a/PAMapp/pages/accountSetting/index.vue
+++ b/PAMapp/pages/accountSetting/index.vue
@@ -1,5 +1,5 @@
<template>
- <div>
+ <div class="pam-account-setting">
<div class="pam-paragraph text--middle">�犖撣唾�身摰�</div>
<div class="pam-paragraph account-info " >
<div class="account-info__title text--middle">憪��</div>
@@ -17,7 +17,9 @@
<i class="icon-edit" @click="editField('userName')" :class="{'icon-color-change': !userNameDisabled}"></i>
</div>
</div>
- <div class="pam-paragraph account-info" v-if="phoneValue">
+
+ <!-- NOTE: 銝餉�蝯⊥撘� -->
+ <div class="pam-paragraph account-info" v-if="!isPrimaryContactTypeEmail">
<div class="account-info__title text--middle">蝬��</div>
<div class="account-info__input " :class="{'edit': !userPhoneDisabled }">
<div class="text--middle mb-10">����Ⅳ</div>
@@ -31,36 +33,126 @@
<span v-show="!phoneValid" class="error">����Ⅳ�撘�炊</span>
</div>
</div>
- <div class="account-info__icon text--middle">
- <!-- <i class="icon-edit"
- @click="editField('userPhone')"
- :class="{'icon-color-change': !userPhoneDisabled}">
- </i> -->
- </div>
</div>
- <div class="pam-paragraph account-info" v-if="emailValue">
+
+ <div class="pam-paragraph account-info" v-if="isPrimaryContactTypeEmail">
<div class="account-info__title text--middle">蝬��</div>
<div class="account-info__input" :class="{'edit': !userEmailDisabled }">
<div class="text--middle mb-10">Email</div>
- <input :disabled="userEmailDisabled"
- v-model="emailValue"
- :class="{'is-invalid': !emailValid }"
- ref="userEmail"
- class="account-info__input-text"
- :placeholder="emailValue || '撠���� Email'">
+ <el-input
+ :disabled ="userEmailDisabled"
+ type="textarea"
+ autosize
+ resize="none"
+ v-model="emailValue"
+ :class="{'is-invalid': !emailValid }"
+ ref="userEmail"
+ class="account-info__input-text text--break-all"
+ style="margin-left:-10px"
+ :placeholder="emailValue || '撠���� Email'">
+ </el-input>
<div class="account-info__input-error">
<span v-show="!emailValue" class="error">靽∠拳�撘�炊</span>
</div>
</div>
- <div class="account-info__icon text--middle">
- <!-- <i class="icon-edit"
- @click="editField('userEmail')"
- :class="{'icon-color-change': !userEmailDisabled}">
- </i> -->
- </div>
</div>
+
+ <!-- NOTE: ���蝯⊥撘� -->
+
+ <div
+ v-if="(!defaultUserSetting.phone || !defaultUserSetting.email) && !otherContactType"
+ class="text--underline text--primary"
+ @click="editOtherContactType">+�隞��蝜急撘�</div>
+
+ <template v-if="(defaultUserSetting.phone && defaultUserSetting.email) || otherContactType">
+
+ <div v-if="!isPrimaryContactTypeEmail">
+
+ <div class="pam-paragraph account-info">
+ <div class="account-info__title text--middle">��</div>
+ <div class="account-info__input " :class="{'edit': !userEmailDisabled }" >
+ <div class="text--middle mb-10 account-info-dele-other-contact-type">
+ <div>Email</div>
+ <div class="account-info__icon text--middle">
+ <i class="icon-delet" v-if="defaultUserSetting.mail" @click="isShowDeleteDialog = true"></i>
+ <i class="icon-edit" @click="editField('userEmail')" :class="{'icon-color-change': !userEmailDisabled}"></i>
+ </div>
+ </div>
+ <el-input
+ type="textarea"
+ autosize
+ :disabled="userEmailDisabled"
+ resize="none"
+ v-model="emailValue"
+ :class="{'is-invalid': !emailValid }"
+ ref="userEmail"
+ class="account-info__input-text text--break-all"
+ style="margin-left:-10px"
+ :placeholder="emailValue || '撠���� Email'">
+ </el-input>
+ <div class="account-info__input-error">
+ <span v-show="!emailValid" class="error">靽∠拳�撘�炊</span>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+ <div class="pam-paragraph account-info" v-if="isPrimaryContactTypeEmail">
+
+ <div class="account-info__title text--middle">��</div>
+ <div class="account-info__input" :class="{'edit': !userPhoneDisabled }">
+ <div class="text--middle mb-10 account-info-dele-other-contact-type">
+ <div>����Ⅳ</div>
+ <div class="account-info__icon text--middle">
+ <i class="icon-delet" v-if="defaultUserSetting.phone" @click="isShowDeleteDialog = true"></i>
+ <i class="icon-edit" @click="editField('userPhone')" :class="{'icon-color-change': !userPhoneDisabled}"></i>
+ </div>
+ </div>
+ <input
+ v-model="phoneValue"
+ :disabled="userPhoneDisabled"
+ :class="{'is-invalid': !phoneValid}"
+ ref="userPhone"
+ class="account-info__input-text"
+ :placeholder="phoneValue ||'撠������Ⅳ'">
+ <div class="account-info__input-error">
+ <span v-show="!phoneValid" class="error">����Ⅳ�撘�炊</span>
+ </div>
+ </div>
+ </div>
+
+ </template>
+
+
+ <PopUpFrame :isOpen.sync="updateDone">
+ <div class="text--center mdTxt fs-18">
+ <p class="mt-20 text--center ">撣唾��������</p>
+ <el-button
+ type="primary"
+ @click="confirmUpdateAndBackToHome"
+ class="mt-20"
+ >������</el-button>
+ </div>
+ </PopUpFrame>
+
+ <PopUpFrame :isOpen.sync="isShowDeleteDialog">
+ <div class="text--center mdTxt fs-18">
+ <p class="mt-20 text--center ">��蝣箄����甈���</p>
+ <el-button
+ @click="isShowDeleteDialog = false"
+ class="mt-20"
+ >����</el-button>
+ <el-button
+ type="primary"
+ @click="deleteOtherContactType"
+ class="mt-20"
+ >蝣箄��</el-button>
+ </div>
+ </PopUpFrame>
+
<div class="pam-paragraph account-confirm">
- <el-button :disabled="isSubmitBtnDisabled"
+ <el-button :disabled="isSubmitBtnDisabled "
@click.native="updateAccountSetting">
�
</el-button>
@@ -70,45 +162,60 @@
<script lang="ts">
import { Vue,Component } from 'vue-property-decorator'
-import { getUserAccountSetting, updateAccountSetting } from '~/shared/api/consultant';
+import { namespace } from 'vuex-class';
+
+import _ from 'lodash';
+
+import accountSettingService from '~/shared/services/account-setting.service';
import { UserSetting } from '~/shared/models/account.model';
+
+const localStorageStore = namespace('localStorage');
@Component
export default class AccountSetting extends Vue {
- _userSetting!: UserSetting;
- userNameDisabled = true;
- userPhoneDisabled = true;
- userEmailDisabled = true ;
- userNameValue = '';
- phoneValue = '' ;
- emailValue = '' ;
- onEditMode = false;
- formValidStatus = {
- name: true,
+ @localStorageStore.Getter
+ isPrimaryContactTypeEmail!: boolean;
+
+
+ defaultUserSetting: UserSetting = {
+ name : '',
+ phone: '',
+ email: '',
+ };
+
+ userNameDisabled = true;
+ userPhoneDisabled = true;
+ userEmailDisabled = true ;
+ otherContactType = false;
+ isShowDeleteDialog = false;
+
+ updateDone = false;
+ userNameValue = '';
+ phoneValue = '' ;
+ emailValue = '' ;
+ formValidStatus = {
+ name : true,
phone: true,
email: true,
- };
+ };
- get nameValid(): boolean {
- this.formValidStatus.name = this.userNameValue ? true : false;
- return this.formValidStatus.name;
+////////////////////////////////////////////////////////////
+ mounted(){
+ accountSettingService.getUserAccountSetting().then((userInfo: UserSetting)=>{
+ this.defaultUserSetting = _.cloneDeep({
+ name : userInfo.name || '',
+ phone: userInfo.phone || '',
+ email: userInfo.email || '',
+ });
+ this.phoneValue = this.defaultUserSetting.phone!;
+ this.userNameValue = this.defaultUserSetting.name!;
+ this.emailValue = this.defaultUserSetting.email!;
+ })
}
+////////////////////////////////////////////////////////////
- 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;
+ editField(fieldName: string): void {
const enablePromise = new Promise((resolve, reject) => { // 甇斤promise隤��
resolve((this as any)[`${fieldName}Disabled`] = false);
});
@@ -117,106 +224,161 @@
targetInput.focus();
});
}
+ updateAccountSetting(): void {
+ const editSettingInfo: UserSetting = {
+ name: this.userNameValue,
+ phone: this.phoneValue,
+ email: this.emailValue
+ }
+ accountSettingService.updateAccountSetting(editSettingInfo).then((res: any) => {
+ this.resetSettingForm();
+ this.updateDone = true;
+ this.defaultUserSetting = editSettingInfo;
+ });
+ }
- 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;
+ private resetSettingForm(): void {
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 || '',
- };
+ editOtherContactType(){
+ this.otherContactType = true;
+ setTimeout(() => {
+ if (this.isPrimaryContactTypeEmail) {
+ this.editField('userPhone');
+ } else {
+ this.editField('userEmail');
+ }
+ }, 0);
+ }
- this.phoneValue = this._userSetting.phone!;
- this.userNameValue = this._userSetting.name!;
- this.emailValue = this._userSetting.email!;
- })
+ deleteOtherContactType(): void {
+ const editSettingInfo: UserSetting = {
+ name: this.userNameValue,
+ phone: '',
+ email: '',
+ };
+
+ if (this.isPrimaryContactTypeEmail) {
+ editSettingInfo.email = this.emailValue;
+ } else {
+ editSettingInfo.phone = this.phoneValue;
+ }
+
+ accountSettingService.updateAccountSetting(editSettingInfo).then((res: any) => {
+ this.resetSettingForm();
+ this.updateDone = true;
+ if (this.isPrimaryContactTypeEmail) {
+ this.phoneValue = '';
+ this.defaultUserSetting.phone = '';
+ } else {
+ this.emailValue = '';
+ this.defaultUserSetting.email = '';
}
+ this.isShowDeleteDialog = false;
+ this.otherContactType = false;
+ });
+
+ }
+
+////////////////////////////////////////////////////////////
+
+ 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;
+ }
+ get isSubmitBtnDisabled(): boolean {
+ const isFormValid = this.formValidStatus.name && this.formValidStatus.phone && this.formValidStatus.email;
+ const isOtherContactTypeChange = this.isPrimaryContactTypeEmail
+ ? this.defaultUserSetting.phone !== this.phoneValue
+ : this.defaultUserSetting.email !== this.emailValue;
+ return !isFormValid
+ || (this.userNameValue === this.defaultUserSetting.name
+ && !isOtherContactTypeChange);
+ }
+
+ confirmUpdateAndBackToHome():void{
+ this.updateDone = false
+ this.$router.push('/accountSetting')
+ }
}
</script>
-<style lang="scss" scoped>
-.account-info{
- display: flex;
- align-items: baseline;
- border-bottom: 1px gray solid;
- padding: 15px 15px 15px 30px;
- .account-info__title{
- width: 58px;
- }
- .account-info__input{
- flex: 1;
-
- &.edit {
+<style lang="scss">
+.pam-account-setting {
+ .account-info{
+ display: flex;
+ align-items: baseline;
+ border-bottom: 1px gray solid;
+ padding: 15px 15px 15px 30px;
+ .account-info__title{
+ width: 58px;
+ }
+ .account-info__input{
+ flex: 1;
+ &.edit {
+ .account-info__input-text{
+ border: 1px solid lightgray;
+ background-color: #fff;
+ }
+ }
.account-info__input-text{
- border: 1px solid lightgray;
- background-color: #fff;
+ border: 0;
+ background-color: rgba(0,0,0,0) ;
+ outline-color: gainsboro;
+ box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ padding: 3px 10px;
+ width: 100%;
+ font-size: 20px;
+ &:disabled{
+ padding: 0px;
+ }
+ }
+ .account-info__input-error{
+ @extend .smTxt_bold,.text--primary;
+ margin-top: 10px;
}
}
- .account-info__input-text{
- border: 0;
- background-color: rgba(0,0,0,0) ;
- outline-color: gainsboro;
- box-sizing: border-box;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- padding: 3px 10px;
- width: 100%;
- font-size: 20px;
- &:disabled{
- padding: 0px;
+ .account-info__icon{
+ margin-left: 20px;
+ .icon-color-change{
+ color:$PRIMARY_RED;
}
}
- .account-info__input-error{
- @extend .smTxt_bold,.text--primary;
- margin-top: 10px;
- }
}
- .account-info__icon{
- margin-left: 20px;
- .icon-color-change{
- color:$PRIMARY_RED;
- }
+ .account-confirm{
+ display: flex;
+ justify-content: center;
+ }
+ .account-info-dele-other-contact-type{
+ display: flex;
+ justify-content: space-between;
+ }
+
+ .el-textarea__inner{
+ background-color: rgba(0,0,0,0) ;
+ border: none !important;
+ padding:1px !important;
}
}
-.account-confirm{
- display: flex;
- justify-content: center;
-}
+
</style>
--
Gitblit v1.8.0