ucard-person-app-front/pages/mine/help.vue

<template>
    <cwg-page-wrapper class="permission-page">
        <view class="content">
            <u-collapse :border="false" @close="close" @open="open" class="u-collapses" v-if="treeData.length > 0">
                <u-collapse-item :border="false" v-for="value in treeData" :title="value.type" :name="value.id"
                    :key="value.id" :class="value.id !== typeId ? 'u-collapse-items' : 'u-collapse-item'">
                    <view class="u-collapse-content" v-for="(item, index) in value.children" :key="item.id"
                        @click="openProblem(item)">
                        <view class="answer">{{ Number(index) + 1 }}</view>
                        <view class="question">{{ item.problem }}</view>
                    </view>
                </u-collapse-item>
            </u-collapse>
            <cwg-empty-state v-if="treeData.length === 0" />
        </view>
    </cwg-page-wrapper>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref, onMounted } from 'vue'
import { ucardApi } from '@/api/ucard'
import { useI18n } from "vue-i18n";
import useUserStore from "@/stores/use-user-store";
const userStore = useUserStore();
const { t, locale } = useI18n();
const list = ref([]);
const dropdownList = ref([]);
const treeData = ref([]);
const typeId = ref(null);

const open = (name) => {
    typeId.value = name;
};
const close = (name) => {
    typeId.value = null;
};
const openProblem = (item) => {
    userStore.saveProblemDetails(item);
    uni.navigateTo({
        url: `/pages/mine/help-detail`
    });
};
const getAppCommonProblemPage = async () => {
    const res = await ucardApi.getAppCommonProblemPage({ page: { current: 1, row: 100 }, language: locale.value });
    if (res.code === 200) {
        list.value = res.data
    }
};
const getAppCommonProblemDropdown = async () => {
    const res = await ucardApi.getAppCommonProblemDropdown({ language: locale.value });
    if (res.code === 200) {
        dropdownList.value = res.data
    }
};

// 将数据处理成树形结构
const buildTreeData = () => {
    treeData.value = dropdownList.value.map(dropdown => {
        const children = list.value.filter(item => item.typeId === dropdown.id);
        if (children.length === 0) return null;
        return { ...dropdown, children }
    }).filter(item => item !== null);
};

const loadData = async () => {
    await getAppCommonProblemDropdown();
    await getAppCommonProblemPage();
    buildTreeData();
};

onMounted(() => {
    loadData();
})
</script>

<style lang="scss" scoped>
@import "@/uni.scss";

.permission-page {
    min-height: 100vh;
    background: #f5f5f5;
    padding: px2rpx(12) !important;

    .u-collapses {
        border-radius: px2rpx(8);
        overflow: hidden;
    }

    .u-collapse-item {
        background: #fff;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

        :deep(.u-cell__body) {
            // background: linear-gradient(90deg, #eb4e6b 0%, #e7afba 100%);
            background: rgba(208, 37, 55, 0.03);
            border-radius: px2rpx(8);
            // color: #fff;
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }

        :deep(.u-collapse-item__content) {
            border-radius: px2rpx(8);
            z-index: 3;
            background: #fff;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
        }

        :deep(.u-collapse-item__content__text) {
            transition: opacity 0.25s ease-in-out;
        }
    }

    .u-collapse-items {
        border-radius: px2rpx(8);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

        :deep(.u-cell__body) {
            background: #fff;
            border-radius: px2rpx(8);
            color: #333;
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }

        :deep(.u-collapse-item__content) {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
        }

        :deep(.u-collapse-item__content__text) {
            transition: opacity 0.25s ease-in-out;
        }
    }

    .u-collapse-content {
        display: flex;
        align-items: center;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease-in-out;

        &:active {
            transform: scale(0.98);
            opacity: 0.8;
        }

        .question {
            flex: 1;
            padding: px2rpx(16);
            font-size: px2rpx(16);
            color: #333;
        }
    }

}
</style>