253 lines
6.1 KiB
Markdown
253 lines
6.1 KiB
Markdown
# 消息功能前端接入说明
|
||
|
||
## 完成时间
|
||
2025-12-07
|
||
|
||
## 已完成的工作
|
||
|
||
### 1. API 接口文件
|
||
**文件位置**：`common/server/interface/message.js`
|
||
|
||
**包含的接口**：
|
||
- `getMessageList(pageIndex, pageSize, messageType)` - 获取消息列表
|
||
- `getUnreadCount()` - 获取未读消息数量
|
||
- `markAllAsRead()` - 标记所有消息为已读
|
||
|
||
**接口说明**：
|
||
```javascript
|
||
// 获取消息列表
|
||
// 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. 数据绑定说明
|
||
|
||
**消息对象结构**：
|
||
```javascript
|
||
{
|
||
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（预约）模块下管理，便于后续维护。
|
||
|
||
---
|
||
|
||
## 页面使用方式
|
||
|
||
### 从其他页面跳转到消息页面
|
||
|
||
```javascript
|
||
// 跳转到消息页面
|
||
uni.navigateTo({
|
||
url: '/pages/me/my-message-page'
|
||
});
|
||
```
|
||
|
||
### 显示未读消息数量（红点提示）
|
||
|
||
在"我的"页面或其他需要显示未读消息的地方：
|
||
|
||
```vue
|
||
<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. 用户进入消息页面
|
||
1. 调用 `getMessageList(1, 20, 0)` 获取第一页"全部"消息
|
||
2. 调用 `markAllAsRead()` 标记所有消息为已读
|
||
3. 渲染消息列表
|
||
|
||
### 2. 用户切换到"私信"标签
|
||
1. `currentIndex` 变为 1
|
||
2. 调用 `getMessageList(1, 20, 1)` 获取私信消息
|
||
3. 更新消息列表显示
|
||
|
||
### 3. 用户返回"我的"页面
|
||
1. 未读消息数量应该变为 0（因为进入消息页面时已标记为已读）
|
||
|
||
---
|
||
|
||
## 后续优化建议
|
||
|
||
### 短期优化（可选）
|
||
1. **下拉刷新**：添加下拉刷新功能
|
||
```vue
|
||
<scroll-view
|
||
scroll-y
|
||
@scrolltolower="loadMore"
|
||
refresher-enabled
|
||
@refresherrefresh="onRefresh">
|
||
<!-- 消息列表 -->
|
||
</scroll-view>
|
||
```
|
||
|
||
2. **上拉加载更多**：支持分页加载
|
||
```javascript
|
||
async loadMore() {
|
||
if (!this.hasMore || this.loading) return;
|
||
this.pageIndex++;
|
||
await this.loadMessageList();
|
||
}
|
||
```
|
||
|
||
3. **消息详情页**：点击消息查看完整内容
|
||
```javascript
|
||
goToDetail(messageId) {
|
||
uni.navigateTo({
|
||
url: `/pages/me/message-detail?id=${messageId}`
|
||
});
|
||
}
|
||
```
|
||
|
||
### 长期优化（可选）
|
||
1. 消息删除功能
|
||
2. 消息搜索功能
|
||
3. 消息分类标签
|
||
4. 推送通知集成
|
||
|
||
---
|
||
|
||
## 测试清单
|
||
|
||
### 功能测试
|
||
- [ ] 页面正常显示消息列表
|
||
- [ ] 切换"全部/私信"标签功能正常
|
||
- [ ] 未读消息显示红点
|
||
- [ ] 时间格式正确显示
|
||
- [ ] 空数据时显示"暂无消息"提示
|
||
- [ ] 返回按钮功能正常
|
||
|
||
### 接口测试
|
||
- [ ] 能正常获取消息列表
|
||
- [ ] 能正常获取未读数量
|
||
- [ ] 能正常标记消息为已读
|
||
|
||
### 异常测试
|
||
- [ ] 网络异常时显示错误提示
|
||
- [ ] 接口返回错误时不会崩溃
|
||
- [ ] 数据为空时正常显示
|
||
|
||
---
|
||
|
||
## 常见问题
|
||
|
||
### Q1: 为什么进入消息页面后未读数量还是显示？
|
||
A: 需要在"我的"页面的 `onShow()` 生命周期中重新调用 `getUnreadCount()` 获取最新未读数量。
|
||
|
||
### Q2: 时间格式显示不正确？
|
||
A: 后端可能返回时间戳或字符串格式，前端 `formatTime()` 方法已做兼容处理，支持两种格式。
|
||
|
||
### Q3: 切换标签后消息没有更新？
|
||
A: 检查 `clickTab()` 方法是否正确调用了 `loadMessageList()`，并且 `pageIndex` 已重置为 1。
|
||
|
||
### Q4: 接口返回404？
|
||
A: 检查接口路径是否为 `/api/sq/GetMessageList`，确保后端已正确部署。
|
||
|
||
---
|
||
|
||
## 相关文档
|
||
|
||
- [我的消息页面接口参数说明.md](./我的消息页面接口参数说明.md) - 详细接口参数说明
|
||
- [站内信功能开发总结.md](./站内信功能开发总结.md) - 后端功能开发总结
|
||
|
||
---
|
||
|
||
## 联系支持
|
||
|
||
如遇到问题，请检查：
|
||
1. 后端是否已部署站内信功能
|
||
2. 数据库表是否已创建
|
||
3. Token 是否有效（需要登录）
|
||
4. 网络请求是否正常
|