|
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) => {
|
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!;
|
})
|
}
|
|
}
|
