保誠-保戶業務員媒合平台
HelenHuang
2021-11-15 47571868ecd073bdd76f238ed6a2aa86760f6c92
PAMapp/pages/recommendConsultant/index.vue
@@ -1,5 +1,5 @@
<template>
  <div>
  <div class="pam-rec-cosultant-page">
    <div class="pb-10 mdTxt">您的性別</div>
    <SingleSelectBtn :singleSelected.sync="strictQueryDto.gender" :options="genderOptions"/>
    <div class="pam-paragraph">
@@ -24,11 +24,11 @@
          <i class="icon-information text--bold" @click="showDialog = true"></i>可複選
        </span>
      </div>
      <MultiSelectBtn :mutiSelect.sync="strictQueryDto.requirements" :options="requirementOptions" />
      <MultiSelectBtn :mutiSelect.sync="strictQueryDto.requirements" :options="requirementOptions" class="rec-multi-select" />
    </div>
    <div class="pam-paragraph pam-tags">
      <div class="pb-10 mdTxt">顧問年資</div>
       <SingleSelectBtn :singleSelected.sync="strictQueryDto.seniority" :options="seniorityOptions"/>
        <SingleSelectBtn :singleSelected.sync="strictQueryDto.seniority" :options="seniorityOptions"/>
    </div>
    <div class="rate-consultant pam-paragraph">
      <div class="pb-10 mdTxt">保險顧問滿意度</div>
@@ -42,9 +42,11 @@
        <div class="pb-10 mdTxt">熱門檢索</div>
        <div class="hint text--bold ml-10">可複選</div>
      </div>
      <div class="rec-pop-container">
      <MultiSelectBtn :mutiSelect.sync="strictQueryDto.popularTags"
        :options="popularOptions"
        :nameOfOtherOption="'#其他'" :otherSelect.sync="strictQueryDto.otherPopularTags" />
        :nameOfOtherOption="'#其他'" :otherSelect.sync="strictQueryDto.otherPopularTags" class="rec-pop-options"/>
        </div>
    </div>
    <div class="rec-footer pam-paragraph">
      <el-button type="primary"
@@ -77,8 +79,9 @@
<script lang="ts">
  import {
    Vue,
    Component
  } from 'vue-property-decorator';
    Component,
    Mutation
  } from 'nuxt-property-decorator';
  import {strictQuery} from '~/assets/ts/api/consultant';
  import * as _ from 'lodash';
  @Component
@@ -215,10 +218,13 @@
    showAddress = false;
    elRateColors = ['#ED1B2E', '#ED1B2E', '#ED1B2E'];
    @Mutation updateStrictQueryList!: (data: any) => void;
    makePair():void{
      strictQuery(this.strictQueryDto).then(res=>{
        console.log('resultData',res.data);
         this.$router.push('/recommendConsultant/result');
        this.updateStrictQueryList(res.data);
        this.$router.push('/recommendConsultant/result');
      });
    }
    get notFinishByRequireRules():boolean{
@@ -233,7 +239,48 @@
  }
</script>
<style lang="scss">
<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;
@@ -274,7 +321,7 @@
  .qa-dialog {
    overflow-y: auto;
    height: auto;
    height: 500px;
    margin-top: 20px;
  }
@@ -287,6 +334,7 @@
    justify-content: center;
    margin-bottom: 81px;
    color: #ED1B2E;
    cursor: pointer;
  }
  .el-drawer__container ::-webkit-scrollbar {
@@ -426,6 +474,7 @@
      position: absolute;
      color: #FF0000;
      transform: translate(-12px, 0);
      z-index: 5;
    }
  }
@@ -436,6 +485,7 @@
    .icon-information {
      padding: 0 5px;
      cursor: pointer;
    }
  }
@@ -457,6 +507,48 @@
      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;
    }
  }
  }
}
</style>