refactor: pages component - separate vue files

Tomas

2021-12-08 b6661a090e8bcf8f45be24a01b6a7bb08e3aaff1

 PAMapp/pages/questionnaire/_agentNo.vue

@@ -1,8 +1,10 @@
<template>
  <div class="ques-page--reset">
  <div class="ques-page--reset" v-if="isLogin">
    <div class="ques-header">
        <div class="ques-header__mob-banner"></div>
        <div class="ques-header__info" v-if="myRequest.contactType==='phone'">
        <div
          class="ques-header__info"
          v-if="myRequest.contactType==='phone'">
          <div class="text--middle">
              <div class="mdTxt">你指定的聯繫方式</div>
              <div class="mt-10">
@@ -21,7 +23,7 @@
              <div class="mdTxt">其他備用聯繫方式</div>
              <div class="ques-header__input-block">
                  <span>Email：</span>
                  <input class="ques-header__input" 
                  <input class="ques-header__input"
                    placeholder="請輸入"
                    v-model="myRequest.email">
              </div>
@@ -49,7 +51,7 @@
                <span v-show="!phoneValid">手機號碼格式有誤</span>
              </div>
          </div>
          <div class="mt-30" v-if="checkPhoneLength&&phoneValid">
          <div class="mt-30" v-if="myRequest.phone && phoneValid">
              <div class="datepicker">
                  <span class="mdTxt">手機連絡的方便時間</span>
                  <PhoneContactTimePicker
@@ -88,7 +90,7 @@
      </div>
      <div class="pam-paragraph ques-footer">
        <el-button type="primary"
          :disabled="isRequiredByInit || !phoneValid"
          :disabled="isDisabledSubmitBtn"
          @click.native="sentDemand">
          送出
        </el-button>
@@ -125,349 +127,8 @@
  </div>
</template>

<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator';
  import { addFavoriteConsultant, appointmentDemand, AppointmentParams, AppointmentRequests ,RegisterInfo } from '~/assets/ts/api/consultant';
  import { getRequestsFromStorage, setRequestsToStorage } from '~/assets/ts/storageRequests';
  import { Gender } from '~/assets/ts/models/enum/Gender';
  import { ContactType } from '~/assets/ts/models/enum/ContactType';
  import _ from 'lodash';
  @Component
  export default class Questionnaire extends Vue {
    genderOptions=[
      {
        title:'男性',
        label:Gender.MALE,
      },
      {
        title:'女性',
        label:Gender.FEMALE,
      }
    ];
    requirementOptions=[
      {
        title:'健康與保障',
        label:'健康與保障',
      },
      {
        title:'子女教育',
        label:'子女教育',
      },
      {
        title:'資產規劃',
        label:'資產規劃',
      },
      {
        title:'樂活退休',
        label:'樂活退休',
      },
      {
        title:'保單健檢/規劃',
        label:'保單健檢/規劃',
      },
      {
        title:'分紅保單相關',
        label:'分紅保單相關',
      },
    ];
    ageRangeOptions=[
      {
        title:'20歲以下',
        label:'under_20',
      },
      {
        title:'21-30 歲',
        label:'21-30'
      },
      {
        title:'31-40 歲',
        label:'31-40'
      },
      {
        title:'41-50 歲',
        label:'41-50'
      },
      {
        title:'46-55 歲',
        label:'46-55',
      },
      {
        title:'51-60 歲',
        label:'51-60',
      },
      {
        title:'61-70 歲',
        label:'61-70',
      },
      {
        title:'71 歲以上',
        label:'over_71',
      }
    ];
    quesAboutList = [
      {
        title:'健康與保障',
        content:'突發的意外或疾病，往往造成個人或家庭沉重的經濟負擔，周全的保險才能擁有一個無憂的未來。'
      },
      {
        title:'子女教育',
        content:'利用分紅保單，規劃教育基金 提早為子女作準備，讓生活更有保障！'
      },
      {
        title:'資產規劃',
        content:'當財務責任加重時，規劃充足的保障、提供經濟上的庇護，是人生最堅強的後盾。'
      },
      {
        title:'樂活退休',
        content:'兼具保險與投資雙重功能，可靈活搭配各種附約，順應人生不同階段的靈活需要。'
      },
      {
        title:'保單健檢/規劃',
        content:'全面檢視自己的保障結構是否符合現在或未來的風險移轉需求，透過「斷、捨、離」把錢花在刀口上。'
      },
      {
        title:'防疫保單',
        content:'匹配度是透過嚴選配對或快速篩選後，將每一位保險顧問資料進行比對後排序推薦給您的媒合數值，您可以作為選擇適合顧問的參考值。'
      }
    ];
    myRequest= {
      phone:this.userInfo?.phone ? this.userInfo.phone :'',
      email:this.userInfo?.email ? this.userInfo.email :'',
      contactType:_.includes(this.userInfo.contactType,ContactType.SMS) ? ContactType.PHONE : ContactType.EMAIL  ,
      gender: '',
      age: '',
      job: '',
      requirement: [],
      hopeContactTime: [{
        selectWeekOptions:[],
        selectTimesOptions:[],
      }],
      agentNo:this.$route.params.agentNo,
    };
<script src="./questionnaire.component.ts"></script>

    showDrawer= false;
    sendReserve = false;

    mounted() {
      const storageMyRequest = getRequestsFromStorage();
      if (storageMyRequest) {
        this.myRequest = storageMyRequest;
      }
    }
    get phoneValid():boolean{
      const rule = /^09[0-9]{8}$/;
      return this.myRequest.phone ? rule.test(this.myRequest.phone) : true;
    }
    get userInfo():RegisterInfo{
      const initUserInfo = JSON.parse(localStorage.getItem('userInfo'));
      return initUserInfo;
    }

    get isMainContractPhoneByLocalStorage():boolean{
      return true;
    }

    get isRequiredByInit():boolean{
     return _.includes(this.myRequest.contactType,ContactType.PHONE) 
      ? !this.isHopeContactTimeDone()
      :false;
    }
    get checkPhoneLength():boolean{
      return _.isEqual(this.myRequest.phone.length,10);
    }
    private isHopeContactTimeDone():boolean{
      return this.myRequest.hopeContactTime[0].selectWeekOptions.length >0 && this.myRequest.hopeContactTime[0].selectTimesOptions.length >0;
    }
  

    sentDemand() {
      addFavoriteConsultant([this.myRequest.agentNo]).then(res => this.sentAppointmentDemand());
    }

    private sentAppointmentDemand() {
      
        const data: AppointmentParams = {
          ...this.myRequest,
          requirement: _.map(this.myRequest.requirement,o=>o).toString(),
          hopeContactTime:this.phoneValid&&this.checkPhoneLength ? this.getHopeContactTime() :'',
        };

        appointmentDemand(data).then(res => {
            this.sendReserve = true;
            setRequestsToStorage(this.myRequest);
        });
    }

    getHopeContactTime() {
        return this.myRequest.hopeContactTime.map(i => {
            return `'${i.selectWeekOptions}、${i.selectTimesOptions}'`}
        ).toString();
    }

    closeReservePopUp() {
        this.sendReserve = false;
        this.$router.push('/')
    }

  }

  export interface SelectedQuestion {
      name: string;
      selected: boolean;
  }
</script>

<style lang="scss" scoped>
.sendReserve-txt{
    display: flex;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 26px;
}

.qa-dialog-footer{
    display: flex;
    justify-content: center;
    margin-bottom: 81px;
    color: #ED1B2E;
    cursor: pointer;
}//drawer最底下文字樣式

.ques-footer{
    justify-content: center;
    margin: 30px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    .el-button {
    width: 120px;
    height:50px;
    background-color: #ED1B2E;
    color:#FFFFFF;
    font-weight: normal;
    @extend .text--middle ;
    &.el-button--default {
        color: $PRIMARY_RED;
        background-color: #FFFFFF;
        border-color: $PRIMARY_RED;
    }
    &.el-button--primary {
        background-color: $PRIMARY_RED;
        border-color: $PRIMARY_RED;
    }
    &.is-disabled {
    color: $PRIMARY_WHITE;
    background-color: $MID_GREY;
    border-color: $MID_GREY;
    border-style: solid;
    pointer-events: none;
    }
    }
}//送出按鈕樣式與排版

.qa-dialog{
    overflow-y:auto;
    height: 500px;
    margin-top: 20px;
}//詳細問題drawer中間內容空間大小設置

.qaTextTitle{
    margin-top:30px;
    display: flex;
    justify-content: center;
}//詳細問題drawer主要標題

.el-button+.el-button{
    margin-left: 0;
}

.datepicker{
    display: flex;
    flex-direction: column;
}

.required {
    position: relative;
    &::before {
        content: '*';
        position: absolute;
        color: #FF0000;
        transform: translate(-12px, 0);
    }
}

.ques-page--reset.pam-page-container{
    margin: 0px auto;
}
.ques-header{
    position: relative;
}
.ques-header__mob-banner{
  width: 100%;
  min-height: 80px;
  background-color: #F8F9FA;
  background-image: url('~/assets/images/questionnaire/reserve_bg_mob.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.ques-header__info{
  position: relative;
  padding:30px 20px;
  margin: 0px 20px;
  background-color: #B3E7E3;
  border-radius: 10px;
}
.ques-header__input-block{
  display: flex;
  align-items: center;
  @extend .text--middle,.mt-10 ;
  .ques-header__input{
    &.is-invalid{
      border: 2px solid $PRIMARY_RED !important;
    }
    flex: 1;
    height: 50px;
    border-radius: 10px;
    border: 1px #CCCCCC solid;
    background-color: $PRIMARY_WHITE;
    padding: 15px 10px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
  }
}

.ques-container{
  position: relative;
  margin: 0px 20px;
}


@include desktop{
  .ques-header{
    display: flex;
    justify-content: flex-end;
    min-height: 460px;
    background-image: url('~/assets/images/questionnaire/reserve_bg_web.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
  }
  .ques-header__mob-banner{
    display: none;
  }
  .ques-header__info{
    margin: 30px 20px;
    width:500px;
    min-height: 400px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
  }
  .ques-container{
    margin: 0px;
  }
}

<style lang="scss">
  @import "./questionnaire.component.scss";
</style>