soul/miniprogram/pages/referral/referral.wxml

<!--分销中心 - 按照Web版本1:1还原-->
<view class="page">
  <!-- 导航栏 -->
  <view class="nav-bar" style="padding-top: {{statusBarHeight}}px;">
    <view class="nav-back" bindtap="goBack">
      <text class="back-icon">‹</text>
    </view>
    <text class="nav-title">推广中心</text>
    <view class="nav-right">
      <view class="nav-btn" bindtap="showNotification">🔔</view>
      <view class="nav-btn" bindtap="showSettings">⚙️</view>
    </view>
  </view>
  <view style="height: {{statusBarHeight + 44}}px;"></view>

  <view class="content">
    <!-- 过期提醒横幅 -->
    <view class="expiring-banner" wx:if="{{expiringCount > 0}}">
      <view class="banner-icon">⚠️</view>
      <view class="banner-content">
        <text class="banner-title">{{expiringCount}} 位用户绑定即将过期</text>
        <text class="banner-desc">30天内未付款将解除绑定关系</text>
      </view>
    </view>

    <!-- 收益卡片 -->
    <view class="earnings-card">
      <view class="earnings-bg"></view>
      <view class="earnings-main">
        <view class="earnings-header">
          <view class="earnings-left">
            <view class="wallet-icon">💰</view>
            <view class="earnings-info">
              <text class="earnings-label">累计收益</text>
              <text class="commission-rate">{{shareRate}}% 返利</text>
            </view>
          </view>
          <view class="earnings-right">
            <text class="earnings-value">¥{{earnings}}</text>
            <text class="pending-text">待结算: ¥{{pendingEarnings}}</text>
          </view>
        </view>
        <view class="earnings-detail">
          <text class="detail-item">已提现: ¥{{withdrawnEarnings}}</text>
        </view>
        <view class="withdraw-btn {{pendingEarnings < 10 ? 'btn-disabled' : ''}}" bindtap="handleWithdraw">
          {{pendingEarnings < 10 ? '满10元可提现' : '申请提现'}}
        </view>
      </view>
    </view>

    <!-- 核心数据统计（重点可见数据） -->
    <view class="stats-grid">
      <view class="stat-card highlight">
        <text class="stat-value brand">{{bindingCount}}</text>
        <text class="stat-label">绑定用户数</text>
        <text class="stat-tip">当前有效绑定</text>
      </view>
      <view class="stat-card">
        <text class="stat-value">{{visitCount}}</text>
        <text class="stat-label">链接进入人数</text>
        <text class="stat-tip">通过你的链接进入</text>
      </view>
      <view class="stat-card highlight">
        <text class="stat-value gold">{{paidCount}}</text>
        <text class="stat-label">付款人数</text>
        <text class="stat-tip">成功转化购买</text>
      </view>
      <view class="stat-card">
        <text class="stat-value orange">{{expiringCount}}</text>
        <text class="stat-label">即将过期</text>
        <text class="stat-tip">7天内到期</text>
      </view>
    </view>

    <!-- 推广规则 -->
    <view class="rules-card">
      <view class="rules-header">
        <view class="rules-icon">📋</view>
        <text class="rules-title">推广规则</text>
      </view>
      <view class="rules-list">
        <text class="rule-item">• <text class="brand">链接带ID</text>：谁发的链接，进的人就绑谁</text>
        <text class="rule-item">• <text class="brand">一级、一月</text>：只有一级分销，绑定有效期30天</text>
        <text class="rule-item">• <text class="orange">长期不发</text>：别人发得多，过期后客户会被「抢走」</text>
        <text class="rule-item">• <text class="gold">每天发</text>：持续发的人绑定续期，收益越来越高</text>
        <text class="rule-item">• <text class="brand">{{shareRate}}%给分发</text>：好友付款后，你得 {{shareRate}}% 收益</text>
      </view>
    </view>

    <!-- 绑定用户列表 -->
    <view class="binding-card">
      <view class="binding-header" bindtap="toggleBindingList">
        <view class="binding-title">
          <text class="binding-icon">👥</text>
          <text class="title-text">绑定用户</text>
          <text class="binding-count">({{totalBindings}})</text>
        </view>
        <text class="toggle-icon">{{showBindingList ? '▲' : '▼'}}</text>
      </view>
      
      <block wx:if="{{showBindingList}}">
        <!-- Tab切换 -->
        <view class="binding-tabs">
          <view 
            class="tab-item {{activeTab === 'active' ? 'tab-active' : ''}}" 
            bindtap="switchTab" 
            data-tab="active"
          >绑定中 ({{activeBindings.length}})</view>
          <view 
            class="tab-item {{activeTab === 'converted' ? 'tab-active' : ''}}" 
            bindtap="switchTab" 
            data-tab="converted"
          >已付款 ({{convertedBindings.length}})</view>
          <view 
            class="tab-item {{activeTab === 'expired' ? 'tab-active' : ''}}" 
            bindtap="switchTab" 
            data-tab="expired"
          >已过期 ({{expiredBindings.length}})</view>
        </view>

        <!-- 用户列表 -->
        <view class="binding-list">
          <block wx:if="{{currentBindings.length === 0}}">
            <view class="empty-state">
              <text class="empty-icon">👤</text>
              <text class="empty-text">暂无用户</text>
            </view>
          </block>
          <block wx:else>
            <view 
              class="binding-item" 
              wx:for="{{currentBindings}}" 
              wx:key="id"
            >
              <view class="user-avatar {{item.status === 'converted' ? 'avatar-converted' : item.status === 'expired' ? 'avatar-expired' : ''}}">
                <text wx:if="{{item.status === 'converted'}}">✓</text>
                <text wx:elif="{{item.status === 'expired'}}">⏰</text>
                <text wx:else>{{item.nickname[0] || '用'}}</text>
              </view>
              <view class="user-info">
                <text class="user-name">{{item.nickname || '匿名用户'}}</text>
                <text class="user-time">绑定于 {{item.bindingDate}}</text>
              </view>
              <view class="user-status">
                <block wx:if="{{item.status === 'converted'}}">
                  <text class="status-amount">+¥{{item.commission}}</text>
                  <text class="status-order">订单 ¥{{item.orderAmount}}</text>
                </block>
                <block wx:else>
                  <text class="status-tag {{item.daysRemaining <= 3 ? 'tag-red' : item.daysRemaining <= 7 ? 'tag-orange' : 'tag-green'}}">
                    {{item.status === 'expired' ? '已过期' : item.daysRemaining + '天'}}
                  </text>
                </block>
              </view>
            </view>
          </block>
        </view>
      </block>
    </view>

    <!-- 分享按钮 -->
    <view class="share-section">
      <view class="share-item" bindtap="generatePoster">
        <view class="share-icon poster">🖼️</view>
        <view class="share-info">
          <text class="share-title">生成推广海报</text>
          <text class="share-desc">一键生成精美海报分享</text>
        </view>
        <text class="share-arrow">→</text>
      </view>
      
      <button class="share-item share-btn-wechat" open-type="share">
        <view class="share-icon wechat">💬</view>
        <view class="share-info">
          <text class="share-title">分享给好友</text>
          <text class="share-desc">直接发送小程序卡片</text>
        </view>
        <text class="share-arrow">→</text>
      </button>
      
      <view class="share-item" bindtap="shareToMoments">
        <view class="share-icon link">📝</view>
        <view class="share-info">
          <text class="share-title">复制朋友圈文案</text>
          <text class="share-desc">一键复制推广文案</text>
        </view>
        <text class="share-arrow">→</text>
      </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="promoPosterCanvas" 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>