xj-admin/mobile/src/views/23psychology/answer/chooseTopic/chooseTopic.vue

<template>
    <div class="outer-d">
        <div class="top-tip">请选择此次答题类别，可一次选择多个类别</div>
        <div class="middle-d">
            <template v-if="!isEmpty">
                <template v-for="(item, index) in list" :key="`topic${index}`">
                    <template v-if="item?.childrenList && item?.childrenList.length > 0">
                        <div class="topic-item-d">
                            <div class="topic-item-d-title-one" style="margin-bottom: 10px">
                                <img v-if="item.id.indexOf('A01') > -1" :src="chooseTopicItem" alt="" />
                                <img v-if="item.id.indexOf('B01') > -1" :src="comprehensive" alt="" />
                                <img v-if="item.id.indexOf('C01') > -1" :src="chooseTopicItemLast" alt="" />
                                {{ item?.category }}{{ item.chidrenList }}
                            </div>
                            <template v-if="item?.id.indexOf('C01') === -1">
                                <topic-item :list="item?.childrenList" @update-value="changeValue" :count="index + ''" />
                            </template>
                            <template v-else>
                                <van-checkbox-group v-model="checked" shape="square" style="width: 100%">
                                    <div style="display: flex; flex-wrap: wrap">
                                        <div
                                            :key="`topic${index}-${index}-${c}`"
                                            class="check-item-d"
                                            :class="[checked.includes(t.id as string) ? 'checked-item' : '']"
                                            v-for="(t, c) in item.childrenList"
                                            :style="{
                                                width: t.id.indexOf('B01') !== -1 ? '100%' : '46%',
                                                marginLeft: t.id.indexOf('B01') === -1 && c % 2 !== 0 ? '6%' : '0',
                                            }"
                                        >
                                            <van-checkbox :name="t.id"> {{ t?.category }}</van-checkbox>
                                        </div>
                                    </div>
                                </van-checkbox-group>
                            </template>
                        </div>
                    </template>
                </template>
            </template>
            <template v-else>
                <div class="no-data">
                    <Empty :url="emptyIcon" :imageSize="[200, 160]" />
                </div>
            </template>
        </div>
        <div class="bottom-button">
            <van-button class="btn" round type="primary" @click="toAnswer" :disabled="isEmpty"> 开始答题 </van-button>
        </div>
    </div>
</template>
<script setup lang="ts">
    import { getCategoryApi } from '/@/views/23psychology/psychic/psychologyApi';
    import chooseTopicItem from '/@/assets/images/psychiology/chooseTopicItem.png';
    import chooseTopicItemLast from '/@/assets/images/psychiology/chooseTopicItemLast.png';
    import comprehensive from '/@/assets/images/psychiology/comprehensive.png';
    import { showFailToast } from 'vant';
    import { ref } from 'vue';
    import { useRouter } from 'vue-router';
    import store from '/@/store';
    import TopicItem from '/@/views/23psychology/answer/chooseTopic/topicItem.vue';
    import emptyIcon from '/@/assets/images/interveneEmpty.png';
    import Empty from '/@/components/Empty.vue';
    import { newPageParams, openPage } from '/@/hooks/openPage';

    const list = ref<any[]>([]);
    const checked = ref<any[]>([]);
    const checkedJson = ref<any>({});
    const isEmpty = ref(true);
    const router = useRouter();

    function getCategory() {
        getCategoryApi({})
            .then((res: any) => {
                if (res.success) {
                    list.value = preTree(res.result || []);
                } else {
                    showFailToast(res.messgae);
                }
            })
            .catch(() => {});
    }

    function toAnswer() {
        let list: any[] = [];
        for (const c in checkedJson.value) {
            list = list.concat(checkedJson.value[c]);
        }
        if (checked.value.concat(list).length === 0) return showFailToast('请至少选择一个类别');
        store.commit('setQuestionList', checked.value.concat(list));
        openPage(
            '/ps-selfAnswer',
            newPageParams({
                affirmBack: 1,
            })
        );
    }

    function preTree(d: any[]) {
        const dg = (data: any[]) => {
            if (data.length === 0) return [];
            return data.filter((item) => {
                if (item.childrenList && item.childrenList.length > 0) {
                    item.childrenList = dg(item.childrenList);
                    return 1 === 1;
                } else {
                    if (item.questionSum && item.id.indexOf('C01') !== -1 ? item.questionSum >= 1 : item.questionSum >= 5 && isEmpty) {
                        isEmpty.value = false;
                    }
                    return item.questionSum && item.id.indexOf('C01') !== -1 ? item.questionSum >= 1 : item.questionSum >= 5;
                }
            });
        };
        console.log(dg(d));
        return dg(d);
    }

    function changeValue(v: any) {
        checkedJson.value = { ...checkedJson.value, ...v };
        console.log(checkedJson.value);
    }

    getCategory();
</script>
<style scoped lang="less">
    .outer-d {
        width: 100%;
        height: 100%;
    }
    .no-data {
        width: 100%;
        padding-top: 50%;
    }

    .top-tip {
        color: #21bebd;
        background-color: #eefffe;
        padding: 10px;
        text-align: center;
        font-size: 16px;
    }

    .middle-d {
        background-color: #f5f7fb;
        padding: 10px;
        overflow: auto;
        height: calc(100% - 111px);

        .topic-item-d {
            background: #ffffff;
            border-radius: 10px;
            padding: 10px;
            margin-bottom: 10px;
            .topic-item-d-title-one {
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: bold;
                img {
                    width: 30px;
                    height: 30px;
                    margin-right: 10px;
                }
            }

            .check-item-d {
                padding: 10px;
                margin-top: 10px;
                border: 1px solid #f3f5f9;
            }
        }

        .check-item-d {
            background: #f3f5f9;
            border-radius: 10px;
        }
    }

    .bottom-button {
        width: 100%;
        padding: 10px;
        background-color: #ffffff;
        .btn {
            background-color: #21bebd;
            border: 1px solid #21bebd;
        }
        button {
            width: 80%;
            margin-left: 10%;
        }
    }
    .checked-item {
        background-color: #eefffe !important;
        border: 1px solid #21bebd !important;
    }
    :deep(.van-checkbox__icon--checked .van-icon) {
        color: #ffffff !important;
        background-color: #21bebd !important;
        border-color: #21bebd !important;
    }
</style>