TODO#130020 [快速篩選] API 串接

Mila

2021-11-10 7c291a812e980917bc9f64a3f251f2a08ae7f157

 PAMapp/pages/quickFilter/index.vue

@@ -5,7 +5,7 @@
                v-for="(question, index) in questionList"
                :key="index"
                class="subTitle quickBtn"
                :disabled="question.name === 'onlineState'"
                :disabled="question.name === 'status'"
                @click="openPopUp(question)"
            >{{question.title}}</el-button>
        </div>
@@ -15,19 +15,19 @@
                v-if="selectedItem.gender"
                @removeTag="removeTag('gender')"
            >
                {{selectedItem.gender}}
                {{selectedItem.gender === 'male' ? '男性' : '女性'}}
            </Ui-Tags>
            <Ui-Tags
                v-if="selectedItem.satisfaction"
                @removeTag="removeTag('satisfaction')"
                v-if="selectedItem.avgScore"
                @removeTag="removeTag('avgScore')"
            >
                {{selectedItem.satisfaction + '星以上滿意度'}}
                {{selectedItem.avgScore + '星以上滿意度'}}
            </Ui-Tags>
            <template v-if="selectedItem.style.length > 0">
            <template v-if="selectedItem.communicationStyles">
                <Ui-Tags
                    v-for="(item, index) in selectedItem.style"
                    v-for="(item, index) in selectedItem.communicationStyles"
                    :key="index"
                    @removeTag="removeTag('style', index)"
                    @removeTag="removeTag('communicationStyles', index)"
                >
                    {{item}}
                </Ui-Tags>
@@ -35,14 +35,14 @@

            <div class="mb-10" v-if="selectedItem.onlineState"></div>
            <div class="emptyBox text--mid_grey"
                v-if="!selectedItem.gender && !selectedItem.satisfaction && selectedItem.style.length === 0 && !selectedItem.onlineState">
                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">共 0 筆</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="">
@@ -60,7 +60,7 @@

        <Ui-Drawer
            :isVisible.sync="questionDrawer"
            :size="questionOption.name === 'style' ? '50%' : '30%'"
            :size="questionOption.name === 'communicationStyles' ? '50%' : '30%'"
            @closeDrawer="closePopUp"
        >
            <QuickFilterSelector
@@ -85,9 +85,8 @@
</template>

<script lang="ts">
import { Context } from '@nuxt/types';
import { Vue, Component } from 'nuxt-property-decorator';
import { Consultants } from '~/assets/ts/api/consultant';
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';
@@ -98,69 +97,52 @@
    consultantList = [];
    questionDrawer = false;
    questionOption = {};
    selectedItem: selectedItem = {
    selectedItem: FastQueryParams = {
        gender: '',
        satisfaction: 0,
        style: [],
        onlineState: ''
        avgScore: 0,
        communicationStyles: [],
        status: ''
    };
    questionList: QuestionOption[] = [
        {
            name: 'gender',
            title: '顧問性別',
            detail: [
                {
                    value: '男性',
                    className: 'btn_man'
                }, {
                    value: '女性',
                    className: 'btn_woman'
                }],
                { name: '男性', value: 'male', className: 'btn_man'},
                { name: '女性', value: 'female', className: 'btn_woman'}
            ],
            type: 'radio',
        },
        {
            name: 'satisfaction',
            name: 'avgScore',
            title: '顧問滿意度',
            detail: [],
            type: ''
        },
        {
            name: 'style',
            name: 'communicationStyles',
            title: '溝通風格',
            detail: [
                {
                    value: '謹慎務實',
                    className: 'btn_owl'
                },{
                    value: '明快主動',
                    className: 'btn_tiger'
                },{
                    value: '耐心傾聽',
                    className: 'btn_koala'
                }, {
                    value: '健談風趣',
                    className: 'btn_peacock'
                }],
                { value: '謹慎務實', className: 'btn_owl'},
                { value: '明快主動', className: 'btn_tiger'},
                { value: '耐心傾聽', className: 'btn_koala'},
                { value: '健談風趣', className: 'btn_peacock'}
            ],
            type: 'checkbox'
        },
        {
            name: 'onlineState',
            name: 'status',
            title: '上線狀態',
            detail: [],
            type: 'radio'
        }
    ];

    async asyncData(context: Context) {
        let consultantList: Consultants[] = [];

        // await context.$service.home.recommendConsultantList().then((result: Consultants[]) => {
        //     consultantList = result;
        // })

        return {
            consultantList,
        }
    get isEmpty() {
        return !this.selectedItem.gender
            && !this.selectedItem.avgScore
            && this.selectedItem.communicationStyles.length === 0
            && !this.selectedItem.status
    }

    openPopUp(question: QuestionOption) {
@@ -174,27 +156,31 @@
            this.selectedItem.gender = ''
        }

        if (type === 'satisfaction') {
             this.selectedItem.satisfaction = 0
        if (type === 'avgScore') {
             this.selectedItem.avgScore = 0
        }

        if (type === 'style') {
            this.selectedItem.style.splice(index, 1)
        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: 'male',
            communicationStyle: '謹慎務實',
            avgScore: 5,
            status: 'online'
            gender: this.selectedItem.gender,
            communicationStyles: this.selectedItem.communicationStyles,
            avgScore: this.selectedItem.avgScore,
            status: this.selectedItem.status
        }

        fastQuery(data).then((res) => console.log(res))
        fastQuery(data).then((res) => this.consultantList = res.data)
    }

}
@@ -208,16 +194,10 @@

interface Detail {
    value: string;
    name?: string;
    className: string;
}

export interface selectedItem {
    name?: string;
    gender: string;
    satisfaction: number;
    style: string[];
    onlineState: string;
}
</script>

<style lang="scss" scoped>
@@ -278,7 +258,6 @@
            top: -50px;
            right: 10px;
        }

    }

</style>