refactor: move ts folder to shared folder

Tomas

2021-12-22 abfd26bb700d93a92da6a04703b0187d4acaaeb5

 PAMapp/pages/recommendConsultant/index.vue

@@ -3,16 +3,17 @@
    <div class="pb-10 mdTxt">顧問性別</div>
    <SingleSelectBtn :singleSelected.sync="strictQueryDto.gender" :options="genderOptions"/>
    <div class="pam-paragraph">
      <div class="pb-10 mdTxt required">顧問所在地區</div>
      <div class="job-pick cursor--pointer"
      <div class="pb-10 mdTxt required">顧問服務地區</div>
      <div class="job-pick"
        @click="showAddress = true">
        <input class="fz-20 input cursor--pointer pl-10"
        <input class="text--middle cursor--pointer input pl-10"
          :value="strictQueryDto.area"
          placeholder="請選擇">
          placeholder="請選擇"
          readonly>
        <i class="icon-down down-icon"></i>
      </div>
      <PopUpFrame :isOpen.sync="showAddress"
        :drawerSize="'65%'">
      >
        <AddressPicker
          @confirm="confirmAddress" />
      </PopUpFrame>
@@ -21,24 +22,26 @@
      <div class="pb-10 mdTxt required">
        想要詢問的問題
        <span class="hint text--bold">
          <i class="icon-information text--bold fix-chrome-click--issue" @click="showDialog = true"></i>可複選
          (可複選)
        </span>
        <i class="icon-information text--bold fix-chrome-click--issue" @click="showDialog = true"></i>
      </div>
      <MultiSelectBtn :mutiSelect.sync="strictQueryDto.requirements" :options="requirementOptions" class="rec-multi-select" />
    </div>
    <div class="pam-paragraph pam-tags">
    <div class="pam-paragraph">
      <div class="pb-10 mdTxt">顧問年資</div>
        <SingleSelectBtn :singleSelected.sync="strictQueryDto.seniority" :options="seniorityOptions"/>
    </div>
    <div class="pam-paragraph">
      <div class="pb-10 mdTxt">保險顧問滿意度</div>
    <!-- <div class="pam-paragraph">
      TODO:隱藏滿意度
      <div class="pb-10 mdTxt">顧問滿意度</div>
      <el-rate class="pam-consultant-rate" v-model="strictQueryDto.avgScore">
      </el-rate>
    </div>
    </div> -->
    <div class="pam-paragraph">
      <div class="rec-popular">
        <div class="pb-10 mdTxt">熱門檢索</div>
        <div class="hint text--bold ml-10">可複選</div>
        <div class="hint text--bold ml-10">(可複選)</div>
      </div>
      <div class="rec-pop-container">
      <MultiSelectBtn :mutiSelect.sync="strictQueryDto.popularTags"
@@ -53,7 +56,7 @@
    </div>

    <PopUpFrame :isOpen.sync="showDialog"
      :drawerSize=" '95%' ">
    >
      <div class="qaTextTitle mdTxt">
        <strong>想要詢問的問題</strong>
      </div>
@@ -66,7 +69,7 @@
          </div>
        </div>
      </div>
      <div class="text--center mdTxt mt-30 mb-30">
      <div class="text--center mdTxt mt-30">
        <el-button type="primary" @click="showDialog = false">我知道了</el-button>
      </div>
    </PopUpFrame>
@@ -81,26 +84,33 @@
    </PopUpFrame>
  </div>
</template>

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

  const localStorage = namespace('localStorage');

  @Component
  export default class RecommendConsultant extends Vue {
    isVisiblePopUp = false;
    strictQueryDto={
    strictQueryDto: StrictQueryDto ={
      gender:'',
      area:'',
      status:'',
      requirements:[],
      requirements: [],
      otherRequirement:'',
      seniority:'',
      avgScore:0,
      popularTags:[],
      popularTags: [],
      otherPopularTags:'',
    };
    genderOptions=[
@@ -135,31 +145,31 @@
        label:'保單健檢/規劃',
      },
      {
        title:'分紅保單相關',
        label:'分紅保單相關',
        title:'分紅保單',
        label:'分紅保單',
      },
    ];
    seniorityOptions=[
      {
        title:'不限',
        subTitle:'年齡不是問題',
        label:'不限',
        label:Seniority.UNLIMITED,
      },
      {
        title:'年輕',
        subTitle:'給年輕人一個機會',
        label:'年輕',
        label:Seniority.YOUNG,
      },
      {
        title:'資深',
        subTitle:'薑是老的辣',
        label:'資深',
        label:Seniority.SENIOR,
      }
    ];
    popularOptions=[
      {
        title: '#防疫',
        label:''
        label:'防疫'
      },
      {
        title: '#失能',
@@ -193,43 +203,45 @@
    queaAboutList = [
      {
        title: '健康與保障',
        content: '突發的意外或疾病，往往造成個人或家庭沉重的經濟負擔，周全的保險才能擁有一個無憂的未來。'
        content: '唯有把身體照顧好，才是保障幸福之本，不做盲目燃燒的蠟燭，只做綻開的陽光，陪孩子多走一哩路，人生的美正要開展。'
      },
      {
        title: '子女教育',
        content: '利用分紅保單，規劃教育基金 提早為子女作準備，讓生活更有保障！'
        content: '孩子，我們是雙方的導師也是學生，面對未來要並肩作戰，學會勇敢無畏、克服挫折、善於理財，這條路上我們一起學。'
      },
      {
        title: '資產規劃',
        content: '當財務責任加重時，規劃充足的保障、提供經濟上的庇護，是人生最堅強的後盾。'
        content: '真正的財富來自嚴謹規劃資產傳承，為人生蓋一堵抵禦財務風險的牆，確保資產穩健成長，替全家族的未來做好萬全準備。'
      },
      {
        title: '樂活退休',
        content: '兼具保險與投資雙重功能，可靈活搭配各種附約，順應人生不同階段的靈活需要。'
        content: '拼一輩子，退休後的日子要輕鬆快活，就得提早透過保險商品規劃退休財務，替自己創造穩定收入，為精彩的熟年人生揭開序幕。'
      },
      {
        title: '保單健檢/規劃',
        content: '全面檢視自己的保障結構是否符合現在或未來的風險移轉需求，透過「斷、捨、離」把錢花在刀口上。'
        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;

    makePair():void{
      strictQuery(this.strictQueryDto).then(res=>{
        console.log('resultData',res.data);
        this.updateStrictQueryList(res.data);
        if (res.data.length === 0) {
    mounted() {
      if (!!this.recommendConsultantItem) {
        this.strictQueryDto = JSON.parse(this.recommendConsultantItem);
      }
    }
    async makePair() {
      await this.storeStrictQueryList(this.strictQueryDto).then(dataLength => {
        if (dataLength === 0) {
          this.isVisiblePopUp = true;
          return;
        }
@@ -238,7 +250,9 @@
    }
    get notFinishByRequireRules():boolean{
      const area = this.strictQueryDto.area;
      const requirementLength = this.strictQueryDto.requirements.length;
      const requirementLength = this.strictQueryDto.requirements
        ? this.strictQueryDto.requirements.length
        : 0;
      return !(area && requirementLength >0)
    }

@@ -252,9 +266,21 @@
    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>

<style lang="scss" >
<style lang="scss">

.pam-rec-cosultant-page {
  .rec-pop-container{
@@ -336,8 +362,9 @@

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

  .qaTextTitle {
@@ -486,18 +513,6 @@
    }
  }

  .hint {
    font-size: 16px;
    color: #ED1B2E;
    font-weight: bold;

    .icon-information {
      padding: 0 5px;
      cursor: pointer;
    }
  }


  .area-txt {
    display: flex;
    align-items: center;
@@ -555,7 +570,6 @@
      flex-wrap: wrap;
    }
  }

  }
}