Initial commit

2025-12-09 14:31:16 +08:00
parent c34b63b8da
commit b8648c2861
82 changed files with 1896 additions and 46 deletions
--- a/wechat-mini-program/TRANSFORMATION_PLAN.md
+++ b/wechat-mini-program/TRANSFORMATION_PLAN.md
@@ -0,0 +1,165 @@
+# 微信小程序首页消息通知按钮改造方案
+
+## 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 批量发送功能 (可选扩展)
+未来可在管理后台增加“批量发送”功能，例如：
+- 向所有“在读”学员发送通知。
+- 向所有领取了特定优惠券的学员发送提醒。
+- 向所有已完成课程的学员发送课程完成通知。
+- 向指定项目/活动参与学员发送通知。
+- 向所有学员发送系统通知（如：课程更新、系统维护等）。
+
+---
+**确认方案后，我们将按此步骤进行开发。**
--- a/wechat-mini-program/app.json
+++ b/wechat-mini-program/app.json
@@ -5,7 +5,8 @@
    "pages/profile/profile",
    "pages/coupon/coupon",
    "pages/detail/detail",
-    "pages/login/login"
+    "pages/login/login",
+    "pages/message/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
--- a/wechat-mini-program/pages/course/course.js
+++ b/wechat-mini-program/pages/course/course.js
@@ -13,8 +13,11 @@ Page({
  },

  onLoad() {
-    this.fetchHonors()
-    this.fetchProjects()
+    const app = getApp()
+    if (app.globalData.token) {
+        this.fetchHonors()
+        this.fetchProjects()
+    }
  },

  onShow() {
@@ -23,6 +26,12 @@ Page({

  getUserInfo() {
      const app = getApp()
+      if (!app.globalData.token) {
+          // Not logged in, clear data
+          this.setData({ user: {}, honors: [], projects: [] })
+          return
+      }
+
      // Try to get from globalData first to speed up rendering
      if (app.globalData.userInfo) {
          this.setData({ user: app.globalData.userInfo })
@@ -36,10 +45,21 @@ Page({
          // this.fetchProjects();
      }).catch(err => {
          console.error('Failed to fetch user info', err)
+          if (err && (err.code === 401 || err.code === 403)) {
+              // Token invalid, clear it
+              app.globalData.token = null;
+              app.globalData.userInfo = null;
+              this.setData({ user: {}, honors: [], projects: [] });
+          }
      })
  },

  onPullDownRefresh() {
+    const app = getApp()
+    if (!app.globalData.token) {
+        wx.stopPullDownRefresh()
+        return
+    }
    Promise.all([this.fetchHonors(), this.fetchProjects()]).then(() => {
      wx.stopPullDownRefresh()
    })
--- a/wechat-mini-program/pages/index/index.js
+++ b/wechat-mini-program/pages/index/index.js
@@ -12,7 +12,11 @@ Page({
    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName'), // 如需尝试获取用户信息可改为false
    selectedCategory: 'all',
    showcases: [],
-    categoryStats: {}
+    categoryStats: {},
+    unreadCount: 0
+  },
+  onShow() {
+      this.fetchUnreadCount();
  },
  onLoad() {
    if (wx.getUserProfile) {
@@ -30,6 +34,26 @@ Page({
      this.setData({ selectedCategory: type });
      this.fetchData(type);
  },
+  fetchUnreadCount() {
+    // Only fetch if logged in
+    const app = getApp()
+    if (!app.globalData.token) return;
+
+    console.log('Fetching unread count...');
+    const { request } = require('../../utils/request')
+    request({ url: '/notifications/unread_count/' })
+      .then(res => {
+        if (res && typeof res.count === 'number') {
+          this.setData({ unreadCount: res.count })
+        }
+      })
+      .catch(err => console.error('Fetch unread count error:', err))
+  },
+  handleNotificationClick() {
+    wx.navigateTo({
+      url: '/pages/message/index'
+    })
+  },
  fetchBanners() {
    const { request } = require('../../utils/request')
    request({ url: '/banners/?is_active=true' })
--- a/wechat-mini-program/pages/index/index.wxml
+++ b/wechat-mini-program/pages/index/index.wxml
@@ -6,7 +6,10 @@
        <view class="title-sub">致力成就</view>
        <view class="title-main">终身教育伟大事业</view>
      </view>
-      <view class="bell-btn">🔔</view>
+      <view class="bell-btn" bindtap="handleNotificationClick">
+        <image class="notification-icon" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjEgMTVhMiAyIDAgMCAxLTIgMkg3bC00IDRWNWEyIDIgMCAwIDEgMi0yaDE0YTIgMiAwIDAgMSAyIDJ6Ij48L3BhdGg+PC9zdmc+" />
+        <view class="badge" wx:if="{{unreadCount > 0}}">{{unreadCount > 99 ? '99+' : unreadCount}}</view>
+      </view>
    </view>
    
    <!-- Search Bar -->
--- a/wechat-mini-program/pages/index/index.wxss
+++ b/wechat-mini-program/pages/index/index.wxss
@@ -54,10 +54,9 @@
 .bell-btn {
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
-  padding: 16rpx;
+  padding: 0;
  border-radius: 50%;
  color: var(--text-white);
-  font-size: 32rpx;
  width: 72rpx;
  height: 72rpx;
  display: flex;
@@ -65,6 +64,25 @@
  justify-content: center;
  box-sizing: border-box;
  border: 1rpx solid rgba(255, 255, 255, 0.3);
+  position: relative;
+}
+
+.notification-icon {
+  width: 40rpx;
+  height: 40rpx;
+}
+
+.badge {
+  position: absolute;
+  top: -6rpx;
+  right: -6rpx;
+  background-color: #ff4d4f;
+  color: white;
+  font-size: 20rpx;
+  padding: 4rpx 10rpx;
+  border-radius: 20rpx;
+  line-height: 1;
+  border: 2rpx solid #fff;
 }

 .search-bar {
--- a/wechat-mini-program/pages/message/index.js
+++ b/wechat-mini-program/pages/message/index.js
@@ -0,0 +1,42 @@
+const app = getApp()
+const { request } = require('../../utils/request.js')
+
+Page({
+  data: {
+    notifications: [],
+    loading: false
+  },
+
+  onShow() {
+    this.fetchNotifications()
+    this.readAllNotifications()
+  },
+
+  fetchNotifications() {
+    this.setData({ loading: true })
+    request({ url: '/notifications/' })
+      .then(res => {
+        // Handle paginated response if any, or direct list
+        const list = Array.isArray(res) ? res : (res.results || [])
+        this.setData({
+          notifications: list,
+          loading: false
+        })
+      })
+      .catch(err => {
+        console.error(err)
+        this.setData({ loading: false })
+      })
+  },
+
+  readAllNotifications() {
+    request({ 
+      url: '/notifications/read_all/',
+      method: 'POST'
+    })
+      .then(res => {
+        console.log('All read')
+      })
+      .catch(err => console.error(err))
+  }
+})
--- a/wechat-mini-program/pages/message/index.json
+++ b/wechat-mini-program/pages/message/index.json
@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "消息通知"
+}
--- a/wechat-mini-program/pages/message/index.wxml
+++ b/wechat-mini-program/pages/message/index.wxml
@@ -0,0 +1,16 @@
+<view class="container">
+  <view class="notification-list" wx:if="{{notifications.length > 0}}">
+    <view class="notification-item" wx:for="{{notifications}}" wx:key="id">
+      <view class="notification-header">
+        <text class="title">{{item.title}}</text>
+        <text class="time">{{item.created_at}}</text>
+      </view>
+      <view class="notification-content">
+        {{item.content}}
+      </view>
+    </view>
+  </view>
+  <view class="empty-state" wx:else>
+    <text>暂无消息</text>
+  </view>
+</view>
--- a/wechat-mini-program/pages/message/index.wxss
+++ b/wechat-mini-program/pages/message/index.wxss
@@ -0,0 +1,46 @@
+.container {
+  padding: 20rpx;
+  background-color: #f8f8f8;
+  min-height: 100vh;
+}
+
+.notification-item {
+  background-color: #fff;
+  border-radius: 12rpx;
+  padding: 30rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
+}
+
+.notification-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16rpx;
+}
+
+.title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+}
+
+.time {
+  font-size: 24rpx;
+  color: #999;
+}
+
+.notification-content {
+  font-size: 28rpx;
+  color: #666;
+  line-height: 1.5;
+}
+
+.empty-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-top: 200rpx;
+  color: #999;
+  font-size: 28rpx;
+}
--- a/wechat-mini-program/pages/profile/profile.wxml
+++ b/wechat-mini-program/pages/profile/profile.wxml
@@ -13,7 +13,7 @@
        <view class="stats-card">
            <view class="stat-item">
                <view class="stat-val">{{user.stats.learning}}</view>
-                <view class="stat-label">在学课程</view>
+                <view class="stat-label">课程&活动</view>
            </view>
            <view class="stat-item">
                <view class="stat-val">{{user.stats.coupons}}</view>