<template>
|
<div>
|
<div class="pam-paragraph text--middle">個人帳號設定</div>
|
<div class="pam-paragraph account-info " >
|
<div class="account-info__title text--middle">姓名</div>
|
<div class="account-info__input" :class="{'edit': !userNameDisabled }">
|
<input
|
:disabled="userNameDisabled"
|
v-model="userNameValue"
|
ref="userName"
|
class="account-info__input-text">
|
<div class="account-info__input-error">
|
<span v-show="!nameValid" class="error">此欄位必填</span>
|
</div>
|
</div>
|
<div class="account-info__icon text--middle">
|
<i class="icon-edit" @click="editField('userName')" :class="{'icon-color-change': !userNameDisabled}"></i>
|
</div>
|
</div>
|
<div class="pam-paragraph account-info" v-if="phoneValue">
|
<div class="account-info__title text--middle">綁定</div>
|
<div class="account-info__input " :class="{'edit': !userPhoneDisabled }">
|
<div class="text--middle mb-10">手機號碼</div>
|
<input :disabled="userPhoneDisabled"
|
v-model="phoneValue"
|
: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>
|
<div class="pam-paragraph account-info" v-if="emailValue">
|
<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'">
|
<div class="account-info__input-error">
|
<span v-show="!emailValue" class="error">信箱格式有誤</span>
|
</div>
|
</div>
|
</div>
|
<div class="pam-paragraph account-confirm">
|
<el-button :disabled="isSubmitBtnDisabled"
|
@click.native="updateAccountSetting">
|
送出
|
</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Vue,Component } from 'vue-property-decorator'
|
import { UserSetting } from '~/shared/models/account.model';
|
|
import accountSettingService from '~/shared/services/account-setting.service';
|
|
@Component
|
export default class AccountSetting extends Vue {
|
|
_userSetting!: UserSetting;
|
userNameDisabled = true;
|
userPhoneDisabled = true;
|
userEmailDisabled = true ;
|
onEditMode = false;
|
userNameValue = '';
|
phoneValue = '' ;
|
emailValue = '' ;
|
formValidStatus = {
|
name : true,
|
phone: true,
|
email: true,
|
};
|
|
////////////////////////////////////////////////////////////
|
mounted(){
|
accountSettingService.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!;
|
})
|
}
|
////////////////////////////////////////////////////////////
|
|
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();
|
});
|
}
|
updateAccountSetting(): void {
|
if (!this.onEditMode) return;
|
const editSettingInfo: UserSetting = {
|
name: this.userNameValue,
|
phone: this.phoneValue,
|
email: this.emailValue
|
}
|
accountSettingService.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 ;
|
}
|
|
////////////////////////////////////////////////////////////
|
|
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;
|
return !isFormValid || !this.onEditMode
|
|| (!this.phoneValue && !this.emailValue);
|
}
|
|
}
|
|
|
</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 {
|
.account-info__input-text{
|
border: 1px solid lightgray;
|
background-color: #fff;
|
}
|
}
|
.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__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;
|
}
|
</style>
|
