[ Update ] 微調嚴選配對 UI，新增 單選、複選 共用元件，嚴選配對api 完成

劉鈞霖

2021-11-12 f4229272d94690403c1b1f516f6e7378cc86c708

[ Update ] 微調嚴選配對 UI，新增 單選、複選 共用元件，嚴選配對api 完成

 PAMapp/assets/scss/vendors/elementUI/_radio.scss

@@ -62,7 +62,6 @@
    border: 1px $LIGHT_GREY solid;
    background-color: $PRIMARY_WHITE;
    border-radius: 50px;
    font-size: 20px;
    margin-right: 10px;
    margin-bottom: 10px;

@@ -72,9 +71,14 @@

    .el-radio__label {
        text-align: center;
        font-size: 18px;
        color: $PRIMARY_BLACK;
        font-weight: normal;
        display: block;
        padding-left: 0px;
        .radio-sub-title{
            color: $PRUDENTIAL_GREY;
        }
    }

    &.is-checked {
@@ -82,6 +86,9 @@
      color: $PRIMARY_WHITE;
      .el-radio__label{
        color: $PRIMARY_WHITE;
        .radio-sub-title{
            color: $PRIMARY_WHITE;
        }
      }
    }
}

 PAMapp/assets/ts/api/consultant.ts

@@ -43,6 +43,11 @@
    return service.post('/consultant/fastQuery', data)
}

// åš´é¸é…å°
export function strictQuery(data:StrictQueryParams):Promise<AxiosResponse<AgentOfStrictQuery>>{
    return service.post('/consultant/strictQuery', data)
}

// åŠ å…¥é¡§å•
export function addFavoriteConsultant(agentNoList: string[]) {
    return service.post('/consultant/favorite', {agentNoList})
@@ -83,3 +88,25 @@
    otherRequirement: string,
    agentNo: string
}
export interface StrictQueryParams{
    gender:           string;
    avgScore:         number;
    status:           string; //phase 1 disable
    area:             string;
    requirements:     string[];
    otherRequirement: string;
    seniority:        string;
    popularTags:      string[];
    otherPopularTags: string;
}
export interface AgentOfStrictQuery {
    agentNo:       string;
    name:          string;
    img:           string;
    expertise:     string[];
    avgScore:      number;
    contactStatus: null;
    updateTime:    null;
    seniority:     string;
    new:           boolean;
}

 PAMapp/components/multiSelectBtn.vue

@@ -4,13 +4,21 @@
      <el-checkbox
        v-for="(option, index) in options"
        :key="index"
        :label="option"
        :name="option"
      ></el-checkbox>
        :label="option.label">
          {{option.title}}
        </el-checkbox>
      <template v-if="nameOfSelectAll">
        <button class="pam-selectAll-btn cursor--pointer" :class="{'selected':isSelectAll}" :model="isSelectAll" @click="selectAll">
         <span>{{nameOfSelectAll}}</span>
       </button>
      </template>
      <template v-if="nameOfOtherOption">
        <button class="pam-selectAll-btn cursor--pointer" :class="{'selected':isSelectOtherOption}" :model="isSelectOtherOption" @click="selectOther">
         <span>{{nameOfOtherOption}}</span>
        </button>
        <div>
          <input class="pam-muti-select-other cursor--pointer" v-if="isSelectOtherOption" v-model="syncOtherSelect" placeholder="請輸入,限20字">
        </div>
      </template>
    </el-checkbox-group>
  </div>
@@ -18,12 +26,16 @@

<script lang="ts">
  import { Vue, Component, Prop, PropSync} from 'vue-property-decorator';
  import { OptionBtnDto } from './singleSelectBtn.vue';

  @Component
  export default class MultiSelectBtn extends Vue {
    @PropSync('mutiSelect',{type:Array,default:()=>[]}) syncMutiSelect!:string[];
    @Prop({default:()=>[]}) options!:OptionBtnDto[];
    @Prop({default:''}) nameOfSelectAll!:string;
    @Prop({default:()=>[]}) options!:string[]|[];
    @PropSync('otherSelect',{default:''}) syncOtherSelect!:string;
    @Prop({type:String,default:''}) nameOfOtherOption!:string;
    isSelectOtherOption=false;
    isSelectAll=false;

    updated() {
@@ -32,9 +44,17 @@

    selectAll():void{
      this.isSelectAll= !this.isSelectAll;
      this.syncMutiSelect = this.isSelectAll ? this.options:[];
      this.syncMutiSelect = this.isSelectAll ? this.optionsFormat(this.options):[];
    }

    optionsFormat(optios:OptionBtnDto[]):string[]{
      return optios.map(o=>o.title);
    }
    selectOther():void{
      this.isSelectOtherOption = !this.isSelectOtherOption;
      if(!this.isSelectOtherOption){
        this.syncOtherSelect = '';
      }
    }
  }
</script>

@@ -52,4 +72,13 @@
      color: $PRIMARY_WHITE;
    }
  }
  .pam-muti-select-other {
    height: 50px;
    padding: 5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
    width: 316px;
    border: 1px solid #CCCCCC;
  }
</style>

 PAMapp/components/phoneContactTimePicker.vue

@@ -33,7 +33,6 @@

    <PopUpFrame class="pam-popUpFrame" 
      :isOpen.sync="isOpenByStep_1"
      :model="isOpenByStep_1"
      :drawerSize="drawerSize"
      :dialogWidth="dialogWidth">
        <div class="pam-popUp-title">{{popUpTitle}}</div>
@@ -75,16 +74,62 @@
<script lang="ts">
  import { Component,PropSync,Vue } from "nuxt-property-decorator";
  import * as _ from "lodash";
import { OptionBtnDto } from "./singleSelectBtn.vue";
  @Component
  export default class PhoneContactTimePicker extends Vue {
    @PropSync('scheduleList',{type:Array,default:()=>[]}) syncScheduleList!:scheduleDto[];
    private weekOptions ={
      selectAll:'每天',
      options:['禮拜一','禮拜二','禮拜三','禮拜四','禮拜五','禮拜六','禮拜日'],
      options:[
        {
          title:'禮拜一',
          label:'禮拜一'
        },
         {
          title:'禮拜二',
          label:'禮拜二'
        },
         {
          title:'禮拜三',
          label:'禮拜三'
        },
         {
          title:'禮拜四',
          label:'禮拜四'
        },
         {
          title:'禮拜五',
          label:'禮拜五'
        }, {
          title:'禮拜六',
          label:'禮拜六'
        },
         {
          title:'禮拜日',
          label:'禮拜日'
        },
      ],
    };
    private timesOfDayOptions ={
      selectAll:'全天',
      options:['9:00~12:00','12:00~14:00','14:00~18:00','18:00~21:00'],
      options:[
        {
          title:'9:00~12:00',
          label:'9:00~12:00',
        },
        {
          title:'12:00~14:00',
           label:'12:00~14:00',
        },
        {
          title:'14:00~18:00',
           label:'14:00~18:00',
        },
        {
          title:'18:00~21:00',
          label:'18:00~21:00',
        }
      ],
    };
    private drawerSize="40%";
    private dialogWidth="376px";
@@ -117,8 +162,9 @@
      this.selectedSchedule.selectWeekOptions = this.getOptionsBySort(this.weekOptions.options,this.initPickerControl.selectWeekOptions);
      this.selectedSchedule.selectTimesOptions = this.getOptionsBySort(this.timesOfDayOptions.options,this.initPickerControl.selectTimesOptions);
    }
    getOptionsBySort(options:string[],selectedOptions:string[]):string[]{
      return options.filter( o => _.includes(selectedOptions,o));
    getOptionsBySort(options:OptionBtnDto[],selectedOptions:string[]):string[]{
      return options.map( o => _.includes(selectedOptions,o.title) ? o.title :'').filter(String);
      // return 
    }
    addNewSchedule():void{
      const newScheduleDto={
@@ -140,7 +186,7 @@
      const chineseNumber = ['一','二','三','四','五','六','七','八','九','十']
      return '時段'+chineseNumber[index];
    }
    optionsFormat(options:string[],needToCompareList:OptionDto):string{
    optionsFormat(options:OptionBtnDto[],needToCompareList:OptionDto):string{
      return _.isEqual(options.length,needToCompareList.options.length) ? needToCompareList.selectAll: _.join(options,',');
    }
  }

 PAMapp/components/singleSelectBtn.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,44 @@
<template>
  <div>
    <el-radio-group class="pam-single-btn"
      v-model="syncSingleSelected">
      <el-radio v-for="(option,index) in options"
        :key="index"
        :label="option.label"
        @click.native.prevent="patchValue(option.label)">
        <span class="text--middle">
          {{option.title}}
        </span>
        <span class="radio-sub-title"
          v-if="option.subTitle">
            {{option.subTitle}}
        </span>
      </el-radio>
    </el-radio-group>
  </div>
</template>

<script lang="ts">
  import { Component, Prop, PropSync, Vue } from "nuxt-property-decorator";
  import * as _ from 'lodash';
  @Component
  export default class SingleSelectBtn extends Vue {
    @PropSync('singleSelected', { default: '' }) syncSingleSelected!: string | number;
    @Prop({ type:Array , default:()=>[] }) options!:OptionBtnDto[];

    // ä¸»è¦è§£æ±ºæŒ‰éˆ•é»žæ“Šå…©æ¬¡èƒ½å›žåˆ°ï¼Œæœªé»žé¸çš„狀態
    patchValue(value: string): void {
      this.syncSingleSelected = _.isEqual(this.syncSingleSelected, value) ? "" : value;
    }
  }
  export interface OptionBtnDto {
    title: string,
    subTitle?: string,
    label: string | number,
  }
</script>

<style lang="scss"
  scoped>

</style>

 PAMapp/pages/recommendConsultant/index.vue

@@ -1,165 +1,180 @@
 <template>
<div  class="pam-page">
    <div class="pb-10 mdTxt">您的性別</div>
    <div class="mb-30 pam-tags ">
            <el-button style="margin-right:10px" @click="gender = 'male'" :class="{ 'active': gender ==='male'}">男性</el-button>
            <el-button  @click="gender = 'female'" :class="{'active': gender === 'female'}">女性</el-button>  
    </div>
    <div class="mb-30">
    <SingleSelectBtn :singleSelected.sync="strictQueryDto.gender" :options="genderOptions"/>
    <div class="mt-30">
        <div class="pb-10 mdTxt required">所在地區</div>
        <div class="job-pick" @click="showAddress = true">      
            <input class="fz-20 pl-18 input" 
                style="outline:none margin-right:-18px"
                :value="district"
      <div class="job-pick cursor--pointer"
        @click="showAddress = true">
        <input class="fz-20 input cursor--pointer pl-10"
          :value="strictQueryDto.area"
                placeholder="請選擇">
            <i class="icon-down down-icon " style="margin-right:18px"></i>
        <i class="icon-down down-icon"></i>
        </div> 
        <PopUpFrame :isOpen.sync="showAddress" :drawerSize=" '45%' ">
            <AddressPicker 
            @close="showAddress = false"
            @change="selectedDistrict"/>
      <PopUpFrame :isOpen.sync="showAddress"
        :drawerSize="'45%'">
        <AddressPicker @close="showAddress = false"
          @change="area => strictQueryDto.area = area" />
        </PopUpFrame>
    </div>

    
    <div class="mb-10">
        <div class="pb-10 mdTxt required">想要詢問的問題<span class="hint text--bold" @click="showDialog = true"><i class="icon-information text--bold" @click="showDialog = true"></i>可複選</span></div>
        
    <div class="mt-30">
      <div class="pb-10 mdTxt required" @click="showDialog = true">
        æƒ³è¦è©¢å•çš„問題
        <span class="hint text--bold">
          <i class="icon-information text--bold"></i>可複選
        </span>
    </div>
        <ConsultantQues @change="selectedQuestion = $event" class="mb-30"/>
    

    <div class="mb-30 pam-tags">
      <MultiSelectBtn :mutiSelect.sync="strictQueryDto.requirements" :options="requirementOptions" />
    </div>
    <div class="mt-30 pam-tags">
        <div class= "pb-10 mdTxt">顧問年資</div>
        <div>
            <el-button class="mb-10" @click="seniority = 'unlimited'" :class="{'active':seniority === 'unlimited'}">
                <span class="text--bold">不限 </span><span>年齡不是問題</span>
            </el-button>
            <el-button style="margin-left:-0.5px" class="mb-10 " @click="seniority = 'junior'" :class="{'active':seniority === 'junior'}">
                <span class="text--bold">年輕 </span><span>給年輕人一個機會</span>
            </el-button>
            <el-button style="margin-left:-0.5px" class="mb-10" @click="seniority = 'senior'" :class="{'active':seniority === 'senior'}">                
                <span class="text--bold">資深 </span><span>薑是老的辣</span>
            </el-button>
       <SingleSelectBtn :singleSelected.sync="strictQueryDto.seniority" :options="seniorityOptions"/>
        </div>
            

    </div>

    <div class="rate-consultant mb-30">
        <div>
    <div class="rate-consultant mt-30">
            <div  class="pb-10 mdTxt">保險顧問滿意度</div>
      <el-rate v-model="strictQueryDto.avgScore"
        :colors="elRateColors"
        class="rate">
      </el-rate>
        </div>
        <el-rate v-model="ratevalue" :colors="elRateColors" class="rate" @change="selected"></el-rate>
    </div>

    <div class="mb-30">
    <div class="mt-30">
        <div class="rec-popular">
            <div class="pb-10 mdTxt">熱門檢索</div>
            <div class="hint text--bold ml-10">可複選</div>
        </div>
        <div class="pop-tag pam-tags">
            <div v-for="(popularItem,index) in popularList" :key="index">
                <el-button class="rec-pop-btn" :class="{'active': popularItem.reversation}" 
                @click="popularTarget(index)">{{'#'+popularItem.name}}
                </el-button>
      <MultiSelectBtn :mutiSelect.sync="strictQueryDto.popularTags"
        :options="popularOptions"
        :nameOfOtherOption="'#其他'" :otherSelect.sync="strictQueryDto.otherPopularTags" />
            </div> 
            <div class="pam-tags popOtherBtn">
                <el-button class="other-PopBtn " @click="popOther=!popOther" :class="{'active':popOther=popOther}">#其他</el-button>                      
            </div>
        </div>
            <div>
                <input v-if="popOther" class="other-input " placeholder="請輸入,限X字">    
            </div>
    <div class="rec-footer mt-30">
      <el-button type="primary"
        :disabled="notFinishByRequireRules"
        @click="makePair">馬上配對</el-button>
    </div>

    <div class="rec-footer">
        <el-button
        type="primary"
        
            :disabled="!district || !selectedQuestion.length"
            @click="$router.push('/recommendConsultant/result')">馬上配對</el-button>
    <PopUpFrame :isOpen.sync="showDialog"
      :drawerSize=" '95%' ">
      <div class="qaTextTitle mdTxt">
        <strong>想要詢問的問題</strong>
    </div>

    <PopUpFrame :isOpen.sync="showDialog" :drawerSize=" '95%' ">
            <div class="qaTextTitle mdTxt"><strong>想要詢問的問題</strong></div>

                <div class="qa-dialog">                   
                    <div v-for="(qaText,index) in queaAboutList" :key="index" >
        <div v-for="(qaText,index) in queaAboutList"
          :key="index">
                        <div class="pt-10">
                            <p class=" p bold">{{qaText.title}}</p>
                            <p class="p">{{qaText.content}}</p>
                        </div>                
                    </div>
                </div>
            <div class="qa-dialog-footer mdTxt" @click="showDialog = false"><p>我知道了</p></div> 
      <div class="qa-dialog-footer mdTxt"
        @click="showDialog = false">
        <p>我知道了</p>
      </div>
        </PopUpFrame>

</div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
  import {
    Vue,
    Component
  } from 'vue-property-decorator';
  import {strictQuery} from '~/assets/ts/api/consultant';
  import * as _ from 'lodash';
@Component
    export default class RecommendConsultant extends Vue {
        
        ratevalue = null;
        showDialog = false;
        showAddress=false;
        district = '';
        selectedQuestion = [];
        elRateColors=['#ED1B2E','#ED1B2E','#ED1B2E'];
        gender: 'male'|'female' = 'male';
        seniority:'unlimited'|'junior'|'senior' = 'unlimited' ;
        popOther = '';     
        yearList=[
    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:'防疫保單相關',
      },
    ];
    seniorityOptions=[
            {
                title:'不限 ',
                subTitle:'年齡不是問題',
                reversation:false
        label:'不限',
            },
            {
                title:'年輕 ',
                subTitle:'給年輕人一個機會',
                reversation:false
        label:'年輕',
            },
            {
                title:'資深 ',
                subTitle:'薑是老的辣',
                reversation:false
            },
        ]
        popularList=[
        label:'資深',
      }
    ];
    popularOptions=[
            {
                name:'防疫',
                reversation:false
        title: '#防疫',
        label:''
            },
            {
                name:'失能',
                reversation:false
        title: '#失能',
        label:'失能'
            },
            {
                name:'防癌',
                reversation:false
        title: '#防癌',
        label:'防癌'
            },
            {
                name:'醫療',
                reversation:false
        title: '#醫療',
        label:'醫療'
            },
            {
                name:'壽險',
                reversation:false
        title: '#壽險',
        label: '壽險'
            },
            {
                name:'儲蓄',
                reversation:false
        title: '#儲蓄',
        label:'儲蓄'
            },
            {
                name:'投資',
                reversation:false
        title: '#投資',
        label:'投資'
            },
            {
                name:'意外',
                reversation:false
        title: '#意外',
        label:'意外'
            }
        ];
        queaAboutList=[
@@ -192,52 +207,40 @@
                        content:'匹配度是透過嚴選配對或快速篩選後，將每一位保險顧問資料進行比對後排序推薦給您的媒合數值，您可以作為選擇適合顧問的參考值。'
                    },
                ];
        ageTarget(index: any){
            this.yearList[index].reversation = !this.yearList[index].reversation ;
    showDialog = false;
    showAddress = false;
    elRateColors = ['#ED1B2E', '#ED1B2E', '#ED1B2E'];

    makePair():void{
      strictQuery(this.strictQueryDto).then(res=>{
        console.log('resultData',res.data);
         this.$router.push('/recommendConsultant/result');
      });
        }
        popularTarget(index: any){
            this.popularList[index].reversation = !this.popularList[index].reversation ;
    get notFinishByRequireRules():boolean{
      const area = this.strictQueryDto.area;
      const requirementLength = this.strictQueryDto.requirements.length;
      return !(area && requirementLength >0)
        }

        get disableActionButton(): boolean {
            return true;
        }




        // @Prop() ilist

        // remove() {

        // }

        // get agentList() {
        //     return 
        // }
        selected() {
            console.log(this.ratevalue);
        }

        selectedDistrict(selectDistrict: string): void {
            console.log('sel', selectDistrict);
            this.district = selectDistrict;
            console.log('sel2', selectDistrict);

            // this.showAddress = false;
        }
  enum Gender{
    MALE="male",
    FEMALE="female",
    }
</script>

<style lang="scss">

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

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

.job-pick{
    height: 50px;
    border-radius:10px;
@@ -246,48 +249,55 @@
    justify-content: space-between;
    background-color: #FFFFFF;
}

.down-icon{
        color:#ED1B2E;
        font-size: 25px;
        display: flex;
        justify-content: flex-end;
        padding-top: 11px;
        margin-left: -20px;
    align-self: center;
    margin-right: 15px;
    }
.popOtherBtn{

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

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

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

.qaTextTitle{
    margin-top:30px
}

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

.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;
@@ -296,6 +306,7 @@
    justify-content: space-between;
    background-color: #FFFFFF;
}

.area-icon{
        color:#ED1B2E;
        font-size: 25px;
@@ -304,10 +315,12 @@
        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;
@@ -315,35 +328,34 @@
    background-color: #A7A8AA;  
    border:1px solid #A7A8AA;
}

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

.other-PopBtn{
    width: 90px;
    height: 47px;
    margin-top: 10px;
}
.other-input{
    margin-top: 20px;
    height: 50px;
    width:316px;
    border:1px solid #CCCCCC;
    ;
}



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

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

}

.rec-popular{
    display: flex;
    align-items: baseline;
@@ -354,22 +366,26 @@
.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;
@@ -379,24 +395,29 @@
    width: 90px;
    height:47px;
}

.rate-consultant{
    
    .el-rate__icon{
        font-size:35px
    }
}

.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;
@@ -409,6 +430,7 @@
    font-size: 16px;
    color: #ED1B2E;
    font-weight: bold;

    .icon-information {
        padding: 0 5px;
    }
@@ -422,21 +444,16 @@
}

@include desktop {
    .other-input{
    height: 50px;
    width:316px;
    border:1px solid #CCCCCC;
    margin-left: 10px;
}

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

    }

    .popOtherBtn{
    margin-left:10px;
    margin-top:-10px;
}
}
</style>

</style>