book-min/miniprogram/pages/index/index.wxml

81 lines
2.9 KiB
Plaintext

<!--index.wxml-->
<scroll-view class="scrollarea" scroll-y type="list">
<view class="container">
<!-- 顶部标题栏 -->
<view class="header">
<text class="title">阅读管理</text>
<view class="settings" bindtap="goToSettings">设置</view>
</view>
<!-- 搜索框 -->
<view class="search-box">
<icon type="search" size="16" color="#999"/>
<input class="search-input" placeholder="搜索" placeholder-class="search-placeholder"/>
</view>
<!-- 用户信息栏 -->
<view class="user-bar">
<text class="status-text">体验卡已过期</text>
</view>
<!-- 书架预览 -->
<scroll-view class="book-list" scroll-x enable-flex>
<view class="book-item"
wx:for="{{recentBooks}}"
wx:key="id"
bindtap="openBook"
data-id="{{item.id}}"
data-url="{{item.bookUrl}}">
<image class="book-cover" src="{{item.coverUrl}}" mode="aspectFill"/>
</view>
<view class="book-more" bindtap="goToBookshelf">
<text>书架</text>
<text class="arrow">></text>
</view>
</scroll-view>
<!-- 导航标签 -->
<scroll-view class="nav-tabs" scroll-x enable-flex>
<view class="tab {{currentTab === 'recommend' ? 'active' : ''}}"
data-tab="recommend"
bindtap="switchTab">推荐</view>
<view class="tab {{currentTab === 'category' ? 'active' : ''}}"
data-tab="category"
bindtap="switchTab">分类</view>
<view class="tab {{currentTab === 'rank' ? 'active' : ''}}"
data-tab="rank"
bindtap="switchTab">排行</view>
<view class="tab {{currentTab === 'novel' ? 'active' : ''}}"
data-tab="novel"
bindtap="switchTab">精品小说</view>
<view class="tab {{currentTab === 'literature' ? 'active' : ''}}"
data-tab="literature"
bindtap="switchTab">文学</view>
</scroll-view>
<!-- 内容区域 -->
<view class="content">
<!-- 推荐列表 -->
<view class="book-list" wx:if="{{currentTab === 'recommend'}}">
<view class="book-item"
wx:for="{{recommendBooks}}"
wx:key="id"
bindtap="openBook"
data-id="{{item.id}}"
data-url="{{item.bookUrl}}">
<image class="book-cover" src="{{item.coverUrl}}" mode="aspectFill"/>
<view class="book-info">
<text class="book-title">{{item.title}}</text>
<view class="book-meta">
<text class="book-author">{{item.author}}</text>
<text class="book-rating">推荐值 {{item.rating}}%</text>
</view>
<text class="book-desc">{{item.description}}</text>
<text class="book-status">{{item.status}}</text>
</view>
</view>
</view>
</view>
</view>
</scroll-view>