<!--pages/message/message.wxml-->
|
<view class="container">
|
<!-- 加载状态 -->
|
<view wx:if="{{loading}}" class="loading-container">
|
<view class="loading-spinner"></view>
|
<text class="loading-text">加载中...</text>
|
</view>
|
|
<!-- 消息内容 -->
|
<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>
|
|
<!-- 筛选面板 -->
|
<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: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"
|
>
|
<!-- 选择框 -->
|
<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>
|
</view>
|
</view>
|
|
<!-- 刷新提示 -->
|
<view wx:if="{{refreshing}}" class="refresh-tip">
|
<view class="refresh-spinner"></view>
|
<text class="refresh-text">刷新中...</text>
|
</view>
|
</view>
|
