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" v-if="knowledgeList && knowledgeList.length">
            <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>
        <div v-else class="empty-wrap">
            <div class="empty-text">暂无数据</div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import customHeader from "@/components/customHeader.vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
// 服务记录列表数据
const knowledgeList = ref([]);
const topicId = ref(6);
onMounted(() => {
    topicId.value = route.query.topicId;
    getKnowledgeList();
});

const getKnowledgeList = async () => {
    const params = {
        page: 1,
        limit: 10,
        topicId: topicId.value,
    };
    VE_API.home.warningPageList(params).then(({ data }) => {
        knowledgeList.value = data;
    });
};

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>