soul-yongping/miniprogram/pages/chapters/chapters.wxml

<!--pages/chapters/chapters.wxml-->
<!--Soul创业实验 - 目录页 1:1还原Web版本-->
<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}}">
    <view class="skeleton-book-card">
      <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 class="skeleton-part-list">
      <view class="skeleton-part-item" wx:for="{{[1,2,3,4,5]}}" wx:key="*this">
        <view class="skeleton-part-header"></view>
      </view>
    </view>
  </view>

  <!-- 书籍信息卡（点击折叠/展开除"每日派对干货"外的篇章） -->
  <view class="book-info-card card-gradient" wx:if="{{!partsLoading}}" bindtap="toggleBookCollapse">
    <view class="book-icon">
      <view class="book-icon-inner"><icon name="book-open" size="56" color="#ffffff"></icon></view>
    </view>
    <view class="book-info">
      <text class="book-title">{{chaptersBookTitle}}</text>
      <text class="book-subtitle">{{chaptersBookSubtitle}}</text>
    </view>
    <view class="book-right-area">
      <view class="book-count">
        <text class="count-value brand-color">{{totalSections}}</text>
        <text class="count-label">章节</text>
      </view>
      <text class="book-collapse-hint">{{bookCollapsed ? '展开 ▸' : '折叠 ▾'}}</text>
    </view>
  </view>

  <!-- 目录内容 -->
  <view class="chapters-content" wx:if="{{!partsLoading}}">
    <!-- 序言（优先传 mid，阅读页用 by-mid 请求） -->
    <view class="chapter-item" bindtap="goToRead" data-id="preface" data-mid="{{fixedSectionsMap.preface}}">
      <view class="item-left">
        <view class="item-icon icon-brand"><icon name="book-open" size="36" color="#00CED1"></icon></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="part-list">
      <view class="part-item" wx:for="{{bookData}}" wx:key="id" wx:if="{{!bookCollapsed || item.alwaysShow}}">
        <!-- 篇章标题 -->
        <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="aspectFit"/>
            <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">{{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}}" class="tag tag-new">NEW</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>

    <!-- 尾声（优先传 mid） -->
    <view class="chapter-item" bindtap="goToRead" data-id="epilogue" data-mid="{{fixedSectionsMap.epilogue}}">
      <view class="item-left">
        <view class="item-icon icon-brand"><icon name="book-open" size="36" color="#00CED1"></icon></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">
      <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>
  </view>

  <!-- 底部留白 -->
  <view class="bottom-space"></view>
</view>