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