feiniao-farm-h5/src/views/old_mini/mine/pages/message.vue

<template>
    <div class="message-page">
        <custom-header name="我的消息" bgColor="#f7f7f7"></custom-header>
        <List
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            :immediate-check="false"
        >
            <div class="message-list">
                <div class="message-item" v-for="(item, index) in messageList" :key="index" @click="handleItem(item)">
                    <div class="message-content">
                        <div class="title">{{ item.title }}</div>
                        <div class="desc">{{ item.desc }}</div>
                        <div class="footer">
                            <div class="footer-left">
                                <span class="view-detail">查看详情</span>
                                <span class="date">{{ formatDate(item.createDate) }}</span>
                            </div>
                            <el-icon class="arrow-icon"><ArrowRight /></el-icon>
                        </div>
                    </div>
                </div>
            </div>
        </List>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ArrowRight } from "@element-plus/icons-vue";
import { List } from "vant";
import customHeader from "@/components/customHeader.vue";

const router = useRouter();

const handleItem = (item) => {
    router.push("/completed_work?miniJson=" + JSON.stringify({ id: item.farmData.farmWorkRecordId }));
};

// 分页相关状态
const messageList = ref([]);
const loading = ref(false);
const finished = ref(false);
const currentPage = ref(1);
const pageSize = ref(10);

// 加载数据
const getNoticeList = async () => {
    try {
        loading.value = true;
        const params = {
            page: currentPage.value,
            limit: pageSize.value,
            popType: 0,
        };
        const res = await VE_API.mine.listNotice(params);
        
        if (res.data && res.data.length > 0) {
            const newData = res.data.map((item) => {
                return {
                    ...item,
                    farmData: JSON.parse(item.data),
                };
            });
            
            if (currentPage.value === 1) {
                messageList.value = newData;
            } else {
                messageList.value = [...messageList.value, ...newData];
            }
            
            // 如果返回的数据少于每页数量，说明没有更多数据了
            if (res.data.length < pageSize.value) {
                finished.value = true;
            }
        } else {
            // 没有数据时，如果是第一页，显示空列表；否则标记为完成
            if (currentPage.value === 1) {
                messageList.value = [];
            }
            finished.value = true;
        }
    } catch (error) {
        console.error("获取消息列表失败:", error);
        finished.value = true;
    } finally {
        loading.value = false;
    }
};

// 滚动加载更多
const onLoad = () => {
    if (finished.value) {
        return;
    }
    currentPage.value += 1;
    getNoticeList();
};

// 初始化加载
onMounted(() => {
    currentPage.value = 1;
    finished.value = false;
    getNoticeList();
});

// 格式化日期为 MM-DD 格式
const formatDate = (dateStr) => {
    if (!dateStr) return "--";
    const date = new Date(dateStr);
    if (Number.isNaN(date.getTime())) return dateStr;
    const m = `${date.getMonth() + 1}`.padStart(2, "0");
    const d = `${date.getDate()}`.padStart(2, "0");
    return `${m}-${d}`;
};
</script>

<style lang="scss" scoped>
.message-page {
    position: relative;
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    background-color: #f7f7f7;
    display: flex;
    flex-direction: column;
    
    ::v-deep .van-list {
        flex: 1;
        height: calc(100vh - 40px);
        overflow-y: auto;
        padding: 12px;
        box-sizing: border-box;
    }
    
    .message-list {
        width: 100%;
        .message-item {
            background-color: #fff;
            border-radius: 14px;
            padding: 16px;
            .message-content {
                .title {
                    font-size: 16px;
                    font-weight: 500;
                    margin-bottom: 8px;
                }
                .desc {
                    color: #bbbbbb;
                    margin-bottom: 10px;
                }
                .footer {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    border-top: 1px solid #f5f5f5;
                    padding-top: 10px;
                    .footer-left {
                        display: flex;
                        align-items: center;
                    }
                    .view-detail {
                        color: #333333;
                        font-size: 14px;
                        margin-right: 8px;
                    }
                    .date {
                        color: #b6b6b6;
                        font-size: 14px;
                    }
                }
            }
            .arrow-icon {
                color: #999999;
                font-size: 16px;
                margin-left: 12px;
            }
        }
        .message-item + .message-item {
            margin-top: 12px;
        }
    }
}
</style>