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 } from "vue";
import customHeader from "@/components/customHeader.vue";
import { List } from "vant";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

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

// 分页与滚动加载状态
const page = ref(1);
const pageSize = ref(10);
const listLoading = ref(false);
const listFinished = ref(false);

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

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

    listLoading.value = true;
    const params = {
        page: page.value,
        limit: pageSize.value,
        topicId: topicId.value,
    };

    try {
        const { data } = await VE_API.home.warningPageList(params);
        const 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;
        }
    } 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}`);
};
</script>
<style lang="scss" scoped>
.service-records-page {
    width: 100%;
    min-height: 100vh;
    background: #f5f5f5;
    .record-list {
        padding: 10px 12px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .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;
                }
            }
        }
    }
    .empty-wrap {
        padding-top: 40px;
        text-align: center;
        .empty-text {
            font-size: 14px;
            color: #86909c;
        }
    }
}
</style>