outsource/mahjong_group

Fork 0

zpc a58b4e431b 321

2025-12-07 21:17:34 +08:00

6.1 KiB

Raw Blame History

消息功能前端接入说明

完成时间

2025-12-07

已完成的工作

1. API 接口文件

文件位置：common/server/interface/message.js

包含的接口：

getMessageList(pageIndex, pageSize, messageType) - 获取消息列表
getUnreadCount() - 获取未读消息数量
markAllAsRead() - 标记所有消息为已读

接口说明：

// 获取消息列表
// pageIndex: 页码，从1开始，默认1
// pageSize: 每页数量，默认20
// messageType: 消息类型，0=全部，1=私信
const messageList = await getMessageList(1, 20, 0);

// 获取未读消息数量
const unreadCount = await getUnreadCount();

// 标记所有消息为已读
const success = await markAllAsRead();

2. 消息页面

文件位置：pages/me/my-message-page.vue

已实现的功能：

✅ 页面加载时自动获取消息列表
✅ 页面加载时自动标记所有消息为已读
✅ 标签切换（全部/私信）时重新加载对应消息
✅ 显示消息标题、内容、时间
✅ 显示未读消息红点标识
✅ 空数据时显示提示
✅ 加载状态显示
✅ 时间格式化显示（支持时间戳和字符串格式）

3. 数据绑定说明

消息对象结构：

{
  id: 1,                    // 消息ID（必填）
  title: "消息标题",        // 标题（必填）
  content: "消息内容",      // 正文内容（必填）
  createTime: "2025-12-07 10:30", // 创建时间（必填）
  messageType: 0,           // 消息类型：0=系统通知，1=私信
  isRead: false             // 是否已读
}

接口路径重要提示

⚠️ 注意：实际接口路径使用 /api/sq/ 前缀，而不是需求文档中建议的 /api/user/

实际接口地址：

GET /api/sq/GetMessageList - 获取消息列表
GET /api/sq/GetUnreadCount - 获取未读数量
POST /api/sq/MarkAllAsRead - 标记全部已读

原因：站内信功能统一放在 SQ（预约）模块下管理，便于后续维护。

页面使用方式

从其他页面跳转到消息页面

// 跳转到消息页面
uni.navigateTo({
    url: '/pages/me/my-message-page'
});

显示未读消息数量（红点提示）

在"我的"页面或其他需要显示未读消息的地方：

<template>
    <view class="message-icon" @click="goToMessage">
        <image src="/static/message.png"></image>
        <!-- 未读消息红点 -->
        <view v-if="unreadCount > 0" class="badge">{{ unreadCount }}</view>
    </view>
</template>

<script>
import { getUnreadCount } from '@/common/server/interface/message.js'

export default {
    data() {
        return {
            unreadCount: 0
        }
    },
    onShow() {
        // 页面显示时获取未读消息数量
        this.loadUnreadCount();
    },
    methods: {
        async loadUnreadCount() {
            this.unreadCount = await getUnreadCount();
        },
        goToMessage() {
            uni.navigateTo({
                url: '/pages/me/my-message-page'
            });
        }
    }
}
</script>

<style>
.message-icon {
    position: relative;
}
.badge {
    position: absolute;
    top: -10rpx;
    right: -10rpx;
    background-color: #FF3B30;
    color: white;
    font-size: 20rpx;
    padding: 4rpx 8rpx;
    border-radius: 20rpx;
    min-width: 32rpx;
    text-align: center;
}
</style>

数据流程说明

1. 用户进入消息页面

调用 getMessageList(1, 20, 0) 获取第一页"全部"消息
调用 markAllAsRead() 标记所有消息为已读
渲染消息列表

2. 用户切换到"私信"标签

currentIndex 变为 1
调用 getMessageList(1, 20, 1) 获取私信消息
更新消息列表显示

3. 用户返回"我的"页面

未读消息数量应该变为 0（因为进入消息页面时已标记为已读）

后续优化建议

短期优化（可选）

下拉刷新：添加下拉刷新功能

<scroll-view 
    scroll-y 
    @scrolltolower="loadMore"
    refresher-enabled
    @refresherrefresh="onRefresh">
    <!-- 消息列表 -->
</scroll-view>

上拉加载更多：支持分页加载

async loadMore() {
    if (!this.hasMore || this.loading) return;
    this.pageIndex++;
    await this.loadMessageList();
}

消息详情页：点击消息查看完整内容

goToDetail(messageId) {
    uni.navigateTo({
        url: `/pages/me/message-detail?id=${messageId}`
    });
}

长期优化（可选）

消息删除功能
消息搜索功能
消息分类标签
推送通知集成

测试清单

功能测试

页面正常显示消息列表
切换"全部/私信"标签功能正常
未读消息显示红点
时间格式正确显示
空数据时显示"暂无消息"提示
返回按钮功能正常

接口测试

能正常获取消息列表
能正常获取未读数量
能正常标记消息为已读

异常测试

网络异常时显示错误提示
接口返回错误时不会崩溃
数据为空时正常显示

常见问题

Q1: 为什么进入消息页面后未读数量还是显示？

A: 需要在"我的"页面的 onShow() 生命周期中重新调用 getUnreadCount() 获取最新未读数量。

Q2: 时间格式显示不正确？

A: 后端可能返回时间戳或字符串格式，前端 formatTime() 方法已做兼容处理，支持两种格式。

Q3: 切换标签后消息没有更新？

A: 检查 clickTab() 方法是否正确调用了 loadMessageList()，并且 pageIndex 已重置为 1。

Q4: 接口返回404？

A: 检查接口路径是否为 /api/sq/GetMessageList，确保后端已正确部署。

联系支持

如遇到问题，请检查：

后端是否已部署站内信功能
数据库表是否已创建
Token 是否有效（需要登录）
网络请求是否正常

6.1 KiB Raw Blame History Unescape Escape