添加消息通知界面

miniprogram/pages/notifications/notifications.ts

@@ -0,0 +1,201 @@
+// 定义通知数据类型
+interface Notification {
+  id: string;
+  type: 'system' | 'activity' | 'message';
+  title: string;
+  message: string;
+  time: string;
+  read: boolean;
+}
+
+Page({
+  data: {
+    // 标签状态
+    currentTab: 0,
+    
+    // 所有通知数据
+    notifications: [] as Notification[],
+    
+    // 过滤后的通知（根据当前标签）
+    filteredNotifications: [] as Notification[],
+    
+    // 未读数量统计
+    totalUnread: 0,
+    systemUnread: 0,
+    activityUnread: 0,
+    messageUnread: 0
+  },
+  
+  onLoad() {
+    // 初始化通知数据
+    this.initNotifications();
+  },
+  
+  // 初始化通知数据
+  initNotifications() {
+    // 模拟通知数据
+    const notifications: Notification[] = [
+      {
+        id: '1',
+        type: 'system',
+        title: '系统更新通知',
+        message: '您的应用已更新至最新版本，新增多项功能，提升了使用体验。',
+        time: '今天 08:30',
+        read: false
+      },
+      {
+        id: '2',
+        type: 'activity',
+        title: '新活动上线',
+        message: '限时优惠活动已开始，点击查看详情，参与活动赢取大奖！',
+        time: '昨天 15:45',
+        read: false
+      },
+      {
+        id: '3',
+        type: 'message',
+        title: '张三给你发了消息',
+        message: '在吗？上次说的事情有进展了，我们约个时间讨论一下吧。',
+        time: '昨天 10:20',
+        read: true
+      },
+      {
+        id: '4',
+        type: 'system',
+        title: '账号安全提醒',
+        message: '您的账号在新设备登录，如非本人操作，请及时修改密码。',
+        time: '2023-05-15',
+        read: false
+      },
+      {
+        id: '5',
+        type: 'activity',
+        title: '活动即将结束',
+        message: '您参与的积分兑换活动还有3天结束，抓紧时间兑换哦！',
+        time: '2023-05-14',
+        read: true
+      },
+      {
+        id: '6',
+        type: 'message',
+        title: '李四回复了你的评论',
+        message: '你说得很有道理，我也这么认为。',
+        time: '2023-05-12',
+        read: false
+      }
+    ];
+    
+    // 更新数据
+    this.setData({
+      notifications
+    });
+    
+    // 过滤通知并计算未读数量
+    this.filterNotifications();
+    this.calculateUnreadCounts();
+  },
+  
+  // 切换标签
+  switchTab(e: { currentTarget: { dataset: { tab: number } } }) {
+    const tab = e.currentTarget.dataset.tab;
+    this.setData({
+      currentTab: tab
+    });
+    this.filterNotifications();
+  },
+  
+  // 根据当前标签过滤通知
+  filterNotifications() {
+    const { currentTab, notifications } = this.data;
+    let filtered: Notification[] = [];
+    
+    switch(currentTab) {
+      case 0: // 全部
+        filtered = notifications;
+        break;
+      case 1: // 系统
+        filtered = notifications.filter(item => item.type === 'system');
+        break;
+      case 2: // 活动
+        filtered = notifications.filter(item => item.type === 'activity');
+        break;
+      case 3: // 私信
+        filtered = notifications.filter(item => item.type === 'message');
+        break;
+    }
+    
+    this.setData({
+      filteredNotifications: filtered
+    });
+  },
+  
+  // 计算未读数量
+  calculateUnreadCounts() {
+    const { notifications } = this.data;
+    
+    // 计算各类未读数量
+    const systemUnread = notifications.filter(item => item.type === 'system' && !item.read).length;
+    const activityUnread = notifications.filter(item => item.type === 'activity' && !item.read).length;
+    const messageUnread = notifications.filter(item => item.type === 'message' && !item.read).length;
+    const totalUnread = systemUnread + activityUnread + messageUnread;
+    
+    this.setData({
+      totalUnread,
+      systemUnread,
+      activityUnread,
+      messageUnread
+    });
+  },
+  
+  // 打开通知详情
+  openNotification(e: { currentTarget: { dataset: { id: string } } }) {
+    const id = e.currentTarget.dataset.id;
+    const { notifications } = this.data;
+    
+    // 将通知标记为已读
+    const updatedNotifications = notifications.map(item => {
+      if (item.id === id && !item.read) {
+        return { ...item, read: true };
+      }
+      return item;
+    });
+    
+    this.setData({
+      notifications: updatedNotifications
+    });
+    
+    // 更新过滤列表和未读数量
+    this.filterNotifications();
+    this.calculateUnreadCounts();
+    
+    // 跳转到通知详情页（实际项目中实现）
+    wx.showToast({
+      title: '查看通知详情',
+      icon: 'none'
+    });
+  },
+  
+  // 标记全部已读
+  markAllAsRead() {
+    const { notifications } = this.data;
+    
+    // 将所有通知标记为已读
+    const updatedNotifications = notifications.map(item => ({
+      ...item,
+      read: true
+    }));
+    
+    this.setData({
+      notifications: updatedNotifications
+    });
+    
+    // 更新过滤列表和未读数量
+    this.filterNotifications();
+    this.calculateUnreadCounts();
+    
+    wx.showToast({
+      title: '全部已读',
+      icon: 'none'
+    });
+  }
+});