From 7c291a812e980917bc9f64a3f251f2a08ae7f157 Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期三, 10 十一月 2021 18:05:34 +0800
Subject: [PATCH] TODO#130020 [快速篩選] API 串接
---
PAMapp/pages/quickFilter/index.vue | 266 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 261 insertions(+), 5 deletions(-)
diff --git a/PAMapp/pages/quickFilter/index.vue b/PAMapp/pages/quickFilter/index.vue
index b019a7f..dd7dd5a 100644
--- a/PAMapp/pages/quickFilter/index.vue
+++ b/PAMapp/pages/quickFilter/index.vue
@@ -1,7 +1,263 @@
<template>
- <div>敹恍�祟�
- <h5>蝭拚璇辣</h5>
- <h5>敹恍�祟���</h5>
- <Ui-CardCarousel></Ui-CardCarousel>
+ <div>
+ <div class="quickBtnBlock">
+ <el-button
+ v-for="(question, index) in questionList"
+ :key="index"
+ class="subTitle quickBtn"
+ :disabled="question.name === 'status'"
+ @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 === 'male' ? '���' : '憟單��'}}
+ </Ui-Tags>
+ <Ui-Tags
+ v-if="selectedItem.avgScore"
+ @removeTag="removeTag('avgScore')"
+ >
+ {{selectedItem.avgScore + '��誑銝遛��漲'}}
+ </Ui-Tags>
+ <template v-if="selectedItem.communicationStyles">
+ <Ui-Tags
+ v-for="(item, index) in selectedItem.communicationStyles"
+ :key="index"
+ @removeTag="removeTag('communicationStyles', index)"
+ >
+ {{item}}
+ </Ui-Tags>
+ </template>
+
+ <div class="mb-10" v-if="selectedItem.onlineState"></div>
+ <div class="emptyBox text--mid_grey"
+ v-if="isEmpty">
+ <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">
+ <img class="img" src="~/assets/images/quickFilter/recommend.svg" alt="">
+
+ <template v-if="consultantList.length > 0">
+ <QuickFilterConsultantList></QuickFilterConsultantList>
+ </template>
+
+ <template v-else>
+ <div class="emptyBox text--mid_grey recommendStyle">
+ <p class="smTxt">撠��鞈��</p>
+ </div>
+ </template>
+ </div>
+
+ <Ui-Drawer
+ :isVisible.sync="questionDrawer"
+ :size="questionOption.name === 'communicationStyles' ? '50%' : '30%'"
+ @closeDrawer="closePopUp"
+ >
+ <QuickFilterSelector
+ ref="quickFilterRef"
+ :drawerVisible.sync="questionDrawer"
+ :questionOption="questionOption"
+ :selectedItem="selectedItem"
+ ></QuickFilterSelector>
+ </Ui-Drawer>
+
+ <Ui-Dialog :isVisible.sync="questionDialog"
+ @closeDialog="closePopUp"
+ >
+ <QuickFilterSelector
+ ref="quickFilterRef"
+ :drawerVisible.sync="questionDrawer"
+ :questionOption="questionOption"
+ :selectedItem="selectedItem"
+ ></QuickFilterSelector>
+ </Ui-Dialog>
</div>
-</template>
\ No newline at end of file
+</template>
+
+<script lang="ts">
+import { Vue, Component } from 'nuxt-property-decorator';
+import { FastQueryParams } from '~/assets/ts/api/consultant';
+import { isMobileDevice } from '~/assets/ts/device';
+import QuickFilterDrawer from '~/components/QuickFilter/QuickFilterSelector.vue';
+import { fastQuery } from '~/assets/ts/api/consultant';
+
+@Component
+export default class QuickFilter extends Vue {
+ questionDialog = false;
+ consultantList = [];
+ questionDrawer = false;
+ questionOption = {};
+ selectedItem: FastQueryParams = {
+ gender: '',
+ avgScore: 0,
+ communicationStyles: [],
+ status: ''
+ };
+ questionList: QuestionOption[] = [
+ {
+ name: 'gender',
+ title: '憿批��批',
+ detail: [
+ { name: '���', value: 'male', className: 'btn_man'},
+ { name: '憟單��', value: 'female', className: 'btn_woman'}
+ ],
+ type: 'radio',
+ },
+ {
+ name: 'avgScore',
+ title: '憿批�遛��漲',
+ detail: [],
+ type: ''
+ },
+ {
+ name: 'communicationStyles',
+ title: '皞�◢�',
+ detail: [
+ { value: '雓寞��祕', className: 'btn_owl'},
+ { value: '��翰銝餃��', className: 'btn_tiger'},
+ { value: '���', className: 'btn_koala'},
+ { value: '�隢◢頞�', className: 'btn_peacock'}
+ ],
+ type: 'checkbox'
+ },
+ {
+ name: 'status',
+ title: '銝�����',
+ detail: [],
+ type: 'radio'
+ }
+ ];
+
+ get isEmpty() {
+ return !this.selectedItem.gender
+ && !this.selectedItem.avgScore
+ && this.selectedItem.communicationStyles.length === 0
+ && !this.selectedItem.status
+ }
+
+ openPopUp(question: QuestionOption) {
+ this.questionOption = question;
+ isMobileDevice() ? this.questionDrawer = true : this.questionDialog = true;
+ }
+
+ removeTag(type: string, index: number = 0) {
+
+ if (type === 'gender') {
+ this.selectedItem.gender = ''
+ }
+
+ if (type === 'avgScore') {
+ this.selectedItem.avgScore = 0
+ }
+
+ if (type === 'communicationStyles') {
+ this.selectedItem.communicationStyles.splice(index, 1)
+ }
+
+ this.isEmpty ? this.consultantList = [] : this.getRecommendList();
+ }
+
+ closePopUp() {
+ this.selectedItem = JSON.parse(JSON.stringify((this.$refs.quickFilterRef as QuickFilterDrawer).pickedItem));
+ this.getRecommendList();
+ }
+
+ getRecommendList() {
+ const data = {
+ gender: this.selectedItem.gender,
+ communicationStyles: this.selectedItem.communicationStyles,
+ avgScore: this.selectedItem.avgScore,
+ status: this.selectedItem.status
+ }
+
+ fastQuery(data).then((res) => this.consultantList = res.data)
+ }
+
+}
+
+export interface QuestionOption {
+ title: string;
+ detail: Detail[];
+ type: string;
+ name: string;
+}
+
+interface Detail {
+ value: string;
+ name?: string;
+ className: string;
+}
+
+</script>
+
+<style lang="scss" scoped>
+ .emptyBox {
+ width: 100%;
+ height: 100px;
+ border: solid 1px $LIGHT_GREY;
+ text-align: center;
+ border-radius: 10px;
+
+ .smTxt {
+ line-height: 100px;
+ }
+ }
+
+ .recommendStyle {
+ box-shadow: 0 0 6px #00000029;
+ 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-radius: 10px;
+ color: $PRIMARY_WHITE;
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-image: url('~/assets/images/quickFilter/btn_bg.svg');
+
+ &:disabled {
+ color: $PRIMARY_WHITE;
+ border-color: $LIGHT_GREY;
+ background-color: $LIGHT_GREY;
+ background-image: none;
+ }
+ }
+ .quickBtn+.quickBtn {
+ margin-left: 0;
+ }
+
+ }
+
+ .recommend {
+ position: relative;
+
+ .img {
+ position: absolute;
+ top: -50px;
+ right: 10px;
+ }
+ }
+
+</style>
\ No newline at end of file
--
Gitblit v1.8.0