<template>
|
<div>
|
<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 @change="selectedQuestion = $event" 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="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 pam-paragraph">
|
<el-button type="primary"
|
:disabled=" isInitScheduleDisabled || !isSelected"
|
@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="qa-dialog-footer mdTxt" @click="showDrawer = false"><p>我知道了</p></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="staff">
|
<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="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>
|
</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="qa-dialog-footer mdTxt" @click="closeReservePopUp"><p>我知道了</p></div>
|
</PopUpFrame>
|
|
</div>
|
</template>
|
<script lang="ts">
|
import { Vue, Component } from 'vue-property-decorator';
|
import { appointmentDemand } from '~/assets/ts/api/consultant';
|
|
|
@Component
|
export default class Questionnaire extends Vue {
|
|
gender: 'male'|'female' = 'male';
|
connectDevices = new Array();
|
mobileNumber = '';
|
email = '';
|
inputValue='';
|
selectedQuestion: SelectedQuestion[] = [];
|
staff = '外勤';
|
|
|
age:'20'|'30'|'40'|'50'|'55'|'60'|'70'|'71' = '20';
|
showDrawer= false;
|
showJobDrawer = false;
|
sendReserve = false;
|
initScheduleList=[{
|
selectWeekOptions:[],
|
selectTimesOptions:[],
|
}]
|
|
queaAboutList=[
|
{
|
title:'健康與保障',
|
content:'突發的意外或疾病，往往造成個人或家庭沉重的經濟負擔，周全的保險才能擁有一個無憂的未來。'
|
},
|
{
|
title:'子女教育',
|
content:'利用分紅保單，規劃教育基金 提早為子女作準備，讓生活更有保障！'
|
},
|
{
|
title:'資產規劃',
|
content:'當財務責任加重時，規劃充足的保障、提供經濟上的庇護，是人生最堅強的後盾。'
|
},
|
{
|
title:'樂活退休',
|
content:'兼具保險與投資雙重功能，可靈活搭配各種附約，順應人生不同階段的靈活需要。'
|
},
|
{
|
title:'保單健檢/規劃',
|
content:'全面檢視自己的保障結構是否符合現在或未來的風險移轉需求，透過「斷、捨、離」把錢花在刀口上。'
|
},
|
{
|
title:'防疫保單',
|
content:'匹配度是透過嚴選配對或快速篩選後，將每一位保險顧問資料進行比對後排序推薦給您的媒合數值，您可以作為選擇適合顧問的參考值。'
|
},
|
{
|
title:'其他',
|
content:'匹配度是透過嚴選配對或快速篩選後，將每一位保險顧問資料進行比對後排序推薦給您的媒合數值，您可以作為選擇適合顧問的參考值。'
|
},
|
]
|
agentNo!: string;
|
|
get disableActionButton(): boolean {
|
return true;
|
};
|
|
|
get isConnectMobile(): boolean {
|
return this.connectDevices.includes('mobile');
|
}
|
|
get isConnectEmail(): boolean {
|
return this.connectDevices.includes('email');
|
}
|
|
mounted() {
|
this.agentNo = this.$route.params.agentNo;
|
}
|
get isSelected() {
|
return this.selectedQuestion.findIndex(i => i.selected)>=0
|
}
|
|
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);
|
|
if (selectDevice === 'mobile') {
|
this.initScheduleList = [{
|
selectWeekOptions:[],
|
selectTimesOptions:[],
|
}]
|
}
|
|
if (selectDevice === 'email') {
|
this.email = '';
|
}
|
return;
|
}
|
this.connectDevices.push(selectDevice);
|
|
}
|
|
sentDemand() {
|
const data = {
|
phone: '09123456789',
|
email: this.email,
|
contactType: this.connectDevices.toString(),
|
gender: this.gender,
|
age: this.age,
|
job: this.staff,
|
requirement: this.getRequirement(),
|
hopeContactTime: this.getHopeContactTime(),
|
otherRequirement: '',
|
agentNo: this.agentNo
|
}
|
appointmentDemand(data).then(res => {
|
this.sendReserve = true
|
})
|
}
|
|
getRequirement() {
|
const requirement = this.selectedQuestion.filter(item => item.selected)
|
return requirement.map(item => item.name).toString();
|
}
|
|
getHopeContactTime() {
|
const initScheduleList = this.initScheduleList.map(item => {
|
return {
|
selectWeekOptions: item.selectWeekOptions.toString(),
|
selectTimesOptions: item.selectTimesOptions.toString()
|
}
|
})
|
|
return initScheduleList.map(i => {
|
return `'${i.selectWeekOptions},${i.selectTimesOptions}'`}
|
).toString()
|
}
|
|
closeReservePopUp() {
|
this.sendReserve = false;
|
this.$router.push('/')
|
}
|
|
get isInitScheduleDisabled() {
|
console.log(this.isConnectMobile)
|
if (this.isConnectMobile && this.isConnectEmail) {
|
return !this.initScheduleList[0].selectWeekOptions.length || !this.initScheduleList[0].selectTimesOptions.length || !this.email
|
} else if (this.isConnectMobile) {
|
return !this.initScheduleList[0].selectWeekOptions.length || !this.initScheduleList[0].selectTimesOptions.length
|
} else if (this.isConnectEmail) {
|
return !this.email
|
}
|
return true;
|
}
|
}
|
|
export interface SelectedQuestion {
|
name: string;
|
selected: boolean;
|
}
|
</script>
|
<style lang="scss" scoped>
|
.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;
|
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;
|
}
|
}
|
}//職業選項內所有文字排版與按鈕樣式設定
|
.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;
|
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;
|
.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>
|
