feiniao-farm-h5/src/views/old_mini/home/subPages/knowledgeList.vue

<template>
    <div class="service-records-page">
        <custom-header name="知识库"></custom-header>
        <div class="record-list">
            <list v-model:loading="listLoading" :finished="listFinished" finished-text="" @load="getKnowledgeList">
                <div v-for="(item, index) in knowledgeList" :key="index" class="record-card">
                    <img class="thumb" :src="item.media && item.media[0]" alt="暂无图片" />
                    <div class="card-body" @click="handleItemClick(item)">
                        <div class="card-body-left">
                            <div class="title van-multi-ellipsis--l2">{{ item.title }}</div>
                            <div class="date">{{ formatDate(item.createTime) }}</div>
                        </div>
                    </div>
                </div>

                <!-- 加载完成且无数据时的空状态 -->
                <div v-if="!knowledgeList.length && listFinished" class="empty-wrap">
                    <div class="empty-text">暂无数据</div>
                </div>
            </list>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, watch, onActivated } from "vue";
import customHeader from "@/components/customHeader.vue";
import { List } from "vant";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";

const router = useRouter();
const route = useRoute();
const store = useStore();

// 服务记录列表数据
const knowledgeList = ref([]);
const topicId = ref(6);

// 分页与滚动加载状态
const page = ref(1);
const pageSize = ref(10);
const listLoading = ref(false);
const listFinished = ref(false);
// 存储全部数据（用于 topicId === 6 时的前端分页）
const allDataCache = ref([]);

// 重置列表状态
const resetListState = () => {
    knowledgeList.value = [];
    page.value = 1;
    listFinished.value = false;
    allDataCache.value = [];
};

// 初始化或重置时加载数据
const initList = () => {
    resetListState();
    // 重置后触发首次加载
    getKnowledgeList();
};

onMounted(() => {
    // 从路由获取当前知识库类型
    topicId.value = Number(route.query.topicId) || 6;
    // 不主动请求，交给 vant List 的 @load 触发首次加载
});

// 监听路由参数变化
watch(
    () => route.query.topicId,
    (newTopicId) => {
        const newId = Number(newTopicId) || 6;
        if (newId !== topicId.value) {
            topicId.value = newId;
            initList();
        }
    }
);

// 页面激活时也检查参数变化
onActivated(() => {
    const newId = Number(route.query.topicId) || 6;
    if (newId !== topicId.value) {
        topicId.value = newId;
        initList();
    }
});

const getKnowledgeList = async () => {
    if (listFinished.value) return;

    listLoading.value = true;

    try {
        let list = [];
        // 实战知识库：使用原接口（支持分页）
        const params = {
            page: page.value,
            limit: pageSize.value,
            topicId: topicId.value,
        };
        const { data } = await VE_API.home.warningPageList(params);
        list = data || [];

        if (page.value === 1) {
            knowledgeList.value = list;
        } else {
            knowledgeList.value = [...knowledgeList.value, ...list];
        }

        // 如果返回数量小于页大小，认为没有更多数据了
        if (list.length < pageSize.value) {
            listFinished.value = true;
        } else {
            page.value += 1;
        }
    } catch (error) {
        console.error("获取知识列表失败:", error);
        listFinished.value = true;
    } finally {
        listLoading.value = false;
    }
};

const formatDate = (dateStr) => {
    if (!dateStr) return "";
    // 将 2026-01-06T00:00:00 格式转换为 2026-01-06
    return dateStr.split("T")[0];
};

const handleItemClick = (item) => {
    router.push(`/warning_detail?id=${item.id}&showImage=true`);
};
</script>
<style lang="scss" scoped>
.service-records-page {
    width: 100%;
    background: #f5f5f5;
    height: 100vh;

    .record-list {
        padding: 10px 12px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        height: calc(100% - 60px);
        overflow-y: auto;
    }

    .record-card {
        display: flex;
        gap: 12px;
        padding: 12px 10px;
        background: #ffffff;
        border-radius: 12px;
        align-items: center;
        height: 98px;
        box-sizing: border-box;

        .thumb {
            width: 112px;
            height: 74px;
            border-radius: 8px;
            object-fit: cover;
            flex: none;
        }

        .card-body {
            flex: 1;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .card-body-left {
                width: 100%;
                height: 95%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .date {
                    font-size: 13px;
                    color: #86909c;
                    margin-top: 4px;
                }
            }
        }
    }

    .record-card+.record-card {
        margin-top: 10px;
    }

    .empty-wrap {
        padding-top: 40px;
        text-align: center;

        .empty-text {
            font-size: 14px;
            color: #86909c;
        }
    }
}
</style>