保誠-保戶業務員媒合平台
HelenHuang
2021-11-05 cf6803cd4f2c535afb1eaa935fd9e9735279656b
PAMapp/pages/quickFilter/index.vue
@@ -7,37 +7,31 @@
                class="subTitle quickBtn"
                :disabled="question.name === 'onlineState'"
                @click="openDrawer(question)"
                @click="openPopUp(question)"
            >{{question.title}}</el-button>
        </div>
        <h5 class="mdTxt mb-10 mt-30">篩選條件</h5>
        <div>
             <el-tag
            <Ui-Tags
                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"
                @removeTag="removeTag('gender')"
            >
                <el-tag
                {{selectedItem.gender}}
            </Ui-Tags>
            <Ui-Tags
                v-if="selectedItem.satisfaction"
                @removeTag="removeTag('satisfaction')"
            >
                {{selectedItem.satisfaction + '星以上滿意度'}}
            </Ui-Tags>
            <template v-if="selectedItem.style.length > 0">
                <Ui-Tags
                    v-for="(item, index) in selectedItem.style"
                    :key="index"
                    class="pam-tag p"
                    closable
                    type="''"
                    @close="removeTag('style', index)"
                >{{item}}</el-tag>
                    @removeTag="removeTag('style', index)"
                >
                    {{item}}
                </Ui-Tags>
            </template>
            <div class="mb-10" v-if="selectedItem.onlineState"></div>
@@ -49,19 +43,36 @@
        <h5 class="mdTxt mb-10 mt-30">快速篩選推薦</h5>
        <template v-if="consultantList.length > 0">
            <QuickFilterConsultantCarousel></QuickFilterConsultantCarousel>
            <QuickFilterConsultantList></QuickFilterConsultantList>
        </template>
        <template v-else>
            <div class="emptyBox bg-white"></div>
        </template>
        <QuickFilterDrawer
            :drawerVisible.sync="questionDrawer"
            :questionOption="questionOption"
            :selectedItem="selectedItem"
            @selected="selected"
        ></QuickFilterDrawer>
        <Ui-Drawer
            :isVisible.sync="questionDrawer"
            :size="questionOption.name === 'style' ? '50%' : '30%'"
            @closeDrawer="closePopUp"
        >
            <QuickFilterSelector
                ref="quickFilterRef"
                :drawerVisible.sync="questionDrawer"
                :questionOption="questionOption"
                :selectedItem="selectedItem"
            ></QuickFilterSelector>
        </Ui-Drawer>
        <Ui-Dialog :isVisible.sync="dialog"
            @closeDialog="closePopUp"
        >
            <QuickFilterSelector
                ref="quickFilterRef"
                :drawerVisible.sync="questionDrawer"
                :questionOption="questionOption"
                :selectedItem="selectedItem"
            ></QuickFilterSelector>
        </Ui-Dialog>
    </div>
</template>
@@ -69,9 +80,12 @@
import { Context } from '@nuxt/types';
import { Vue, Component } from 'nuxt-property-decorator';
import { Agents } from '~/plugins/api/home';
import { isMobileDevice } from '~/assets/ts/device';
import QuickFilterDrawer from '~/components/QuickFilter/QuickFilterSelector.vue';
@Component
export default class QuickFilter extends Vue {
    dialog = false;
    consultantList = [];
    questionDrawer = false;
    questionOption = {};
@@ -120,26 +134,9 @@
        }
    }
    openDrawer(question: QuestionOption) {
        this.questionDrawer = true;
    openPopUp(question: QuestionOption) {
        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;
        }
        isMobileDevice() ? this.questionDrawer = true : this.dialog = true;
    }
    removeTag(type: string, index: number = 0) {
@@ -158,6 +155,10 @@
    }
    closePopUp() {
        this.selectedItem = JSON.parse(JSON.stringify((this.$refs.quickFilterRef as QuickFilterDrawer).pickedItem));
    }
}
export interface QuestionOption {