From 4a8e5d76ff89406d26e36df8538efacb24e16add Mon Sep 17 00:00:00 2001
From: Jack <jack.su@pollex.com.tw>
Date: 星期三, 10 十一月 2021 15:14:38 +0800
Subject: [PATCH] Merge branch 'master' of ssh://192.168.0.10:29418/pcalife/PAM
---
PAMapp/pages/quickFilter/index.vue | 242 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 240 insertions(+), 2 deletions(-)
diff --git a/PAMapp/pages/quickFilter/index.vue b/PAMapp/pages/quickFilter/index.vue
index 24a38fa..db81125 100644
--- a/PAMapp/pages/quickFilter/index.vue
+++ b/PAMapp/pages/quickFilter/index.vue
@@ -1,3 +1,241 @@
<template>
- <div>quickFilter-敹恍�祟�</div>
-</template>
\ No newline at end of file
+ <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>
\ No newline at end of file
--
Gitblit v1.8.0