wechatShopUni/pages/invite/index.wxml

<view class="container">
  <!-- 顶部邀请卡片 -->
  <view class="invite-card">
    <view class="card-header">
      <view class="header-title">
        <text class="title">邀请好友</text>
        <text class="subtitle">邀请好友加入，享双重奖励</text>
      </view>
      <view class="header-rewards">
        <view class="reward-item">
          <text class="reward-value">¥{{inviteRewards.directInvite}}</text>
          <text class="reward-label">直接邀请</text>
        </view>
        <view class="reward-divider"></view>
        <view class="reward-item">
          <text class="reward-value">¥{{inviteRewards.teamInvite}}</text>
          <text class="reward-label">团队邀请</text>
        </view>
      </view>
    </view>
    <view class="card-body">
      <view class="invite-code-box">
        <view class="code-title">专属邀请码</view>
        <view class="code-content">
          <text class="code">{{inviteCode}}</text>
          <button class="copy-btn" bindtap="copyInviteCode">复制</button>
        </view>
      </view>
      <button class="share-btn" open-type="share">
        <image class="share-icon" src="/static/images/share.png"></image>
        立即邀请
      </button>
    </view>
  </view>

  <!-- 邀请数据统计 -->
  <view class="stats-panel">
    <view class="stats-item">
      <text class="stats-value">{{inviteStats.totalInvited}}</text>
      <text class="stats-label">累计邀请</text>
    </view>
    <view class="stats-item">
      <text class="stats-value">{{inviteStats.activeInvited}}</text>
      <text class="stats-label">已激活</text>
    </view>
    <view class="stats-item">
      <text class="stats-value">¥{{inviteStats.totalReward}}</text>
      <text class="stats-label">累计奖励</text>
    </view>
  </view>

  <!-- 邀请规则说明 -->
  <view class="rules-card" bindtap="viewInviteRules">
    <view class="rules-title">
      <text>邀请规则</text>
      <text class="rules-more">查看详情</text>
    </view>
    <view class="rules-steps">
      <view class="step-item">
        <view class="step-circle">1</view>
        <text class="step-text">复制邀请码</text>
      </view>
      <view class="step-arrow"></view>
      <view class="step-item">
        <view class="step-circle">2</view>
        <text class="step-text">分享给好友</text>
      </view>
      <view class="step-arrow"></view>
      <view class="step-item">
        <view class="step-circle">3</view>
        <text class="step-text">好友注册</text>
      </view>
      <view class="step-arrow"></view>
      <view class="step-item">
        <view class="step-circle">4</view>
        <text class="step-text">获得奖励</text>
      </view>
    </view>
  </view>

  <!-- 邀请记录列表 -->
  <view class="records-card">
    <view class="records-title">
      <text>邀请记录</text>
      <text class="records-count">共{{invitedFriends.length}}人</text>
    </view>
    <view class="friend-list">
      <view class="friend-item" wx:for="{{invitedFriends}}" wx:key="id">
        <image class="friend-avatar" src="{{item.avatarUrl}}" mode="aspectFill"></image>
        <view class="friend-info">
          <text class="friend-name">{{item.nickName}}</text>
          <text class="friend-time">{{item.registerTime}}</text>
        </view>
        <view class="friend-reward">
          <text class="status-tag {{item.status === '已激活' ? 'active' : 'inactive'}}">{{item.status}}</text>
          <text class="reward-text">+¥{{item.reward}}</text>
        </view>
      </view>
    </view>
  </view>
</view>