soul/miniprogram/pages/my/my.wxml

<!--pages/my/my.wxml-->
<view class="container my-container page-transition">
  <!-- 用户信息卡片 -->
  <view class="user-card glass-effect">
    <view class="user-header">
      <image 
        class="user-avatar" 
        src="{{userInfo.avatar || '/assets/images/default-avatar.png'}}" 
        mode="aspectFill"
        bindtap="editProfile"
      ></image>
      <view class="user-info">
        <view class="user-name">{{userInfo.nickname || '点击登录'}}</view>
        <view class="user-id">ID: {{userInfo.id || '---'}}</view>
      </view>
      <view class="vip-badge" wx:if="{{userInfo.isPurchased}}">
        <text class="vip-text">已购</text>
      </view>
    </view>

    <!-- 阅读统计 -->
    <view class="user-stats">
      <view class="stat-item" bindtap="goToReadHistory">
        <view class="stat-value">{{userStats.readChapters}}</view>
        <view class="stat-label">已读章节</view>
      </view>
      <view class="stat-divider"></view>
      <view class="stat-item" bindtap="goToReadTime">
        <view class="stat-value">{{userStats.readMinutes}}</view>
        <view class="stat-label">阅读时长(分)</view>
      </view>
      <view class="stat-divider"></view>
      <view class="stat-item" bindtap="goToBookmarks">
        <view class="stat-value">{{userStats.bookmarks}}</view>
        <view class="stat-label">书签</view>
      </view>
    </view>
  </view>

  <!-- 分销中心（重点功能） -->
  <view class="referral-section card">
    <view class="section-header">
      <view class="section-title">
        <text class="title-icon">💰</text>
        <text class="title-text">分销中心</text>
      </view>
      <view class="referral-status">
        <text class="status-text">佣金比例:</text>
        <text class="status-value">90%</text>
      </view>
    </view>

    <!-- 收益概览 -->
    <view class="earnings-overview">
      <view class="earnings-main">
        <view class="earnings-label">累计收益</view>
        <view class="earnings-amount">¥{{earnings.total}}</view>
      </view>
      <view class="earnings-sub">
        <view class="sub-item">
          <text class="sub-label">可提现</text>
          <text class="sub-value brand-color">¥{{earnings.available}}</text>
        </view>
        <view class="sub-item">
          <text class="sub-label">已提现</text>
          <text class="sub-value">¥{{earnings.withdrawn}}</text>
        </view>
      </view>
    </view>

    <!-- 快速操作 -->
    <view class="referral-actions">
      <button class="btn-primary action-btn" bindtap="generatePoster">
        生成推广海报
      </button>
      <button class="btn-secondary action-btn" bindtap="withdraw">
        立即提现
      </button>
    </view>

    <!-- 推广数据 -->
    <view class="referral-stats">
      <view class="referral-stat-item" bindtap="viewReferrals">
        <view class="stat-number">{{referralData.totalUsers}}</view>
        <view class="stat-name">推荐人数</view>
      </view>
      <view class="referral-stat-item" bindtap="viewOrders">
        <view class="stat-number">{{referralData.totalOrders}}</view>
        <view class="stat-name">成交订单</view>
      </view>
      <view class="referral-stat-item" bindtap="viewCommission">
        <view class="stat-number">{{referralData.commissionRate}}%</view>
        <view class="stat-name">佣金率</view>
      </view>
    </view>

    <!-- 我的邀请码 -->
    <view class="invite-code-section">
      <view class="invite-label">我的邀请码</view>
      <view class="invite-code-box">
        <text class="invite-code">{{userInfo.inviteCode || '---'}}</text>
        <button class="copy-btn" bindtap="copyInviteCode">复制</button>
      </view>
    </view>
  </view>

  <!-- 功能菜单 -->
  <view class="menu-section">
    <view class="menu-group card">
      <view class="menu-item" bindtap="goToOrders">
        <view class="menu-left">
          <text class="menu-icon">📦</text>
          <text class="menu-text">我的订单</text>
        </view>
        <view class="menu-right">
          <text class="menu-badge" wx:if="{{menuBadges.orders > 0}}">{{menuBadges.orders}}</text>
          <text class="menu-arrow">></text>
        </view>
      </view>

      <view class="menu-divider"></view>

      <view class="menu-item" bindtap="goToBookmarks">
        <view class="menu-left">
          <text class="menu-icon">🔖</text>
          <text class="menu-text">我的书签</text>
        </view>
        <view class="menu-right">
          <text class="menu-arrow">></text>
        </view>
      </view>

      <view class="menu-divider"></view>

      <view class="menu-item" bindtap="goToNotes">
        <view class="menu-left">
          <text class="menu-icon">📝</text>
          <text class="menu-text">阅读笔记</text>
        </view>
        <view class="menu-right">
          <text class="menu-arrow">></text>
        </view>
      </view>
    </view>

    <view class="menu-group card">
      <view class="menu-item" bindtap="goToSettings">
        <view class="menu-left">
          <text class="menu-icon">⚙️</text>
          <text class="menu-text">设置</text>
        </view>
        <view class="menu-right">
          <text class="menu-arrow">></text>
        </view>
      </view>

      <view class="menu-divider"></view>

      <view class="menu-item" bindtap="contactSupport">
        <view class="menu-left">
          <text class="menu-icon">💬</text>
          <text class="menu-text">联系客服</text>
        </view>
        <view class="menu-right">
          <text class="menu-arrow">></text>
        </view>
      </view>

      <view class="menu-divider"></view>

      <view class="menu-item" bindtap="about">
        <view class="menu-left">
          <text class="menu-icon">ℹ️</text>
          <text class="menu-text">关于我们</text>
        </view>
        <view class="menu-right">
          <text class="menu-arrow">></text>
        </view>
      </view>
    </view>
  </view>

  <!-- 退出登录 -->
  <view class="logout-section" wx:if="{{userInfo.id}}">
    <button class="logout-btn" bindtap="logout">退出登录</button>
  </view>

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

<!-- 海报生成弹窗 -->
<view class="poster-modal" wx:if="{{showPoster}}" bindtap="closePoster">
  <view class="poster-content" catchtap="stopPropagation">
    <view class="poster-header">
      <text class="poster-title">长按保存海报</text>
      <text class="poster-close" bindtap="closePoster">×</text>
    </view>
    <canvas canvas-id="posterCanvas" class="poster-canvas"></canvas>
    <button class="btn-primary save-poster-btn" bindtap="savePoster">
      保存到相册
    </button>
  </view>
</view>