305 lines
12 KiB
Plaintext
305 lines
12 KiB
Plaintext
<!--pages/read/read.wxml-->
|
|
<!--Soul创业派对 - 阅读页-->
|
|
<view class="page">
|
|
<!-- 阅读进度条 -->
|
|
<view class="progress-bar-fixed" style="top: {{statusBarHeight}}px;">
|
|
<view class="progress-fill" style="width: {{readingProgress}}%;"></view>
|
|
</view>
|
|
|
|
<!-- 顶部导航栏 -->
|
|
<view class="nav-bar" style="padding-top: {{statusBarHeight}}px;">
|
|
<view class="nav-content">
|
|
<view class="nav-back" bindtap="goBack">
|
|
<text class="back-arrow">←</text>
|
|
</view>
|
|
<view class="nav-info">
|
|
<text class="nav-chapter" wx:if="{{section.title || chapterTitle}}">{{section.title || chapterTitle}}</text>
|
|
</view>
|
|
<view class="nav-right-placeholder"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 导航栏占位 -->
|
|
<view class="nav-placeholder" style="height: {{statusBarHeight + 44}}px;"></view>
|
|
|
|
<!-- 阅读内容 -->
|
|
<view class="read-content">
|
|
<!-- 章节标题 -->
|
|
<view class="chapter-header">
|
|
<view class="chapter-meta">
|
|
<text class="chapter-id">{{section.id}}</text>
|
|
<text class="tag tag-free" wx:if="{{section.isFree}}">免费</text>
|
|
</view>
|
|
<text class="chapter-title">{{section.title}}</text>
|
|
</view>
|
|
|
|
<!-- 加载状态 -->
|
|
<view class="loading-state" wx:if="{{accessState === 'unknown' && loading}}">
|
|
<view class="skeleton skeleton-1"></view>
|
|
<view class="skeleton skeleton-2"></view>
|
|
<view class="skeleton skeleton-3"></view>
|
|
<view class="skeleton skeleton-4"></view>
|
|
<view class="skeleton skeleton-5"></view>
|
|
</view>
|
|
|
|
<!-- 完整内容 - 免费或已购买（支持 @ mention / #linkTag / 图片） -->
|
|
<view class="article" wx:if="{{accessState === 'free' || accessState === 'unlocked_purchased'}}">
|
|
<view class="paragraph" wx:for="{{contentSegments}}" wx:key="index">
|
|
<block wx:for="{{item}}" wx:key="index" wx:for-item="seg">
|
|
<text wx:if="{{seg.type === 'text'}}">{{seg.text}}</text>
|
|
<text wx:elif="{{seg.type === 'mention'}}" class="mention" bindtap="onMentionTap" data-user-id="{{seg.userId}}" data-nickname="{{seg.nickname}}">@{{seg.nickname}}</text>
|
|
<text wx:elif="{{seg.type === 'linkTag'}}" class="link-tag" bindtap="onLinkTagTap" data-url="{{seg.url}}" data-label="{{seg.label}}" data-tag-type="{{seg.tagType}}" data-page-path="{{seg.pagePath}}" data-tag-id="{{seg.tagId}}">#{{seg.label}}</text>
|
|
<image wx:elif="{{seg.type === 'image'}}" class="content-image" src="{{seg.src}}" mode="widthFix" show-menu-by-longpress bindtap="onImageTap" data-src="{{seg.src}}"></image>
|
|
</block>
|
|
</view>
|
|
|
|
<!-- 章节导航 -->
|
|
<view class="chapter-nav">
|
|
<view class="nav-buttons">
|
|
<view
|
|
class="nav-btn nav-prev {{!prevSection ? 'nav-disabled' : ''}}"
|
|
bindtap="goToPrev"
|
|
wx:if="{{prevSection}}"
|
|
>
|
|
<text class="btn-label">上一篇</text>
|
|
<text class="btn-title">{{prevSection.title}}</text>
|
|
</view>
|
|
<view class="nav-btn-placeholder" wx:else></view>
|
|
|
|
<view
|
|
class="nav-btn nav-next"
|
|
bindtap="goToNext"
|
|
wx:if="{{nextSection}}"
|
|
>
|
|
<text class="btn-label">下一篇</text>
|
|
<view class="btn-row">
|
|
<text class="btn-title">{{nextSection.title}}</text>
|
|
<text class="btn-arrow">→</text>
|
|
</view>
|
|
</view>
|
|
<view class="nav-btn nav-end" wx:else>
|
|
<text class="btn-end-text">已是最后一篇 🎉</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 分享操作区 -->
|
|
<view class="action-section">
|
|
<view class="action-row-inline">
|
|
<button class="action-btn-inline btn-share-inline" open-type="share">
|
|
<text class="action-icon-small">💬</text>
|
|
<text class="action-text-small">推荐给好友</text>
|
|
</button>
|
|
<view class="action-btn-inline btn-poster-inline" bindtap="generatePoster">
|
|
<text class="action-icon-small">🖼️</text>
|
|
<text class="action-text-small">生成海报</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 预览内容 + 付费墙 - 未登录 -->
|
|
<view class="article preview" wx:if="{{accessState === 'locked_not_login'}}">
|
|
<view class="paragraph" wx:for="{{previewParagraphs}}" wx:key="index" wx:if="{{item}}">
|
|
{{item}}
|
|
</view>
|
|
|
|
<!-- 渐变遮罩 -->
|
|
<view class="fade-mask"></view>
|
|
|
|
<!-- 付费墙 - 未登录 -->
|
|
<view class="paywall">
|
|
<view class="paywall-icon">🔒</view>
|
|
<text class="paywall-title">登录后继续阅读</text>
|
|
<text class="paywall-desc">已阅读20%，登录后查看完整内容</text>
|
|
|
|
<view class="login-btn" bindtap="showLoginModal">
|
|
<text class="login-btn-text">立即登录</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 章节导航 -->
|
|
<view class="chapter-nav chapter-nav-locked">
|
|
<view class="nav-buttons">
|
|
<view
|
|
class="nav-btn nav-prev {{!prevSection ? 'nav-disabled' : ''}}"
|
|
bindtap="goToPrev"
|
|
wx:if="{{prevSection}}"
|
|
>
|
|
<text class="btn-label">上一篇</text>
|
|
<text class="btn-title">章节 {{prevSection.id}}</text>
|
|
</view>
|
|
<view class="nav-btn-placeholder" wx:else></view>
|
|
|
|
<view
|
|
class="nav-btn nav-next"
|
|
bindtap="goToNext"
|
|
wx:if="{{nextSection}}"
|
|
>
|
|
<text class="btn-label">下一篇</text>
|
|
<view class="btn-row">
|
|
<text class="btn-title">{{nextSection.title}}</text>
|
|
<text class="btn-arrow">→</text>
|
|
</view>
|
|
</view>
|
|
<view class="nav-btn nav-end" wx:else>
|
|
<text class="btn-end-text">已是最后一篇 🎉</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 预览内容 + 付费墙 - 已登录未购买 -->
|
|
<view class="article preview" wx:if="{{accessState === 'locked_not_purchased'}}">
|
|
<view class="paragraph" wx:for="{{previewParagraphs}}" wx:key="index" wx:if="{{item}}">
|
|
{{item}}
|
|
</view>
|
|
|
|
<!-- 渐变遮罩 -->
|
|
<view class="fade-mask"></view>
|
|
|
|
<!-- 付费墙 - 已登录未购买 -->
|
|
<view class="paywall">
|
|
<view class="paywall-icon">🔒</view>
|
|
<text class="paywall-title">解锁完整内容</text>
|
|
<text class="paywall-desc">已阅读20%，购买后继续阅读</text>
|
|
|
|
<!-- 购买选项 -->
|
|
<view class="purchase-options">
|
|
<!-- 购买本章 - 直接调起支付 -->
|
|
<view class="purchase-btn purchase-section" bindtap="handlePurchaseSection">
|
|
<text class="btn-label">购买本章</text>
|
|
<text class="btn-price brand-color">¥{{section && section.price != null ? section.price : sectionPrice}}</text>
|
|
</view>
|
|
|
|
<!-- 解锁全书 - 只有购买超过3章才显示 -->
|
|
<view class="purchase-btn purchase-fullbook" bindtap="handlePurchaseFullBook" wx:if="{{purchasedCount >= 3}}">
|
|
<view class="btn-left">
|
|
<text class="btn-sparkle">✨</text>
|
|
<text class="btn-label">解锁全部 {{totalSections}} 章</text>
|
|
</view>
|
|
<view class="btn-right">
|
|
<text class="btn-price">¥{{fullBookPrice || 9.9}}</text>
|
|
<text class="btn-discount">省82%</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<text class="paywall-tip">分享给好友一起学习，还能赚取佣金</text>
|
|
</view>
|
|
|
|
<!-- 章节导航 -->
|
|
<view class="chapter-nav chapter-nav-locked">
|
|
<view class="nav-buttons">
|
|
<view
|
|
class="nav-btn nav-prev {{!prevSection ? 'nav-disabled' : ''}}"
|
|
bindtap="goToPrev"
|
|
wx:if="{{prevSection}}"
|
|
>
|
|
<text class="btn-label">上一篇</text>
|
|
<text class="btn-title">章节 {{prevSection.id}}</text>
|
|
</view>
|
|
<view class="nav-btn-placeholder" wx:else></view>
|
|
|
|
<view
|
|
class="nav-btn nav-next"
|
|
bindtap="goToNext"
|
|
wx:if="{{nextSection}}"
|
|
>
|
|
<text class="btn-label">下一篇</text>
|
|
<view class="btn-row">
|
|
<text class="btn-title">{{nextSection.title}}</text>
|
|
<text class="btn-arrow">→</text>
|
|
</view>
|
|
</view>
|
|
<view class="nav-btn nav-end" wx:else>
|
|
<text class="btn-end-text">已是最后一篇 🎉</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 错误状态 - 网络异常 -->
|
|
<view class="article preview" wx:if="{{accessState === 'error'}}">
|
|
<view class="paragraph" wx:for="{{previewParagraphs}}" wx:key="index" wx:if="{{item}}">
|
|
{{item}}
|
|
</view>
|
|
|
|
<!-- 渐变遮罩 -->
|
|
<view class="fade-mask"></view>
|
|
|
|
<!-- 错误提示 -->
|
|
<view class="paywall">
|
|
<view class="paywall-icon">⚠️</view>
|
|
<text class="paywall-title">网络异常</text>
|
|
<text class="paywall-desc">无法确认权限，请检查网络后重试</text>
|
|
|
|
<view class="login-btn" bindtap="handleRetry">
|
|
<text class="login-btn-text">重新加载</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 海报生成弹窗 -->
|
|
<view class="modal-overlay" wx:if="{{showPosterModal}}" bindtap="closePosterModal">
|
|
<view class="modal-content poster-modal" catchtap="stopPropagation">
|
|
<view class="modal-header">
|
|
<text class="modal-title">生成海报</text>
|
|
<view class="modal-close" bindtap="closePosterModal">✕</view>
|
|
</view>
|
|
|
|
<!-- 海报预览 -->
|
|
<view class="poster-preview">
|
|
<canvas canvas-id="posterCanvas" class="poster-canvas" style="width: 300px; height: 450px;"></canvas>
|
|
</view>
|
|
|
|
<view class="poster-actions">
|
|
<view class="poster-btn btn-save" bindtap="savePoster">
|
|
<text class="btn-icon">💾</text>
|
|
<text>保存到相册</text>
|
|
</view>
|
|
</view>
|
|
|
|
<text class="poster-tip">长按海报可直接分享到微信</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 登录弹窗 - 须勾选同意协议，《用户协议》《隐私政策》可点击查看 -->
|
|
<view class="modal-overlay" wx:if="{{showLoginModal}}" bindtap="closeLoginModal">
|
|
<view class="modal-content login-modal" catchtap="stopPropagation">
|
|
<view class="modal-close" bindtap="closeLoginModal">✕</view>
|
|
<view class="login-icon">🔐</view>
|
|
<text class="login-title">登录 Soul创业派对</text>
|
|
<text class="login-desc">登录后可购买章节、解锁更多内容</text>
|
|
|
|
<button class="btn-wechat {{agreeProtocol ? '' : 'btn-wechat-disabled'}}" bindtap="handleWechatLogin" disabled="{{!agreeProtocol}}">
|
|
<text class="btn-wechat-icon">微</text>
|
|
<text>微信快捷登录</text>
|
|
</button>
|
|
|
|
<view class="login-agree-row" catchtap="toggleAgree">
|
|
<view class="agree-checkbox {{agreeProtocol ? 'agree-checked' : ''}}">{{agreeProtocol ? '✓' : ''}}</view>
|
|
<text class="agree-text">我已阅读并同意</text>
|
|
<text class="agree-link" catchtap="openUserProtocol">《用户协议》</text>
|
|
<text class="agree-text">和</text>
|
|
<text class="agree-link" catchtap="openPrivacy">《隐私政策》</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 支付中提示 -->
|
|
<view class="modal-overlay" wx:if="{{isPaying}}" catchtap="">
|
|
<view class="loading-box">
|
|
<view class="loading-spinner"></view>
|
|
<text class="loading-text">支付处理中...</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 右下角悬浮分享按钮 -->
|
|
<button class="fab-share" open-type="share">
|
|
<image class="fab-icon" src="/assets/icons/share.svg" mode="aspectFit"></image>
|
|
</button>
|
|
</view>
|