<template>
|
<div>
|
<div class="pam-paragraph pam-quick-filter__options">
|
<el-button v-for="(question, index) in questionList"
|
:key="index"
|
class="subTitle pam-quick-filter__btn"
|
:class="{'is-active': isActive(question.name)}"
|
@click="openPopUp(question)">{{question.title}}</el-button>
|
</div>
|
|
<div class="pam-paragraph">
|
<div class="mdTxt">篩選條件</div>
|
<div class="mt-10">
|
<template v-if="confirmItem.length > 0">
|
<UiTags v-for="(item, index) in confirmItem"
|
:key="index"
|
@removeTag="removeTag(item.value)">
|
<span v-if="item.option === 'gender'">
|
{{item.value === 'male' ? '男性' : '女性'}}
|
</span>
|
<span v-else-if="item.option === 'seniority'">
|
{{item.value | formatSeniorityTitle}}
|
<span class="smTxt">{{item.value | formatSenioritySubTitle}}</span>
|
</span>
|
<span v-else-if="item.option === 'avgScore' && !hideReviews">{{item.value + '星以上滿意度'}}</span>
|
<span v-else>{{item.value}}</span>
|
</UiTags>
|
</template>
|
<div v-else
|
class="pam-quick-filter__empty text--mid_grey">
|
<p class="smTxt">尚無篩選</p>
|
</div>
|
</div>
|
</div>
|
|
<div class="pam-paragraph">
|
<span class="mdTxt">快速篩選推薦</span>
|
<span class="smTxt_bold text--prudential_grey ml-10">共 {{consultantList.length}} 筆</span>
|
</div>
|
|
<div class="pam-paragraph pam-quick-filter__recommend">
|
<img class="img"
|
alt=""
|
src="~/assets/images/quickFilter/recommend.svg">
|
<template v-if="consultantList.length > 0">
|
<QuickFilterConsultantList :consultantList="consultantList"></QuickFilterConsultantList>
|
</template>
|
<template v-else>
|
<div class="pam-quick-filter__empty text--mid_grey pam-quick-filter__empty--white">
|
<p class="smTxt">尚無推薦資料</p>
|
</div>
|
</template>
|
</div>
|
|
<PopUpFrame class="pam-myDemand-dialog"
|
dialogWidth="400px"
|
:isOpen.sync="isOpenQuestionPopUp">
|
<QuickFilterSelector ref="quickFilterRef"
|
:isOpenQuestionPopUp="isOpenQuestionPopUp"
|
:questionOption="questionOption"
|
@confirm="confirm"
|
:confirmItem="confirmItem"></QuickFilterSelector>
|
</PopUpFrame>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Consultant } from '~/shared/models/consultant.model';
|
import { FastQueryParams, QuestionOption, Selected } from '~/shared/models/quick-filter.model';
|
import { questionList } from '~/shared/const/quickFilter-questionList';
|
import { Seniority } from '~/shared/models/enum/seniority';
|
import { Vue, Component, namespace } from 'nuxt-property-decorator';
|
import queryConsultantService from '~/shared/services/query-consultant.service';
|
|
const localStorage = namespace('localStorage');
|
const seniorityMap={
|
[Seniority.SENIOR]:{
|
title:'資深',
|
subTitle:'薑是老的辣'
|
},
|
[Seniority.YOUNG]:{
|
title:'年輕',
|
subTitle:'給年輕人一個機會'
|
},
|
[Seniority.UNLIMITED]:{
|
title:'不限',
|
subTitle:'年齡不是問題'
|
},
|
}
|
@Component({
|
filters: {
|
formatSeniorityTitle(value): string{
|
return seniorityMap[value].title
|
},
|
formatSenioritySubTitle(value): string {
|
return seniorityMap[value].subTitle
|
}
|
}
|
})
|
export default class QuickFilter extends Vue {
|
@localStorage.Mutation
|
storageQuickFilter!: (token: string) => void;
|
|
@localStorage.Getter
|
quickFilterSelectedData!: Selected[];
|
|
isOpenQuestionPopUp = false;
|
consultantList: Consultant[] = [];
|
questionOption = {};
|
confirmItem: Selected[] = [];
|
questionList = questionList;
|
|
////////////////////////////////////////////////////////////////////// Vue lifeCycle
|
mounted() {
|
if (this.quickFilterSelectedData && this.quickFilterSelectedData.length > 0) {
|
this.confirmItem = this.quickFilterSelectedData;
|
this.getRecommendList();
|
}
|
}
|
|
|
//////////////////////////////////////////////////////////////////////
|
openPopUp(question: QuestionOption) {
|
this.questionOption = question;
|
this.isOpenQuestionPopUp = true;
|
}
|
|
removeTag(value: string) {
|
this.confirmItem = this.confirmItem.filter(item => item.value !== value);
|
this.confirmItem.length > 0 ? this.getRecommendList() : this.consultantList = [];
|
}
|
|
confirm(event: Selected) {
|
this.setConfirmData(event);
|
this.confirmItem.length > 0 ? this.getRecommendList() : this.consultantList = [];
|
this.isOpenQuestionPopUp = false;
|
}
|
|
isActive(name: string) {
|
return name === 'gender' && !!this.getGender()
|
|| name === 'avgScore' && !!this.getAvgScore()
|
|| name === 'communicationStyles' && !!this.getCommunicationStyles().length
|
|| name === 'seniority' && !!this.getSeniority()
|
}
|
|
|
//////////////////////////////////////////////////////////////////////
|
private getGender(): string {
|
return this.filterSingleSelected('gender'); // maybe can use enum ?
|
}
|
|
private getAvgScore(): number {
|
return this.filterSingleSelected('avgScore');
|
}
|
|
private getSeniority(): string {
|
return this.filterSingleSelected('seniority');
|
}
|
|
private getCommunicationStyles(): string[] {
|
return this.confirmItem.filter(item => item.option === 'communicationStyles').map(i => i.value);
|
}
|
|
private filterSingleSelected(name: string) {
|
const filter = this.confirmItem.filter(item => item.option === name);
|
return filter.length > 0 ?
|
filter[0].value :
|
(name === 'avgScore' ? 0 : '');
|
}
|
|
private setConfirmData(event: Selected) {
|
if (event.option === 'communicationStyles') {
|
this.filterCommunicationStyles(event);
|
} else {
|
const findIndex = this.confirmItem.findIndex(item => item.option === event.option);
|
findIndex === -1 ? this.confirmItem.push(event) : this.confirmItem[findIndex] = event;
|
}
|
}
|
|
private filterCommunicationStyles(event: Selected) {
|
const confirmValue = this.confirmItem
|
.filter(item => item.option === 'communicationStyles')
|
.map(i => i.value);
|
const pickerValue = event.value;
|
|
this.confirmItem = this.confirmItem
|
.filter(item => pickerValue.includes(item.value) || item.option !== 'communicationStyles');
|
|
const addValue = pickerValue.filter(item => !confirmValue.includes(item)).map(i => {
|
return {
|
option: 'communicationStyles',
|
value: i
|
}
|
})
|
if (addValue.length > 0) {
|
this.confirmItem.push(...addValue);
|
}
|
}
|
|
private getRecommendList() {
|
const data: FastQueryParams = {
|
gender: this.getGender(),
|
communicationStyles: this.getCommunicationStyles(),
|
avgScore: this.getAvgScore(),
|
status: '',
|
seniority: this.getSeniority()
|
}
|
|
queryConsultantService.fastQuery(data).then((consultantList) => {
|
this.consultantList = consultantList;
|
this.storageQuickFilter(JSON.stringify(this.confirmItem))
|
})
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
.pam-quick-filter__options {
|
display: flex;
|
width: 100%;
|
height: 132px;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
|
.pam-quick-filter__btn {
|
width: 48%;
|
height: 56px;
|
text-align: center;
|
box-shadow: 0 0 6px #22222229;
|
border-radius: 10px;
|
border-color: $CORAL;
|
|
&.is-active {
|
background-color: $CORAL;
|
color: $PRIMARY_WHITE;
|
}
|
}
|
|
.pam-quick-filter__btn+.pam-quick-filter__btn {
|
margin-left: 0;
|
}
|
}
|
|
.pam-quick-filter__empty {
|
width: 100%;
|
height: 100px;
|
border: solid 1px $LIGHT_GREY;
|
text-align: center;
|
border-radius: 10px;
|
|
.smTxt {
|
line-height: 100px;
|
}
|
.pam-quick-filter__empty--white{
|
box-shadow: 0 0 6px #00000029;
|
background-color: $PRIMARY_WHITE;
|
}
|
}
|
|
.pam-quick-filter__recommend {
|
position: relative;
|
|
.img {
|
position: absolute;
|
top: -50px;
|
right: 10px;
|
}
|
}
|
</style>
|
