hn_platform_h5/src/pages/own/message-notification/index.vue

<template>
    <view class="page-container">
        <NavBarModal navBarTitle="消息中心">
            <template #left>
                <view class="back-btn" @tap="handleBack">
                    <up-icon name="arrow-left" size="20" color="#fff" />
                </view>
            </template>
        </NavBarModal>

        <view class="content-wrapper" :style="contentStyle">
            <scroll-view class="message-list" scroll-y>
                <ReviewEmptyState v-if="messageList.length === 0" text="暂无消息" />
                <view v-else class="message-items">
                    <view
                        v-for="(message, index) in messageList"
                        :key="index"
                        class="message-item"
                        @tap="handleMessageClick(message)"
                    >
                        <view class="message-icon">
                            <text class="icon-text">公告</text>
                            <view v-if="message.isRead === 'No'" class="unread-dot"></view>
                        </view>
                        <view class="message-content">
                            <text class="message-title">{{ message.title }}</text>
                            <text class="message-desc">{{ message.content }}</text>
                        </view>
                        <text class="message-time">{{ message.createTime }}</text>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import NavBarModal from '@/components/NavBarModal/index.vue'
import ReviewEmptyState from '@/components/ReviewEmptyState/index.vue'
import { getContentStyle } from '@/utils/safeArea'
import { useMemberStore } from '@/stores'
import { getMessageNotificationListAPI } from '@/services/realName/own/message-notification'

const memberStore = useMemberStore()
const contentStyle = computed(() => {
    return getContentStyle({
        includeNavBar: true,
        includeStatusBar: true,
        includeBottomSafeArea: true,
    })
})

const messageList = ref([])

const handleMessageClick = (message) => {
    const params = encodeURIComponent(JSON.stringify(message))
    uni.navigateTo({
        url: `/pages/own/message-notification/detail/index?message=${params}`,
    })
}

const loadMessageList = async () => {
    const res = await getMessageNotificationListAPI({
        workerId: memberStore.realNameUserInfo.workerId,
    })

    if (res.res === 1 && res.obj && res.obj.length > 0) {
        messageList.value = res.obj
    }
}

const handleBack = () => {
    uni.navigateBack()
}

onMounted(() => {
    loadMessageList()
    uni.$on('refreshMessageNotificationList', loadMessageList)
})

onUnmounted(() => {
    uni.$off('refreshMessageNotificationList')
})
</script>

<style lang="scss" scoped>
.page-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    overflow: hidden;
}

.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.message-list {
    flex: 1;
    overflow-y: auto;
    background: #fff;
}

.message-items {
    padding: 0;
}

.message-item {
    display: flex;
    align-items: flex-start;
    padding: 32rpx;
    border-bottom: 1rpx solid #f0f0f0;
    transition: background-color 0.2s;
}

.message-item:active {
    background-color: #f5f7fa;
}

.message-icon {
    position: relative;
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    background: #07c160;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 24rpx;
    flex-shrink: 0;
}

.unread-dot {
    position: absolute;
    top: -4rpx;
    right: -4rpx;
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    background: #ff4757;
    border: 3rpx solid #fff;
    box-shadow: 0 2rpx 8rpx rgba(255, 71, 87, 0.3);
}

.icon-text {
    font-size: 24rpx;
    color: #fff;
    font-weight: 500;
}

.message-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-right: 16rpx;
}

.message-title {
    font-size: 30rpx;
    color: #333;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 8rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.message-desc {
    font-size: 26rpx;
    color: #999;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.message-time {
    font-size: 24rpx;
    color: #999;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 4rpx;
}

.back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.back-btn:active {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0.95);
}
</style>