Merge branch 'sit' into uat

wayne

2022-02-17 a3716f72066d25d745f4d5103ff23a553c3e102b

 PAMapp/pages/recommendConsultant/index.vue

@@ -1,9 +1,10 @@
<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"/>
    <SingleSelectBtn :singleSelected.sync="strictQueryDto.gender"
      :options="genderOptions" />
    <div class="pam-paragraph">
      <div class="pb-10 mdTxt required">顧問所在地區</div>
      <div class="pb-10 mdTxt required">顧問服務地區</div>
      <div class="job-pick"
        @click="showAddress = true">
        <input class="text--middle cursor--pointer input pl-10"
@@ -12,10 +13,8 @@
          readonly>
        <i class="icon-down down-icon"></i>
      </div>
      <PopUpFrame :isOpen.sync="showAddress"
      >
        <AddressPicker
          @confirm="confirmAddress" />
      <PopUpFrame :isOpen.sync="showAddress">
        <AddressPicker @confirm="confirmAddress" />
      </PopUpFrame>
    </div>
    <div class="pam-paragraph">
@@ -24,16 +23,20 @@
        <span class="hint text--bold">
          (可複選)
        </span>
        <i class="icon-information text--bold fix-chrome-click--issue" @click="showDialog = true"></i>
        <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" />
      <MultiSelectBtn :mutiSelect.sync="strictQueryDto.requirements"
        :options="requirementOptions"
        class="rec-multi-select" />
    </div>
    <div class="pam-paragraph">
      <div class="pb-10 mdTxt">顧問年資</div>
        <SingleSelectBtn :singleSelected.sync="strictQueryDto.seniority" :options="seniorityOptions"/>
      <SingleSelectBtn :singleSelected.sync="strictQueryDto.seniority"
        :options="seniorityOptions" />
    </div>
    <div class="pam-paragraph">
      <div class="pb-10 mdTxt">保險顧問滿意度</div>
    <div class="pam-paragraph" v-if="!hideReviews">
      <div class="pb-10 mdTxt">顧問滿意度</div>
      <el-rate class="pam-consultant-rate" v-model="strictQueryDto.avgScore">
      </el-rate>
    </div>
@@ -45,7 +48,9 @@
      <div class="rec-pop-container">
      <MultiSelectBtn :mutiSelect.sync="strictQueryDto.popularTags"
        :options="popularOptions"
        :nameOfOtherOption="'#其他'" :otherSelect.sync="strictQueryDto.otherPopularTags" class="rec-pop-options"/>
          :nameOfOtherOption="'#其他'"
          :otherSelect.sync="strictQueryDto.otherPopularTags"
          class="rec-pop-options" />
        </div>
    </div>
    <div class="rec-footer pam-paragraph">
@@ -54,8 +59,7 @@
        @click="makePair">馬上配對</el-button>
    </div>

    <PopUpFrame :isOpen.sync="showDialog"
    >
    <PopUpFrame :isOpen.sync="showDialog">
      <div class="qaTextTitle mdTxt">
        <strong>想要詢問的問題</strong>
      </div>
@@ -69,7 +73,8 @@
        </div>
      </div>
      <div class="text--center mdTxt mt-30">
        <el-button type="primary" @click="showDialog = false">我知道了</el-button>
        <el-button type="primary"
          @click="showDialog = false">我知道了</el-button>
      </div>
    </PopUpFrame>

@@ -77,7 +82,8 @@
      <div class="text--center mdTxt">
            <p class="mb-50">尚無推薦資料</p>
            <div class="text--center mdTxt">
              <el-button type="primary" @click="isVisiblePopUp = false">我知道了</el-button>
          <el-button type="primary"
            @click="isVisiblePopUp = false">我知道了</el-button>
            </div>
        </div>
    </PopUpFrame>
@@ -85,23 +91,18 @@
</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';
  import { Action, Component, Mutation, namespace ,State,Vue } from "nuxt-property-decorator";
  import { StrictQueryDto } from "~/shared/models/strictQueryDto.model";
  import { Gender } from "~/shared/models/enum/Gender";
  import { Seniority } from "~/shared/models/enum/seniority";
  import { hideReviews } from '~/shared/const/hide-reviews';


  const localStorage = namespace('localStorage');

  @Component
  export default class RecommendConsultant extends Vue {
    isVisiblePopUp = false;
    hideReviews = hideReviews;
    strictQueryDto: StrictQueryDto ={
      gender:'',
      area:'',
@@ -113,8 +114,7 @@
      popularTags: [],
      otherPopularTags:'',
    };
    genderOptions=[
      {
    genderOptions = [{
        title:'男性',
        label:Gender.MALE,
      },
@@ -123,8 +123,7 @@
        label:Gender.FEMALE,
      }
    ];
    requirementOptions=[
      {
    requirementOptions = [{
        title:'健康與保障',
        label:'健康與保障',
      },
@@ -149,8 +148,7 @@
        label:'分紅保單',
      },
    ];
    seniorityOptions=[
      {
    seniorityOptions = [{
        title:'不限',
        subTitle:'年齡不是問題',
        label:Seniority.UNLIMITED,
@@ -166,8 +164,7 @@
        label:Seniority.SENIOR,
      }
    ];
    popularOptions=[
      {
    popularOptions = [{
        title: '#防疫',
        label:'防疫'
      },
@@ -200,8 +197,7 @@
        label:'意外'
      }
    ];
    queaAboutList = [
      {
    queaAboutList = [{
        title: '健康與保障',
        content: '唯有把身體照顧好，才是保障幸福之本，不做盲目燃燒的蠟燭，只做綻開的陽光，陪孩子多走一哩路，人生的美正要開展。'
      },
@@ -223,26 +219,34 @@
      },
      {
        title: '分紅保單',
        content: '分紅保單 分紅保單是兼具「分攤風險」與「紅利共享」特色的保單，具有一定穩定度，讓你可以同時享有壽險保障及紅利！'
        content: '分紅保單是兼具「分攤風險」與「紅利共享」特色的保單，具有一定穩定度，讓您可以同時享有壽險保障及紅利！'
      }
    ];
    showDialog = false;
    showAddress = false;

    @Mutation updateStrictQueryList!: (data: any) => void;
    @Action storeStrictQueryList!: (data: any) => Promise<number>;
    @State strictQueryList!: any;
    @localStorage.State recommendConsultantItem!: string;
    @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;
@@ -250,6 +254,13 @@
        this.$router.push('/recommendConsultant/result');
      });
    }

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

    //////////////////////////////////////////////////////////////////////
    get notFinishByRequireRules():boolean{
      const area = this.strictQueryDto.area;
      const requirementLength = this.strictQueryDto.requirements
@@ -257,45 +268,26 @@
        : 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>

<style lang="scss">

.pam-rec-cosultant-page {
  .pam-rec-consultant-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;
@@ -304,6 +296,7 @@
            text-align: center;
          }
        }

        .pam-selectAll-btn{
          margin-top: 60px;
          margin-left:-203px;
@@ -316,6 +309,7 @@
    }

  }

  .rec-multi-select{
    .el-checkbox-group {
      display: flex;
@@ -345,9 +339,6 @@
  }

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

@@ -384,6 +375,7 @@
  .el-drawer__container ::-webkit-scrollbar {
    display: none;
  }

  .el-button+.el-button {
    margin-left: 0;
  }
@@ -535,15 +527,18 @@

    .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;
@@ -552,6 +547,7 @@
            text-align: center;
          }
        }

        .pam-selectAll-btn{
          margin-top:0px;
          margin-left:0px;