separate vue files

Tomas

2021-12-08 5730601f103ea285d129bf3d89acd649e86c114a

 PAMapp/pages/recommendConsultant/index.vue

@@ -1,5 +1,5 @@
<template>
  <div class="pam-rec-cosultant-page">
  <div class="pam-rec-consultant-page">
    <div class="pb-10 mdTxt">顧問性別</div>
    <SingleSelectBtn :singleSelected.sync="strictQueryDto.gender" :options="genderOptions"/>
    <div class="pam-paragraph">
@@ -83,495 +83,8 @@
  </div>
</template>

<script lang="ts">
  import {
    Vue,
    Component,
    Mutation,
    namespace,
    Action,
    State
  } from 'nuxt-property-decorator';
  import * as _ from 'lodash';
  import { Seniority } from '~/assets/ts/models/enum/seniority';
  import { setRequestQuestionToStorage } from '~/assets/ts/storageRequests';

  const localStorage = namespace('localStorage');

  @Component
  export default class RecommendConsultant extends Vue {
    isVisiblePopUp = false;
    strictQueryDto: StrictQueryDto ={
      gender:'',
      area:'',
      status:'',
      requirements: [],
      otherRequirement:'',
      seniority:'',
      avgScore:0,
      popularTags: [],
      otherPopularTags:'',
    };
    genderOptions=[
      {
        title:'男性',
        label:Gender.MALE,
      },
      {
        title:'女性',
        label:Gender.FEMALE,
      }
    ];
    requirementOptions=[
      {
        title:'健康與保障',
        label:'健康與保障',
      },
      {
        title:'子女教育',
        label:'子女教育',
      },
      {
        title:'資產規劃',
        label:'資產規劃',
      },
      {
        title:'樂活退休',
        label:'樂活退休',
      },
      {
        title:'保單健檢/規劃',
        label:'保單健檢/規劃',
      },
      {
        title:'分紅保單',
        label:'分紅保單',
      },
    ];
    seniorityOptions=[
      {
        title:'不限',
        subTitle:'年齡不是問題',
        label:Seniority.UNLIMITED,
      },
      {
        title:'年輕',
        subTitle:'給年輕人一個機會',
        label:Seniority.YOUNG,
      },
      {
        title:'資深',
        subTitle:'薑是老的辣',
        label:Seniority.SENIOR,
      }
    ];
    popularOptions=[
      {
        title: '#防疫',
        label:'防疫'
      },
      {
        title: '#失能',
        label:'失能'
      },
      {
        title: '#防癌',
        label:'防癌'
      },
      {
        title: '#醫療',
        label:'醫療'
      },
      {
        title: '#壽險',
        label: '壽險'
      },
      {
        title: '#儲蓄',
        label:'儲蓄'
      },
      {
        title: '#投資',
        label:'投資'
      },
      {
        title: '#意外',
        label:'意外'
      }
    ];
    queaAboutList = [
      {
        title: '健康與保障',
        content: '唯有把身體照顧好，才是保障幸福之本，不做盲目燃燒的蠟燭，只做綻開的陽光，陪孩子多走一哩路，人生的美正要開展。'
      },
      {
        title: '子女教育',
        content: '孩子，我們是雙方的導師也是學生，面對未來要並肩作戰，學會勇敢無畏、克服挫折、善於理財，這條路上我們一起學。'
      },
      {
        title: '資產規劃',
        content: '真正的財富來自嚴謹規劃資產傳承，為人生蓋一堵抵禦財務風險的牆，確保資產穩健成長，替全家族的未來做好萬全準備。'
      },
      {
        title: '樂活退休',
        content: '拼一輩子，退休後的日子要輕鬆快活，就得提早透過保險商品規劃退休財務，替自己創造穩定收入，為精彩的熟年人生揭開序幕。'
      },
      {
        title: '保單健檢/規劃',
        content: '全面檢視自己的保障結構是否符合現在或未來的風險移轉需求。'
      },
      {
        title: '分紅保單',
        content: '分紅保單 分紅保單是兼具「分攤風險」與「紅利共享」特色的保單，具有一定穩定度，讓你可以同時享有壽險保障及紅利！'
      }
    ];
    showDialog = false;
    showAddress = false;

    @Mutation updateStrictQueryList!: (data: any) => void;
    @Action storeStrictQueryList!: (data: any) => Promise<number>;
    @State strictQueryList!: any;
    @localStorage.State recommendConsultantItem!: string;

    mounted() {
      if (!!this.recommendConsultantItem) {
        this.strictQueryDto = JSON.parse(this.recommendConsultantItem);
      }
    }
    async makePair() {
      await this.storeStrictQueryList(this.strictQueryDto).then(dataLength => {
        const questions = this.strictQueryDto.requirements.length ? this.strictQueryDto.requirements : [];
        setRequestQuestionToStorage(questions);
        if (dataLength === 0) {
          this.isVisiblePopUp = true;
          return;
        }
        this.$router.push('/recommendConsultant/result');
      });
    }
    get notFinishByRequireRules():boolean{
      const area = this.strictQueryDto.area;
      const requirementLength = this.strictQueryDto.requirements
        ? this.strictQueryDto.requirements.length
        : 0;
      return !(area && requirementLength >0)
    }

    confirmAddress(area: string) {
      this.strictQueryDto.area = area;
      this.showAddress = false;
    }

  }
  enum Gender{
    MALE="male",
    FEMALE="female",
  }

  export interface StrictQueryDto {
    gender: string,
    area: string,
    status: string,
    requirements: string[],
    otherRequirement: string,
    seniority: string,
    avgScore: number,
    popularTags: string[],
    otherPopularTags: string
  }
</script>
<script src="./recommend-consultant.component.ts"></script>

<style lang="scss">

.pam-rec-cosultant-page {
  .rec-pop-container{
    width:310px;
    .rec-pop-options{
      .el-checkbox-group{
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        .el-checkbox{
          width:90px;
          height: 50px;
          padding:0;
          .el-checkbox__label{
            justify-content: center;
            align-items: center;
            display: flex;
            padding:15px 20px;
            text-align: center;
          }
        }
        .pam-selectAll-btn{
          margin-top: 60px;
          margin-left:-203px;
          height: 50px;
          width: 90px;
          padding: 10px;
        }

      }
    }

  }
  .rec-multi-select{
    .el-checkbox-group {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
  }

  input:focus,
  textarea:focus {
    outline: none;
  }

  .input {
    border: none;
    width: 90%;
    border-radius: 10px;
  }

  .job-pick {
    height: 50px;
    border-radius: 10px;
    border: 1px solid #D0D0CE;
    display: flex;
    justify-content: space-between;
    background-color: #FFFFFF;
  }

  .down-icon {
    color: #ED1B2E;
    font-size: 25px;
    align-self: center;
    margin-right: 15px;
  }

  .popOtherBtn {
    margin-left: -190px;
    margin-top: 45px;
  }

  .genderBtn {
    width: 80px;
    height: 47px;
    display: contents;
  }

  .qa-dialog {
    overflow-y: auto;
    height: 500px;
    margin-top: 20px;
    text-align: justify;
  }

  .qaTextTitle {
    margin-top: 30px
  }

  .qa-dialog-footer {
    display: flex;
    justify-content: center;
    margin-bottom: 81px;
    color: #ED1B2E;
    cursor: pointer;
  }

  .el-drawer__container ::-webkit-scrollbar {
    display: none;
  }
  .el-button+.el-button {
    margin-left: 0;
  }

  .seniority-choice {
    display: flex;
    flex-wrap: wrap;
  }

  .area-choice {
    height: 50px;
    border-radius: 10px;
    border: 1px solid #D0D0CE;
    display: flex;
    justify-content: space-between;
    background-color: #FFFFFF;
  }

  .area-icon {
    color: #ED1B2E;
    font-size: 25px;
    display: flex;
    justify-content: flex-end;
    padding-right: 16px;
    padding-top: 11px;
  }

  input::-webkit-input-placeholder {
    font-size: 20px;
    padding-left: 10px;
  }

  .el-button.is-disabled {
    font-size: 20px;
    border-radius: 20px;
    color: #FFFFFF;
    background-color: #A7A8AA;
    border: 1px solid #A7A8AA;
  }

  .rec-footer {
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .other-PopBtn {
    width: 90px;
    height: 47px;
    margin-top: 10px;
  }



  .rec-ques-location {
    display: flex;
    align-items: center;
  }

  .pop-tag {
    display: flex;
    flex-wrap: wrap;
    margin: -10px;

  }

  .rec-popular {
    display: flex;
    align-items: baseline;
    padding-top: 10px;
    margin-bottom: 10px;
  }

  .rec-btn-type {
    padding-bottom: 10px;
  }

  .rec-question {
    display: flex;
    flex-direction: column;

  }

  .rec-banner {
    height: 120px;
    background-color: #D0D0CE;

  }

  .rec-btn {
    font-size: 20px;
    border-radius: 20px;
    color: black;
    border: 1px solid #D0D0CE;
  }

  .rec-pop-btn {
    font-size: 20px;
    border-radius: 20px;
    color: black;
    margin: 0px 0px 10px 10px;
    border: 1px solid #D0D0CE;
    width: 90px;
    height: 47px;
  }

  .el-progress__text {
    display: none;
  }

  .el-progress-bar {
    padding-right: 0;
  }

  .el-progress-bar__inner {
    background-color: #ED1B2E;
  }

  .required {
    position: relative;

    &::before {
      content: '*';
      position: absolute;
      color: #FF0000;
      transform: translate(-12px, 0);
      z-index: 5;
    }
  }

  .area-txt {
    display: flex;
    align-items: center;
    margin-left: 18px;
  }

  @include desktop {

    .desktopBtn {
      margin-right: 10px;
      height: 47px
    }

    .popOtherBtn {
      margin-left: 10px;
      margin-top: -10px;
    }

    .rec-pop-container{
      width:auto;
    .rec-pop-options{
      .el-checkbox-group{
        display: flex;
        flex-wrap:wrap;
        flex-direction: none;
        .el-checkbox{
          width:90px;
          height: 50px;
          padding:0;
          .el-checkbox__label{
            justify-content: center;
            align-items: center;
            display: flex;
            padding:15px 20px;
            text-align: center;
          }
        }
        .pam-selectAll-btn{
          margin-top:0px;
          margin-left:0px;
          height: 50px;
          width: 90px;
          padding: 10px;
        }
      }
    }

  }

    .rec-multi-select{
    .el-checkbox-group {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      flex-wrap: wrap;
    }
  }
  }
}

  @import "./recommend-consultant.component.scss";
</style>