Merge branch 'pollex-dev' into sit

wayne

2022-02-17 4394e4248455637ab7836756058ac872fdf4af10

 PAMapp/pages/accountSetting/index.vue

@@ -1,5 +1,5 @@
<template>
  <div>
  <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>
@@ -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>
@@ -32,35 +34,125 @@
        </div>
      </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>
        <input :disabled="userEmailDisabled"
          v-model="emailValue"
          :class="{'is-invalid': !emailValid }"
          ref="userEmail"
          class="account-info__input-text"
          :placeholder="emailValue || '尚未提供 Email'">
        <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="updateDone = false"
                @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"
      <el-button :disabled="isSubmitBtnDisabled "
        @click.native="updateAccountSetting">
          送出
      </el-button>
@@ -70,18 +162,34 @@

<script lang="ts">
import { Vue,Component } from 'vue-property-decorator'
import { UserSetting } from '~/shared/models/account.model';
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 {

  _userSetting!: UserSetting;
  @localStorageStore.Getter
  isPrimaryContactTypeEmail!: boolean;


  defaultUserSetting: UserSetting = {
    name :  '',
    phone:  '',
    email:  '',
  };

  userNameDisabled  = true;
  userPhoneDisabled = true;
  userEmailDisabled = true ;
  onEditMode        = false;
  otherContactType = false;
  isShowDeleteDialog = false;

  updateDone        = false;
  userNameValue     = '';
  phoneValue        = '' ;
@@ -95,20 +203,19 @@
////////////////////////////////////////////////////////////
  mounted(){
            accountSettingService.getUserAccountSetting().then((userInfo: UserSetting)=>{
                this._userSetting = {
                this.defaultUserSetting = _.cloneDeep({
                    name : userInfo.name || '',
                    phone: userInfo.phone || '',
                    email: userInfo.email || '',
                };
                this.phoneValue    = this._userSetting.phone!;
                this.userNameValue = this._userSetting.name!;
                this.emailValue    = this._userSetting.email!;
                });
                this.phoneValue    = this.defaultUserSetting.phone!;
                this.userNameValue = this.defaultUserSetting.name!;
                this.emailValue    = this.defaultUserSetting.email!;
            })
        }
////////////////////////////////////////////////////////////

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

            });
        }
      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.onEditMode = false;
            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;
    });

  }

////////////////////////////////////////////////////////////

@@ -154,66 +298,87 @@

  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;;
            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);
            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" 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 {
<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: 1px solid lightgray;
        background-color: #fff;
        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__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__icon{
      margin-left: 20px;
      .icon-color-change{
        color:$PRIMARY_RED;
      }
    }
    .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;
  }
}
.account-confirm{
  display: flex;
  justify-content: center;
}

</style>