TODO#139894 [ footer -最下方說明與保經代合作 ] 文案修改

HelenHuang

2022-06-09 9bdb95c9e34cef640534e5e5a1e2225a80442000

 PAMapp/pages/recommendConsultant/index.vue

@@ -1,442 +1,577 @@
 <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>  
<template>
  <div class="pam-rec-consultant-page">
    <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"
        @click="showAddress = true">
        <input class="text--middle cursor--pointer input pl-10"
          :value="strictQueryDto.area"
          placeholder="請選擇"
          readonly>
        <i class="icon-down down-icon"></i>
      </div>
      <PopUpFrame :isOpen.sync="showAddress">
        <AddressPicker @confirm="confirmAddress" />
      </PopUpFrame>
    </div>
    <div class="mb-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"
                placeholder="請選擇">
            <i class="icon-down down-icon " style="margin-right:18px"></i>
        </div> 
        <PopUpFrame :isOpen.sync="showAddress" :drawerSize=" '45%' ">
            <AddressPicker 
            @close="showAddress = false"
            @change="selectedDistrict"/>
        </PopUpFrame>
    <div class="pam-paragraph">
      <div class="pb-10 mdTxt required">
        想了解的領域
        <span class="hint text--bold">
          (可複選)
        </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">
      <div class="pb-10 mdTxt">顧問年資</div>
      <SingleSelectBtn :singleSelected.sync="strictQueryDto.seniority"
        :options="seniorityOptions" />
    </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>
    <div class="pam-paragraph">
      <div class="rec-popular">
        <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"
          class="rec-pop-options" />
      </div>
    </div>
    <div class="rec-footer pam-paragraph">
      <el-button type="primary"
        :disabled="notFinishByRequireRules"
        @click="makePair">馬上配對</el-button>
    </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>
        <ConsultantQues @change="selectedQuestion = $event" class="mb-30"/>
    

    <div class="mb-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>
    <PopUpFrame :isOpen.sync="showDialog">
      <div class="qaTextTitle mdTxt">
        <strong>想了解的領域</strong>
      </div>
      <div class="qa-dialog">
        <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="text--center mdTxt mt-30">
        <el-button type="primary"
          @click="showDialog = false">我知道了</el-button>
      </div>
    </PopUpFrame>

    </div>

    <div class="rate-consultant mb-30">
        <div>
            <div  class="pb-10 mdTxt">保險顧問滿意度</div>
    <PopUpFrame :isOpen.sync="isVisiblePopUp">
      <div class="text--center mdTxt">
        <p class="mb-50">尚無推薦資料</p>
        <div class="text--center mdTxt">
          <el-button type="primary"
            @click="isVisiblePopUp = false">我知道了</el-button>
        </div>
        <el-rate v-model="ratevalue" :colors="elRateColors" class="rate" @change="selected"></el-rate>
    </div>

    <div class="mb-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>
            </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>

    <div class="rec-footer">
        <el-button
        type="primary"
        
            :disabled="!district || !selectedQuestion.length"
            @click="$router.push('/recommendConsultant/result')">馬上配對</el-button>
    </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 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> 
        </PopUpFrame>

</div>
      </div>
    </PopUpFrame>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
@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=[
            {
                title:'不限 ',
                subTitle:'年齡不是問題',
                reversation:false
            },
            {
                title:'年輕 ',
                subTitle:'給年輕人一個機會',
                reversation:false
            },
            {
                title:'資深 ',
                subTitle:'薑是老的辣',
                reversation:false
            },
        ]
        popularList=[
            {
                name:'防疫',
                reversation:false
            },
            {
                name:'失能',
                reversation:false
            },
            {
                name:'防癌',
                reversation:false
            },
            {
                name:'醫療',
                reversation:false
            },
            {
                name:'壽險',
                reversation:false
            },
            {
                name:'儲蓄',
                reversation:false
            },
            {
                name:'投資',
                reversation:false
            },
            {
                name:'意外',
                reversation:false
            }
        ];
        queaAboutList=[
                    {
                        title:'健康與保障',
                        content:'突發的意外或疾病，往往造成個人或家庭沉重的經濟負擔，周全的保險才能擁有一個無憂的未來。'
                    },
                    {
                        title:'子女教育',
                        content:'利用分紅保單，規劃教育基金 提早為子女作準備，讓生活更有保障！'
                    },
                    {
                        title:'資產規劃',
                        content:'當財務責任加重時，規劃充足的保障、提供經濟上的庇護，是人生最堅強的後盾。'
                    },
                    {
                        title:'樂活退休',
                        content:'兼具保險與投資雙重功能，可靈活搭配各種附約，順應人生不同階段的靈活需要。'
                    },
                    {
                        title:'保單健檢/規劃',
                        content:'全面檢視自己的保障結構是否符合現在或未來的風險移轉需求，透過「斷、捨、離」把錢花在刀口上。'
                    },
                    {
                        title:'防疫保單',
                        content:'匹配度是透過嚴選配對或快速篩選後，將每一位保險顧問資料進行比對後排序推薦給您的媒合數值，您可以作為選擇適合顧問的參考值。'
                    },
                    {
                        title:'其他',
                        content:'匹配度是透過嚴選配對或快速篩選後，將每一位保險顧問資料進行比對後排序推薦給您的媒合數值，您可以作為選擇適合顧問的參考值。'
                    },
                ];
        ageTarget(index: any){
            this.yearList[index].reversation = !this.yearList[index].reversation ;
        }
        popularTarget(index: any){
            this.popularList[index].reversation = !this.popularList[index].reversation ;
        }

        get disableActionButton(): boolean {
            return true;
        }
  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: '',
      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;

        // @Prop() ilist
    @Action
    storeStrictQueryList!: (data: any) => Promise < number > ;

        // remove() {
    @State
    strictQueryList!: any;

        // }
    @localStorage.State
    recommendConsultantItem!: string;

        // 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;
        }
    //////////////////////////////////////////////////////////////////////
    mounted() {
      if (!!this.recommendConsultantItem) {
        this.strictQueryDto = {
          ...this.strictQueryDto,
          ...JSON.parse(this.recommendConsultantItem)
        };
      }
    }

    //////////////////////////////////////////////////////////////////////
    async makePair() {
      await this.storeStrictQueryList(this.strictQueryDto).then(dataLength => {
        if (dataLength === 0) {
          this.isVisiblePopUp = true;
          return;
        }
        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
              ? this.strictQueryDto.requirements.length
              : 0;
      return !(area && requirementLength > 0)
    }
  }

</script>

<style lang="scss">
  .pam-rec-consultant-page {
    .rec-pop-container {
      width: 310px;

input:focus,textarea:focus {
    outline: none;
}
.input{
    border:none;
    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;
        display: flex;
        justify-content: flex-end;
        padding-top: 11px;
        margin-left: -20px;
    }
.popOtherBtn{
      .rec-pop-options {
        .el-checkbox-group {
          display: flex;
          flex-wrap: wrap;
          flex-direction: row;

    margin-left: -190px;
    margin-top: 45px;
}
.genderBtn{
    width:80px;
    height:47px;
    display: contents;
}
.qa-dialog{
    overflow-y:auto;
    height: 500px;
    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;
    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;
    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;
          .el-checkbox {
            width: 90px;
            height: 50px;
            padding: 0;

}
.rec-popular{
    display: flex;
    align-items: baseline;
    padding-top: 10px;
    margin-bottom: 10px;
}
            .el-checkbox__label {
              justify-content: center;
              align-items: center;
              display: flex;
              padding: 15px 20px;
              text-align: center;
            }
          }

.rec-btn-type{
            padding-bottom: 10px;
          .pam-selectAll-btn {
            margin-top: 60px;
            margin-left: -203px;
            height: 50px;
            width: 90px;
            padding: 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;
}
.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 {
    }

    .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 {
      margin-right: 15px;
    }

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

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

    .qa-dialog {
      overflow-y: auto;
      height: 60vh;
      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;
      }
    }
}

.hint {
    font-size: 16px;
    color: #ED1B2E;
    font-weight: bold;
    .icon-information {
        padding: 0 5px;
    .area-txt {
      display: flex;
      align-items: center;
      margin-left: 18px;
    }
}

    @include desktop {

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

@include desktop {
    .other-input{
    height: 50px;
    width:316px;
    border:1px solid #CCCCCC;
    margin-left: 10px;
}
    .desktopBtn{
      .desktopBtn {
        margin-right: 10px;
        height:47px
        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;
        }
      }
    }
    .popOtherBtn{
    margin-left:10px;
    margin-top:-10px;
}
}
</style>
  }

</style>