TODO#129053 快速篩選 畫面刻版

Mila

2021-11-01 d4a535ae7dd07f70cf2f59fbc8256a3fa1df8c93

 PAMapp/pages/quickFilter/index.vue

@@ -1,7 +1,240 @@
<template>
    <div>快速篩選
        <h5>篩選條件</h5>
        <h5>快速篩選推薦</h5>
        <Ui-CardCarousel></Ui-CardCarousel>
    <div>
        <div class="quickBtnBlock">
            <el-button
                v-for="(question, index) in questionList"
                :key="index"
                class="subTitle quickBtn"
                :disabled="question.name === 'onlineState'"

                @click="openDrawer(question)"
            >{{question.title}}</el-button>
        </div>

        <h5 class="mdTxt mb-10 mt-30">篩選條件</h5>
        <div>
             <el-tag
                v-if="selectedItem.gender"
                class="pam-tag p"
                closable
                type="''"
                @close="removeTag('gender')"
            >{{selectedItem.gender}}</el-tag>
            <el-tag
                v-if="selectedItem.satisfaction"
                class="pam-tag p"
                closable
                type="''"
                @close="removeTag('satisfaction')"
            >{{selectedItem.satisfaction + '星以上滿意度'}}</el-tag>

            <template v-if="selectedItem.style.length > 0"
            >
                <el-tag
                    v-for="(item, index) in selectedItem.style"
                    :key="index"
                    class="pam-tag p"
                    closable
                    type="''"
                    @close="removeTag('style', index)"
                >{{item}}</el-tag>
            </template>

            <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">
                <p class="smTxt">尚無篩選</p>
            </div>
        </div>

        <h5 class="mdTxt mb-10 mt-30">快速篩選推薦</h5>
        <template v-if="consultantList.length > 0">
            <QuickFilterConsultantCarousel></QuickFilterConsultantCarousel>
        </template>

        <template v-else>
            <div class="emptyBox bg-white"></div>
        </template>

        <QuickFilterDrawer
            :drawerVisible.sync="questionDrawer"
            :questionOption="questionOption"
            :selectedItem="selectedItem"
            @selected="selected"
        ></QuickFilterDrawer>
    </div>
</template>
</template>

<script lang="ts">
import { Context } from '@nuxt/types';
import { Vue, Component } from 'nuxt-property-decorator';
import { Agents } from '~/plugins/api/home';

@Component
export default class QuickFilter extends Vue {
    consultantList = [];
    questionDrawer = false;
    questionOption = {};
    selectedItem: selectedItem = {
        gender: '',
        satisfaction: 0,
        style: [],
        onlineState: ''
    };
    questionList: QuestionOption[] = [
        {
            name: 'gender',
            title: '顧問性別',
            detail: ['男性', '女性'],
            type: 'radio'
        },
        {
            name: 'satisfaction',
            title: '顧問滿意度',
            detail: [],
            type: ''
        },
        {
            name: 'style',
            title: '溝通風格',
            detail: ['謹慎務實', '明快主動', '耐心傾聽', '健談風趣'],
            type: 'checkbox'
        },
        {
            name: 'onlineState',
            title: '上線狀態',
            detail: [],
            type: 'radio'
        }
    ];

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

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

        return {
            consultantList,
        }
    }

    openDrawer(question: QuestionOption) {
        this.questionDrawer = true;
        this.questionOption = question;
    }

    selected(event: selectedItem) {

        const name = event.name;
        if (name === 'gender') {
            this.selectedItem.gender = event.gender;
        }

        if (name === 'satisfaction') {
            this.selectedItem.satisfaction = event.satisfaction;
        }

        if (name === 'style'){
            this.selectedItem.style = event.style;
        }

    }

    removeTag(type: string, index: number = 0) {

        if (type === 'gender') {
            this.selectedItem.gender = ''
        }

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

        if (type === 'style') {
            this.selectedItem.style.splice(index, 1)
        }

    }

}

export interface QuestionOption {
    title: string;
    detail: string[];
    type: string;
    name: string;
}

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

<style lang="scss" scoped>
    .emptyBox {
        width: 100%;
        height: 100px;

        border: solid 1px $LIGHT_GREY;
        text-align: center;

        .smTxt {
            line-height: 100px;
        }
    }

    .bg-white {
        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-color: $PRIMARY_WHITE;
            border-radius: 10px;
            color: $PRIMARY_BLACK;

            &:hover,&:focus {
                color: $PRIMARY_BLACK;
                border-color: $PRIMARY_WHITE;
                background-color: $PRIMARY_WHITE;
            }

            &:disabled {
                color: $PRIMARY_WHITE;
                border-color: $LIGHT_GREY;
                background-color: $LIGHT_GREY;
            }
        }
        .quickBtn+.quickBtn {
            margin-left: 0;
        }

        .is-disabled {
            background-color: $LIGHT_GREY;
            color: $PRIMARY_WHITE;

            &:hover,&:focus {
                color: $PRIMARY_WHITE;
                border-color: $LIGHT_GREY;
                background-color: $LIGHT_GREY;
            }
        }
    }

</style>