refactor: 快速篩選 1. 整理 methods 順序 2. 整理 interface、const

Mila

2021-12-14 18098111cc905e88524e7d9ce788b742637e0824

 PAMapp/pages/quickFilter/index.vue

@@ -17,7 +17,8 @@
                    @removeTag="removeTag(item.value)"
                >
                    <span v-if="item.option === 'gender'">{{item.value === 'male' ? '男性' : '女性'}}</span>
                    <span v-else-if="item.option === 'avgScore'">{{item.value + '星以上滿意度'}}</span>
                    <!-- TODO:隱藏滿意度 -->
                    <!-- <span v-else-if="item.option === 'avgScore'">{{item.value + '星以上滿意度'}}</span> -->
                    <span v-else>{{item.value}}</span>
                </UiTags>
            </template>
@@ -49,7 +50,6 @@

        <PopUpFrame
            :isOpen.sync="isOpenQuestionPopUp"
            :drawerSize="questionOption.name === 'communicationStyles' ? '55%' : '35%'"
            :dialogWidth="'400px'"
            class="pam-myDemand-dialog"
        >
@@ -64,8 +64,172 @@
    </div>
</template>

<script src="./quick-filter.component.ts"></script>
<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';

<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 = questionList;

    //////////////// lifecycle ////////////////
    mounted() {
        if (this.quickFilterSelectedData && this.quickFilterSelectedData.length > 0) {
            this.confirmItem = this.quickFilterSelectedData;
            this.getRecommendList();
        }
    }


    //////////////////////////////////////////
    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;
    }

    isActive(name: string) {
        return name === 'gender' && !!this.gender()
            || name === 'avgScore' && !!this.avgScore()
            || name === 'communicationStyles' && !!this.communicationStyles().length
    }


    //////////////// private ////////////////
    private gender(): string {
        const filter = this.confirmItem.filter(item => item.option === 'gender').map(i => i.value);
        return filter.length === 0 ? '' : filter[0];
    }

    private avgScore(): number {
        const filter = this.confirmItem.filter(item => item.option === 'avgScore').map(i => i.value);
        return filter.length === 0 ? '' : filter[0];
    }

    private communicationStyles(): string[] {
        return this.confirmItem.filter(item => item.option === 'communicationStyles').map(i => i.value);
    }

    private 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;
        }
    }

    private 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);
        }
    }

    private getRecommendList() {
        const data: FastQueryParams = {
            gender: this.gender(),
            communicationStyles: this.communicationStyles(),
            avgScore: this.avgScore(),
            status: ''
        }

        fastQuery(data).then((consultantList) => {
            this.consultantList = consultantList;
            this.storageQuickFilter(JSON.stringify(this.confirmItem))
        })
    }

}

</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>