update#134950: 保戶： [個人帳號設定] 可設定備用聯絡方式，並且預約顧問時填寫的備用聯絡方式會回寫帳號設定

Tomas

2022-01-27 baf08c1e7ff4188970a130b8603ad4ea237fa3b9

 PAMapp/pages/accountSetting/index.vue

@@ -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,14 +33,9 @@
            <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>
@@ -52,13 +49,23 @@
            <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: 備用聯絡方式 -->



    <PopUpFrame :isOpen.sync="updateDone">
      <div class="text--center mdTxt fs-18">
        <p class="mt-20 text--center ">帳號資訊更新成功</p>
        <el-button
                type="primary"
                @click="updateDone = false"
                class="mt-20"
              >我知道了</el-button>
      </div>
    </PopUpFrame>

    <div class="pam-paragraph account-confirm">
      <el-button :disabled="isSubmitBtnDisabled"
        @click.native="updateAccountSetting">
@@ -70,45 +77,50 @@

<script lang="ts">
import { Vue,Component } from 'vue-property-decorator'
import { namespace } from 'vuex-class';
import { UserSetting } from '~/shared/models/account.model';

import accountSettingService from '~/shared/services/account-setting.service';

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;

  _userSetting!: UserSetting;
  userNameDisabled  = true;
  userPhoneDisabled = true;
  userEmailDisabled = true ;
  onEditMode        = 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._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!;
            })
        }
////////////////////////////////////////////////////////////

        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 {
  editField(fieldName: string): void {
            this.onEditMode = true;
            const enablePromise = new Promise((resolve, reject) => { // 此為promise語法
                resolve((this as any)[`${fieldName}Disabled`] = false);
@@ -118,22 +130,7 @@
                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) {

            // }
  updateAccountSetting(): void {
            if (!this.onEditMode) return;
            const editSettingInfo: UserSetting = {
                name: this.userNameValue,
@@ -143,28 +140,40 @@
            accountSettingService.updateAccountSetting(editSettingInfo).then((res: any) => {
                console.log('updateRes:', res);
                this.resetSettingForm();
                this.updateDone = true;

            });
        }

        private resetSettingForm(): void {
  private resetSettingForm(): void {
            this.onEditMode = false;
            this.userNameDisabled = true;
            this.userPhoneDisabled = true;
            this.userEmailDisabled = 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!;
            })
  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);
        }

}