171 lines
8.7 KiB
Plaintext
171 lines
8.7 KiB
Plaintext
<!--pages/chapters/chapters.wxml-->
|
||
<!--Soul创业实验 - 目录页（多书架构）-->
|
||
<view class="page page-transition">
|
||
<!-- 自定义导航栏 -->
|
||
<view class="nav-bar" style="padding-top: {{statusBarHeight}}px;">
|
||
<view class="nav-content">
|
||
<view class="nav-left">
|
||
<view class="search-btn" wx:if="{{searchEnabled}}" bindtap="goToSearch">
|
||
<icon name="search" size="32" color="rgba(255,255,255,0.6)" customClass="search-icon"></icon>
|
||
</view>
|
||
</view>
|
||
<view class="nav-title brand-color">目录</view>
|
||
<view class="nav-right"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 导航栏占位 -->
|
||
<view class="nav-placeholder" style="height: {{statusBarHeight + 44}}px;"></view>
|
||
|
||
<!-- 目录骨架屏：加载中时展示 -->
|
||
<view class="parts-skeleton" wx:if="{{partsLoading && bookList.length === 0}}">
|
||
<view class="skeleton-book-card" wx:for="{{[1,2,3]}}" wx:key="*this">
|
||
<view class="skeleton-book-icon"></view>
|
||
<view class="skeleton-book-info">
|
||
<view class="skeleton-line skeleton-title"></view>
|
||
<view class="skeleton-line skeleton-subtitle"></view>
|
||
</view>
|
||
<view class="skeleton-count"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 多书列表 -->
|
||
<view class="chapters-content" wx:if="{{bookList.length > 0 || !partsLoading}}">
|
||
|
||
<!-- 按书遍历 -->
|
||
<view class="book-group {{expandedBookId === book.id ? 'book-group--expanded' : ''}}" wx:for="{{bookList}}" wx:key="id" wx:for-item="book">
|
||
<!-- 书籍卡片（点击折叠/展开） -->
|
||
<view class="book-card" bindtap="toggleBook" data-book-id="{{book.id}}">
|
||
<view class="book-card-left">
|
||
<view class="book-card-icon">
|
||
<text class="book-card-emoji">{{book.iconEmoji || '📖'}}</text>
|
||
</view>
|
||
<view class="book-card-meta">
|
||
<text class="book-card-title">{{book.title}}</text>
|
||
<text class="book-card-subtitle">{{book.subtitle}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="book-card-right">
|
||
<view class="book-card-stats">
|
||
<text class="book-card-count">{{book.sectionCount || totalSections}}</text>
|
||
<text class="book-card-unit">章节</text>
|
||
</view>
|
||
<text class="book-card-toggle {{expandedBookId === book.id ? 'toggle-active' : ''}}">{{expandedBookId === book.id ? '收起 ▴' : '展开 ▾'}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 书展开时：序言 + 篇章 + 尾声 + 附录 -->
|
||
<block wx:if="{{expandedBookId === book.id}}">
|
||
|
||
<!-- 序言（仅主书 bookKey=main 显示） -->
|
||
<view class="chapter-item" wx:if="{{book.bookKey === 'main' && fixedSectionsMap.preface}}" bindtap="goToRead" data-id="preface" data-mid="{{fixedSectionsMap.preface}}">
|
||
<view class="item-left">
|
||
<view class="item-icon icon-brand">
|
||
<text class="item-emoji">📜</text>
|
||
</view>
|
||
<text class="item-title">序言｜为什么我每天早上6点在Soul开播?</text>
|
||
</view>
|
||
<view class="item-right">
|
||
<text class="tag tag-free">免费</text>
|
||
<icon name="chevron-right" size="28" color="rgba(255,255,255,0.4)" customClass="item-arrow"></icon>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 加载中提示 -->
|
||
<view class="chapters-loading" wx:if="{{partsLoading && bookData.length === 0}}">加载中...</view>
|
||
|
||
<!-- 篇章列表 -->
|
||
<view class="part-list">
|
||
<view class="part-item" wx:for="{{bookData}}" wx:key="id">
|
||
<!-- 篇章标题 -->
|
||
<view class="part-header" bindtap="togglePart" data-id="{{item.id}}">
|
||
<view class="part-left">
|
||
<image wx:if="{{item.icon}}" class="part-icon-img" src="{{item.icon}}" mode="aspectFill"/>
|
||
<view wx:elif="{{item.iconEmoji}}" class="part-icon part-icon-emoji">{{item.iconEmoji}}</view>
|
||
<view wx:else class="part-icon">{{item.title[0] || '篇'}}</view>
|
||
<view class="part-info">
|
||
<text class="part-title">{{item.title}}</text>
|
||
<text class="part-subtitle" wx:if="{{item.subtitle}}">{{item.subtitle}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="part-right">
|
||
<text class="part-count">{{item.chapters.length || item.chapterCount}}章</text>
|
||
<icon name="{{expandedPart === item.id ? 'chevron-down' : 'chevron-right'}}" size="28" color="rgba(255,255,255,0.4)" customClass="part-arrow"></icon>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 章节列表 - 展开时显示，懒加载 -->
|
||
<block wx:if="{{expandedPart === item.id}}">
|
||
<view class="chapters-list">
|
||
<view wx:if="{{item.chapters.length === 0}}" class="chapters-loading">加载中...</view>
|
||
<block wx:for="{{item.chapters}}" wx:key="id" wx:for-item="chapter">
|
||
<view class="chapter-header">{{chapter.title}}</view>
|
||
<view class="section-list">
|
||
<block wx:for="{{chapter.sections}}" wx:key="id" wx:for-item="section" wx:for-index="secIdx">
|
||
<view class="section-item" wx:if="{{secIdx < chapter.sectionVisibleLimit}}" bindtap="goToRead" data-id="{{section.id}}" data-mid="{{section.mid}}">
|
||
<view class="section-left">
|
||
<view class="section-lock-wrap">
|
||
<icon wx:if="{{section.isFree || isVip || (!section.isPremium && hasFullBook) || purchasedSections.indexOf(section.id) > -1}}" name="lock-open" size="24" color="#00CED1" customClass="section-lock lock-open"></icon>
|
||
<icon wx:else name="lock" size="24" color="rgba(255,255,255,0.3)" customClass="section-lock lock-closed"></icon>
|
||
</view>
|
||
<text class="section-title {{section.isFree || isVip || (!section.isPremium && hasFullBook) || purchasedSections.indexOf(section.id) > -1 ? '' : 'text-muted'}}">{{section.id}} {{section.title}}</text>
|
||
<text wx:if="{{section.isNew || section.newBadgeText}}" class="tag tag-new">{{section.newBadgeText || chaptersNewBadgeText}}</text>
|
||
</view>
|
||
<view class="section-right">
|
||
<text wx:if="{{section.isFree}}" class="tag tag-free">免费</text>
|
||
<text wx:elif="{{!(isVip || (!section.isPremium && hasFullBook) || purchasedSections.indexOf(section.id) > -1)}}" class="section-price">¥{{section.price}}</text>
|
||
<icon name="chevron-right" size="24" color="rgba(255,255,255,0.3)" customClass="section-arrow"></icon>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<view class="section-expand-trigger" wx:if="{{chapter.sections.length > chapter.sectionVisibleLimit}}" bindtap="expandSectionChapter" data-part-id="{{item.id}}" data-chapter-id="{{chapter.id}}">
|
||
<view class="latest-expand-triangle {{_triangleAnimating === chapter.id ? 'tri-bounce' : ''}}"></view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 尾声（仅主书显示） -->
|
||
<view class="chapter-item" wx:if="{{book.bookKey === 'main' && fixedSectionsMap.epilogue}}" bindtap="goToRead" data-id="epilogue" data-mid="{{fixedSectionsMap.epilogue}}">
|
||
<view class="item-left">
|
||
<view class="item-icon icon-brand">
|
||
<text class="item-emoji">🏁</text>
|
||
</view>
|
||
<text class="item-title">尾声｜这本书的真实目的</text>
|
||
</view>
|
||
<view class="item-right">
|
||
<text class="tag tag-free">免费</text>
|
||
<icon name="chevron-right" size="28" color="rgba(255,255,255,0.4)" customClass="item-arrow"></icon>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 附录（仅主书显示） -->
|
||
<view class="appendix-card card" wx:if="{{book.bookKey === 'main' && appendixList.length > 0}}">
|
||
<text class="appendix-title">📎 附录</text>
|
||
<view class="appendix-list">
|
||
<view
|
||
class="appendix-item"
|
||
wx:for="{{appendixList}}"
|
||
wx:key="id"
|
||
bindtap="goToRead"
|
||
data-id="{{item.id}}"
|
||
data-mid="{{item.mid}}"
|
||
>
|
||
<text class="appendix-text">{{item.title}}</text>
|
||
<icon name="chevron-right" size="24" color="rgba(255,255,255,0.3)" customClass="appendix-arrow"></icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</block>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<!-- 底部留白 -->
|
||
<view class="bottom-space"></view>
|
||
</view>
|