refactor: move ts folder to shared folder

Tomas

2021-12-22 abfd26bb700d93a92da6a04703b0187d4acaaeb5

 PAMapp/pages/accountSetting/index.vue

@@ -1,13 +1,222 @@
<template>
    <div>accountSetting-個人帳號設定</div>
  <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 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="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 class="account-info__icon text--middle">
        <!-- <i class="icon-edit"
          @click="editField('userEmail')"
          :class="{'icon-color-change': !userEmailDisabled}">
        </i> -->
      </div>
    </div>
    <div class="pam-paragraph account-confirm">
      <el-button :disabled="isSubmitBtnDisabled"
        @click.native="updateAccountSetting">
          送出
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
<script lang="ts">
import { Vue,Component } from 'vue-property-decorator'
import { getUserAccountSetting, updateAccountSetting } from '~/shared/api/consultant';
import { UserSetting } from '~/shared/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) => {
                console.log('updateRes:', res);
                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!;
            })
        }

}


</script>

<style lang="">
<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;

</style>
    &.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>