From 6a4966b8898509299cd4d43cc31e2ae2985d0cfe Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期三, 22 十二月 2021 14:04:29 +0800
Subject: [PATCH] update: TODO#132409 快速篩選增加年資選項 (完成 90%, 剩 btn 背景圖)

---
 PAMapp/pages/quickFilter/index.vue |   62 ++++++++++++++++++++++--------
 1 files changed, 45 insertions(+), 17 deletions(-)

diff --git a/PAMapp/pages/quickFilter/index.vue b/PAMapp/pages/quickFilter/index.vue
index 7c8764f..d978446 100644
--- a/PAMapp/pages/quickFilter/index.vue
+++ b/PAMapp/pages/quickFilter/index.vue
@@ -17,6 +17,10 @@
                     @removeTag="removeTag(item.value)"
                 >
                     <span v-if="item.option === 'gender'">{{item.value === 'male' ? '���' : '憟單��'}}</span>
+                    <span v-else-if="item.option === 'seniority'" class="mdTxt lighter">
+                        {{item.value | formatSeniorityTitle}}
+                        <span class="smTxt">{{item.value | formatSenioritySubTitle}}</span>
+                    </span>
                     <!-- TODO:���遛��漲 -->
                     <!-- <span v-else-if="item.option === 'avgScore'">{{item.value + '��誑銝遛��漲'}}</span> -->
                     <span v-else>{{item.value}}</span>
@@ -67,12 +71,25 @@
 <script lang="ts">
 import { Vue, Component, namespace } from 'nuxt-property-decorator';
 import { Consultant } from '~/assets/ts/models/consultant.model';
-import { fastQuery } from '~/assets/ts/api/consultant';
 import { questionList } from '~/assets/ts/const/quickFilter-questionList';
 import { FastQueryParams, QuestionOption, Selected } from '~/assets/ts/models/quickFilter.model';
+import { fastQuery } from '~/assets/ts/api/consultant';
 
 const localStorage = namespace('localStorage');
-@Component
+@Component({
+    filters: {
+        formatSeniorityTitle(value) {
+            if (value === 'SENIOR') return '鞈楛';
+            if (value === 'YOUNG') return '撟渲��';
+            return '銝��';
+        },
+        formatSenioritySubTitle(value) {
+            if (value === 'SENIOR') return '����麾';
+            if (value === 'YOUNG') return '蝯血僑頛犖銝�����';
+            return '撟湧翩銝����';
+        }
+    }
+})
 export default class QuickFilter extends Vue {
     @localStorage.Mutation storageQuickFilter!: (token: string) => void;
     @localStorage.Getter quickFilterSelectedData!: Selected[];
@@ -110,25 +127,35 @@
     }
 
     isActive(name: string) {
-        return name === 'gender' && !!this.gender()
-            || name === 'avgScore' && !!this.avgScore()
-            || name === 'communicationStyles' && !!this.communicationStyles().length
+        return name === 'gender' && !!this.getGender()
+            || name === 'avgScore' && !!this.getAvgScore()
+            || name === 'communicationStyles' && !!this.getCommunicationStyles().length
+            || name === 'seniority' && !!this.getSeniority()
     }
 
 
     //////////////// private ////////////////
-    private gender(): string {
-        const filter = this.confirmItem.filter(item => item.option === 'gender').map(i => i.value);
-        return filter.length === 0 ? '' : filter[0];
+    private getGender(): string {
+        return this.filterSingleSelected('gender');
     }
 
-    private avgScore(): number {
-        const filter = this.confirmItem.filter(item => item.option === 'avgScore').map(i => i.value);
-        return filter.length === 0 ? '' : filter[0];
+    private getAvgScore(): number {
+        return this.filterSingleSelected('avgScore');
     }
 
-    private communicationStyles(): string[] {
+    private getSeniority(): string {
+        return this.filterSingleSelected('seniority');
+    }
+
+    private getCommunicationStyles(): string[] {
         return this.confirmItem.filter(item => item.option === 'communicationStyles').map(i => i.value);
+    }
+
+    private filterSingleSelected(name: string) {
+        const filter = this.confirmItem.filter(item => item.option === name);
+        return filter.length > 0
+            ? filter[0].value
+            : (name === 'avgScore' ? 0 : '');
     }
 
     private setConfirmData(event: Selected) {
@@ -162,10 +189,11 @@
 
     private getRecommendList() {
         const data: FastQueryParams = {
-            gender: this.gender(),
-            communicationStyles: this.communicationStyles(),
-            avgScore: this.avgScore(),
-            status: ''
+            gender: this.getGender(),
+            communicationStyles: this.getCommunicationStyles(),
+            avgScore: this.getAvgScore(),
+            status: '',
+            seniority: this.getSeniority()
         }
 
         fastQuery(data).then((consultantList) => {
@@ -199,7 +227,7 @@
     .quickBtnBlock {
         display: flex;
         width: 100%;
-        // height: 132px;
+        height: 132px;
         flex-wrap: wrap;
         justify-content: space-between;
 

--
Gitblit v1.8.0