| | |
| | | class="subTitle quickBtn" |
| | | :disabled="question.name === 'onlineState'" |
| | | |
| | | @click="openDrawer(question)" |
| | | @click="openPopUp(question)" |
| | | >{{question.title}}</el-button> |
| | | </div> |
| | | |
| | | <h5 class="mdTxt mb-10 mt-30">篩選條件</h5> |
| | | <div> |
| | | <el-tag |
| | | <Ui-Tags |
| | | v-if="selectedItem.gender" |
| | | class="pam-tag p" |
| | | closable |
| | | type="''" |
| | | @close="removeTag('gender')" |
| | | >{{selectedItem.gender}}</el-tag> |
| | | <el-tag |
| | | v-if="selectedItem.satisfaction" |
| | | class="pam-tag p" |
| | | closable |
| | | type="''" |
| | | @close="removeTag('satisfaction')" |
| | | >{{selectedItem.satisfaction + '星以上滿意度'}}</el-tag> |
| | | |
| | | <template v-if="selectedItem.style.length > 0" |
| | | @removeTag="removeTag('gender')" |
| | | > |
| | | <el-tag |
| | | {{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" |
| | | class="pam-tag p" |
| | | closable |
| | | type="''" |
| | | @close="removeTag('style', index)" |
| | | >{{item}}</el-tag> |
| | | @removeTag="removeTag('style', index)" |
| | | > |
| | | {{item}} |
| | | </Ui-Tags> |
| | | </template> |
| | | |
| | | <div class="mb-10" v-if="selectedItem.onlineState"></div> |
| | |
| | | |
| | | <h5 class="mdTxt mb-10 mt-30">快速篩選推薦</h5> |
| | | <template v-if="consultantList.length > 0"> |
| | | <QuickFilterConsultantCarousel></QuickFilterConsultantCarousel> |
| | | <QuickFilterConsultantList></QuickFilterConsultantList> |
| | | </template> |
| | | |
| | | <template v-else> |
| | | <div class="emptyBox bg-white"></div> |
| | | </template> |
| | | |
| | | <QuickFilterDrawer |
| | | :drawerVisible.sync="questionDrawer" |
| | | :questionOption="questionOption" |
| | | :selectedItem="selectedItem" |
| | | @selected="selected" |
| | | ></QuickFilterDrawer> |
| | | <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> |
| | | |
| | |
| | | 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 = {}; |
| | |
| | | } |
| | | } |
| | | |
| | | openDrawer(question: QuestionOption) { |
| | | this.questionDrawer = true; |
| | | openPopUp(question: QuestionOption) { |
| | | this.questionOption = question; |
| | | } |
| | | |
| | | selected(event: selectedItem) { |
| | | |
| | | const name = event.name; |
| | | if (name === 'gender') { |
| | | this.selectedItem.gender = event.gender; |
| | | } |
| | | |
| | | if (name === 'satisfaction') { |
| | | this.selectedItem.satisfaction = event.satisfaction; |
| | | } |
| | | |
| | | if (name === 'style'){ |
| | | this.selectedItem.style = event.style; |
| | | } |
| | | |
| | | isMobileDevice() ? this.questionDrawer = true : this.dialog = true; |
| | | } |
| | | |
| | | removeTag(type: string, index: number = 0) { |
| | |
| | | |
| | | } |
| | | |
| | | closePopUp() { |
| | | this.selectedItem = JSON.parse(JSON.stringify((this.$refs.quickFilterRef as QuickFilterDrawer).pickedItem)); |
| | | } |
| | | |
| | | } |
| | | |
| | | export interface QuestionOption { |