<template>
|
<div class="pam-page">
|
<div class="pb-18">
|
<span class="mdTxt required">請問您希望保險顧問以電話或Email聯繫您呢?</span>
|
<span class="hint">可複選</span>
|
</div>
|
<div class="pam-tags">
|
<el-button :class="{ 'active': isConnectMobile}" @click="toggleConnectDevice('mobile')" class="contactMax Btn">手機</el-button>
|
<el-button :class="{ 'active': isConnectEmail}" @click="toggleConnectDevice('email')" class="contactMax Btn">Email</el-button>
|
</div>
|
<div class="connectDesktop">
|
<div v-if="isConnectMobile">
|
<span class="fz-20 phone-no">0912345678</span>
|
</div>
|
<el-row class="pb-10 pt-10">
|
<el-input class="pam-input" v-if="isConnectEmail" placeholder="請輸入電子郵件信箱" v-model="email">
|
</el-input>
|
</el-row>
|
<div v-if="isConnectMobile">
|
<div class="datepicker">
|
<span class="mdTxt required">手機連絡的方便時間</span>
|
<PhoneContactTimePicker :scheduleList.sync="initScheduleList"/>
|
</div>
|
</div>
|
</div>
|
|
|
<div class="mb-30">
|
<div>
|
<div class="pb-10 mt-10 mdTxt required">想要詢問的問題
|
<span class="hint text--bold" @click="showDrawer = true">
|
<i class="icon-information text--bold" @click="showDrawer = true"></i>可複選</span></div>
|
<ConsultantQues />
|
</div>
|
</div>
|
<div>
|
<div class="pb-10 mdTxt pt-10">您的性別</div>
|
<div class="mb-30 pam-tags">
|
<el-button class="desktopBtn tags" @click="gender = 'male'" :class="{ 'active': gender ==='male'}">男性</el-button>
|
<el-button class="desktopBtn tags" @click="gender = 'female'" :class="{'active': gender === 'female'}">女性</el-button>
|
</div>
|
</div>
|
<div class="mdTxt pb-10">年齡</div>
|
<div class=" pam-age-tags">
|
<div>
|
<el-button class="ageDesktop" @click="age = '20'" :class="{'active': age === '20'}">20歲以下</el-button>
|
<el-button class="ageDesktop" @click="age = '30'" :class="{'active': age === '30'}">21-30歲</el-button>
|
<el-button class="ageDesktopP2" @click="age = '40'" :class="{'active': age === '40'}">31-40歲</el-button>
|
<el-button class="ageDesktop" @click="age = '50'" :class="{'active': age === '50'}">41-50歲</el-button>
|
<el-button class="ageDesktopP2" @click="age = '55'" :class="{'active': age === '55'}">46-55歲</el-button>
|
<el-button class="ageDesktop " @click="age = '60'" :class="{'active': age === '60'}">51-60歲</el-button>
|
<el-button class="ageDesktopP2" @click="age = '70'" :class="{'active': age === '70'}">61-70歲</el-button>
|
<el-button class="mb-10" @click="age = '71'" :class="{'active': age === '71'}">71歲以上</el-button>
|
</div>
|
</div>
|
|
<div class="mdTxt pt-10 pb-10">職業</div>
|
<div class="job-pick" @click="showJobDrawer = true">
|
<input class="fz-20 pl-18 input"
|
style="outline:none margin-right:-18px"
|
@click="showJobDrawer = true" placeholder="請選擇" :value="staff === '其他' ? `其他, ${inputValue}` : staff">
|
|
<i class="icon-down down-icon " style="margin-right:18px" @click="showJobDrawer = true" ></i>
|
</div>
|
<div class="ques-footer pt-30">
|
<el-button type="primary" @click="sendReserve = true">送出</el-button>
|
</div>
|
|
<UiDrawer :is-visible.sync="showDrawer" size='95%'>
|
|
<div class="qaTextTitle mdTxt">想要詢問的問題</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="showDrawer = false"><p>我知道了</p></div>
|
</UiDrawer>
|
|
<UiDrawer :is-visible.sync="showJobDrawer" size='60%'>
|
|
<div class="job-drawerTxt fz-20">
|
<div class="subTitle mt-18">職業</div>
|
<!-- <p class="mt-30 fz-20" @click="staff ='內勤'" :class="{'jobBtn':staff === '內勤' }">內勤</p> -->
|
<div class="radio-btn">
|
<el-radio-group class="pam-radio-group--col" v-model="staff">
|
<el-radio-button style="margin-top:30px" label="外勤"></el-radio-button>
|
<el-radio-button style="margin-top:30px" label="內勤"></el-radio-button>
|
<el-radio-button style="margin-top:30px" label="其他"></el-radio-button>
|
</el-radio-group>
|
</div>
|
<div class="job-inputDiv"><input v-if="staff === '其他'" class="job-input mb-30 fz-20 pl-20" v-model="inputValue" > </div>
|
<el-button type="primary" class="job-drawerBtn" @click="showJobDrawer = false">確定</el-button>
|
</div>
|
</UiDrawer>
|
<UiDrawer :is-visible.sync="sendReserve">
|
<div class="fz-20 mt-30">預約成功！您預約的保險顧問會</div>
|
<div class="fz-20 sendReserve-txt">儘速與您聯絡！</div>
|
<div class="qa-dialog-footer mdTxt" @click="sendReserve = false"><p>我知道了</p></div>
|
</UiDrawer>
|
</div>
|
</template>
|
<script lang="ts">
|
import { Vue, Component } from 'vue-property-decorator';
|
|
@Component
|
export default class Questionnaire extends Vue {
|
|
gender: 'male'|'female' = 'male';
|
// connectTarget:'mobile'|'email'='mobile';
|
connectDevices = ['1111'];
|
mobileNumber = '';
|
email = '';
|
inputValue='';
|
// staff:'in'|'out'|'jobOther'='in';
|
staff = '外勤';
|
|
age:'20'|'30'|'40'|'50'|'55'|'60'|'70'|'71' = '20';
|
showDrawer= false;
|
showJobDrawer = false;
|
sendReserve = false;
|
// datepicker Dto
|
initScheduleList=[
|
{
|
selectWeekOptions:[],
|
selectTimesOptions:[],
|
}
|
]
|
|
// editJob(targetJob: string): void {
|
// const isExist = this.jobList.find((job) => job === targetJob);
|
// if (isExist) {
|
// const jobIndex = this.jobList.findIndex((job) => job === targetJob);
|
// this.jobList.splice(jobIndex, 1);
|
// } else {
|
// this.jobList.push(targetJob);
|
// }
|
// }
|
queaAboutList=[
|
{
|
title:'健康與保障',
|
content:'突發的意外或疾病，往往造成個人或家庭沉重的經濟負擔，周全的保險才能擁有一個無憂的未來。'
|
},
|
{
|
title:'子女教育',
|
content:'利用分紅保單，規劃教育基金 提早為子女作準備，讓生活更有保障！'
|
},
|
{
|
title:'資產規劃',
|
content:'當財務責任加重時，規劃充足的保障、提供經濟上的庇護，是人生最堅強的後盾。'
|
},
|
{
|
title:'樂活退休',
|
content:'兼具保險與投資雙重功能，可靈活搭配各種附約，順應人生不同階段的靈活需要。'
|
},
|
{
|
title:'保單健檢/規劃',
|
content:'全面檢視自己的保障結構是否符合現在或未來的風險移轉需求，透過「斷、捨、離」把錢花在刀口上。'
|
},
|
{
|
title:'防疫保單',
|
content:'匹配度是透過嚴選配對或快速篩選後，將每一位保險顧問資料進行比對後排序推薦給您的媒合數值，您可以作為選擇適合顧問的參考值。'
|
},
|
{
|
title:'其他',
|
content:'匹配度是透過嚴選配對或快速篩選後，將每一位保險顧問資料進行比對後排序推薦給您的媒合數值，您可以作為選擇適合顧問的參考值。'
|
},
|
]
|
|
|
get disableActionButton(): boolean {
|
return true;
|
};
|
|
get isConnectMobile(): boolean {
|
return this.connectDevices.includes('mobile');
|
}
|
|
get isConnectEmail(): boolean {
|
return this.connectDevices.includes('email');
|
}
|
|
toggleConnectDevice(selectDevice: 'mobile' | 'email'): void {
|
const deviceSelected = this.connectDevices.includes(selectDevice);
|
if (deviceSelected) {
|
const deviceIndex = this.connectDevices.findIndex((device) => device === selectDevice);
|
this.connectDevices.splice(deviceIndex, 1);
|
return;
|
}
|
this.connectDevices.push(selectDevice);
|
}
|
|
}
|
</script>
|
<style lang="scss">
|
.el-radio-button__orig-radio:checked+.el-radio-button__inner{
|
background-color: #FFFFFF;
|
color: black;
|
border-color:none;
|
border:none;
|
box-shadow: none;
|
font-weight: bold;
|
}
|
.el-radio-button:first-child .el-radio-button__inner{
|
border-left:none;
|
}
|
.el-radio-button__inner {
|
border:none;
|
font-size: 20px;
|
}
|
.radio-btn{
|
display: flex;
|
flex-direction: column;
|
margin-top: 30px;
|
}
|
.input{
|
border:none;
|
border-radius: 10px;
|
}
|
.pl-18{
|
padding-left: 18px;
|
}
|
.ageDesktop{
|
margin-bottom: 10px;
|
margin-right: 20px;
|
height:47px;
|
}
|
.ageDesktopP2{
|
margin-right: 30px;
|
margin-bottom: 10px;
|
height:47px;
|
}
|
|
.ml-5{
|
margin-left: -5px;
|
}
|
.mr-25{
|
margin-right: 30px;
|
}
|
.job-drawerTxt{
|
|
input:focus,textarea:focus {
|
|
outline: none;
|
|
border: 1px solid #ED1B2E;
|
|
}
|
}
|
input:focus,textarea:focus {
|
|
outline: none;
|
|
border: 1px solid #FFFFFF;
|
|
}
|
.sendReserve-txt{
|
display: flex;
|
justify-content: center;
|
margin-top: 10px;
|
margin-bottom: 26px;
|
}
|
.pl-20{
|
padding-left: 20px;
|
}
|
.ques-footer{
|
display: flex;
|
justify-content: center;
|
}
|
.job-inputDiv{
|
height:90px;
|
}
|
.jobBtn{
|
font-weight:bold;
|
}//職業選項,按了變粗體
|
.job-input{
|
height: 50px;
|
width: 294px;
|
border: 1px solid #FF0000;
|
}//職業選項,其他輸入框樣式
|
.job-pick{
|
height: 50px;
|
border-radius:10px;
|
border:1px solid #D0D0CE ;
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.qa-dialog-footer{
|
display: flex;
|
justify-content: center;
|
margin-bottom: 81px;
|
color: #ED1B2E;
|
}//drawer最底下文字樣式
|
.mt-18{
|
margin-top: 18px;
|
}
|
.job-drawerTxt{
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
.el-button {
|
width: 120px;
|
height:50px;
|
background-color: #ED1B2E;
|
color:#FFFFFF;
|
font-weight: normal;
|
@extend .fz-20;
|
&.el-button--default {
|
color: $PRIMARY_RED;
|
background-color: #FFFFFF;
|
border-color: $PRIMARY_RED;
|
}
|
&.el-button--primary {
|
background-color: $PRIMARY_RED;
|
border-color: $PRIMARY_RED;
|
}
|
}
|
}//職業選項內所有文字排版與按鈕樣式設定
|
.ques-footer{
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
.el-button {
|
width: 120px;
|
height:50px;
|
background-color: #ED1B2E;
|
color:#FFFFFF;
|
font-weight: normal;
|
@extend .fz-20;
|
&.el-button--default {
|
color: $PRIMARY_RED;
|
background-color: #FFFFFF;
|
border-color: $PRIMARY_RED;
|
}
|
&.el-button--primary {
|
background-color: $PRIMARY_RED;
|
border-color: $PRIMARY_RED;
|
}
|
}
|
}//送出按鈕樣式與排版
|
.qa-dialog{
|
overflow-y:auto;
|
height: 500px;
|
margin-top: 20px;
|
}//詳細問題drawer中間內容空間大小設置
|
.qaTextTitle{
|
margin-top:30px;
|
display: flex;
|
justify-content: center;
|
}//詳細問題drawer主要標題
|
.el-drawer__container ::-webkit-scrollbar {
|
display: none;
|
}
|
.phone-no{
|
margin-bottom: 30px;
|
margin-left: 5px;
|
}
|
.qa-dialog-footer{
|
display: flex;
|
justify-content: center;
|
margin-bottom: 81px;
|
}
|
.el-button+.el-button{
|
margin-left: 0;
|
}
|
.down-icon{
|
color:#ED1B2E;
|
font-size: 25px;
|
display: flex;
|
justify-content: flex-end;
|
padding-top: 11px;
|
margin-left: -20px;
|
}
|
.job-txt{
|
align-self: center;
|
margin-left: 18px;
|
color:#D0D0CE;
|
|
}
|
.date-txt{
|
align-self: center;
|
margin-left: 18px;
|
color: #68737A;
|
}
|
.add-date{
|
color:#D0D0CE;
|
padding-top: 10px;
|
padding-bottom: 30px;
|
font-size: 20px;
|
}
|
.pb-16{
|
padding-bottom: 16px;
|
}
|
.date-pick{
|
height: 50px;
|
border-radius:10px;
|
border:1px solid #D0D0CE ;
|
display: flex;
|
justify-content: space-between;
|
}
|
.date-icon{
|
color:#ED1B2E;
|
font-size: 25px;
|
display: flex;
|
justify-content: flex-end;
|
padding-right: 16px;
|
padding-top: 11px;
|
}
|
|
.ageTags{
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: flex-start;
|
}
|
.datepicker{
|
display: flex;
|
flex-direction: column;
|
}
|
.pb-18{
|
padding-bottom: 18px;
|
}
|
.mr-20{
|
margin-right: 20px;
|
}
|
.pam-age-tags {
|
display: flex;
|
.el-button {
|
border-width: 2px;
|
border-radius: 30px;
|
padding: 10px 20px;
|
font-weight: normal;
|
@extend .fz-20;
|
&.el-button--default {
|
color: black;
|
background-color: #FFFFFF;
|
border-color: #D0D0CE;
|
}
|
&.el-button--primary {
|
background-color: $PRIMARY_RED;
|
border-color: #D0D0CE;
|
}
|
&.active {
|
background-color: #F09491;
|
color: white;
|
}
|
}
|
}
|
|
.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;
|
}
|
}
|
@include desktop {
|
.contactMax{
|
margin-right: 10px;
|
}
|
.connectDesktop{
|
display: flex;
|
flex-direction: column;
|
}
|
.desktopBtn{
|
margin-right: 10px;
|
height:47px
|
}
|
.ageDesktop{
|
margin-right: 10px;
|
}
|
.ageDesktopP2{
|
margin-right: 10px;
|
}
|
}
|
|
</style>
|
