toutoukan_front/miniprogram/pages/notifications/notifications.ts

// 定义通知数据类型
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'
    });
  }
});