From fe6cb4dcc98d929d8f0619c64d4f10d4cda65dfe Mon Sep 17 00:00:00 2001 From: Billy <641833868@qq.com> Date: Wed, 29 Oct 2025 13:50:57 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=82=80=E8=AF=B7=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- database/migrations/FRONTEND_CHANGES.md | 140 +++++++++- .../commission/components/commission-menu.vue | 5 + frontend/pages/user/invite-code.vue | 244 ++++++++++++++++++ 3 files changed, 376 insertions(+), 13 deletions(-) create mode 100644 frontend/pages/user/invite-code.vue diff --git a/database/migrations/FRONTEND_CHANGES.md b/database/migrations/FRONTEND_CHANGES.md index 9d6a850..e8a0c87 100644 --- a/database/migrations/FRONTEND_CHANGES.md +++ b/database/migrations/FRONTEND_CHANGES.md @@ -3,11 +3,14 @@ ## 📝 修改文件清单 ``` -✅ 已修改的文件（3个）： +✅ 已修改的文件（5个）： frontend/ -├── pages/order/confirm.vue # 订单确认页（+40行） -├── pages/commission/components/ -│ └── commission-info.vue # 分销中心个人信息（+30行） +├── pages/ +│ ├── order/confirm.vue # 订单确认页（+40行） +│ ├── 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 我的邀请码: @@ -81,24 +102,72 @@ const { code, data } = await sheep.$api.order.create(state.orderPayload); ``` +**代码片段（分销中心菜单）**: +```javascript +{ + img: '/assets/addons/shopro/uniapp/commission/commission_icon2.png', + title: '我的邀请码', + path: '/pages/user/invite-code', +} +``` + +**代码片段（邀请码详情页）**: +```vue + + + + {{ state.inviteCode }} + + + + + + + + {{ state.inviteCount }} + 已邀请人数 + + + + + + + {{ item.nickname }} + {{ item.jointime }} + + +``` + **逻辑**: ```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] 邀请码详情页显示统计和记录 --- diff --git a/frontend/pages/commission/components/commission-menu.vue b/frontend/pages/commission/components/commission-menu.vue index e88cb13..ede18a2 100644 --- a/frontend/pages/commission/components/commission-menu.vue +++ b/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: '邀请海报', diff --git a/frontend/pages/user/invite-code.vue b/frontend/pages/user/invite-code.vue new file mode 100644 index 0000000..31c6c97 --- /dev/null +++ b/frontend/pages/user/invite-code.vue @@ -0,0 +1,244 @@ + + + + +