55 lines
2.2 KiB
Plaintext
55 lines
2.2 KiB
Plaintext
|
<view class="notification-page">
|
||
|
|
<!-- 顶部导航栏 -->
|
||
|
|
<view class="navbar">
|
||
|
|
<view class="navbar-title">消息通知</view>
|
||
|
|
<view class="navbar-right" bindtap="markAllAsRead">
|
||
|
|
<text class="mark-read">全部已读</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 通知分类标签 -->
|
||
|
|
<view class="tabs">
|
||
|
|
<view class="tab-item {{currentTab === 0 ? 'active' : ''}}" bindtap="switchTab" data-tab="0">
|
||
|
|
<text>全部</text>
|
||
|
|
<view class="badge" wx:if="{{totalUnread > 0}}">{{totalUnread}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="tab-item {{currentTab === 1 ? 'active' : ''}}" bindtap="switchTab" data-tab="1">
|
||
|
|
<text>系统</text>
|
||
|
|
<view class="badge" wx:if="{{systemUnread > 0}}">{{systemUnread}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="tab-item {{currentTab === 2 ? 'active' : ''}}" bindtap="switchTab" data-tab="2">
|
||
|
|
<text>活动</text>
|
||
|
|
<view class="badge" wx:if="{{activityUnread > 0}}">{{activityUnread}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="tab-item {{currentTab === 3 ? 'active' : ''}}" bindtap="switchTab" data-tab="3">
|
||
|
|
<text>私信</text>
|
||
|
|
<view class="badge" wx:if="{{messageUnread > 0}}">{{messageUnread}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 通知列表 -->
|
||
|
|
<view class="notification-list">
|
||
|
|
<view wx:for="{{filteredNotifications}}" wx:key="id" class="notification-item" bindtap="openNotification" data-id="{{item.id}}">
|
||
|
|
<view class="avatar-container">
|
||
|
|
<view class="avatar {{item.type === 'system' ? 'system-avatar' : item.type === 'activity' ? 'activity-avatar' : 'message-avatar'}}">
|
||
|
|
<text class="avatar-icon">{{item.type === 'system' ? '系' : item.type === 'activity' ? '活' : '私'}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="unread-dot" wx:if="{{!item.read}}"></view>
|
||
|
|
</view>
|
||
|
|
<view class="notification-content">
|
||
|
|
<view class="notification-header">
|
||
|
|
<text class="title">{{item.title}}</text>
|
||
|
|
<text class="time">{{item.time}}</text>
|
||
|
|
</view>
|
||
|
|
<text class="message">{{item.message}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 空状态 -->
|
||
|
|
<view class="empty-state" wx:if="{{filteredNotifications.length === 0}}">
|
||
|
|
<view class="empty-icon">📭</view>
|
||
|
|
<text class="empty-text">暂无通知</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|