From 994ba6406557eeb4199a40d080f4187232ad41ab Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期三, 08 十二月 2021 10:19:16 +0800
Subject: [PATCH] Revert "refactor: pages component - separate vue files"
---
PAMapp/pages/quickFilter/index.vue | 213 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 209 insertions(+), 4 deletions(-)
diff --git a/PAMapp/pages/quickFilter/index.vue b/PAMapp/pages/quickFilter/index.vue
index cb9f95a..c6ef025 100644
--- a/PAMapp/pages/quickFilter/index.vue
+++ b/PAMapp/pages/quickFilter/index.vue
@@ -64,8 +64,213 @@
</div>
</template>
-<script src="./quick-filter.component.ts"></script>
+<script lang="ts">
+import { Vue, Component, namespace } from 'nuxt-property-decorator';
+import { FastQueryParams } from '~/assets/ts/api/consultant';
+import { Consultant } from '~/assets/ts/models/consultant.model';
+import { Selected } from '~/components/QuickFilter/QuickFilterSelector.vue';
+import { fastQuery } from '~/assets/ts/api/consultant';
-<style lang="scss">
- @import "./quick-filter.component.scss";
-</style>
+const localStorage = namespace('localStorage');
+@Component
+export default class QuickFilter extends Vue {
+ @localStorage.Mutation storageQuickFilter!: (token: string) => void;
+ @localStorage.Getter quickFilterSelectedData!: Selected[];
+
+ isOpenQuestionPopUp = false;
+ consultantList: Consultant[] = [];
+ questionOption = {};
+ confirmItem: Selected[] = [];
+ 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'
+ // }
+ ];
+
+ mounted() {
+ if (this.quickFilterSelectedData && this.quickFilterSelectedData.length > 0) {
+ this.confirmItem = this.quickFilterSelectedData;
+ this.getRecommendList();
+ }
+ }
+
+ gender(): string {
+ const filter = this.confirmItem.filter(item => item.option === 'gender').map(i => i.value);
+ return filter.length === 0 ? '' : filter[0];
+ }
+
+ avgScore(): number {
+ const filter = this.confirmItem.filter(item => item.option === 'avgScore').map(i => i.value);
+ return filter.length === 0 ? '' : filter[0];
+ }
+
+ communicationStyles(): string[] {
+ return this.confirmItem.filter(item => item.option === 'communicationStyles').map(i => i.value);
+ }
+
+ isActive(name: string) {
+ return name === 'gender' && !!this.gender()
+ || name === 'avgScore' && !!this.avgScore()
+ || name === 'communicationStyles' && !!this.communicationStyles().length
+ }
+
+ openPopUp(question: QuestionOption) {
+ this.questionOption = question;
+ this.isOpenQuestionPopUp =true;
+ }
+
+ removeTag(value: string) {
+ this.confirmItem = this.confirmItem.filter(item => item.value !== value);
+ this.confirmItem.length > 0 ? this.getRecommendList() : this.consultantList = [];
+ }
+
+ confirm(event: Selected) {
+ this.setConfirmData(event);
+ this.confirmItem.length > 0 ? this.getRecommendList() : this.consultantList = [];
+ this.isOpenQuestionPopUp = false;
+ }
+
+ setConfirmData(event: Selected) {
+ if (event.option === 'communicationStyles') {
+ this.filterCommunicationStyles(event);
+ } else {
+ const findIndex = this.confirmItem.findIndex(item => item.option === event.option);
+ findIndex === -1 ? this.confirmItem.push(event) : this.confirmItem[findIndex] = event;
+ }
+ }
+
+ filterCommunicationStyles(event: Selected) {
+ const confirmValue = this.confirmItem
+ .filter(item => item.option === 'communicationStyles')
+ .map(i => i.value);
+ const pickerValue = event.value;
+
+ this.confirmItem = this.confirmItem
+ .filter(item => pickerValue.includes(item.value) || item.option !== 'communicationStyles');
+
+ const addValue = pickerValue.filter(item => !confirmValue.includes(item)).map(i => {
+ return {
+ option: 'communicationStyles',
+ value: i
+ }
+ })
+ if (addValue.length > 0) {
+ this.confirmItem.push(...addValue);
+ }
+ }
+
+ getRecommendList() {
+ const data: FastQueryParams = {
+ gender: this.gender(),
+ communicationStyles: this.communicationStyles(),
+ avgScore: this.avgScore(),
+ status: ''
+ }
+
+ fastQuery(data).then((res) => {
+ this.consultantList = res.data;
+ this.storageQuickFilter(JSON.stringify(this.confirmItem))
+ })
+ }
+
+}
+
+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;
+ border-color: $CORAL;
+
+ &.isActive {
+ background-color: $CORAL;
+ color: $PRIMARY_WHITE;
+ }
+ }
+ .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