mirror of
https://gitee.com/liuxioabin/fengketrade.git
synced 2026-04-17 21:03:17 +08:00
397 lines
11 KiB
Markdown
397 lines
11 KiB
Markdown
# 前端修改说明
|
||
|
||
## 📝 修改文件清单
|
||
|
||
```
|
||
✅ 已修改的文件（5个）：
|
||
frontend/
|
||
├── 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行）
|
||
```
|
||
|
||
## 🎯 功能说明
|
||
|
||
### 1. 订单确认页 - 邀请码输入框
|
||
|
||
**位置**: 订单备注下方
|
||
|
||
**功能**:
|
||
- ✅ 仅未绑定上级的用户显示（`v-if="!userInfo.parent_user_id"`）
|
||
- ✅ 非必填，6位大写字母+数字
|
||
- ✅ 失焦自动验证（调用 `/invite/validate` 接口）
|
||
- ✅ 验证成功显示绿色勾号
|
||
- ✅ 提交订单时自动携带 `invite_code` 参数
|
||
|
||
**代码片段**:
|
||
```vue
|
||
<uni-easyinput
|
||
maxlength="6"
|
||
placeholder="选填(6位大写字母+数字)"
|
||
v-model="state.inviteCode"
|
||
@blur="onValidateInvite"
|
||
/>
|
||
```
|
||
|
||
**验证逻辑**:
|
||
```javascript
|
||
async function onValidateInvite() {
|
||
const code = state.inviteCode.trim().toUpperCase();
|
||
if (code.length !== 6) {
|
||
sheep.$helper.toast('邀请码格式错误');
|
||
return;
|
||
}
|
||
|
||
const { code: resCode } = await sheep.$api.invite.checkCode({ invite_code: code });
|
||
if (resCode === 1) {
|
||
state.inviteValidated = true;
|
||
sheep.$helper.toast('邀请码验证成功');
|
||
}
|
||
}
|
||
```
|
||
|
||
**提交订单**:
|
||
```javascript
|
||
if (state.inviteValidated && state.inviteCode) {
|
||
state.orderPayload.invite_code = state.inviteCode;
|
||
}
|
||
const { code, data } = await sheep.$api.order.create(state.orderPayload);
|
||
```
|
||
|
||
---
|
||
|
||
### 2. 分销中心 - 显示邀请码
|
||
|
||
**位置1**: 分销中心个人信息卡片，等级标签下方
|
||
|
||
**功能**:
|
||
- ✅ 自动获取邀请码（`/invite/myCode`）
|
||
- ✅ 点击复制邀请码到剪贴板
|
||
- ✅ 复制成功提示
|
||
|
||
**位置2**: 分销中心菜单 - 我的邀请码入口
|
||
|
||
**功能**:
|
||
- ✅ 在功能专区添加"我的邀请码"菜单项
|
||
- ✅ 点击跳转到邀请码详情页面
|
||
|
||
### 3. 我的邀请码页面（新增）
|
||
|
||
**路径**: `/pages/user/invite-code`
|
||
|
||
**功能**:
|
||
- ✅ 大尺寸邀请码展示（渐变卡片）
|
||
- ✅ 一键复制邀请码
|
||
- ✅ 显示邀请人数统计
|
||
- ✅ 显示邀请记录列表（头像、昵称、加入时间）
|
||
- ✅ 空状态提示
|
||
- ✅ 分享文案显示
|
||
|
||
**代码片段（分销中心个人信息卡片）**:
|
||
```vue
|
||
<view class="invite-code-box" @tap="onCopyCode">
|
||
<text class="invite-label">我的邀请码:</text>
|
||
<text class="invite-code">{{ state.inviteCode }}</text>
|
||
<text class="ss-iconfont uicon-copy"></text>
|
||
</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('邀请码已复制到剪贴板');
|
||
}
|
||
|
||
onMounted(() => {
|
||
getInviteCode();
|
||
getInviteList();
|
||
});
|
||
```
|
||
|
||
---
|
||
|
||
## 🔌 API 接口
|
||
|
||
### 新增 `sheep.$api.invite` 模块
|
||
|
||
```javascript
|
||
// 1. 获取我的邀请码
|
||
sheep.$api.invite.myCode()
|
||
// 响应: { code: 1, data: { invite_code: "ABC123", invite_count: 5 } }
|
||
|
||
// 2. 验证邀请码
|
||
sheep.$api.invite.checkCode({ invite_code: "ABC123" })
|
||
// 响应: { code: 1, msg: "邀请码有效", data: { ... } }
|
||
|
||
// 3. 我邀请的用户列表
|
||
sheep.$api.invite.myInvites({ page: 1 })
|
||
// 响应: { code: 1, data: { total: 10, data: [...] } }
|
||
```
|
||
|
||
---
|
||
|
||
## 🎨 样式调整
|
||
|
||
### 订单确认页样式
|
||
```scss
|
||
.invite-input-box {
|
||
position: relative;
|
||
|
||
.validate-tag {
|
||
margin-left: 10rpx;
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
```
|
||
|
||
### 个人中心样式
|
||
```scss
|
||
.invite-code-box {
|
||
margin-top: 12rpx;
|
||
padding: 4rpx 12rpx;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
border-radius: 20rpx;
|
||
border: 1rpx solid rgba(255, 255, 255, 0.3);
|
||
|
||
.invite-code {
|
||
font-size: 26rpx;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
letter-spacing: 2rpx;
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 🧪 测试步骤
|
||
|
||
### 测试1: 订单页邀请码输入
|
||
|
||
```bash
|
||
# 1. 登录建行生活用户（未绑定上级）
|
||
# 2. 加入购物车，进入订单确认页
|
||
# 3. 查看是否显示"邀请码"输入框
|
||
# 4. 输入邀请码（如：ABC123）
|
||
# 5. 失焦后查看是否显示验证成功图标
|
||
# 6. 提交订单
|
||
# 7. 后台检查是否绑定成功：
|
||
SELECT parent_user_id, invite_code_used FROM user WHERE id = 新用户ID;
|
||
```
|
||
|
||
### 测试2: 分销中心显示邀请码
|
||
|
||
```bash
|
||
# 1. 进入分销中心页面
|
||
# 2. 查看个人信息卡片，等级标签下方
|
||
# 3. 确认显示"我的邀请码: XXXXXX"
|
||
# 4. 点击邀请码
|
||
# 5. 确认提示"邀请码已复制"
|
||
# 6. 粘贴验证是否成功复制
|
||
```
|
||
|
||
### 测试3: 我的邀请码页面
|
||
|
||
```bash
|
||
# 1. 进入分销中心
|
||
# 2. 点击"功能专区"中的"我的邀请码"
|
||
# 3. 进入邀请码详情页面
|
||
# 4. 确认显示大尺寸邀请码
|
||
# 5. 确认显示"已邀请人数"统计
|
||
# 6. 确认显示邀请记录列表（如果有邀请记录）
|
||
# 7. 点击邀请码或复制按钮
|
||
# 8. 确认提示"邀请码已复制到剪贴板"
|
||
# 9. 粘贴验证是否成功复制
|
||
```
|
||
|
||
### 测试4: 已绑定用户不显示输入框
|
||
|
||
```bash
|
||
# 1. 登录已有上级的用户
|
||
# 2. 进入订单确认页
|
||
# 3. 确认不显示"邀请码"输入框
|
||
```
|
||
|
||
---
|
||
|
||
## 🐛 常见问题
|
||
|
||
### 问题1: 接口报"跨域"或500错误
|
||
|
||
**原因**:
|
||
- 后端 `Invite::validate()` 方法与 `Api` 基类的 `validate()` 方法签名冲突
|
||
- 导致 PHP Fatal Error: "Declaration of addons\shopro\controller\Invite::validate() must be compatible with..."
|
||
|
||
**解决方案**:
|
||
- 已将后端方法名从 `validate()` 改为 `checkCode()`
|
||
- 前端API调用从 `sheep.$api.invite.validate()` 改为 `sheep.$api.invite.checkCode()`
|
||
- 接口路径从 `/invite/validate` 改为 `/invite/checkCode`
|
||
|
||
### 问题2: 邀请码输入框不显示
|
||
|
||
**检查**:
|
||
```javascript
|
||
// 确认用户是否已绑定
|
||
console.log(userInfo.parent_user_id); // 应为 null
|
||
```
|
||
|
||
### 问题3: 验证失败
|
||
|
||
**检查**:
|
||
```bash
|
||
# 查看API响应
|
||
curl -X POST http://your-domain/addons/shopro/invite/checkCode -d "invite_code=ABC123"
|
||
|
||
# 查看后端日志
|
||
tail -f runtime/log/$(date +%Y%m)/$(date +%d).log | grep "邀请码"
|
||
```
|
||
|
||
### 问题4: 个人中心不显示邀请码
|
||
|
||
**检查**:
|
||
```javascript
|
||
// 检查API是否成功
|
||
const res = await sheep.$api.invite.myCode();
|
||
console.log(res);
|
||
|
||
// 检查用户是否有邀请码
|
||
SELECT invite_code FROM user WHERE id = 你的用户ID;
|
||
```
|
||
|
||
---
|
||
|
||
## 📱 界面预览
|
||
|
||
### 订单确认页
|
||
|
||
```
|
||
┌────────────────────────────────┐
|
||
│ 商品信息 │
|
||
├────────────────────────────────┤
|
||
│ 订单备注 [建议留言前先与商家沟通]│
|
||
├────────────────────────────────┤
|
||
│ 邀请码 [选填(6位大写字母+数字)] ✓│ ← 新增
|
||
└────────────────────────────────┘
|
||
```
|
||
|
||
### 分销中心
|
||
|
||
```
|
||
┌────────────────────────────────┐
|
||
│ 👤 张三 │
|
||
│ 🏷️ 分销商等级 │
|
||
│ 📋 我的邀请码: ABC123 📋 │ ← 新增
|
||
├────────────────────────────────┤
|
||
│ 功能专区 │
|
||
│ ┌────┐ ┌────┐ ┌────┐ │
|
||
│ │团队│ │佣金│ │邀请码│ ... │ ← 新增菜单项
|
||
│ └────┘ └────┘ └────┘ │
|
||
└────────────────────────────────┘
|
||
```
|
||
|
||
### 我的邀请码页面
|
||
|
||
```
|
||
┌────────────────────────────────┐
|
||
│ 我的邀请码 │
|
||
├────────────────────────────────┤
|
||
│ ┌──────────────────────────┐ │
|
||
│ │ │ │
|
||
│ │ ABC123 📋 │ │ ← 大尺寸显示
|
||
│ │ │ │
|
||
│ │ [复制邀请码] │ │
|
||
│ └──────────────────────────┘ │
|
||
├────────────────────────────────┤
|
||
│ 已邀请人数 │
|
||
│ 5 │ ← 统计数据
|
||
├────────────────────────────────┤
|
||
│ 邀请记录 │
|
||
│ 👤 李四 2024-01-10 │
|
||
│ 👤 王五 2024-01-12 │ ← 邀请列表
|
||
│ 👤 赵六 2024-01-15 │
|
||
└────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## ✅ 完成检查清单
|
||
|
||
- [x] 订单页显示邀请码输入框
|
||
- [x] 邀请码验证功能正常
|
||
- [x] 订单提交携带邀请码参数
|
||
- [x] 分销中心显示邀请码
|
||
- [x] 点击复制邀请码功能正常
|
||
- [x] 已绑定用户不显示输入框
|
||
- [x] API接口注册成功
|
||
- [x] 分销中心菜单添加"我的邀请码"入口
|
||
- [x] 创建邀请码详情页面
|
||
- [x] 邀请码详情页显示统计和记录
|
||
|
||
---
|
||
|
||
**最后更新**: 2024-01-15
|
||
**维护人员**: Billy
|