qt_books/pages/index/index.wxml

<!--pages/index/index.wxml-->
<view class="container">
  <!-- 搜索栏（固定在顶部） -->
  <view class="search-bar">
    <view class="search-box" bindtap="toggleSearch">
      <icon type="search" size="16" color="#999"></icon>
      <text class="search-placeholder">搜索书籍或听书</text>
    </view>
  </view>

  <!-- 轮播图 -->
  <view class="swiper-section" style="margin-top: {{swiperMarginTop}};">
    <swiper 
      class="swiper" 
      indicator-dots="{{true}}" 
      autoplay="{{true}}" 
      interval="{{3000}}" 
      duration="{{500}}"
      circular="{{true}}"
      indicator-color="rgba(255, 255, 255, 0.5)"
      indicator-active-color="#fff"
    >
      <swiper-item wx:for="{{bannerList}}" wx:key="contentId">
        <view class="swiper-item" bindtap="goToDetail" data-id="{{item.contentId}}">
          <image class="swiper-image" src="{{item.coverUrl}}" mode="aspectFill" lazy-load="{{true}}"></image>
          <view class="swiper-content">
            <view class="swiper-title">{{item.title}}</view>
            <view class="swiper-author">{{item.author || '未知作者'}}</view>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>

  <!-- 搜索输入框 -->
  <view class="search-input-box" wx:if="{{showSearch}}">
    <input 
      class="search-input" 
      type="text" 
      placeholder="请输入关键词"
      value="{{keyword}}"
      bindinput="onSearchInput"
      bindconfirm="onSearchConfirm"
      confirm-type="search"
    />
    <text class="search-cancel" bindtap="toggleSearch">取消</text>
  </view>

  <!-- 内容类型切换 -->
  <view class="type-tabs">
    <view 
      class="type-tab {{contentType === null ? 'active' : ''}}"
      data-type="null"
      bindtap="onContentTypeTap"
    >
      全部
    </view>
    <view 
      class="type-tab {{contentType === 1 ? 'active' : ''}}"
      data-type="1"
      bindtap="onContentTypeTap"
    >
      电子书
    </view>
    <view 
      class="type-tab {{contentType === 2 ? 'active' : ''}}"
      data-type="2"
      bindtap="onContentTypeTap"
    >
      听书
    </view>
  </view>

  <!-- 分类列表 -->
  <scroll-view class="category-scroll" scroll-x="true">
    <view class="category-list">
      <view 
        class="category-item {{currentCategory === item.categoryId ? 'active' : ''}}"
        wx:for="{{categories}}"
        wx:key="categoryId"
        data-id="{{item.categoryId}}"
        bindtap="onCategoryTap"
      >
        {{item.categoryName}}
      </view>
    </view>
  </scroll-view>

  <!-- 今日推荐 -->
  <view class="recommended-section" wx:if="{{recommendedList.length > 0}}">
    <view class="section-header">
      <text class="section-title">今日推荐</text>
      <text class="section-more">更多 ></text>
    </view>
    <view class="recommended-grid {{recommendedColumns === 3 ? 'columns-3' : ''}}">
      <view 
        class="recommended-item"
        wx:for="{{recommendedList}}"
        wx:key="contentId"
        data-id="{{item.contentId}}"
        bindtap="goToDetail"
      >
        <view class="recommended-cover-wrapper">
          <image 
            class="recommended-cover" 
            src="{{item.coverUrl}}" 
            mode="aspectFill" 
            lazy-load="{{true}}"
            wx:if="{{item.coverUrl}}"
          ></image>
          <view class="recommended-cover-placeholder" wx:else>
            <text class="recommended-cover-text">{{item.title}}</text>
          </view>
        </view>
        <view class="recommended-title">{{item.title}}</view>
      </view>
    </view>
  </view>

  <!-- 内容列表 -->
  <view class="content-list">
    <view 
      class="content-item"
      wx:for="{{contentList}}"
      wx:key="contentId"
      data-id="{{item.contentId}}"
      bindtap="goToDetail"
    >
      <view class="cover-wrapper">
        <image 
          class="cover" 
          src="{{item.coverUrl}}" 
          mode="aspectFill" 
          lazy-load="{{true}}"
          wx:if="{{item.coverUrl}}"
        ></image>
        <view class="cover-placeholder" wx:else>
          <text class="cover-text">{{item.title}}</text>
        </view>
      </view>
      <view class="content-info">
        <view class="title">{{item.title}}</view>
        <view class="author">{{item.author || '未知作者'}}</view>
        <view class="meta">
          <text class="type">{{item.contentType === 1 ? '电子书' : '听书'}}</text>
          <text class="chapters">{{item.totalChapters || 0}}章</text>
          <text class="status">{{item.status === 1 ? '连载中' : '已完结'}}</text>
        </view>
        <view class="description">{{item.description || '暂无简介'}}</view>
      </view>
    </view>

    <!-- 加载状态 -->
    <view class="loading" wx:if="{{loading}}">
      <text>加载中...</text>
    </view>
    <view class="no-more" wx:if="{{!hasMore && !loading && contentList.length > 0}}">
      <text>没有更多了</text>
    </view>
    <view class="empty" wx:if="{{!loading && contentList.length === 0}}">
      <text>暂无内容</text>
    </view>
  </view>
</view>