mirror of
https://gitee.com/liuxioabin/fengketrade.git
synced 2026-04-17 12:57:32 +08:00
优化邀请码
This commit is contained in:
Billy
parent
f94089b566
commit
fe6cb4dcc9
@ -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
|
||||
<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] 邀请码详情页显示统计和记录
|
||||
|
||||
---
|
||||
|
||||
|
||||
@ -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: '邀请海报',
|
||||
|
||||
244
frontend/pages/user/invite-code.vue
Normal file
244
frontend/pages/user/invite-code.vue
Normal file
@ -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>
|
||||
Loading…
x
Reference in New Issue
Block a user