优化邀请码

database/migrations/FRONTEND_CHANGES.md

@@ -3,11 +3,14 @@
 ## 📝 修改文件清单
 
 ```
-✅ 已修改的文件（3个）：
+✅ 已修改的文件（5个）：
 frontend/
-├── pages/order/confirm.vue                   # 订单确认页（+40行）
+├── pages/
-├── pages/commission/components/
+│   ├── order/confirm.vue                     # 订单确认页（+40行）
-│   └── commission-info.vue                   # 分销中心个人信息（+30行）
+│   ├── user/invite-code.vue                  # 我的邀请码页面（新建，245行）
+│   └── commission/components/
+│       ├── commission-info.vue               # 分销中心个人信息（+30行）
+│       └── commission-menu.vue               # 分销中心菜单（+5行）
 └── sheep/api/
     ├── invite.js                             # 新增邀请码API（新建）
     └── index.js                              # 注册邀请码API（+2行）
@@ -63,16 +66,34 @@ const { code, data } = await sheep.$api.order.create(state.orderPayload);
 
 ---
 
-### 2. 个人中心 - 显示邀请码
+### 2. 分销中心 - 显示邀请码
 
-**位置**: 分销中心个人信息卡片，等级标签下方
+**位置1**: 分销中心个人信息卡片，等级标签下方
 
 **功能**:
 - ✅ 自动获取邀请码（`/invite/myCode`）
 - ✅ 点击复制邀请码到剪贴板
 - ✅ 复制成功提示
 
-**代码片段**:
+**位置2**: 分销中心菜单 - 我的邀请码入口
+
+**功能**:
+- ✅ 在功能专区添加"我的邀请码"菜单项
+- ✅ 点击跳转到邀请码详情页面
+
+### 3. 我的邀请码页面（新增）
+
+**路径**: `/pages/user/invite-code`
+
+**功能**:
+- ✅ 大尺寸邀请码展示（渐变卡片）
+- ✅ 一键复制邀请码
+- ✅ 显示邀请人数统计
+- ✅ 显示邀请记录列表（头像、昵称、加入时间）
+- ✅ 空状态提示
+- ✅ 分享文案显示
+
+**代码片段（分销中心个人信息卡片）**:
 ```vue
 <view class="invite-code-box" @tap="onCopyCode">
   <text class="invite-label">我的邀请码:</text>
@@ -81,24 +102,72 @@ const { code, data } = await sheep.$api.order.create(state.orderPayload);
 </view>
 ```
 
+**代码片段（分销中心菜单）**:
+```javascript
+{
+  img: '/assets/addons/shopro/uniapp/commission/commission_icon2.png',
+  title: '我的邀请码',
+  path: '/pages/user/invite-code',
+}
+```
+
+**代码片段（邀请码详情页）**:
+```vue
+<!-- 邀请码卡片 -->
+<view class="invite-card">
+  <view class="code-display" @tap="onCopyCode">
+    <text class="code-text">{{ state.inviteCode }}</text>
+    <text class="copy-icon ss-iconfont uicon-copy"></text>
+  </view>
+  <button class="copy-btn" @tap="onCopyCode">
+    <text class="ss-iconfont uicon-copy"></text> 复制邀请码
+  </button>
+</view>
+
+<!-- 邀请统计 -->
+<view class="stats-card">
+  <view class="stat-num">{{ state.inviteCount }}</view>
+  <view class="stat-label">已邀请人数</view>
+</view>
+
+<!-- 邀请记录 -->
+<view class="invite-list">
+  <view class="invite-item" v-for="item in state.inviteList">
+    <image :src="item.avatar" class="avatar"></image>
+    <view class="nickname">{{ item.nickname }}</view>
+    <view class="time">{{ item.jointime }}</view>
+  </view>
+</view>
+```
+
 **逻辑**:
 ```javascript
-// 页面加载时获取邀请码
+// 页面加载时获取邀请码和邀请列表
 async function getInviteCode() {
   const { code, data } = await sheep.$api.invite.myCode();
   if (code === 1) {
     state.inviteCode = data.invite_code;
+    state.inviteCount = data.invite_count;
+    state.shareText = data.share_text;
+  }
+}
+
+async function getInviteList() {
+  const { code, data } = await sheep.$api.invite.myInvites({ list_rows: 20 });
+  if (code === 1) {
+    state.inviteList = data.data || [];
   }
 }
 
 // 复制邀请码
 function onCopyCode() {
   sheep.$helper.copyText(state.inviteCode);
-  sheep.$helper.toast('邀请码已复制');
+  sheep.$helper.toast('邀请码已复制到剪贴板');
 }
 
 onMounted(() => {
   getInviteCode();
+  getInviteList();
 });
 ```
 
@@ -173,7 +242,7 @@ sheep.$api.invite.myInvites({ page: 1 })
 SELECT parent_user_id, invite_code_used FROM user WHERE id = 新用户ID;
 ```
 
-### 测试2: 个人中心显示邀请码
+### 测试2: 分销中心显示邀请码
 
 ```bash
 # 1. 进入分销中心页面
@@ -184,7 +253,21 @@ SELECT parent_user_id, invite_code_used FROM user WHERE id = 新用户ID;
 # 6. 粘贴验证是否成功复制
 ```
 
-### 测试3: 已绑定用户不显示输入框
+### 测试3: 我的邀请码页面
+
+```bash
+# 1. 进入分销中心
+# 2. 点击"功能专区"中的"我的邀请码"
+# 3. 进入邀请码详情页面
+# 4. 确认显示大尺寸邀请码
+# 5. 确认显示"已邀请人数"统计
+# 6. 确认显示邀请记录列表（如果有邀请记录）
+# 7. 点击邀请码或复制按钮
+# 8. 确认提示"邀请码已复制到剪贴板"
+# 9. 粘贴验证是否成功复制
+```
+
+### 测试4: 已绑定用户不显示输入框
 
 ```bash
 # 1. 登录已有上级的用户
@@ -243,13 +326,41 @@ SELECT invite_code FROM user WHERE id = 你的用户ID;
 └────────────────────────────────┘
 ```
 
-### 个人中心
+### 分销中心
 
 ```
 ┌────────────────────────────────┐
 │  👤 张三                        │
 │  🏷️ 分销商等级                  │
 │  📋 我的邀请码: ABC123 📋       │  ← 新增
+├────────────────────────────────┤
+│  功能专区                       │
+│  ┌────┐ ┌────┐ ┌────┐          │
+│  │团队│ │佣金│ │邀请码│ ...     │  ← 新增菜单项
+│  └────┘ └────┘ └────┘          │
+└────────────────────────────────┘
+```
+
+### 我的邀请码页面
+
+```
+┌────────────────────────────────┐
+│  我的邀请码                     │
+├────────────────────────────────┤
+│  ┌──────────────────────────┐ │
+│  │                          │ │
+│  │      ABC123  📋          │ │  ← 大尺寸显示
+│  │                          │ │
+│  │  [复制邀请码]            │ │
+│  └──────────────────────────┘ │
+├────────────────────────────────┤
+│         已邀请人数              │
+│            5                   │  ← 统计数据
+├────────────────────────────────┤
+│  邀请记录                       │
+│  👤 李四    2024-01-10         │
+│  👤 王五    2024-01-12         │  ← 邀请列表
+│  👤 赵六    2024-01-15         │
 └────────────────────────────────┘
 ```
 
@@ -260,10 +371,13 @@ SELECT invite_code FROM user WHERE id = 你的用户ID;
 - [x] 订单页显示邀请码输入框
 - [x] 邀请码验证功能正常
 - [x] 订单提交携带邀请码参数
-- [x] 个人中心显示邀请码
+- [x] 分销中心显示邀请码
 - [x] 点击复制邀请码功能正常
 - [x] 已绑定用户不显示输入框
 - [x] API接口注册成功
+- [x] 分销中心菜单添加"我的邀请码"入口
+- [x] 创建邀请码详情页面
+- [x] 邀请码详情页显示统计和记录
 
 ---
 

frontend/pages/commission/components/commission-menu.vue

@@ -77,6 +77,11 @@
         path: '/pages/commission/apply',
         isAgentFrom: true,
       },
+      {
+        img: '/assets/addons/shopro/uniapp/commission/commission_icon2.png',
+        title: '我的邀请码',
+        path: '/pages/user/invite-code',
+      },
       {
         img: '/assets/addons/shopro/uniapp/commission/commission_icon7.png',
         title: '邀请海报',

frontend/pages/user/invite-code.vue

@@ -0,0 +1,244 @@
+<template>
+  <s-layout title="我的邀请码" navbar="inner">
+    <view class="invite-page">
+      <!-- 邀请码卡片 -->
+      <view class="invite-card">
+        <view class="card-title">我的邀请码</view>
+        <view class="code-display" @tap="onCopyCode">
+          <text class="code-text">{{ state.inviteCode || '加载中...' }}</text>
+          <text class="copy-icon ss-iconfont uicon-copy"></text>
+        </view>
+        <view class="share-text">{{ state.shareText }}</view>
+        <button class="copy-btn" @tap="onCopyCode">
+          <text class="ss-iconfont uicon-copy"></text> 复制邀请码
+        </button>
+      </view>
+
+      <!-- 邀请统计 -->
+      <view class="stats-card">
+        <view class="stat-item">
+          <view class="stat-num">{{ state.inviteCount }}</view>
+          <view class="stat-label">已邀请人数</view>
+        </view>
+      </view>
+
+      <!-- 邀请记录 -->
+      <view class="invite-list" v-if="state.inviteList.length > 0">
+        <view class="list-title">邀请记录</view>
+        <view
+          v-for="item in state.inviteList"
+          :key="item.id"
+          class="invite-item ss-flex ss-col-center"
+        >
+          <image :src="sheep.$url.cdn(item.avatar)" class="avatar"></image>
+          <view class="info ss-flex-1">
+            <view class="nickname">{{ item.nickname }}</view>
+            <view class="time">{{ sheep.$helper.timeFormat(item.jointime) }}</view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 空状态 -->
+      <view v-else class="empty-box">
+        <view class="empty-text">还没有邀请记录</view>
+      </view>
+    </view>
+  </s-layout>
+</template>
+
+<script setup>
+  import { reactive, onMounted } from 'vue';
+  import sheep from '@/sheep';
+
+  const state = reactive({
+    inviteCode: '',
+    inviteCount: 0,
+    shareText: '',
+    inviteList: [],
+  });
+
+  // 获取邀请码
+  async function getInviteCode() {
+    const { code, data } = await sheep.$api.invite.myCode();
+    if (code === 1) {
+      state.inviteCode = data.invite_code;
+      state.inviteCount = data.invite_count;
+      state.shareText = data.share_text;
+    }
+  }
+
+  // 获取邀请列表
+  async function getInviteList() {
+    const { code, data } = await sheep.$api.invite.myInvites({ list_rows: 20 });
+    if (code === 1) {
+      state.inviteList = data.data || [];
+    }
+  }
+
+  // 复制邀请码
+  function onCopyCode() {
+    if (!state.inviteCode) {
+      sheep.$helper.toast('邀请码加载中...');
+      return;
+    }
+    sheep.$helper.copyText(state.inviteCode);
+    sheep.$helper.toast('邀请码已复制到剪贴板');
+  }
+
+  onMounted(() => {
+    getInviteCode();
+    getInviteList();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .invite-page {
+    padding: 20rpx;
+    min-height: 100vh;
+    background: #f7f8fa;
+  }
+
+  .invite-card {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 20rpx;
+    padding: 40rpx;
+    margin-bottom: 20rpx;
+    box-shadow: 0 8rpx 20rpx rgba(102, 126, 234, 0.3);
+
+    .card-title {
+      font-size: 28rpx;
+      color: rgba(255, 255, 255, 0.8);
+      margin-bottom: 30rpx;
+      text-align: center;
+    }
+
+    .code-display {
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 16rpx;
+      padding: 30rpx;
+      margin-bottom: 20rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 2rpx solid rgba(255, 255, 255, 0.3);
+
+      .code-text {
+        font-size: 64rpx;
+        font-weight: bold;
+        color: #fff;
+        letter-spacing: 8rpx;
+        margin-right: 20rpx;
+      }
+
+      .copy-icon {
+        font-size: 40rpx;
+        color: #fff;
+      }
+    }
+
+    .share-text {
+      font-size: 24rpx;
+      color: rgba(255, 255, 255, 0.9);
+      text-align: center;
+      margin-bottom: 30rpx;
+      line-height: 40rpx;
+    }
+
+    .copy-btn {
+      background: rgba(255, 255, 255, 0.95);
+      color: #667eea;
+      border-radius: 40rpx;
+      height: 80rpx;
+      line-height: 80rpx;
+      font-size: 28rpx;
+      font-weight: bold;
+      border: none;
+
+      &::after {
+        border: none;
+      }
+
+      .ss-iconfont {
+        margin-right: 10rpx;
+      }
+    }
+  }
+
+  .stats-card {
+    background: #fff;
+    border-radius: 20rpx;
+    padding: 40rpx;
+    margin-bottom: 20rpx;
+
+    .stat-item {
+      text-align: center;
+
+      .stat-num {
+        font-size: 64rpx;
+        font-weight: bold;
+        color: #667eea;
+        line-height: 1;
+        margin-bottom: 10rpx;
+      }
+
+      .stat-label {
+        font-size: 28rpx;
+        color: #999;
+      }
+    }
+  }
+
+  .invite-list {
+    background: #fff;
+    border-radius: 20rpx;
+    padding: 30rpx;
+
+    .list-title {
+      font-size: 32rpx;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 30rpx;
+    }
+
+    .invite-item {
+      padding: 20rpx 0;
+      border-bottom: 1rpx solid #f0f0f0;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      .avatar {
+        width: 80rpx;
+        height: 80rpx;
+        border-radius: 50%;
+        margin-right: 20rpx;
+      }
+
+      .info {
+        .nickname {
+          font-size: 28rpx;
+          color: #333;
+          margin-bottom: 10rpx;
+        }
+
+        .time {
+          font-size: 24rpx;
+          color: #999;
+        }
+      }
+    }
+  }
+
+  .empty-box {
+    background: #fff;
+    border-radius: 20rpx;
+    padding: 100rpx 0;
+    text-align: center;
+
+    .empty-text {
+      font-size: 28rpx;
+      color: #999;
+    }
+  }
+</style>