update:TODO#130450/130484 快速篩選: 1. 不顯示上線狀態 2. 選擇器增加確認按鈕 3. desktop選擇器跑板問題

Mila

2021-11-19 eeab4835f8a1dfcab622facf33eb5ae7f523f010

update:TODO#130450/130484 快速篩選: 1. 不顯示上線狀態 2. 選擇器增加確認按鈕 3. desktop選擇器跑板問題

 PAMapp/components/QuickFilter/QuickFilterSelector.vue

@@ -15,7 +15,10 @@
        </div>

        <div class="quickBtnBlock" v-if="questionOption.name === 'communicationStyles'">
            <el-checkbox-group class="pam-quickFilter-checkbox" v-model="pickedItem.communicationStyles">
            <el-checkbox-group
                class="pam-quickFilter-checkbox"
                v-model="pickedItem.communicationStyles"
            >
                <el-checkbox
                    v-for="(i, index) in questionOption.detail"
                    :key="index"
@@ -27,7 +30,10 @@
        </div>

        <div class="quickBtnBlock" v-else-if="questionOption.name === 'gender'">
            <el-radio-group class="pam-quickFilter-radio" v-model="pickedItem.gender">
            <el-radio-group
                class="pam-quickFilter-radio"
                v-model="pickedItem.gender"
            >
                <el-radio
                    v-for="(i, index) in questionOption.detail"
                    :key="index"
@@ -37,25 +43,27 @@
            </el-radio-group>
        </div>

        <div class="quickBtnBlock" v-else-if="questionOption.name === 'status'">
            <el-radio-group class="pam-quickFilter-radio" v-model="pickedItem.status">
                <el-radio
                    v-for="(i, index) in QuestionOption.detail"
                    :key="index"
                    :label="i.value"
                    :class="i.className"
                ></el-radio>
            </el-radio-group>
        <div v-else>
            <el-rate
                class="pam-quickFilter-rate"
                v-model="pickedItem.avgScore"
            ></el-rate>
        </div>

        <div v-else>
            <el-rate class="pam-quickFilter-rate" v-model="pickedItem.avgScore"></el-rate>
        <div class="text--center mt-30">
            <el-button
                class="pam-select-confirm"
                type="primary"
                @click="confirm"
                :disabled="isDisabled"
            >確認</el-button>
        </div>

    </div>
</template>

<script lang="ts">
import { Vue, Component, PropSync, Prop, Watch } from 'nuxt-property-decorator';
import { Vue, Component, Prop, Watch, Emit } from 'nuxt-property-decorator';
import { FastQueryParams } from '~/assets/ts/api/consultant';
import { QuestionOption } from '~/pages/quickFilter/index.vue';

@@ -69,16 +77,56 @@
        avgScore: 0
    }

    @PropSync('drawerVisible') isVisible!: boolean;
    @Prop() selectedItem!: FastQueryParams;
    @Prop() questionOption!: QuestionOption;
    @Prop() isOpenQuestionPopUp!: boolean;
    @Prop() confirmItem!: Selected[];

    @Watch('selectedItem', {deep: true, immediate: true}) watchSelected(newValue: FastQueryParams) {
        if (newValue) {
            this.pickedItem = JSON.parse(JSON.stringify(this.selectedItem))
    @Watch('isOpenQuestionPopUp') onPopUpChange() {
        this.pickedItem = {
            communicationStyles: this.communicationStyles,
            status: '',
            gender: this.gender,
            avgScore: this.avgScore
        }
    }

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

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

    get communicationStyles() {
        return this.confirmItem
            .filter(item => item.option === 'communicationStyles')
            .map(item => item.value);
    }

    get isDisabled() {
        const name = this.questionOption.name;
        return name === 'gender' && !this.pickedItem[name]
            || name === 'avgScore' && !this.pickedItem[name]
            || name === 'communicationStyles' && !this.pickedItem[name].length
    }

    @Emit('confirm')
    confirm() {
        const name = this.questionOption.name;
        return {
            option: this.questionOption.name,
            value: this.pickedItem[name]
        }
    }

}

export interface Selected {
    option: string;
    value: any;
}
</script>

@@ -89,26 +137,6 @@
        justify-content: space-between;
        align-content: space-between;
        flex-wrap: wrap;

        .quickBtn {
            width: 48%;
            height: 110px;
            text-align: center;
            box-shadow: 0 0 6px #22222229;
            padding: auto 0 auto 0;
            border-radius: 10px;
            color: $PRIMARY_BLACK;

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

        .quickBtn+.quickBtn {
            margin-left: 0;
        }
    }

</style>

 PAMapp/pages/quickFilter/index.vue

@@ -5,37 +5,26 @@
                v-for="(question, index) in questionList"
                :key="index"
                class="subTitle quickBtn"
                :disabled="question.name === 'status'"
                :class="{'isActive': isActive(question.name)}"
                @click="openPopUp(question)"
            >{{question.title}}</el-button>
        </div>
        <h5 class="mdTxt mb-10 mt-30">篩選條件</h5>
        <div>
            <Ui-Tags
                v-if="selectedItem.gender"
                @removeTag="removeTag('gender')"
            <template v-if="confirmItem.length > 0">
                <UiTags
                    v-for="(item, index) in confirmItem" :key="index"
                    @removeTag="removeTag(item.value)"
            >
                {{selectedItem.gender === 'male' ? '男性' : '女性'}}
            </Ui-Tags>
            <Ui-Tags
                v-if="selectedItem.avgScore"
                @removeTag="removeTag('avgScore')"
            >
                {{selectedItem.avgScore + '星以上滿意度'}}
            </Ui-Tags>
            <template v-if="selectedItem.communicationStyles">
                <Ui-Tags
                    v-for="(item, index) in selectedItem.communicationStyles"
                    :key="index"
                    @removeTag="removeTag('communicationStyles', index)"
                >
                    {{item}}
                </Ui-Tags>
                    <span v-if="item.option === 'gender'">{{item.value === 'male' ? '男性' : '女性'}}</span>
                    <span v-else-if="item.option === 'avgScore'">{{item.value + '星以上滿意度'}}</span>
                    <span v-else>{{item.value}}</span>
                </UiTags>
            </template>

            <div class="mb-10" v-if="selectedItem.onlineState"></div>
            <div class="emptyBox text--mid_grey"
                v-if="isEmpty">
            <div
                v-else
                class="emptyBox text--mid_grey"
            >
                <p class="smTxt">尚無篩選</p>
            </div>
        </div>
@@ -59,38 +48,34 @@
        </div>

        <PopUpFrame
            :isOpen.sync="questionPopUp"
            :drawerSize="questionOption.name === 'communicationStyles' ? '50%' : '30%'"
            @update:isOpen="closePopUp"
            :isOpen.sync="isOpenQuestionPopUp"
            :drawerSize="questionOption.name === 'communicationStyles' ? '55%' : '35%'"
            :dialogWidth="'400px'"
            class="pam-myDemand-dialog"
        >
            <QuickFilterSelector
                ref="quickFilterRef"
                :drawerVisible.sync="questionPopUp"
                :isOpenQuestionPopUp="isOpenQuestionPopUp"
                :questionOption="questionOption"
                :selectedItem="selectedItem"
                @confirm="confirm"
                :confirmItem="confirmItem"
            ></QuickFilterSelector>
        </PopUpFrame>

    </div>
</template>

<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator';
import { Consultants, FastQueryParams } from '~/assets/ts/api/consultant';
import QuickFilterDrawer from '~/components/QuickFilter/QuickFilterSelector.vue';
import { Selected } from '~/components/QuickFilter/QuickFilterSelector.vue';
import { fastQuery } from '~/assets/ts/api/consultant';

@Component
export default class QuickFilter extends Vue {
    questionPopUp = false;
    isOpenQuestionPopUp = false;
    consultantList: Consultants[] = [];
    questionOption = {};
    selectedItem: FastQueryParams = {
        gender: '',
        avgScore: 0,
        communicationStyles: [],
        status: ''
    };
    confirmItem: Selected[] = [];
    questionList: QuestionOption[] = [
        {
            name: 'gender',
@@ -99,7 +84,7 @@
                { name: '男性', value: 'male', className: 'btn_man'},
                { name: '女性', value: 'female', className: 'btn_woman'}
            ],
            type: 'radio',
            type: 'radio'
        },
        {
            name: 'avgScore',
@@ -118,54 +103,85 @@
            ],
            type: 'checkbox'
        },
        {
            name: 'status',
            title: '上線狀態',
            detail: [],
            type: 'radio'
        }
        // {
        //     name: 'status',
        //     title: '上線狀態',
        //     detail: [],
        //     type: 'radio'
        // }
    ];

    get isEmpty() {
        return !this.selectedItem.gender
            && !this.selectedItem.avgScore
            && this.selectedItem.communicationStyles.length === 0
            && !this.selectedItem.status
    get gender() {
        const filter = this.confirmItem.filter(item => item.option === 'gender').map(i => i.value);
        return filter.length === 0 ? '' : filter[0];
    }

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

    get communicationStyles() {
        return this.confirmItem.filter(item => item.option === 'communicationStyles').map(i => i.value);
    }

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

    openPopUp(question: QuestionOption) {
        this.questionOption = question;
        this.questionPopUp =true;
        this.isOpenQuestionPopUp =true;
    }

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

        if (type === 'gender') {
            this.selectedItem.gender = ''
    removeTag(value: string) {
        this.confirmItem = this.confirmItem.filter(item => item.value !== value);
        this.confirmItem.length > 0 ? this.getRecommendList() : this.consultantList = [];
        }

        if (type === 'avgScore') {
             this.selectedItem.avgScore = 0
    confirm(event: any) {
        this.setConfirmData(event);
        this.confirmItem.length > 0 ? this.getRecommendList() : this.consultantList = [];
        this.isOpenQuestionPopUp = false;
        }

        if (type === 'communicationStyles') {
            this.selectedItem.communicationStyles.splice(index, 1)
    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;
        }
        }

        this.isEmpty ? this.consultantList = [] : this.getRecommendList();
    }
    filterCommunicationStyles(event: Selected) {
        const confirmValue = this.confirmItem
            .filter(item => item.option === 'communicationStyles')
            .map(i => i.value);
        const pickerValue = event.value;

    closePopUp() {
        this.selectedItem = JSON.parse(JSON.stringify((this.$refs.quickFilterRef as QuickFilterDrawer).pickedItem));
        this.getRecommendList();
        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);
        }
    }

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

        fastQuery(data).then((res) => this.consultantList = res.data)
@@ -219,17 +235,11 @@
            text-align: center;
            box-shadow: 0 0 6px #22222229;
            border-radius: 10px;
            color: $PRIMARY_WHITE;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-image: url('~/assets/images/quickFilter/btn_bg.svg');
            border-color: $CORAL;

            &:disabled {
            &.isActive {
                background-color: $CORAL;
                color: $PRIMARY_WHITE;
                border-color: $LIGHT_GREY;
                background-color: $LIGHT_GREY;
                background-image: none;
            }
        }
        .quickBtn+.quickBtn {