<template>
|
<div class="ques-page">
|
<div class="pb-18">
|
<span class="mdTxt">在預約之前，請幫助我們填寫以下問題(<i style="color: #FF0000">*</i>必填)</span>
|
</div>
|
<div class="pb-18">
|
<span class="mdTxt required">請問您希望保險顧問以電話或Email聯繫您呢?</span>
|
<span class="hint">可複選</span>
|
</div>
|
<div class="pam-tags">
|
<el-button
|
class="contactMax Btn"
|
:class="{ 'active': isConnectMobile }"
|
@click="toggleConnectDevice('mobile')"
|
>
|
手機
|
</el-button>
|
<el-button
|
class="contactMax Btn"
|
:class="{ 'active': isConnectEmail}"
|
@click="toggleConnectDevice('email')"
|
>
|
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
|
v-if="isConnectEmail"
|
class="pam-input"
|
placeholder="請輸入電子郵件信箱"
|
v-model="myRequest.email">
|
</el-input>
|
</el-row>
|
<div v-if="isConnectMobile">
|
<div class="datepicker">
|
<span class="mdTxt required">手機連絡的方便時間</span>
|
<PhoneContactTimePicker
|
:scheduleList.sync="myRequest.hopeContactTime"/>
|
</div>
|
</div>
|
</div>
|
|
<div class="mb-30">
|
<div>
|
<div class="pb-10 mt-10 mdTxt required">
|
想要詢問的問題
|
<span class="hint text--bold">
|
(可複選)
|
</span>
|
<i class="icon-information text--bold" @click="showDrawer = true"></i>
|
</div>
|
<ConsultantQues
|
@change="myRequest.myQuestion = $event"
|
:selectedQuestions="myRequest.myQuestion"
|
class="mb-30"/>
|
</div>
|
</div>
|
<div>
|
<div class="pb-10 mdTxt pt-10">您的性別</div>
|
<div class="mb-30 pam-tags">
|
<el-button class="desktopBtn tags" @click="myRequest.gender = 'male'" :class="{ 'active': myRequest.gender ==='male'}">男性</el-button>
|
<el-button class="desktopBtn tags" @click="myRequest.gender = 'female'" :class="{'active': myRequest.gender === 'female'}">女性</el-button>
|
</div>
|
</div>
|
<div class="mdTxt pb-10">年齡</div>
|
<div class="pam-age-tags">
|
<div>
|
<el-button class="ageDesktop" @click="myRequest.age = '20'" :class="{'active': myRequest.age === '20'}">20歲以下</el-button>
|
<el-button class="ageDesktop" @click="myRequest.age = '30'" :class="{'active': myRequest.age === '30'}">21-30歲</el-button>
|
<el-button class="ageDesktopP2" @click="myRequest.age = '40'" :class="{'active': myRequest.age === '40'}">31-40歲</el-button>
|
<el-button class="ageDesktop" @click="myRequest.age = '50'" :class="{'active': myRequest.age === '50'}">41-50歲</el-button>
|
<el-button class="ageDesktopP2" @click="myRequest.age = '55'" :class="{'active': myRequest.age === '55'}">46-55歲</el-button>
|
<el-button class="ageDesktop " @click="myRequest.age = '60'" :class="{'active': myRequest.age === '60'}">51-60歲</el-button>
|
<el-button class="ageDesktopP2" @click="myRequest.age = '70'" :class="{'active': myRequest.age === '70'}">61-70歲</el-button>
|
<el-button class="mb-10" @click="myRequest.age = '71'" :class="{'active': myRequest.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="myRequest.job === '其他'
|
? `其他, ${ myRequest.otherJob }`
|
: myRequest.job"
|
>
|
<i class="icon-down down-icon" style="margin-right:18px" @click="showJobDrawer = true" ></i>
|
</div>
|
|
<div class="ques-footer">
|
<el-button type="primary"
|
:disabled="isInitScheduleDisabled || !isSelectedQues"
|
@click.native="sentDemand"
|
>
|
送出
|
</el-button>
|
</div>
|
|
<PopUpFrame :isOpen.sync="showDrawer" :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="text--center mdTxt mt-10">
|
<el-button type="primary" @click="showDrawer = false">我知道了</el-button>
|
</div>
|
</PopUpFrame>
|
|
<PopUpFrame :isOpen.sync="showJobDrawer" drawerSize='60%'>
|
<div class="job-drawerTxt fz-20">
|
<div class="subTitle mt-18">職業</div>
|
|
<div class="radio-btn">
|
<el-radio-group class="pam-radio-group--col" v-model="myRequest.job">
|
<el-radio-button style="margin-top:30px" text-color='#F09491' 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="myRequest.job === '其他'" class="job-input mb-30 fz-20 pl-20" v-model="myRequest.otherJob" > </div>
|
<el-button type="primary" class="job-drawerBtn" @click="showJobDrawer = false">確定</el-button>
|
</div>
|
</PopUpFrame>
|
|
<PopUpFrame :isOpen.sync="sendReserve" @update:isOpen="closeReservePopUp">
|
<div class="fz-20 mt-30 sendReserve-txt">預約成功！您預約的保險顧問會</div>
|
<div class="fz-20 sendReserve-txt">儘速與您聯絡！</div>
|
<div class="text--center mdTxt">
|
<el-button
|
type="primary"
|
@click="closeReservePopUp"
|
>我知道了</el-button>
|
</div>
|
</PopUpFrame>
|
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component } from 'vue-property-decorator';
|
import { appointmentDemand, AppointmentParams, AppointmentRequests } from '~/assets/ts/api/consultant';
|
import { getRequestsFromStorage, setRequestsToStorage } from '~/assets/ts/storageRequests';
|
|
@Component
|
export default class Questionnaire extends Vue {
|
|
myRequest: AppointmentRequests = {
|
connectDevices: [],
|
hopeContactTime: [{
|
selectWeekOptions:[],
|
selectTimesOptions:[],
|
}],
|
gender: '',
|
email: '',
|
job: '',
|
otherJob: '',
|
myQuestion: [],
|
age: '',
|
};
|
|
showDrawer= false;
|
showJobDrawer = false;
|
sendReserve = false;
|
|
queaAboutList = [
|
{
|
title:'健康與保障',
|
content:'突發的意外或疾病，往往造成個人或家庭沉重的經濟負擔，周全的保險才能擁有一個無憂的未來。'
|
},
|
{
|
title:'子女教育',
|
content:'利用分紅保單，規劃教育基金 提早為子女作準備，讓生活更有保障！'
|
},
|
{
|
title:'資產規劃',
|
content:'當財務責任加重時，規劃充足的保障、提供經濟上的庇護，是人生最堅強的後盾。'
|
},
|
{
|
title:'樂活退休',
|
content:'兼具保險與投資雙重功能，可靈活搭配各種附約，順應人生不同階段的靈活需要。'
|
},
|
{
|
title:'保單健檢/規劃',
|
content:'全面檢視自己的保障結構是否符合現在或未來的風險移轉需求，透過「斷、捨、離」把錢花在刀口上。'
|
},
|
{
|
title:'防疫保單',
|
content:'匹配度是透過嚴選配對或快速篩選後，將每一位保險顧問資料進行比對後排序推薦給您的媒合數值，您可以作為選擇適合顧問的參考值。'
|
}
|
];
|
|
agentNo!: string;
|
|
get disableActionButton(): boolean {
|
return true;
|
};
|
|
get isConnectMobile(): boolean {
|
return this.myRequest.connectDevices.includes('mobile');
|
}
|
|
get isConnectEmail(): boolean {
|
return this.myRequest.connectDevices.includes('email');
|
}
|
|
get isSelectedQues(): boolean {
|
return !!this.myRequest.myQuestion.length;
|
}
|
|
get isInitScheduleDisabled() {
|
if (this.isConnectMobile && this.isConnectEmail) {
|
return !this.myRequest?.hopeContactTime[0]?.selectWeekOptions?.length
|
|| !this.myRequest?.hopeContactTime[0]?.selectTimesOptions?.length
|
|| !this.myRequest.email
|
} else if (this.isConnectMobile) {
|
return !this.myRequest?.hopeContactTime[0]?.selectWeekOptions?.length
|
|| !this.myRequest?.hopeContactTime[0]?.selectTimesOptions?.length
|
} else if (this.isConnectEmail) {
|
return !this.myRequest.email
|
}
|
return true;
|
}
|
|
mounted() {
|
this.agentNo = this.$route.params.agentNo;
|
const storageMyRequest = getRequestsFromStorage();
|
if (storageMyRequest) {
|
this.myRequest = storageMyRequest;
|
}
|
}
|
|
toggleConnectDevice(selectDevice: 'mobile' | 'email'): void {
|
const deviceSelected = this.myRequest.connectDevices.includes(selectDevice);
|
if (deviceSelected) {
|
const deviceIndex = this.myRequest.connectDevices.findIndex((device) => device === selectDevice);
|
this.myRequest.connectDevices.splice(deviceIndex, 1);
|
|
if (selectDevice === 'mobile') {
|
this.myRequest.hopeContactTime = [{
|
selectWeekOptions:[],
|
selectTimesOptions:[],
|
}]
|
}
|
|
if (selectDevice === 'email') {
|
this.myRequest.email = '';
|
}
|
return;
|
}
|
this.myRequest.connectDevices.push(selectDevice);
|
}
|
|
sentDemand() {
|
const data: AppointmentParams = {
|
phone: '09123456789',
|
email: this.myRequest.email,
|
contactType: this.myRequest.connectDevices.toString(),
|
gender: this.myRequest.gender,
|
age: this.myRequest.age,
|
job: this.myRequest.job !== '其他' ? this.myRequest.job : this.myRequest.otherJob,
|
requirement: this.myRequest.myQuestion
|
.filter((ques) => ques.selected)
|
.map((selQues) => selQues.name).toString(),
|
hopeContactTime: this.getHopeContactTime(),
|
agentNo: this.agentNo
|
};
|
|
appointmentDemand(data).then(res => {
|
this.sendReserve = true;
|
console.log('sendMyReq', this.myRequest.myQuestion);
|
this.myRequest.myQuestion = this.myRequest.myQuestion
|
.filter((ques) => ques.selected)
|
.map((selQues) => selQues.name);
|
setRequestsToStorage(this.myRequest);
|
});
|
}
|
|
getHopeContactTime() {
|
return this.myRequest.hopeContactTime.map(i => {
|
return `'${i.selectWeekOptions}、${i.selectTimesOptions}'`}
|
).toString();
|
}
|
|
closeReservePopUp() {
|
this.sendReserve = false;
|
this.$router.push('/')
|
}
|
}
|
|
export interface SelectedQuestion {
|
name: string;
|
selected: boolean;
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.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;
|
}
|
|
.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;
|
background-color: #FFFFFF;
|
}
|
|
.qa-dialog-footer{
|
display: flex;
|
justify-content: center;
|
margin-bottom: 81px;
|
color: #ED1B2E;
|
cursor: pointer;
|
}//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;
|
}
|
&.is-disabled {
|
color: $PRIMARY_WHITE;
|
background-color: $MID_GREY;
|
border-color: $MID_GREY;
|
border-style: solid;
|
pointer-events: none;
|
}
|
}
|
}//職業選項內所有文字排版與按鈕樣式設定
|
|
.ques-footer{
|
justify-content: center;
|
margin: 30px 0;
|
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;
|
}
|
&.is-disabled {
|
color: $PRIMARY_WHITE;
|
background-color: $MID_GREY;
|
border-color: $MID_GREY;
|
border-style: solid;
|
pointer-events: none;
|
}
|
}
|
}//送出按鈕樣式與排版
|
|
.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;
|
cursor: pointer;
|
}
|
.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;
|
}
|
|
.addDate{
|
margin-left: -20px;
|
}
|
|
.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;
|
padding:0 10px;
|
}
|
.icon-information {
|
font-size: 18px;
|
color: $ORANGE;
|
}
|
@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>
|
