<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">
|
<div class="pb-10 mdTxt required">所在地區</div>
|
<div class="area-choice"><div class="fz-20 area-txt">新北市</div><i class="icon-down area-icon"></i></div>
|
</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 class="mb-30"/>
|
|
|
<div class="mb-30 pam-tags">
|
<div class= "pb-10 mdTxt">顧問年資</div>
|
<div class="rec-ageDesktop">
|
<el-button class="mb-10 qaTags" @click="seniority = 'unlimited'" :class="{'active':seniority === 'unlimited'}">
|
<span class="text--bold">不限 </span><span>年齡不是問題</span>
|
</el-button>
|
<el-button class="mb-10 qaTags" @click="seniority = 'junior'" :class="{'active':seniority === 'junior'}">
|
<span class="text--bold">年輕 </span><span>給年輕人一個機會</span>
|
</el-button>
|
<el-button class="mb-10 qaTags" @click="seniority = 'senior'" :class="{'active':seniority === 'senior'}">
|
<span class="text--bold">資深 </span><span>薑是老的辣</span>
|
</el-button>
|
</div>
|
|
|
</div>
|
|
<div class="rate-consultant mb-30">
|
<div>
|
<div class="pb-10 mdTxt">保險顧問滿意度</div>
|
</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
|
:disabled="disableActionButton"
|
@click="$router.push('recommendConsultant/result')">馬上配對</el-button>
|
</div>
|
<UiDrawer :is-visible.sync="showDialog" size='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>
|
</UiDrawer>
|
<!-- <UiDialog :is-visible.sync="showDialog" >
|
|
|
|
|
</UiDialog> -->
|
</div>
|
</template>
|
<script lang="ts">
|
import { Vue, Component } from 'vue-property-decorator';
|
@Component
|
export default class RecommendConsultant extends Vue {
|
|
ratevalue = null;
|
showDialog = false;
|
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;
|
}
|
|
|
|
// @Prop() ilist
|
|
// remove() {
|
|
// }
|
|
// get agentList() {
|
// return
|
// }
|
selected() {
|
console.log(this.ratevalue);
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.popOtherBtn{
|
|
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;
|
|
}
|
.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;
|
}
|
.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;
|
color: #FF0000;
|
transform: translate(-12px, 0);
|
}
|
}
|
|
.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 {
|
.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>
|
