soul/miniprogram/pages/my/my.wxml

<!--pages/my/my.wxml-->
<!--Soul创业实验 - 我的页面 1:1还原Web版本-->
<view class="page page-transition">
  <!-- 自定义导航栏 -->
  <view class="nav-bar" style="padding-top: {{statusBarHeight}}px;">
    <view class="nav-content">
      <text class="nav-title brand-color">我的</text>
    </view>
  </view>
  
  <!-- 导航栏占位 -->
  <view class="nav-placeholder" style="height: {{statusBarHeight + 44}}px;"></view>

  <!-- 用户卡片 - 未登录状态 -->
  <view class="user-card card-gradient" wx:if="{{!isLoggedIn}}">
    <view class="user-header">
      <view class="avatar avatar-empty">
        <text class="avatar-icon">👤</text>
      </view>
      <view class="user-info">
        <view class="login-btn" bindtap="showLogin">点击登录</view>
        <text class="user-subtitle">解锁专属权益</text>
      </view>
    </view>
    
    <view class="stats-grid">
      <view class="stat-item">
        <text class="stat-value brand-color">0</text>
        <text class="stat-label">已购章节</text>
      </view>
      <view class="stat-item">
        <text class="stat-value brand-color">0</text>
        <text class="stat-label">推荐好友</text>
      </view>
      <view class="stat-item">
        <text class="stat-value gold-color">--</text>
        <text class="stat-label">待领收益</text>
      </view>
    </view>
  </view>

  <!-- 用户卡片 - 已登录状态 -->
  <view class="user-card card-gradient" wx:else>
    <view class="user-header">
      <view class="avatar">
        <text class="avatar-text">{{userInfo.nickname[0] || 'U'}}</text>
      </view>
      <view class="user-info">
        <text class="user-name">{{userInfo.nickname || '用户'}}</text>
        <text class="user-id">ID: {{userInfo.id}}</text>
      </view>
      <view class="user-badge">
        <text class="badge-icon">⭐</text>
        <text class="badge-text">创业伙伴</text>
      </view>
    </view>
    
    <view class="stats-grid">
      <view class="stat-item">
        <text class="stat-value brand-color">{{purchasedCount}}</text>
        <text class="stat-label">已购章节</text>
      </view>
      <view class="stat-item">
        <text class="stat-value brand-color">{{referralCount}}</text>
        <text class="stat-label">推荐好友</text>
      </view>
      <view class="stat-item">
        <text class="stat-value gold-color">{{earnings > 0 ? '¥' + earnings : '--'}}</text>
        <text class="stat-label">待领收益</text>
      </view>
    </view>
  </view>

  <!-- 推广入口 - 未登录 -->
  <view class="referral-card" wx:if="{{!isLoggedIn}}" bindtap="showLogin">
    <view class="referral-left">
      <view class="referral-icon gold-bg">🎁</view>
      <view class="referral-info">
        <text class="referral-title">推广赚收益</text>
        <text class="referral-desc">登录后查看详情</text>
      </view>
    </view>
    <view class="referral-btn">立即登录</view>
  </view>

  <!-- Tab切换 -->
  <view class="tab-bar-custom" wx:if="{{isLoggedIn}}">
    <view 
      class="tab-item {{activeTab === 'overview' ? 'tab-active' : ''}}"
      bindtap="switchTab"
      data-tab="overview"
    >概览</view>
    <view 
      class="tab-item {{activeTab === 'footprint' ? 'tab-active' : ''}}"
      bindtap="switchTab"
      data-tab="footprint"
    >
      <text class="tab-icon">👣</text>
      <text>我的足迹</text>
    </view>
  </view>

  <!-- 概览内容 -->
  <view class="tab-content" wx:if="{{activeTab === 'overview'}}">
    <!-- 菜单列表 -->
    <view class="menu-card card">
      <view 
        class="menu-item" 
        wx:for="{{menuList}}" 
        wx:key="id"
        bindtap="handleMenuTap"
        data-id="{{item.id}}"
      >
        <view class="menu-left">
          <view class="menu-icon {{item.iconBg === 'brand' ? 'icon-brand' : item.iconBg === 'gray' ? 'icon-gray' : ''}}">
            {{item.icon}}
          </view>
          <text class="menu-title">{{item.title}}</text>
        </view>
        <view class="menu-right">
          <text class="menu-count" wx:if="{{item.count !== undefined}}">{{item.count}}笔</text>
          <text class="menu-badge gold-color" wx:if="{{item.badge}}">{{item.badge}}</text>
          <text class="menu-arrow">→</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 足迹内容 -->
  <view class="tab-content" wx:if="{{activeTab === 'footprint' && isLoggedIn}}">
    <!-- 阅读统计 -->
    <view class="stats-card card">
      <view class="card-title">
        <text class="title-icon">👁️</text>
        <text>阅读统计</text>
      </view>
      <view class="stats-row">
        <view class="stat-box">
          <text class="stat-icon brand-color">📖</text>
          <text class="stat-num">{{purchasedCount}}</text>
          <text class="stat-text">已读章节</text>
        </view>
        <view class="stat-box">
          <text class="stat-icon gold-color">⏱️</text>
          <text class="stat-num">{{totalReadTime}}</text>
          <text class="stat-text">阅读分钟</text>
        </view>
        <view class="stat-box">
          <text class="stat-icon pink-color">👥</text>
          <text class="stat-num">{{matchHistory}}</text>
          <text class="stat-text">匹配伙伴</text>
        </view>
      </view>
    </view>

    <!-- 最近阅读 -->
    <view class="recent-card card">
      <view class="card-title">
        <text class="title-icon">📖</text>
        <text>最近阅读</text>
      </view>
      <view class="recent-list" wx:if="{{recentChapters.length > 0}}">
        <view 
          class="recent-item" 
          wx:for="{{recentChapters}}" 
          wx:key="id"
          bindtap="goToRead"
          data-id="{{item.id}}"
        >
          <view class="recent-left">
            <text class="recent-index">{{index + 1}}</text>
            <text class="recent-title">{{item.title}}</text>
          </view>
          <text class="recent-btn">继续阅读</text>
        </view>
      </view>
      <view class="empty-state" wx:else>
        <text class="empty-icon">📖</text>
        <text class="empty-text">暂无阅读记录</text>
        <view class="empty-btn" bindtap="goToChapters">去阅读 →</view>
      </view>
    </view>

    <!-- 匹配记录 -->
    <view class="match-card card">
      <view class="card-title">
        <text class="title-icon">👥</text>
        <text>匹配记录</text>
      </view>
      <view class="empty-state">
        <text class="empty-icon">👥</text>
        <text class="empty-text">暂无匹配记录</text>
        <view class="empty-btn" bindtap="goToMatch">去匹配 →</view>
      </view>
    </view>
  </view>

  <!-- 登录弹窗 -->
  <view class="modal-overlay" wx:if="{{showLoginModal}}" bindtap="closeLoginModal">
    <view class="modal-content" 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"
        disabled="{{isLoggingIn}}"
      >
        <text class="btn-wechat-icon">微</text>
        <text>{{isLoggingIn ? '登录中...' : '微信快捷登录'}}</text>
      </button>
      
      <button 
        class="btn-phone"
        open-type="getPhoneNumber"
        bindgetphonenumber="handlePhoneLogin"
        disabled="{{isLoggingIn}}"
      >
        <text class="btn-phone-icon">📱</text>
        <text>手机号登录</text>
      </button>
      
      <text class="login-notice">登录即表示同意《用户协议》和《隐私政策》</text>
    </view>
  </view>

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