<template>
|
<div>
|
<div class="quickBtnBlock">
|
<el-button
|
v-for="(question, index) in questionList"
|
:key="index"
|
class="subTitle quickBtn"
|
:disabled="question.name === 'onlineState'"
|
|
@click="openPopUp(question)"
|
>{{question.title}}</el-button>
|
</div>
|
<h5 class="mdTxt mb-10 mt-30">篩選條件</h5>
|
<div>
|
<Ui-Tags
|
v-if="selectedItem.gender"
|
@removeTag="removeTag('gender')"
|
>
|
{{selectedItem.gender}}
|
</Ui-Tags>
|
<Ui-Tags
|
v-if="selectedItem.satisfaction"
|
@removeTag="removeTag('satisfaction')"
|
>
|
{{selectedItem.satisfaction + '星以上滿意度'}}
|
</Ui-Tags>
|
<template v-if="selectedItem.style.length > 0">
|
<Ui-Tags
|
v-for="(item, index) in selectedItem.style"
|
:key="index"
|
@removeTag="removeTag('style', index)"
|
>
|
{{item}}
|
</Ui-Tags>
|
</template>
|
|
<div class="mb-10" v-if="selectedItem.onlineState"></div>
|
<div class="emptyBox text--mid_grey"
|
v-if="!selectedItem.gender && !selectedItem.satisfaction && selectedItem.style.length === 0 && !selectedItem.onlineState">
|
<p class="smTxt">尚無篩選</p>
|
</div>
|
</div>
|
|
<h5 class="mdTxt mb-10 mt-30">快速篩選推薦</h5>
|
<template v-if="consultantList.length > 0">
|
<QuickFilterConsultantList></QuickFilterConsultantList>
|
</template>
|
|
<template v-else>
|
<div class="emptyBox bg-white"></div>
|
</template>
|
|
<Ui-Drawer
|
:isVisible.sync="questionDrawer"
|
:size="questionOption.name === 'style' ? '50%' : '30%'"
|
@closeDrawer="closePopUp"
|
>
|
<QuickFilterSelector
|
ref="quickFilterRef"
|
:drawerVisible.sync="questionDrawer"
|
:questionOption="questionOption"
|
:selectedItem="selectedItem"
|
></QuickFilterSelector>
|
</Ui-Drawer>
|
|
<Ui-Dialog :isVisible.sync="dialog"
|
@closeDialog="closePopUp"
|
>
|
<QuickFilterSelector
|
ref="quickFilterRef"
|
:drawerVisible.sync="questionDrawer"
|
:questionOption="questionOption"
|
:selectedItem="selectedItem"
|
></QuickFilterSelector>
|
</Ui-Dialog>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Context } from '@nuxt/types';
|
import { Vue, Component } from 'nuxt-property-decorator';
|
import { Agents } from '~/plugins/api/home';
|
import { isMobileDevice } from '~/assets/ts/device';
|
import QuickFilterDrawer from '~/components/QuickFilter/QuickFilterSelector.vue';
|
|
@Component
|
export default class QuickFilter extends Vue {
|
dialog = false;
|
consultantList = [];
|
questionDrawer = false;
|
questionOption = {};
|
selectedItem: selectedItem = {
|
gender: '',
|
satisfaction: 0,
|
style: [],
|
onlineState: ''
|
};
|
questionList: QuestionOption[] = [
|
{
|
name: 'gender',
|
title: '顧問性別',
|
detail: ['男性', '女性'],
|
type: 'radio'
|
},
|
{
|
name: 'satisfaction',
|
title: '顧問滿意度',
|
detail: [],
|
type: ''
|
},
|
{
|
name: 'style',
|
title: '溝通風格',
|
detail: ['謹慎務實', '明快主動', '耐心傾聽', '健談風趣'],
|
type: 'checkbox'
|
},
|
{
|
name: 'onlineState',
|
title: '上線狀態',
|
detail: [],
|
type: 'radio'
|
}
|
];
|
|
async asyncData(context: Context) {
|
let consultantList: Agents[] = [];
|
|
await context.$service.home.recommendConsultantList().then((result: Agents[]) => {
|
consultantList = result;
|
})
|
|
return {
|
consultantList,
|
}
|
}
|
|
openPopUp(question: QuestionOption) {
|
this.questionOption = question;
|
isMobileDevice() ? this.questionDrawer = true : this.dialog = true;
|
}
|
|
removeTag(type: string, index: number = 0) {
|
|
if (type === 'gender') {
|
this.selectedItem.gender = ''
|
}
|
|
if (type === 'satisfaction') {
|
this.selectedItem.satisfaction = 0
|
}
|
|
if (type === 'style') {
|
this.selectedItem.style.splice(index, 1)
|
}
|
|
}
|
|
closePopUp() {
|
this.selectedItem = JSON.parse(JSON.stringify((this.$refs.quickFilterRef as QuickFilterDrawer).pickedItem));
|
}
|
|
}
|
|
export interface QuestionOption {
|
title: string;
|
detail: string[];
|
type: string;
|
name: string;
|
}
|
|
export interface selectedItem {
|
name?: string;
|
gender: string;
|
satisfaction: number;
|
style: string[];
|
onlineState: string;
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.emptyBox {
|
width: 100%;
|
height: 100px;
|
|
border: solid 1px $LIGHT_GREY;
|
text-align: center;
|
|
.smTxt {
|
line-height: 100px;
|
}
|
}
|
|
.bg-white {
|
background-color: $PRIMARY_WHITE;
|
}
|
|
.quickBtnBlock {
|
display: flex;
|
width: 100%;
|
height: 132px;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
|
.quickBtn {
|
width: 48%;
|
height: 56px;
|
text-align: center;
|
box-shadow: 0 0 6px #22222229;
|
border-color: $PRIMARY_WHITE;
|
border-radius: 10px;
|
color: $PRIMARY_BLACK;
|
|
&:hover,&:focus {
|
color: $PRIMARY_BLACK;
|
border-color: $PRIMARY_WHITE;
|
background-color: $PRIMARY_WHITE;
|
}
|
|
&:disabled {
|
color: $PRIMARY_WHITE;
|
border-color: $LIGHT_GREY;
|
background-color: $LIGHT_GREY;
|
}
|
}
|
.quickBtn+.quickBtn {
|
margin-left: 0;
|
}
|
|
.is-disabled {
|
background-color: $LIGHT_GREY;
|
color: $PRIMARY_WHITE;
|
|
&:hover,&:focus {
|
color: $PRIMARY_WHITE;
|
border-color: $LIGHT_GREY;
|
background-color: $LIGHT_GREY;
|
}
|
}
|
}
|
|
</style>
|
