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

<!--pages/read/read.wxml-->
<!--Soul创业实验 - 阅读页 1:1还原Web版本-->
<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-part" wx:if="{{partTitle}}">{{partTitle}}</text>
        <text class="nav-chapter" wx:if="{{chapterTitle}}">{{chapterTitle}}</text>
      </view>
      <view class="nav-share" bindtap="showShare">
        <text class="share-icon">↗</text>
      </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="{{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>

    <!-- 完整内容 - 有权限 -->
    <view class="article" wx:if="{{!loading && canAccess}}">
      <view class="paragraph" wx:for="{{contentParagraphs}}" wx:key="index" wx:if="{{item}}">
        {{item}}
      </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="share-tip" bindtap="showShare">
          <view class="tip-content">
            <text class="tip-title">觉得不错？分享给好友</text>
            <text class="tip-desc">好友购买你获得90%佣金</text>
          </view>
          <view class="tip-btn">分享赚钱</view>
        </view>
      </view>
    </view>

    <!-- 预览内容 + 付费墙 - 无权限 -->
    <view class="article preview" wx:if="{{!loading && !canAccess}}">
      <view class="paragraph" wx:for="{{previewParagraphs}}" wx:key="index" wx:if="{{item}}">
        {{item}}
      </view>

      <!-- 渐变遮罩 -->
      <view class="fade-mask"></view>

      <!-- 付费墙 -->
      <view class="paywall" wx:if="{{showPaywall}}">
        <view class="paywall-icon">🔒</view>
        <text class="paywall-title">解锁完整内容</text>
        <text class="paywall-desc">
          已阅读20%，{{isLoggedIn ? '购买后继续阅读' : '登录并购买后继续阅读'}}
        </text>

        <!-- 未登录时显示登录按钮 -->
        <view class="login-prompt" wx:if="{{!isLoggedIn}}">
          <view class="login-btn" bindtap="showLoginModal">
            <text class="login-btn-text">请先登录</text>
          </view>
        </view>

        <!-- 已登录显示购买选项 -->
        <view class="purchase-options" wx:else>
          <!-- 购买本章 - 直接调起支付 -->
          <view class="purchase-btn purchase-section" bindtap="handlePurchaseSection">
            <text class="btn-label">购买本章</text>
            <text class="btn-price brand-color">¥{{section.price}}</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}}</text>
              <text class="btn-discount">省82%</text>
            </view>
          </view>
        </view>

        <text class="paywall-tip">分享给好友购买，你可获得90%佣金</text>
      </view>
    </view>
  </view>

  <!-- 分享弹窗 -->
  <view class="modal-overlay" wx:if="{{showShareModal}}" bindtap="closeShareModal">
    <view class="modal-content share-modal" catchtap="stopPropagation">
      <view class="modal-header">
        <text class="modal-title">分享文章</text>
        <view class="modal-close" bindtap="closeShareModal">✕</view>
      </view>

      <view class="share-link-box">
        <text class="link-label">你的专属分享链接</text>
        <text class="link-url">https://soul.ckb.fit/read/{{sectionId}}</text>
        <text class="link-tip">邀请码: 好友购买你获得90%佣金</text>
      </view>

      <view class="share-buttons">
        <view class="share-btn" bindtap="copyLink">
          <view class="share-btn-icon icon-copy">📋</view>
          <text class="share-btn-text">复制链接</text>
        </view>
        <button class="share-btn" open-type="share">
          <view class="share-btn-icon icon-wechat">微</view>
          <text class="share-btn-text">微信好友</text>
        </button>
        <view class="share-btn" bindtap="goToReferral">
          <view class="share-btn-icon icon-poster">🖼️</view>
          <text class="share-btn-text">生成海报</text>
        </view>
      </view>
    </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" bindtap="handleWechatLogin">
        <text class="btn-wechat-icon">微</text>
        <text>微信快捷登录</text>
      </button>
      
      <button class="btn-phone" open-type="getPhoneNumber" bindgetphonenumber="handlePhoneLogin">
        <text class="btn-phone-icon">📱</text>
        <text>手机号登录</text>
      </button>
      
      <text class="login-notice">登录即表示同意《用户协议》和《隐私政策》</text>
    </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>
</view>