update: 快速篩選圖檔

Mila

2021-11-10 168d6c7a2272354e2a365a7c1b20e15d87546e2f

update: 快速篩選圖檔

 PAMapp/assets/scss/vendors/elementUI/_checkbox.scss

@@ -23,11 +23,39 @@
            padding-left: 0;
            text-align: center;
            line-height: 110px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        &.is-checked {
            background-color: #22222229;
        }
    }

    .btn_koala {
        .el-checkbox__label {
            background-image: url('~/assets/images/quickFilter/btn_koala.svg');
        }
    }

    .btn_owl {
        .el-checkbox__label {
            background-image: url('~/assets/images/quickFilter/btn_owl.svg');
        }
    }

    .btn_peacock {
        .el-checkbox__label {
            background-image: url('~/assets/images/quickFilter/btn_peacock.svg');
        }
    }

    .btn_tiger {
        .el-checkbox__label {
            background-image: url('~/assets/images/quickFilter/btn_tiger.svg');
        }
    }

}


 PAMapp/assets/scss/vendors/elementUI/_radio.scss

@@ -21,7 +21,9 @@
            display: block;
            line-height: 110px;
            padding-left: 0;

            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        &.is-checked {
@@ -42,3 +44,15 @@
        }
    }
}

.btn_woman {
    .el-radio__label {
        background-image: url('~/assets/images/quickFilter/btn_woman.svg');
    }
}

.btn_man {
    .el-radio__label {
        background-image: url('~/assets/images/quickFilter/btn_man.svg');
    }
}

 PAMapp/components/QuickFilter/QuickFilterSelector.vue

@@ -19,8 +19,9 @@
                <el-checkbox
                    v-for="(i, index) in questionOption.detail"
                    :key="index"
                    :label="i"
                    :name="i"
                    :label="i.value"
                    :name="i.value"
                    :class="i.className"
                ></el-checkbox>
            </el-checkbox-group>
        </div>
@@ -30,7 +31,9 @@
                <el-radio
                    v-for="(i, index) in questionOption.detail"
                    :key="index"
                    :label="i"></el-radio>
                    :label="i.value"
                    :class="i.className"
                ></el-radio>
            </el-radio-group>
        </div>

@@ -39,7 +42,9 @@
                <el-radio
                    v-for="(i, index) in QuestionOption.detail"
                    :key="index"
                    :label="i"></el-radio>
                    :label="i.value"
                    :class="i.className"
                ></el-radio>
            </el-radio-group>
        </div>

@@ -50,7 +55,7 @@
</template>

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

@Component
@@ -72,6 +77,7 @@
            this.pickedItem = JSON.parse(JSON.stringify(this.selectedItem))
        }
    }

}
</script>


 PAMapp/pages/quickFilter/index.vue

@@ -6,7 +6,6 @@
                :key="index"
                class="subTitle quickBtn"
                :disabled="question.name === 'onlineState'"

                @click="openPopUp(question)"
            >{{question.title}}</el-button>
        </div>
@@ -41,14 +40,23 @@
            </div>
        </div>

        <h5 class="mdTxt mb-10 mt-30">快速篩選推薦</h5>
        <div class="mb-10 mt-30">
            <span class="mdTxt">快速篩選推薦</span>
            <span class="smTxt_bold text--prudential_grey ml-10">共 0 筆</span>
        </div>
        <div class="recommend">
            <img class="img" src="~/assets/images/quickFilter/recommend.svg" alt="">

        <template v-if="consultantList.length > 0">
            <QuickFilterConsultantList></QuickFilterConsultantList>
        </template>

        <template v-else>
            <div class="emptyBox bg-white"></div>
                <div class="emptyBox text--mid_grey recommendStyle">
                    <p class="smTxt">尚無推薦資料</p>
                </div>
        </template>
        </div>

        <Ui-Drawer
            :isVisible.sync="questionDrawer"
@@ -63,7 +71,7 @@
            ></QuickFilterSelector>
        </Ui-Drawer>

        <Ui-Dialog :isVisible.sync="dialog"
        <Ui-Dialog :isVisible.sync="questionDialog"
            @closeDialog="closePopUp"
        >
            <QuickFilterSelector
@@ -82,10 +90,11 @@
import { Consultants } 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';

@Component
export default class QuickFilter extends Vue {
    dialog = false;
    questionDialog = false;
    consultantList = [];
    questionDrawer = false;
    questionOption = {};
@@ -99,8 +108,15 @@
        {
            name: 'gender',
            title: '顧問性別',
            detail: ['男性', '女性'],
            type: 'radio'
            detail: [
                {
                    value: '男性',
                    className: 'btn_man'
                }, {
                    value: '女性',
                    className: 'btn_woman'
                }],
            type: 'radio',
        },
        {
            name: 'satisfaction',
@@ -111,7 +127,20 @@
        {
            name: 'style',
            title: '溝通風格',
            detail: ['謹慎務實', '明快主動', '耐心傾聽', '健談風趣'],
            detail: [
                {
                    value: '謹慎務實',
                    className: 'btn_owl'
                },{
                    value: '明快主動',
                    className: 'btn_tiger'
                },{
                    value: '耐心傾聽',
                    className: 'btn_koala'
                }, {
                    value: '健談風趣',
                    className: 'btn_peacock'
                }],
            type: 'checkbox'
        },
        {
@@ -125,9 +154,9 @@
    async asyncData(context: Context) {
        let consultantList: Consultants[] = [];

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

        return {
            consultantList,
@@ -136,7 +165,7 @@

    openPopUp(question: QuestionOption) {
        this.questionOption = question;
        isMobileDevice() ? this.questionDrawer = true : this.dialog = true;
        isMobileDevice() ? this.questionDrawer = true : this.questionDialog = true;
    }

    removeTag(type: string, index: number = 0) {
@@ -157,15 +186,29 @@

    closePopUp() {
        this.selectedItem = JSON.parse(JSON.stringify((this.$refs.quickFilterRef as QuickFilterDrawer).pickedItem));

        const data = {
            gender: 'male',
            communicationStyle: '謹慎務實',
            avgScore: 5,
            status: 'online'
        }

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

}

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

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

export interface selectedItem {
@@ -181,16 +224,17 @@
    .emptyBox {
        width: 100%;
        height: 100px;

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

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

    .bg-white {
    .recommendStyle {
        box-shadow: 0 0 6px #00000029;
        background-color: $PRIMARY_WHITE;
    }

@@ -206,36 +250,35 @@
            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;
            }
            color: $PRIMARY_WHITE;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-image: url('~/assets/images/quickFilter/btn_bg.svg');

            &:disabled {
                color: $PRIMARY_WHITE;
                border-color: $LIGHT_GREY;
                background-color: $LIGHT_GREY;
                background-image: none;
            }
        }
        .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;
    .recommend {
        position: relative;

        .img {
            position: absolute;
            top: -50px;
            right: 10px;
            }
        }

    }

</style>