166 lines
6.0 KiB
Markdown
166 lines
6.0 KiB
Markdown
# 微信小程序首页消息通知按钮改造方案
|
||
|
||
## 1. 改造目标
|
||
将首页顶部导航栏右侧的按钮（现为Emoji或红圈按钮）改造为标准的消息通知入口。该按钮将具备以下功能：
|
||
- 展示消息通知图标（铃铛）。
|
||
- 显示未读消息红点或数字角标。
|
||
- 点击跳转至“消息通知”列表页。
|
||
|
||
## 2. UI 设计改造
|
||
|
||
### 2.1 图标替换
|
||
- **现状**：目前使用 `🔔` Emoji 或简单的 CSS 样式。
|
||
- **方案**：替换为高清 SVG 或 PNG 图标，确保在不同分辨率下清晰显示。
|
||
- **资源**：建议添加 `assets/icons/notification.png` 或使用 Base64 SVG。
|
||
|
||
### 2.2 未读消息角标 (Badge)
|
||
- 在图标右上角增加红色圆点（Red Dot）或数字徽标（Badge）。
|
||
- **逻辑**：
|
||
- 当 `unreadCount > 0` 时显示。
|
||
- 当 `unreadCount > 99` 时显示 `99+`。
|
||
|
||
### 2.3 样式调整
|
||
保持原有半透明磨砂玻璃效果（Frosted Glass），优化布局适配图标和角标。
|
||
|
||
```css
|
||
/* 示例样式 */
|
||
.bell-btn {
|
||
position: relative; /* 为角标定位 */
|
||
/* 保持原有背景和边框样式 */
|
||
}
|
||
|
||
.notification-icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.badge {
|
||
position: absolute;
|
||
top: 10rpx;
|
||
right: 10rpx;
|
||
background-color: #ff4d4f;
|
||
border-radius: 10rpx; /* 圆点或数字形状 */
|
||
/* ... */
|
||
}
|
||
```
|
||
|
||
## 3. 交互逻辑
|
||
|
||
### 3.1 点击事件
|
||
- 绑定 `bindtap="handleNotificationClick"` 事件。
|
||
- 点击时提供按压态反馈（`hover-class`）。
|
||
|
||
### 3.2 页面跳转
|
||
- 点击后跳转至新页面 `pages/message/index`。
|
||
- 该页面用于展示系统通知、互动消息等。
|
||
|
||
## 4. 数据逻辑
|
||
|
||
### 4.1 状态管理
|
||
- 在 `index.js` 的 `data` 中增加 `unreadCount` 字段。
|
||
|
||
### 4.2 数据获取
|
||
- 在 `onShow` 生命周期中调用获取未读消息数量的接口（如 `getUnreadMessageCount`）。
|
||
- 暂时可以使用 Mock 数据模拟。
|
||
|
||
## 5. 实施步骤
|
||
|
||
1. **资源准备**：添加铃铛图标文件到 `assets` 目录。
|
||
2. **页面创建**：新建 `pages/message/index` 页面（含 `.js`, `.json`, `.wxml`, `.wxss`）。
|
||
3. **WXML 修改**：
|
||
- 将 `index.wxml` 中的 `🔔` 替换为 `<image>` 组件。
|
||
- 添加角标 View，使用 `wx:if` 控制显示。
|
||
4. **WXSS 修改**：调整图标大小和角标位置。
|
||
5. **JS 逻辑**：
|
||
- 实现 `handleNotificationClick` 跳转逻辑。
|
||
- 实现 `onShow` 获取未读数逻辑。
|
||
6. **配置更新**：在 `app.json` 中注册新页面。
|
||
|
||
## 6. 后续扩展
|
||
- 支持 WebSocket 实时推送消息通知。
|
||
- 消息页面的分类展示（如：系统通知、活动提醒）。
|
||
|
||
## 7. 后台服务端 Web 方案
|
||
|
||
### 7.1 数据库设计 (Django Models)
|
||
在 `admin/server/apps/crm/models.py` 中新增 `Notification` 模型，用于存储消息通知。
|
||
|
||
```python
|
||
class Notification(models.Model):
|
||
TYPE_CHOICES = (
|
||
('system', '系统通知'),
|
||
('activity', '活动提醒'),
|
||
('course', '课程通知'),
|
||
)
|
||
|
||
student = models.ForeignKey('Student', on_delete=models.CASCADE, related_name='notifications', verbose_name="接收学员")
|
||
title = models.CharField(max_length=100, verbose_name="标题")
|
||
content = models.TextField(verbose_name="内容")
|
||
notification_type = models.CharField(max_length=20, choices=TYPE_CHOICES, default='system', verbose_name="通知类型")
|
||
is_read = models.BooleanField(default=False, verbose_name="是否已读")
|
||
created_at = models.DateTimeField(auto_now_add=True, verbose_name="发送时间")
|
||
|
||
class Meta:
|
||
verbose_name = "消息通知"
|
||
verbose_name_plural = verbose_name
|
||
ordering = ['-created_at']
|
||
|
||
def __str__(self):
|
||
return f"{self.title} - {self.student.name}"
|
||
```
|
||
|
||
### 7.2 API 接口设计 (Django Rest Framework)
|
||
在 `admin/server/apps/crm/views.py` 中新增 `NotificationViewSet`，并在 `urls.py` 中注册。
|
||
|
||
#### 7.2.1 新增 API Endpoints
|
||
- **GET /api/crm/notifications/**: 获取当前登录用户的通知列表（支持分页）。
|
||
- **GET /api/crm/notifications/unread_count/**: 获取当前登录用户的未读消息数量。
|
||
- **POST /api/crm/notifications/{id}/read/**: 将指定消息标记为已读。
|
||
- **POST /api/crm/notifications/read_all/**: 将所有消息标记为已读。
|
||
|
||
#### 7.2.2 视图实现逻辑
|
||
```python
|
||
class NotificationViewSet(viewsets.ReadOnlyModelViewSet):
|
||
serializer_class = NotificationSerializer
|
||
permission_classes = [IsAuthenticated]
|
||
|
||
def get_queryset(self):
|
||
# 仅返回当前登录用户的通知
|
||
# 需结合认证系统，假设 request.user.student 存在，或通过 openid 关联
|
||
user = self.request.user
|
||
# 实际逻辑需根据 User 与 Student 的关联方式调整
|
||
# 若 User 是 Admin 用户，可能需要调整；若是小程序用户，通常通过 Token 认证
|
||
return Notification.objects.filter(student__openid=user.username)
|
||
|
||
@action(detail=False, methods=['get'])
|
||
def unread_count(self, request):
|
||
count = self.get_queryset().filter(is_read=False).count()
|
||
return Response({'count': count})
|
||
|
||
@action(detail=True, methods=['post'])
|
||
def read(self, request, pk=None):
|
||
notification = self.get_object()
|
||
notification.is_read = True
|
||
notification.save()
|
||
return Response({'status': 'marked as read'})
|
||
```
|
||
|
||
### 7.3 管理后台集成 (Django Admin)
|
||
在 `admin/server/apps/crm/admin.py` 中注册 `Notification` 模型，以便管理员手动发送通知。
|
||
|
||
- **功能**：
|
||
- 查看所有发送的通知记录。
|
||
- 创建新通知（选择学员、填写标题和内容）。
|
||
- 支持筛选（按类型、是否已读、发送时间）。
|
||
|
||
### 7.4 批量发送功能 (可选扩展)
|
||
未来可在管理后台增加“批量发送”功能，例如：
|
||
- 向所有“在读”学员发送通知。
|
||
- 向所有领取了特定优惠券的学员发送提醒。
|
||
- 向所有已完成课程的学员发送课程完成通知。
|
||
- 向指定项目/活动参与学员发送通知。
|
||
- 向所有学员发送系统通知（如：课程更新、系统维护等）。
|
||
|
||
---
|
||
**确认方案后，我们将按此步骤进行开发。**
|