180 lines
7 KiB
Text
180 lines
7 KiB
Text
|
<!-- 🔍 全局搜索页面 -->
|
|||
|
|
<view class="search-container">
|
|||
|
|
<!-- 现代化导航栏 -->
|
|||
|
|
<view class="search-header">
|
|||
|
|
<view class="header-content">
|
|||
|
|
<!-- 使用系统导航栏返回按钮，移除自定义返回按钮 -->
|
|||
|
|
|
|||
|
|
<!-- 搜索输入框 -->
|
|||
|
|
<view class="search-input-container">
|
|||
|
|
<view class="search-input-wrapper">
|
|||
|
|
<image class="search-icon" src="/images/Search.png" mode="aspectFit" />
|
|||
|
|
<input class="search-input"
|
|||
|
|
placeholder="{{isConversationSearch ? '在此会话中搜索' : '搜索消息、好友、群聊'}}"
|
|||
|
|
value="{{searchKeyword}}"
|
|||
|
|
bindinput="onSearchInput"
|
|||
|
|
bindconfirm="onSearchConfirm"
|
|||
|
|
focus="{{searchFocus}}"
|
|||
|
|
confirm-type="search" />
|
|||
|
|
<view class="clear-btn"
|
|||
|
|
wx:if="{{searchKeyword}}"
|
|||
|
|
bindtap="clearSearch">
|
|||
|
|
<text class="clear-icon">✕</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 搜索按钮 -->
|
|||
|
|
<view class="search-btn" bindtap="performSearch">
|
|||
|
|
<text class="search-btn-text">搜索</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 搜索内容区域 -->
|
|||
|
|
<view class="search-content">
|
|||
|
|
<!-- 搜索建议和历史 -->
|
|||
|
|
<view class="search-suggestions" wx:if="{{!searchResults.length && !isSearching}}">
|
|||
|
|
<!-- 搜索历史 -->
|
|||
|
|
<view class="suggestion-section" wx:if="{{searchHistory.length}}">
|
|||
|
|
<view class="section-header">
|
|||
|
|
<text class="section-title">搜索历史</text>
|
|||
|
|
<view class="clear-history-btn" bindtap="clearSearchHistory">
|
|||
|
|
<text class="clear-text">清除</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="history-list">
|
|||
|
|
<view class="history-item"
|
|||
|
|
wx:for="{{searchHistory}}"
|
|||
|
|
wx:key="index"
|
|||
|
|
bindtap="selectHistoryItem"
|
|||
|
|
data-keyword="{{item}}">
|
|||
|
|
<text class="history-icon">🕐</text>
|
|||
|
|
<text class="history-text">{{item}}</text>
|
|||
|
|
<view class="remove-history-btn"
|
|||
|
|
bindtap="removeHistoryItem"
|
|||
|
|
data-keyword="{{item}}"
|
|||
|
|
catchtap="true">
|
|||
|
|
<text class="remove-icon">✕</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- 搜索提示 -->
|
|||
|
|
<view class="search-tips" wx:if="{{!searchHistory.length}}">
|
|||
|
|
<view class="tips-icon">🔍</view>
|
|||
|
|
<text class="tips-title">开始搜索</text>
|
|||
|
|
<text class="tips-description">搜索消息、好友、群聊等内容</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 搜索结果 -->
|
|||
|
|
<view class="search-results" wx:if="{{searchResults.length || isSearching}}">
|
|||
|
|
<!-- 搜索状态栏 -->
|
|||
|
|
<view class="search-status-bar" wx:if="{{searchKeyword}}">
|
|||
|
|
<text class="search-status-text">
|
|||
|
|
{{searchStatusText}}
|
|||
|
|
</text>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 搜索结果列表 -->
|
|||
|
|
<scroll-view class="results-scroll"
|
|||
|
|
scroll-y="true"
|
|||
|
|
bindscrolltolower="loadMoreResults"
|
|||
|
|
enable-back-to-top="true">
|
|||
|
|
|
|||
|
|
<!-- 按会话聚合的结果列表 -->
|
|||
|
|
<view class="result-section" wx:if="{{searchResults.length}}">
|
|||
|
|
<view class="result-item"
|
|||
|
|
wx:for="{{searchResults}}"
|
|||
|
|
wx:key="conversationId"
|
|||
|
|
bindtap="openConversation"
|
|||
|
|
data-conversation="{{item}}">
|
|||
|
|
|
|||
|
|
<!-- 会话头像（与消息页保持一致：优先 item.avatar，其次 item.conversationAvatar） -->
|
|||
|
|
<view class="result-avatar">
|
|||
|
|
<image wx:if="{{item.avatar || item.conversationAvatar}}"
|
|||
|
|
src="{{item.avatar || item.conversationAvatar}}"
|
|||
|
|
class="avatar-image"
|
|||
|
|
mode="aspectFill" />
|
|||
|
|
<view wx:else class="avatar-placeholder">
|
|||
|
|
<text class="avatar-text">{{item.conversationInitial || '聊'}}
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 会话摘要 -->
|
|||
|
|
<view class="result-content">
|
|||
|
|
<view class="result-header">
|
|||
|
|
<text class="sender-name">{{item.name || item.conversationName || '会话'}}</text>
|
|||
|
|
<text class="message-time">{{item.formattedTime}}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="result-body">
|
|||
|
|
<view class="message-text" wx:if="{{item.topMatch.msgTypeCode === 0}}">
|
|||
|
|
<rich-text nodes="{{item.topMatch.highlightedContent || item.topMatch.content}}"></rich-text>
|
|||
|
|
</view>
|
|||
|
|
<view class="message-media" wx:elif="{{item.topMatch.msgTypeCode === 1}}">
|
|||
|
|
<text class="media-icon">🖼️</text>
|
|||
|
|
<text class="media-text">[图片]</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="message-media" wx:elif="{{item.topMatch.msgTypeCode === 2}}">
|
|||
|
|
<text class="media-icon">🎵</text>
|
|||
|
|
<text class="media-text">[语音]</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="message-media" wx:elif="{{item.topMatch.msgTypeCode === 3}}">
|
|||
|
|
<text class="media-icon">🎬</text>
|
|||
|
|
<text class="media-text">[视频]</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="message-media" wx:elif="{{item.topMatch.msgTypeCode === 4}}">
|
|||
|
|
<text class="media-icon">📄</text>
|
|||
|
|
<text class="media-text">[文件]</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="conversation-info">
|
|||
|
|
<text class="conversation-name">匹配 {{item.matchCount}} 条</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 操作按钮 -->
|
|||
|
|
<view class="result-actions">
|
|||
|
|
<view class="action-btn" bindtap="openConversation" data-conversation="{{item}}">
|
|||
|
|
<text class="action-icon">→</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 加载更多 -->
|
|||
|
|
<view class="load-more" wx:if="{{hasMoreResults}}">
|
|||
|
|
<view class="loading-spinner" wx:if="{{isLoadingMore}}"></view>
|
|||
|
|
<text class="load-more-text">
|
|||
|
|
{{isLoadingMore ? '加载中...' : '上拉加载更多'}}
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 无结果提示 -->
|
|||
|
|
<view class="no-results" wx:if="{{!isSearching && searchKeyword && !searchResults.length}}">
|
|||
|
|
<view class="no-results-icon">🔍</view>
|
|||
|
|
<text class="no-results-title">未找到相关内容</text>
|
|||
|
|
<text class="no-results-description">
|
|||
|
|
尝试使用其他关键词或检查拼写
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 加载状态 -->
|
|||
|
|
<view class="loading-state" wx:if="{{isSearching && !searchResults.length}}">
|
|||
|
|
<view class="loading-spinner"></view>
|
|||
|
|
<text class="loading-text">正在搜索...</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|