构建
This commit is contained in:
113
Tminiprogram/pages/search/search.wxml
Normal file
113
Tminiprogram/pages/search/search.wxml
Normal file
@@ -0,0 +1,113 @@
|
||||
<!--pages/search/search.wxml-->
|
||||
<!--章节搜索页-->
|
||||
<view class="page">
|
||||
<!-- 自定义导航栏 -->
|
||||
<view class="nav-bar" style="padding-top: {{statusBarHeight}}px;">
|
||||
<view class="nav-content">
|
||||
<view class="back-btn" bindtap="goBack">
|
||||
<text class="back-icon">←</text>
|
||||
</view>
|
||||
<view class="search-input-wrap">
|
||||
<view class="search-icon-small">🔍</view>
|
||||
<input
|
||||
class="search-input"
|
||||
placeholder="搜索章节标题或内容..."
|
||||
value="{{keyword}}"
|
||||
bindinput="onInput"
|
||||
bindconfirm="doSearch"
|
||||
confirm-type="search"
|
||||
focus="{{true}}"
|
||||
/>
|
||||
<view class="clear-btn" wx:if="{{keyword}}" bindtap="clearSearch">×</view>
|
||||
</view>
|
||||
<view class="search-btn" bindtap="doSearch">搜索</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<view class="main-content" style="padding-top: {{statusBarHeight + 56}}px;">
|
||||
|
||||
<!-- 热门搜索(未搜索时显示) -->
|
||||
<view class="hot-section" wx:if="{{!searched}}">
|
||||
<text class="section-title">热门搜索</text>
|
||||
<view class="hot-tags">
|
||||
<view
|
||||
class="hot-tag"
|
||||
wx:for="{{hotKeywords}}"
|
||||
wx:key="*this"
|
||||
bindtap="onHotKeyword"
|
||||
data-keyword="{{item}}"
|
||||
>{{item}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 热门章节推荐(未搜索时显示) -->
|
||||
<view class="hot-chapters" wx:if="{{!searched && hotChapters.length > 0}}">
|
||||
<text class="section-title">热门章节</text>
|
||||
<view class="chapter-list">
|
||||
<view
|
||||
class="chapter-item"
|
||||
wx:for="{{hotChapters}}"
|
||||
wx:key="id"
|
||||
bindtap="goToRead"
|
||||
data-id="{{item.id}}"
|
||||
>
|
||||
<view class="chapter-rank">{{index + 1}}</view>
|
||||
<view class="chapter-info">
|
||||
<text class="chapter-title">{{item.title}}</text>
|
||||
<text class="chapter-part">{{item.part}}</text>
|
||||
</view>
|
||||
<view class="chapter-tag {{item.tag === '免费' ? 'tag-free' : item.tag === '热门' ? 'tag-hot' : 'tag-new'}}">{{item.tag}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 搜索结果 -->
|
||||
<view class="results-section" wx:if="{{searched}}">
|
||||
<!-- 加载中 -->
|
||||
<view class="loading-wrap" wx:if="{{loading}}">
|
||||
<view class="loading-spinner"></view>
|
||||
<text class="loading-text">搜索中...</text>
|
||||
</view>
|
||||
|
||||
<!-- 结果列表 -->
|
||||
<block wx:elif="{{results.length > 0}}">
|
||||
<view class="results-header">
|
||||
<text class="results-count">找到 {{total}} 个结果</text>
|
||||
</view>
|
||||
|
||||
<view class="results-list">
|
||||
<view
|
||||
class="result-item"
|
||||
wx:for="{{results}}"
|
||||
wx:key="id"
|
||||
bindtap="goToRead"
|
||||
data-id="{{item.id}}"
|
||||
>
|
||||
<view class="result-header">
|
||||
<text class="result-chapter">{{item.chapterLabel}}</text>
|
||||
<view class="result-tags">
|
||||
<text class="tag tag-match" wx:if="{{item.matchType === 'title'}}">标题匹配</text>
|
||||
<text class="tag tag-match" wx:elif="{{item.matchType === 'content'}}">内容匹配</text>
|
||||
<text class="tag tag-free" wx:if="{{item.isFree}}">免费</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="result-title">{{item.title}}</text>
|
||||
<text class="result-part">{{item.part}}</text>
|
||||
<view class="result-content" wx:if="{{item.matchedContent}}">
|
||||
<text class="content-preview">{{item.matchedContent}}</text>
|
||||
</view>
|
||||
<view class="result-arrow">→</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 无结果 -->
|
||||
<view class="empty-wrap" wx:elif="{{!loading}}">
|
||||
<text class="empty-icon">🔍</text>
|
||||
<text class="empty-text">未找到相关章节</text>
|
||||
<text class="empty-hint">换个关键词试试</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
Reference in New Issue
Block a user