<template>
|
<div>
|
<div class="quickBtnBlock">
|
<el-button
|
v-for="(question, index) in questionList"
|
:key="index"
|
class="subTitle quickBtn"
|
:class="{'isActive': isActive(question.name)}"
|
@click="openPopUp(question)"
|
>{{question.title}}</el-button>
|
</div>
|
<h5 class="mdTxt mb-10 mt-30">篩選條件</h5>
|
<div>
|
<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 === 'avgScore'">{{item.value + '星以上滿意度'}}</span>
|
<span v-else>{{item.value}}</span>
|
</UiTags>
|
</template>
|
<div
|
v-else
|
class="emptyBox text--mid_grey"
|
>
|
<p class="smTxt">尚無篩選</p>
|
</div>
|
</div>
|
|
<div class="mb-10 mt-30">
|
<span class="mdTxt">快速篩選推薦</span>
|
<span class="smTxt_bold text--prudential_grey ml-10">共 {{consultantList.length}} 筆</span>
|
</div>
|
<div class="recommend pam-paragraph">
|
<img class="img" src="~/assets/images/quickFilter/recommend.svg" alt="">
|
|
<template v-if="consultantList.length > 0">
|
<QuickFilterConsultantList :consultantList="consultantList"></QuickFilterConsultantList>
|
</template>
|
|
<template v-else>
|
<div class="emptyBox text--mid_grey recommendStyle">
|
<p class="smTxt">尚無推薦資料</p>
|
</div>
|
</template>
|
</div>
|
|
<PopUpFrame
|
:isOpen.sync="isOpenQuestionPopUp"
|
:drawerSize="questionOption.name === 'communicationStyles' ? '55%' : '35%'"
|
:dialogWidth="'400px'"
|
class="pam-myDemand-dialog"
|
>
|
<QuickFilterSelector
|
ref="quickFilterRef"
|
:isOpenQuestionPopUp="isOpenQuestionPopUp"
|
:questionOption="questionOption"
|
@confirm="confirm"
|
:confirmItem="confirmItem"
|
></QuickFilterSelector>
|
</PopUpFrame>
|
</div>
|
</template>
|
|
<script src="./quick-filter.component.ts"></script>
|
|
<style lang="scss">
|
@import "./quick-filter.component.scss";
|
</style>
|
