112 lines
4.2 KiB
Text
112 lines
4.2 KiB
Text
|
<!--消息页面 - Telegram风格设计-->
|
|||
|
|
<view class="telegram-container theme-dark">
|
|||
|
|
<view class="telegram-header">
|
|||
|
|
<view class="Search-header-left">
|
|||
|
|
<input class="Search-input"
|
|||
|
|
type="text"
|
|||
|
|
placeholder="Search"
|
|||
|
|
value="{{searchKeyword}}"
|
|||
|
|
bindinput="onSearchInput"
|
|||
|
|
bindconfirm="onSearchInput" />
|
|||
|
|
<image class="Search-img" src="../../images/group/Search.svg" mode="" />
|
|||
|
|
<!-- 清除按钮 -->
|
|||
|
|
<view wx:if="{{searchKeyword}}" class="Search-clear" bindtap="clearSearch">
|
|||
|
|
<text>✕</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="telegram-header-right">
|
|||
|
|
<image class="Search-img-add" src="../../images/group/add.svg" mode="" bindtap="startNewChat" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 群聊 -->
|
|||
|
|
<view class="group-chat">
|
|||
|
|
<view class="group-chat-conten">
|
|||
|
|
<view class="chat-left">
|
|||
|
|
<image class="chat-img" src="../../images/group/groupChat.svg" mode="" />
|
|||
|
|
</view>
|
|||
|
|
<view class="chat-text">
|
|||
|
|
<view class="chat-titel">
|
|||
|
|
<view class="titel">群聊</view>
|
|||
|
|
<text>你已保存0个群组</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="chat-rigth">
|
|||
|
|
<image class="chat-img-rigth" src="../../images/emoji/r-Return.svg" mode="" />
|
|||
|
|
</view>
|
|||
|
|
</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>
|