113 lines
3.8 KiB
Plaintext
113 lines
3.8 KiB
Plaintext
<!--pages/read/read.wxml-->
|
||
<view class="container read-container">
|
||
<!-- 顶部导航栏 -->
|
||
<view class="read-header">
|
||
<view class="header-left" bindtap="goBack">
|
||
<text class="back-icon">←</text>
|
||
</view>
|
||
<view class="header-title">{{chapterInfo.title}}</view>
|
||
<view class="header-right" bindtap="showMenu">
|
||
<text class="menu-icon">⋯</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 章节内容 -->
|
||
<scroll-view class="content-scroll" scroll-y enhanced show-scrollbar="{{false}}">
|
||
<!-- 骨架屏 -->
|
||
<view class="content-skeleton" wx:if="{{loading}}">
|
||
<view class="skeleton skeleton-title"></view>
|
||
<view class="skeleton skeleton-line"></view>
|
||
<view class="skeleton skeleton-line"></view>
|
||
<view class="skeleton skeleton-line short"></view>
|
||
<view class="skeleton skeleton-line"></view>
|
||
<view class="skeleton skeleton-line"></view>
|
||
</view>
|
||
|
||
<!-- 实际内容 -->
|
||
<view class="content-wrapper" wx:if="{{!loading}}">
|
||
<view class="chapter-title">{{chapterInfo.title}}</view>
|
||
<view class="chapter-meta">
|
||
<text class="meta-item">{{chapterInfo.updateTime}}</text>
|
||
<text class="meta-divider">·</text>
|
||
<text class="meta-item">{{chapterInfo.words}}字</text>
|
||
<text class="meta-divider">·</text>
|
||
<text class="meta-item">{{chapterInfo.readTime}}分钟</text>
|
||
</view>
|
||
|
||
<view class="chapter-content markdown-body">
|
||
<rich-text nodes="{{contentHtml}}"></rich-text>
|
||
</view>
|
||
|
||
<!-- 章节导航 -->
|
||
<view class="chapter-nav">
|
||
<button
|
||
class="nav-btn prev-btn {{!hasPrev ? 'disabled' : ''}}"
|
||
bindtap="prevChapter"
|
||
disabled="{{!hasPrev}}"
|
||
>
|
||
上一章
|
||
</button>
|
||
<button
|
||
class="nav-btn next-btn {{!hasNext ? 'disabled' : ''}}"
|
||
bindtap="nextChapter"
|
||
disabled="{{!hasNext}}"
|
||
>
|
||
下一章
|
||
</button>
|
||
</view>
|
||
|
||
<!-- 推广提示 -->
|
||
<view class="promotion-tip card">
|
||
<view class="tip-icon">💰</view>
|
||
<view class="tip-content">
|
||
<view class="tip-title">喜欢这本书？</view>
|
||
<view class="tip-desc">分享给朋友，每笔成交您可获得90%佣金</view>
|
||
</view>
|
||
<button class="tip-btn" bindtap="goToReferral">去分享</button>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 底部工具栏 -->
|
||
<view class="read-toolbar glass-effect">
|
||
<view class="toolbar-item" bindtap="bookmark">
|
||
<text class="toolbar-icon">{{isBookmarked ? '🔖' : '📑'}}</text>
|
||
<text class="toolbar-label">书签</text>
|
||
</view>
|
||
<view class="toolbar-item" bindtap="note">
|
||
<text class="toolbar-icon">📝</text>
|
||
<text class="toolbar-label">笔记</text>
|
||
</view>
|
||
<view class="toolbar-item" bindtap="showCatalog">
|
||
<text class="toolbar-icon">📚</text>
|
||
<text class="toolbar-label">目录</text>
|
||
</view>
|
||
<view class="toolbar-item" bindtap="share">
|
||
<text class="toolbar-icon">📤</text>
|
||
<text class="toolbar-label">分享</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 目录弹窗 -->
|
||
<view class="catalog-modal" wx:if="{{showCatalog}}" bindtap="hideCatalog">
|
||
<view class="catalog-content" catchtap="stopPropagation">
|
||
<view class="catalog-header">
|
||
<text class="catalog-title">目录</text>
|
||
<text class="catalog-close" bindtap="hideCatalog">×</text>
|
||
</view>
|
||
<scroll-view class="catalog-list" scroll-y>
|
||
<view
|
||
class="catalog-item {{item.id === chapterId ? 'active' : ''}}"
|
||
wx:for="{{allChapters}}"
|
||
wx:key="id"
|
||
bindtap="selectChapter"
|
||
data-id="{{item.id}}"
|
||
>
|
||
<text class="catalog-item-title">{{item.title}}</text>
|
||
<text class="catalog-item-icon" wx:if="{{item.id === chapterId}}">📖</text>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|