update: TODO#132409 快速篩選增加年資選項 (完成 90%, 剩 btn 背景圖)

Mila

2021-12-22 6a4966b8898509299cd4d43cc31e2ae2985d0cfe

 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;