46 lines
2.1 KiB
Markdown
46 lines
2.1 KiB
Markdown
## 实现步骤
|
||
|
||
### 1. 新建邀请明细页面组件
|
||
- 创建 `d:\work\Aiproject\DeotalandAi\apps\frontend\src\views\user\invite-records.vue` 文件
|
||
- 实现页面布局，包括标题、表格和分页组件
|
||
- 设计双选项卡切换："积分明细"和"佣金记录"（仅达人会员可见）
|
||
- 采用极简风格设计，遵循 ui-ux-pro-max.md 中的设计规则
|
||
|
||
### 2. 修改路由配置
|
||
- 在 `freeRoutes` 数组中添加新路由 `/user-center/invite-records`
|
||
- 指向新建的邀请明细页面组件
|
||
|
||
### 3. 修改用户中心页面
|
||
- 在"邀请码"部分的右侧添加"邀请明细"按钮
|
||
- 移除"邀请积分明细"模块（即 `.invite-related-section`）
|
||
- 添加按钮点击事件，使用 `router.push()` 跳转到新页面
|
||
|
||
### 4. 实现 API 调用和数据处理
|
||
- 在邀请明细页面中调用 `UserController` 的 `getInviteRecords()` 方法获取积分明细
|
||
- 对于达人会员，额外调用 `getInviteCommissionRecords()` 方法获取佣金记录
|
||
- 处理返回的数据，将其转换为表格所需的格式
|
||
- 实现数据加载状态和空状态处理
|
||
|
||
### 5. 设计风格调整
|
||
- 采用极简风格设计，使用简洁的颜色和字体
|
||
- 确保响应式设计，适配移动端、桌面端、平板端
|
||
- 使用合适的间距和布局，保持页面整洁
|
||
- 实现平滑的过渡效果和交互反馈
|
||
|
||
## 技术要点
|
||
|
||
- 使用 Vue3 Composition API 开发
|
||
- 根据用户角色（达人会员/免费会员）动态显示不同内容
|
||
- 实现中英文国际化支持
|
||
- 确保页面性能和加载速度
|
||
- 遵循 ui-ux-pro-max.md 中的设计规则，特别是极简风格要求
|
||
|
||
## 预期效果
|
||
|
||
- 用户中心页面的邀请码部分右侧会出现"邀请明细"按钮
|
||
- 点击按钮会跳转到新的邀请明细页面
|
||
- 免费会员只能看到"积分明细"选项卡，展示被邀请用户、获得积分和日期
|
||
- 达人会员可以看到"积分明细"和"佣金记录"两个选项卡
|
||
- "佣金记录"选项卡展示被邀请用户邮箱、实际消费金额、佣金比例、佣金金额和订单时间
|
||
- 页面采用极简风格设计，视觉效果简洁美观
|
||
- 支持响应式布局，适配不同设备尺寸 |