<template>
|
<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>
|
<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>
|
|
<!-- 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>
|
<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="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>
|
<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>
|
|
<!-- 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 "
|
@click.native="updateAccountSetting">
|
送出
|
</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Vue,Component } from 'vue-property-decorator'
|
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 {
|
|
@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,
|
};
|
|
////////////////////////////////////////////////////////////
|
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!;
|
})
|
}
|
////////////////////////////////////////////////////////////
|
|
editField(fieldName: string): void {
|
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 {
|
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;
|
});
|
}
|
|
private resetSettingForm(): void {
|
this.userNameDisabled = true;
|
this.userPhoneDisabled = true;
|
this.userEmailDisabled = true ;
|
}
|
|
editOtherContactType(){
|
this.otherContactType = true;
|
setTimeout(() => {
|
if (this.isPrimaryContactTypeEmail) {
|
this.editField('userPhone');
|
} else {
|
this.editField('userEmail');
|
}
|
}, 0);
|
}
|
|
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">
|
.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: 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;
|
}
|
.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;
|
}
|
}
|
|
</style>
|
