import { Vue, Component, State, Action, Watch } from 'nuxt-property-decorator';
|
import { addFavoriteConsultant, appointmentDemand, AppointmentParams, AppointmentRequests ,editAppointment,RegisterInfo } from '~/assets/ts/api/consultant';
|
import { getRequestQuestionFromStorage, getRequestsFromStorage, removeRequestQuestionFromStorage, setRequestsToStorage } from '~/assets/ts/storageRequests';
|
import _ from 'lodash';
|
import { isLogin } from '~/assets/ts/auth';
|
import { Consultant } from '~/assets/ts/models/consultant.model';
|
import { ContactType } from '~/assets/ts/models/enum/ContactType';
|
import { Gender } from '~/assets/ts/models/enum/gender.enum';
|
|
@Component
|
export default class Questionnaire extends Vue {
|
@State('myConsultantList') myConsultantList!: Consultant[];
|
@Action storeConsultantList!: () => Promise<number>;
|
|
genderOptions=[
|
{
|
title:'男性',
|
label:Gender.MALE,
|
},
|
{
|
title:'女性',
|
label:Gender.FEMALE,
|
}
|
];
|
|
requirementOptions=[
|
{
|
title:'健康與保障',
|
label:'健康與保障',
|
},
|
{
|
title:'子女教育',
|
label:'子女教育',
|
},
|
{
|
title:'資產規劃',
|
label:'資產規劃',
|
},
|
{
|
title:'樂活退休',
|
label:'樂活退休',
|
},
|
{
|
title:'保單健檢/規劃',
|
label:'保單健檢/規劃',
|
},
|
{
|
title:'分紅保單',
|
label:'分紅保單',
|
},
|
];
|
|
ageRangeOptions=[
|
{
|
title:'20歲以下',
|
label:'under_20',
|
},
|
{
|
title:'21-30 歲',
|
label:'21-30'
|
},
|
{
|
title:'31-40 歲',
|
label:'31-40'
|
},
|
{
|
title:'41-50 歲',
|
label:'41-50'
|
},
|
{
|
title:'51-60 歲',
|
label:'51-60',
|
},
|
{
|
title:'61-70 歲',
|
label:'61-70',
|
},
|
{
|
title:'71 歲以上',
|
label:'over_71',
|
}
|
];
|
|
quesAboutList = [
|
{
|
title:'健康與保障',
|
content:'唯有把身體照顧好，才是保障幸福之本，不做盲目燃燒的蠟燭，只做綻開的陽光，陪孩子多走一哩路，人生的美正要開展。'
|
},
|
{
|
title:'子女教育',
|
content:'孩子，我們是雙方的導師也是學生，面對未來要並肩作戰，學會勇敢無畏、克服挫折、善於理財，這條路上我們一起學。'
|
},
|
{
|
title:'資產規劃',
|
content:'真正的財富來自嚴謹規劃資產傳承，為人生蓋一堵抵禦財務風險的牆，確保資產穩健成長，替全家族的未來做好萬全準備。'
|
},
|
{
|
title:'樂活退休',
|
content:'拼一輩子，退休後的日子要輕鬆快活，就得提早透過保險商品規劃退休財務，替自己創造穩定收入，為精彩的熟年人生揭開序幕。'
|
},
|
{
|
title:'保單健檢/規劃',
|
content:'全面檢視自己的保障結構是否符合現在或未來的風險移轉需求。'
|
},
|
{
|
title:'分紅保單',
|
content:'分紅保單 分紅保單是兼具「分攤風險」與「紅利共享」特色的保單，具有一定穩定度，讓你可以同時享有壽險保障及紅利！'
|
}
|
];
|
|
myRequest: AppointmentRequests = {
|
phone : this.userInfo?.phone ? this.userInfo.phone : '',
|
email : this.userInfo?.email ? this.userInfo.email : '',
|
contactType : _.isEqual(this.userInfo?.contactType,ContactType.SMS) ? ContactType.PHONE: ContactType.EMAIL,
|
gender : '',
|
age : '',
|
job : '',
|
requirement : [],
|
hopeContactTime: [{
|
selectWeekOptions : [],
|
selectTimesOptions: [],
|
}],
|
agentNo: '',
|
};
|
|
showDrawer= false;
|
sendReserve = false;
|
isEditPopup = false;
|
isEditBtn = false;
|
|
appointmentId = 0;
|
|
beforeRouteEnter(to: any, from: any, next: any) {
|
next(vm => {
|
if (from.name === 'login' && !isLogin()) {
|
vm.$router.go(-1);
|
return;
|
}
|
|
if (!isLogin()) {
|
vm.$router.push('/login');
|
}
|
})
|
}
|
|
async fetch() {
|
if (isLogin()) {
|
await this.storeConsultantList();
|
};
|
}
|
|
mounted(): void {
|
this.setMyRequest();
|
}
|
|
private setMyRequest(): void {
|
const storageMyRequest = getRequestsFromStorage();
|
const storageMyQuestion = getRequestQuestionFromStorage();
|
|
if (storageMyRequest) {
|
this.myRequest = {
|
...storageMyRequest,
|
hopeContactTime: storageMyRequest.hopeContactTime?.length
|
? storageMyRequest.hopeContactTime
|
: [{
|
selectWeekOptions: [],
|
selectTimesOptions: [],
|
}],
|
};
|
}
|
|
if (storageMyQuestion) {
|
this.myRequest = {
|
...this.myRequest,
|
requirement: storageMyQuestion
|
}
|
removeRequestQuestionFromStorage();
|
}
|
}
|
|
get phoneValid(): boolean {
|
const rule = /^09[0-9]{8}$/;
|
return this.myRequest.phone
|
? rule.test(this.myRequest.phone) && _.isEqual(this.myRequest.phone.length,10)
|
: true;
|
}
|
|
get userInfo(): RegisterInfo {
|
const initUserInfo = JSON.parse(localStorage.getItem('userInfo')!);
|
return initUserInfo;
|
}
|
|
get isDisabledSubmitBtn(): boolean {
|
return _.includes(this.myRequest.contactType,ContactType.PHONE)
|
? !this.isHopeContactTimeDone()
|
: !this.phoneValid;
|
}
|
|
get isLogin() {
|
return isLogin();
|
}
|
|
private isHopeContactTimeDone():boolean{
|
return this.myRequest.hopeContactTime[0]?.selectWeekOptions.length >0 && this.myRequest.hopeContactTime[0]?.selectTimesOptions.length >0;
|
}
|
|
sentDemand() {
|
if (this.isEditBtn) {
|
this.sentEditAppointmentDemand();
|
} else {
|
addFavoriteConsultant([this.$route.params.agentNo]).then(res => this.sentAppointmentDemand());
|
}
|
|
}
|
|
private sentAppointmentDemand() {
|
const data: AppointmentParams = {
|
...this.myRequest,
|
requirement: _.map(this.myRequest.requirement,o=>o).toString(),
|
hopeContactTime: this.myRequest.phone && this.phoneValid ? this.getHopeContactTime() :'',
|
agentNo: this.$route.params.agentNo
|
};
|
|
appointmentDemand(data).then(res => {
|
this.sendReserve = true;
|
this.myRequest.hopeContactTime = [];
|
setRequestsToStorage(this.myRequest);
|
});
|
}
|
|
private sentEditAppointmentDemand() {
|
const info = {
|
...this.myRequest,
|
requirement: _.map(this.myRequest.requirement,o=>o).toString(),
|
hopeContactTime: this.myRequest.phone && this.phoneValid ? this.getHopeContactTime() :'',
|
id: this.appointmentId,
|
otherRequirement: null
|
}
|
editAppointment(info).then(res => {
|
this.sendReserve = true;
|
this.myRequest.hopeContactTime = [];
|
setRequestsToStorage(this.myRequest);
|
});
|
}
|
|
getHopeContactTime() {
|
const selectedHopeContactTime = this.myRequest.hopeContactTime.filter((i) => i.selectWeekOptions?.length && i.selectTimesOptions?.length);
|
return selectedHopeContactTime.map(i => {
|
return `'${i.selectWeekOptions}、${i.selectTimesOptions}'`}
|
).toString();
|
}
|
|
closeReservePopUp() {
|
this.sendReserve = false;
|
this.$router.push('/')
|
}
|
|
private getLatestReserved(agentNo) {
|
const agentInfo = this.myConsultantList.filter(item => item.agentNo === agentNo);
|
|
const appointmentInfo = agentInfo.length > 0 && agentInfo[0].appointments
|
? agentInfo[0].appointments!
|
.filter((appointment) => appointment.communicateStatus !== 'contacted')
|
.map((reversedAppointment) => {
|
return {
|
...reversedAppointment,
|
sortDate: new Date(reversedAppointment.appointmentDate)
|
}
|
})
|
.sort((preAppointment, nextAppointment) => +nextAppointment.sortDate - +preAppointment.sortDate)[0]
|
: null;
|
return this.getReservedData(appointmentInfo);
|
}
|
|
private getReservedData(appointmentInfo) {
|
if (appointmentInfo) {
|
const hopeContactTime = appointmentInfo!.hopeContactTime.split("'")
|
.filter(item => item && item !== ',');
|
this.appointmentId = appointmentInfo.id;
|
return {
|
age: appointmentInfo.age,
|
agentNo: appointmentInfo.agentNo,
|
contactType: appointmentInfo.contactType,
|
email: appointmentInfo.email || '',
|
gender: appointmentInfo.gender,
|
hopeContactTime: hopeContactTime.map(item => {
|
const info = item.split('、');
|
return {
|
selectWeekOptions: info[0].split(','),
|
selectTimesOptions: info[1].split(',')
|
}
|
}),
|
job: appointmentInfo.job,
|
phone: appointmentInfo.phone || '',
|
requirement: appointmentInfo.requirement.split(',')
|
}
|
} else {
|
return {
|
age: '',
|
agentNo: '',
|
contactType: '',
|
email: '',
|
gender: '',
|
hopeContactTime: [],
|
job: '',
|
phone: '',
|
requirement: []
|
}
|
}
|
}
|
|
@Watch('myConsultantList') onMyConsultantListChange() {
|
if (this.isLogin && this.myConsultantList.length > 0) {
|
const editAppointment = this.getLatestReserved(this.$route.params.agentNo);
|
|
if (editAppointment.agentNo) {
|
this.myRequest = JSON.parse(JSON.stringify(editAppointment));
|
if (!this.$route.query || this.$route.query.edit !== 'true') {
|
this.isEditPopup = true;
|
}
|
this.isEditBtn = true;
|
return;
|
}
|
}
|
}
|
}
|
