pet-system-fulfiller-app/pages/mine/message/order/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="msg-group" v-for="(group, date) in groupedNotices" :key="date">
            <view class="date-label">{{ date }}</view>
            
            <view class="msg-card" v-for="item in group" :key="item.id" @click="handleMarkRead(item)">
                <view class="card-header">
                    <text class="card-title">{{ item.title }}</text>
                    <view class="red-dot" v-if="!item.readFlag"></view>
                </view>
                <view class="card-body">
                    <text class="msg-text">{{ item.content }}</text>
                </view>
                <view class="card-footer" @click.stop="navToOrder(item)">
                    <text class="order-id">查看详情</text>
                    <image class="arrow-icon" src="/static/icons/chevron_right.svg"></image>
                </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: 0 // 订单消息
            },
            total: 0,
            loading: false,
            loadMoreStatus: 'more' // more, loading, noMore
        }
    },
    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: {
        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();
        },
        navToOrder(item) {
            this.handleMarkRead(item);
            // 这里根据业务需求跳转。通常是跳转到订单列表中的待接单或者是具体的详情？
            // 目前先跳回首页任务大厅。
            uni.switchTab({
                url: '/pages/home/index'
            });
        }
    }
}
</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; }

.msg-group {
    padding: 20rpx 30rpx;
}
.date-label {
    text-align: center;
    font-size: 24rpx;
    color: #ccc;
    margin: 20rpx 0;
}
.msg-card {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 10rpx rgba(0,0,0,0.02);
}
.card-header {
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;
}
.card-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
}
.red-dot {
    width: 12rpx;
    height: 12rpx;
    background-color: #FF3B30;
    border-radius: 50%;
    margin-left: 10rpx;
}
.card-body {
    margin-bottom: 24rpx;
    padding-bottom: 24rpx;
    border-bottom: 1rpx solid #f5f5f5;
}
.msg-text {
    font-size: 26rpx;
    color: #666;
    line-height: 1.5;
}
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.order-id {
    font-size: 24rpx;
    color: #999;
}
.arrow-icon {
    width: 24rpx;
    height: 24rpx;
    opacity: 0.3;
}
</style>