108 lines
4.6 KiB
Text
108 lines
4.6 KiB
Text
|
<!--消息页面 - Telegram风格设计-->
|
|||
|
|
<view class="telegram-container {{themeClass}} {{isThemeTransitioning ? 'theme-transitioning' : ''}}">
|
|||
|
|
<!-- 顶部导航 -->
|
|||
|
|
<view class="telegram-header">
|
|||
|
|
<view class="header-content">
|
|||
|
|
<text class="header-title">消息</text>
|
|||
|
|
<view class="header-actions">
|
|||
|
|
<view class="header-btn" bindtap="showSearchBar"><text class="header-icon">🔍</text></view>
|
|||
|
|
<view class="header-btn" bindtap="markAllRead"><text class="header-icon">✔️</text></view>
|
|||
|
|
<view class="header-btn" bindtap="startNewChat"><text class="header-icon">➕</text></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 搜索栏 -->
|
|||
|
|
<view class="search-section" wx:if="{{showSearch}}">
|
|||
|
|
<view class="search-bar">
|
|||
|
|
<text class="search-icon">🔍</text>
|
|||
|
|
<input class="search-input"
|
|||
|
|
placeholder="搜索聊天记录"
|
|||
|
|
value="{{searchKeyword}}"
|
|||
|
|
bindinput="onSearchInput"
|
|||
|
|
focus="{{showSearch}}" />
|
|||
|
|
<view class="search-cancel" bindtap="hideSearchBar">
|
|||
|
|
<text class="cancel-text">取消</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- Telegram风格内容：始终展示会话列表（filteredConversations会随搜索实时过滤） -->
|
|||
|
|
<scroll-view class="telegram-content" scroll-y="true"
|
|||
|
|
refresher-enabled="true"
|
|||
|
|
refresher-triggered="{{refreshing}}"
|
|||
|
|
bindrefresherrefresh="onRefresh">
|
|||
|
|
<view class="conversations-section">
|
|||
|
|
<view class="conversation-item {{item.isPinned ? 'pinned' : ''}} {{item.isMuted ? 'muted' : ''}}"
|
|||
|
|
wx:for="{{filteredConversations}}"
|
|||
|
|
wx:key="conversationId"
|
|||
|
|
bindtap="openChat"
|
|||
|
|
bindlongtap="showConversationOptions"
|
|||
|
|
data-conversation="{{item}}">
|
|||
|
|
|
|||
|
|
<!-- 头像 -->
|
|||
|
|
<view class="conversation-avatar">
|
|||
|
|
<image wx:if="{{item.avatar}}"
|
|||
|
|
src="{{item.avatar}}"
|
|||
|
|
class="avatar-image"
|
|||
|
|
mode="aspectFill" />
|
|||
|
|
<view wx:else class="avatar-placeholder">
|
|||
|
|
<text class="avatar-text">{{item.name.charAt(0)}}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 在线状态角标（仅单聊显示） -->
|
|||
|
|
<view wx:if="{{item.type === 'single' || item.chatType === 0}}"
|
|||
|
|
class="presence-indicator {{item.isOnline ? 'online' : 'offline'}}"></view>
|
|||
|
|
|
|||
|
|
<!-- 未读消息徽章 -->
|
|||
|
|
<view class="unread-badge" wx:if="{{item.unreadCount > 0}}">
|
|||
|
|
<text class="unread-count">{{item.unreadCount > 99 ? '99+' : item.unreadCount}}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 置顶标识 -->
|
|||
|
|
<view class="pin-indicator" wx:if="{{item.isPinned}}">
|
|||
|
|
<text class="pin-icon">📌</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 会话信息 -->
|
|||
|
|
<view class="conversation-info">
|
|||
|
|
<view class="conversation-header">
|
|||
|
|
<text class="conversation-name">{{item.name}}</text>
|
|||
|
|
<view class="conversation-meta">
|
|||
|
|
<text class="conversation-time">{{item.lastMessageTime}}</text>
|
|||
|
|
<text class="mute-icon" wx:if="{{item.isMuted}}">🔇</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="conversation-preview">
|
|||
|
|
<text class="last-message">{{item.lastMessage}}</text>
|
|||
|
|
<view class="message-indicators">
|
|||
|
|
<!-- 消息状态指示器 -->
|
|||
|
|
<text class="status-indicator" wx:if="{{item.messageStatus === 'sent'}}">✓</text>
|
|||
|
|
<text class="status-indicator read" wx:if="{{item.messageStatus === 'read'}}">✓✓</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 空状态 -->
|
|||
|
|
<view class="empty-state" wx:if="{{!loading && filteredConversations.length === 0}}">
|
|||
|
|
<text class="empty-icon">💬</text>
|
|||
|
|
<text class="empty-title">暂无聊天</text>
|
|||
|
|
<text class="empty-subtitle">开始一段新的对话吧</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</scroll-view>
|
|||
|
|
|
|||
|
|
<!-- 主题切换悬浮按钮 -->
|
|||
|
|
<view class="theme-toggle" bindtap="toggleTheme" style="position:fixed; left:24rpx; top: {{statusBarHeight+20}}rpx; width:64rpx; height:64rpx; border-radius:32rpx; background:rgba(255,255,255,0.04); display:flex; align-items:center; justify-content:center; z-index:800; color:var(--text-primary);">
|
|||
|
|
<text>{{themeClass === 'theme-dark' ? '🌙' : '☀️'}}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 主题切换径向遮罩动画 -->
|
|||
|
|
<view wx:if="{{showThemeOverlay}}" class="theme-overlay">
|
|||
|
|
<view class="theme-overlay-circle {{overlayPlaying ? 'play' : ''}}" style="width: {{overlayDiameter}}px; height: {{overlayDiameter}}px; left: {{overlayLeft}}px; top: {{overlayTop}}px;"></view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|