book-hi/pages-mine/pages/notice.vue

<template>
    <view class="notice-page">
        <page-scroll
            url="/token/message/mymsg"
            :immediate="true"
            @updateList="handleUpdateList"
            ref="pageRef"
            slotEmpty
            emptyText="暂无消息"
        >
            <!-- 时间分割线 -->
            <view class="notice-bar" v-for="(item, index) in noticeList" :key="index">
                <view class="time-divider">{{ item.createTime }}</view>

                <!-- 消息列表 -->
                <view class="notice-item flex-d">
                    <!-- 通知图标 -->
                    <view class="flex-a notice-header">
                        <image src="../static/notice.png" style="width: 44rpx; height: 44rpx"></image>
                        <view class="notice-title">通知</view>
                    </view>
                    <!-- 通知内容 -->
                    <view class="notice-content">
                        <view class="notice-text">
                            <text>{{ item.messageInfo }}</text>
                            <!-- <text>\n您也可以随时在</text>
                            <text class="notice-link" @click="goToOrder">【我的订单】</text>
                            <text>中查看订单状态</text> -->
                        </view>
                    </view>
                </view>
            </view>
        </page-scroll>
    </view>
</template>

<script>
import pageScroll from "@/components/pageScroll/index.vue";

export default {
    components: {
        pageScroll,
    },
    data() {
        return {
            noticeList: [],
        };
    },
    // #ifdef MP-ALIPAY
    onPullDownRefresh() {
        this.$refs.pageRef?.loadData(true)
    },
    // #endif
    methods: {
        // 处理列表更新
        handleUpdateList(list = []) {
            this.noticeList = list;
        },

        // 格式化时间
        formatTime(time) {
            if (!time) return "";
            return time.replace("T", " ").substring(0, 19);
        },

        // 跳转到订单页面
        goToOrder() {
            uni.navigateTo({
                url: "/pages-mine/pages/order-page",
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.notice-page {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding: 20rpx 0;

    .time-divider {
        text-align: center;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #333333;
        padding: 20rpx 0;
    }

    .notice-item {
        margin: 0 20rpx;
        padding: 30rpx;
        background: #ffffff;
        border-radius: 12rpx;

        .notice-icon {
            margin-right: 20rpx;
            padding-top: 6rpx;
        }

        .notice-header {
            border-bottom: 1px solid #f8f8f8;
            padding-bottom: 14rpx;
        }

        .notice-title {
            font-size: 30rpx;
            font-weight: bold;
            color: #333333;
            padding-left: 10rpx;
            font-family: PingFang SC;
        }

        .notice-content {
            padding-top: 14rpx;
            flex: 1;

            .notice-text {
                font-size: 28rpx;
                color: #666666;
                line-height: 1.6;

                .notice-link {
                    color: #38c148;
                    padding: 0 4rpx;
                }
            }
        }
    }
}
</style>