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">{{distributorShare}}% 返利</text>
            </view>
          </view>
          <view class="earnings-right">
            <text class="earnings-value">¥{{earnings}}</text>
            <text class="pending-text">待结算: ¥{{pendingEarnings}}</text>
          </view>
        </view>
        <view class="withdraw-btn {{earnings < 10 ? 'btn-disabled' : ''}}" bindtap="handleWithdraw">
          {{earnings < 10 ? '满10元可提现' : '申请提现'}}
        </view>
      </view>
    </view>

    <!-- 数据统计 -->
    <view class="stats-grid">
      <view class="stat-card">
        <text class="stat-value">{{activeBindings.length}}</text>
        <text class="stat-label">绑定中</text>
      </view>
      <view class="stat-card">
        <text class="stat-value">{{convertedBindings.length}}</text>
        <text class="stat-label">已付款</text>
      </view>
      <view class="stat-card">
        <text class="stat-value orange">{{expiringCount}}</text>
        <text class="stat-label">即将过期</text>
      </view>
      <view class="stat-card">
        <text class="stat-value">{{referralCount}}</text>
        <text class="stat-label">总邀请</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="gold">立享5%优惠</text></text>
        <text class="rule-item">• 好友成功付款后，你获得 <text class="brand">{{distributorShare}}%</text> 收益</text>
        <text class="rule-item">• 绑定期<text class="brand">30天</text>，期满未付款自动解除</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="invite-card">
      <view class="invite-header">
        <text class="invite-title">我的邀请码</text>
        <view class="invite-code-box">
          <text class="invite-code">{{referralCode}}</text>
        </view>
      </view>
      <text class="invite-tip">好友通过你的链接购买<text class="gold">立省5%</text>，你获得<text class="brand">{{distributorShare}}%</text>收益</text>
    </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>