| | |
| | | |
| | | <!-- 消息内容 --> |
| | | <view wx:else class="message-content"> |
| | | <!-- 顶部统计和操作栏 --> |
| | | <view class="header-bar"> |
| | | <view class="stats-info"> |
| | | <text class="total-count">共 {{stats.total}} 条消息</text> |
| | | <text wx:if="{{stats.unread > 0}}" class="unread-count">{{stats.unread}} 条未读</text> |
| | | </view> |
| | | |
| | | <view class="header-actions"> |
| | | <!-- 筛选按钮 --> |
| | | <view class="filter-btn {{showFilter ? 'active' : ''}}" bindtap="onToggleFilter"> |
| | | <text class="icon ic-filter"></text> |
| | | <text class="filter-text">筛选</text> |
| | | </view> |
| | | |
| | | <!-- 选择模式按钮 --> |
| | | <view class="select-btn {{selectMode ? 'active' : ''}}" bindtap="onToggleSelectMode"> |
| | | <text class="icon {{selectMode ? 'ic-close' : 'ic-choose'}}"></text> |
| | | <text class="select-text">{{selectMode ? '取消' : '选择'}}</text> |
| | | </view> |
| | | |
| | | <!-- 全部已读按钮 --> |
| | | <view wx:if="{{stats.unread > 0 && !selectMode}}" class="mark-all-btn" bindtap="markAllAsRead"> |
| | | <text class="icon ic-choose"></text> |
| | | <text class="mark-all-text">全部已读</text> |
| | | </view> |
| | | </view> |
| | | <!-- 消息统计 --> |
| | | <view class="message-stats"> |
| | | <text class="stats-text">共 {{messages.length}} 条消息</text> |
| | | </view> |
| | | |
| | | <!-- 筛选面板 --> |
| | | <view wx:if="{{showFilter}}" class="filter-panel"> |
| | | <view class="filter-section"> |
| | | <text class="filter-label">消息类型:</text> |
| | | <view class="filter-options"> |
| | | <view |
| | | wx:for="{{typeOptions}}" |
| | | wx:key="value" |
| | | class="filter-option {{filter.type === item.value ? 'active' : ''}}" |
| | | data-type="type" |
| | | data-value="{{item.value}}" |
| | | bindtap="onFilterChange" |
| | | > |
| | | {{item.label}} |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="filter-section"> |
| | | <text class="filter-label">阅读状态:</text> |
| | | <view class="filter-options"> |
| | | <view |
| | | wx:for="{{statusOptions}}" |
| | | wx:key="value" |
| | | class="filter-option {{filter.status === item.value ? 'active' : ''}}" |
| | | data-type="status" |
| | | data-value="{{item.value}}" |
| | | bindtap="onFilterChange" |
| | | > |
| | | {{item.label}} |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 选择模式操作栏 --> |
| | | <view wx:if="{{selectMode}}" class="select-actions"> |
| | | <view class="select-all-btn" bindtap="onToggleSelectAll"> |
| | | <text class="select-all-icon">{{selectedMessages.length === messages.length && messages.length > 0 ? '☑' : '☐'}}</text> |
| | | <text class="select-all-text">全选</text> |
| | | </view> |
| | | |
| | | <view class="selected-count"> |
| | | 已选择 {{selectedMessages.length}} 条 |
| | | </view> |
| | | |
| | | <view class="batch-actions"> |
| | | <view wx:if="{{selectedMessages.length > 0}}" class="delete-selected-btn" bindtap="onDeleteSelected"> |
| | | <text class="delete-icon">🗑</text> |
| | | <text class="delete-text">删除</text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | |
| | | <!-- 消息列表 --> |
| | | <view class="message-list"> |
| | | <!-- 空状态 --> |
| | | <view wx:if="{{messages.length === 0}}" class="empty-state"> |
| | | <text class="empty-icon">📭</text> |
| | | <text class="empty-text">暂无消息</text> |
| | | </view> |
| | | |
| | | <!-- 消息项 --> |
| | | <view |
| | | wx:for="{{messages}}" |
| | | wx:key="id" |
| | | class="message-item {{!item.isRead ? 'unread' : ''}} {{selectMode && item.isSelected ? 'selected' : ''}}" |
| | | data-id="{{item.id}}" |
| | | data-index="{{index}}" |
| | | bindtap="onMessageTap" |
| | | bindlongpress="onMessageLongPress" |
| | | class="message-item" |
| | | > |
| | | <!-- 选择框 --> |
| | | <view wx:if="{{selectMode}}" class="message-checkbox"> |
| | | <text class="checkbox-icon">{{item.isSelected ? '☑' : '☐'}}</text> |
| | | </view> |
| | | |
| | | <!-- 消息图标 --> |
| | | <view class="message-icon"> |
| | | <text class="type-icon">{{getTypeIcon(item.type)}}</text> |
| | | <view wx:if="{{!item.isRead}}" class="unread-dot"></view> |
| | | </view> |
| | | |
| | | <!-- 消息内容 --> |
| | | <view class="message-content-area"> |
| | | <view class="message-header"> |
| | | <text class="message-title">{{item.title}}</text> |
| | | <text class="message-time">{{formatTime(item.createdAt)}}</text> |
| | | </view> |
| | | |
| | | <view class="message-body"> |
| | | <text class="message-text">{{item.content}}</text> |
| | | </view> |
| | | |
| | | <view class="message-footer"> |
| | | <text class="message-type">{{getTypeText(item.type)}}</text> |
| | | <view wx:if="{{item.relatedActivity}}" class="related-activity"> |
| | | <text class="activity-label">相关活动:</text> |
| | | <text class="activity-title">{{item.relatedActivity.title}}</text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 未读标识 --> |
| | | <view wx:if="{{!item.isRead && !selectMode}}" class="unread-badge"> |
| | | <text class="unread-text">未读</text> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 加载更多 --> |
| | | <view wx:if="{{loadingMore}}" class="loading-more"> |
| | | <view class="loading-spinner small"></view> |
| | | <text class="loading-text">加载更多...</text> |
| | | </view> |
| | | |
| | | <!-- 没有更多数据 --> |
| | | <view wx:if="{{!hasMore && messages.length > 0}}" class="no-more"> |
| | | <text class="no-more-text">没有更多消息了</text> |
| | | </view> |
| | | |
| | | <!-- 空状态 --> |
| | | <view wx:if="{{!loading && messages.length === 0}}" class="empty-state"> |
| | | <view class="empty-icon">📭</view> |
| | | <text class="empty-title">暂无消息</text> |
| | | <text class="empty-desc">您还没有收到任何消息</text> |
| | | <view class="message-content-text">{{item.content}}</view> |
| | | <view class="message-time">{{item.formattedTime}}</view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 刷新提示 --> |
| | | <view wx:if="{{refreshing}}" class="refresh-tip"> |
| | | <view class="refresh-spinner"></view> |
| | | <text class="refresh-text">刷新中...</text> |
| | | </view> |
| | | </view> |