pet-system-fulfiller-app/pages/mine/message/system/index.vue

<template>
    <view class="container">
        <!-- 导航栏 -->
        <view class="nav-bar">
            <view class="nav-left" @click="navBack">
                <image class="back-icon" src="/static/icons/chevron_right_dark.svg" style="transform: rotate(180deg);">
                </image>
            </view>
            <text class="nav-title">系统消息</text>
            <view class="nav-right"></view>
        </view>
        <view class="nav-placeholder"></view>

        <view class="sys-msg-list" v-for="(group, date) in groupedNotices" :key="date">
            <view class="date-label">{{ date }}</view>
            
            <view class="sys-card" v-for="item in group" :key="item.id" @click="handleMarkRead(item)">
                <view class="sys-header">
                    <text class="sys-title">{{ item.title }}</text>
                    <view class="red-dot" v-if="!item.readFlag"></view>
                </view>
                <view class="sys-content">
                    <text class="sys-text">{{ item.content }}</text>
                </view>
                <view class="sys-footer" @click.stop="navToDetail(item)">
                    <text class="sys-time">{{ formatTime(item.createTime, 'HH:mm') }}</text>
                    <view class="check-more">
                        <text>查看详情</text>
                        <image class="arrow-icon-small" src="/static/icons/chevron_right.svg"></image>
                    </view>
                </view>
            </view>
        </view>

        <!-- No data -->
        <view class="empty-state" v-if="Object.keys(groupedNotices).length === 0 && !loading">
            <text class="empty-text">暂无消息记录</text>
        </view>
        <uni-load-more :status="loadMoreStatus" v-if="notices.length > 0"></uni-load-more>
    </view>
</template>

<script>
import { listMyNotice, readNotice } from '@/api/system/notice'
import { formatTime } from '@/utils/index'

export default {
    data() {
        return {
            notices: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                type: 1 // 系统消息
            },
            total: 0,
            loading: false,
            loadMoreStatus: 'more'
        }
    },
    computed: {
        groupedNotices() {
            const groups = {};
            this.notices.forEach(item => {
                const date = formatTime(item.createTime, 'yyyy-MM-dd');
                if (!groups[date]) {
                    groups[date] = [];
                }
                groups[date].push(item);
            });
            return groups;
        }
    },
    onShow() {
        this.refreshList();
    },
    onPullDownRefresh() {
        this.refreshList();
    },
    onReachBottom() {
        if (this.notices.length >= this.total) return;
        this.queryParams.pageNum++;
        this.loadNotices();
    },
    methods: {
        formatTime,
        async refreshList() {
            this.queryParams.pageNum = 1;
            this.notices = [];
            await this.loadNotices();
            uni.stopPullDownRefresh();
        },
        async loadNotices() {
            if (this.loading) return;
            this.loading = true;
            this.loadMoreStatus = 'loading';
            try {
                const res = await listMyNotice(this.queryParams);
                this.notices = [...this.notices, ...(res.rows || [])];
                this.total = Number(res.total);
                this.loadMoreStatus = this.notices.length >= this.total ? 'noMore' : 'more';
            } catch (err) {
                console.error('获取消息失败:', err);
                uni.showToast({ title: '加载失败', icon: 'none' });
            } finally {
                this.loading = false;
            }
        },
        async handleMarkRead(item) {
            if (item.readFlag) return;
            try {
                await readNotice(item.id);
                item.readFlag = true;
            } catch (err) {
                console.error('标记已读失败:', err);
            }
        },
        navBack() {
            uni.navigateBack();
        },
        navToDetail(item) {
            this.handleMarkRead(item);
            uni.navigateTo({
                url: `/pages/mine/message/detail/index?id=${item.id}&title=${item.title}&content=${item.content}&time=${item.createTime}`
            });
        }
    }
}
</script>

<style>
page {
    background-color: #F5F6FA;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 88rpx;
    padding-top: var(--status-bar-height);
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    box-sizing: border-box;
    z-index: 100;
}

.nav-placeholder {
    height: calc(88rpx + var(--status-bar-height));
}

.back-icon {
    width: 40rpx;
    height: 40rpx;
}

.nav-title {
    font-size: 34rpx;
    font-weight: bold;
    color: #333;
}

.nav-right {
    width: 40rpx;
}

.sys-msg-list {
    padding: 20rpx 30rpx;
}

.date-label {
    text-align: center;
    font-size: 24rpx;
    color: #ccc;
    margin: 30rpx 0 20rpx;
    /* Increased top margin */
}

.sys-card {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.02);
}

.sys-header {
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;
}

.sys-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
}

.red-dot {
    width: 10rpx;
    height: 10rpx;
    background-color: #FF3B30;
    border-radius: 50%;
    margin-left: 10rpx;
}

.sys-content {
    margin-bottom: 24rpx;
}

.sys-text {
    font-size: 26rpx;
    color: #666;
    line-height: 1.6;
}

.sys-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1rpx solid #f5f5f5;
    padding-top: 20rpx;
}

.sys-time {
    font-size: 24rpx;
    color: #999;
}

.check-more {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #999;
}

.arrow-icon-small {
    width: 20rpx;
    height: 20rpx;
    margin-left: 4rpx;
    opacity: 0.5;
}
</style>