mirror of https://gitee.com/liuxioabin/fengketrade.git synced 2026-04-17 21:03:17 +08:00

Billy 098e3dfafd up

2025-10-29 14:16:47 +08:00

11 KiB

Raw Blame History

前端修改说明

📝 修改文件清单

✅ 已修改的文件（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 参数

代码片段:

<uni-easyinput
  maxlength="6"
  placeholder="选填(6位大写字母+数字)"
  v-model="state.inviteCode"
  @blur="onValidateInvite"
/>

验证逻辑:

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('邀请码验证成功');
  }
}

提交订单:

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

功能:

✅ 大尺寸邀请码展示（渐变卡片）
✅ 一键复制邀请码
✅ 显示邀请人数统计
✅ 显示邀请记录列表（头像、昵称、加入时间）
✅ 空状态提示
✅ 分享文案显示

代码片段（分销中心个人信息卡片）:

<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>

代码片段（分销中心菜单）:

{
  img: '/assets/addons/shopro/uniapp/commission/commission_icon2.png',
  title: '我的邀请码',
  path: '/pages/user/invite-code',
}

代码片段（邀请码详情页）:

<!-- 邀请码卡片 -->
<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>

逻辑:

// 页面加载时获取邀请码和邀请列表
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` 模块

// 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: [...] } }

🎨 样式调整

订单确认页样式

.invite-input-box {
  position: relative;

  .validate-tag {
    margin-left: 10rpx;
    font-size: 32rpx;
  }
}

个人中心样式

.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: 订单页邀请码输入

# 1. 登录建行生活用户（未绑定上级）
# 2. 加入购物车，进入订单确认页
# 3. 查看是否显示"邀请码"输入框
# 4. 输入邀请码（如：ABC123）
# 5. 失焦后查看是否显示验证成功图标
# 6. 提交订单
# 7. 后台检查是否绑定成功：
SELECT parent_user_id, invite_code_used FROM user WHERE id = 新用户ID;

测试2: 分销中心显示邀请码

# 1. 进入分销中心页面
# 2. 查看个人信息卡片，等级标签下方
# 3. 确认显示"我的邀请码: XXXXXX"
# 4. 点击邀请码
# 5. 确认提示"邀请码已复制"
# 6. 粘贴验证是否成功复制

测试3: 我的邀请码页面

# 1. 进入分销中心
# 2. 点击"功能专区"中的"我的邀请码"
# 3. 进入邀请码详情页面
# 4. 确认显示大尺寸邀请码
# 5. 确认显示"已邀请人数"统计
# 6. 确认显示邀请记录列表（如果有邀请记录）
# 7. 点击邀请码或复制按钮
# 8. 确认提示"邀请码已复制到剪贴板"
# 9. 粘贴验证是否成功复制

测试4: 已绑定用户不显示输入框

# 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: 邀请码输入框不显示

检查:

// 确认用户是否已绑定
console.log(userInfo.parent_user_id); // 应为 null

问题3: 验证失败

检查:

# 查看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: 个人中心不显示邀请码

检查:

// 检查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         │
└────────────────────────────────┘

✅ 完成检查清单

订单页显示邀请码输入框
邀请码验证功能正常
订单提交携带邀请码参数
分销中心显示邀请码
点击复制邀请码功能正常
已绑定用户不显示输入框
API接口注册成功
分销中心菜单添加"我的邀请码"入口
创建邀请码详情页面
邀请码详情页显示统计和记录

最后更新: 2024-01-15 维护人员: Billy

11 KiB Raw Blame History Unescape Escape