# 游戏服务交易平台 - uni-app 前端功能清单

## 📋 项目概述

**项目名称**: 游戏服务交易平台小程序（三端合一）
**技术栈**: uni-app + Vue3 + TypeScript + Pinia
**UI 框架**: uView UI
**角色支持**: 用户（顾客）、商家（工作室）、代练（执行者）
**数据方式**: 静态数据模拟（Mock Data）

---

## 一、核心功能模块

### 1.1 认证与角色管理

#### 登录认证
- [x] 微信模拟登录（静态 openid）
- [x] 手机号授权登录（模拟授权）
- [x] 自动注册逻辑（首次登录）
- [x] Token 存储与管理

#### 角色管理
- [x] 角色切换功能（用户/商家/代练）
- [x] 角色权限控制
- [x] 不同角色首页跳转
- [x] 角色标识显示

### 1.2 用户端功能（顾客）

#### 核心功能
- [x] 浏览游戏服务
- [x] 挑选代练下单
- [x] 支付（模拟）
- [x] 订单跟踪
- [x] 评价反馈

### 1.3 商家端功能（工作室）

#### 核心功能
- [x] 订单管理
- [x] 派单操作
- [x] 代练管理
- [x] 数据统计
- [x] 收款管理

### 1.4 代练端功能（执行者）

#### 核心功能
- [x] 接收派单
- [x] 订单执行
- [x] 完成确认
- [x] 收益查看

---

## 二、页面结构清单

### 2.1 公共页面（所有角色）

#### 启动与登录
| 页面路径 | 页面名称 | 功能说明 |
|---------|---------|---------|
| `/pages/index/index` | 启动页/首页 | 根据角色跳转到对应首页 |
| `/pages/auth/login` | 登录页 | 手机号授权登录、协议勾选 |
| `/pages/auth/role-switch` | 角色切换页 | 切换用户/商家/代练角色 |

#### 个人中心
| 页面路径 | 页面名称 | 功能说明 |
|---------|---------|---------|
| `/pages/user/index` | 个人中心 | 根据角色显示不同菜单和功能 |
| `/pages/user/profile` | 个人信息管理 | 编辑昵称、头像、真实姓名等 |
| `/pages/user/privacy` | 隐私设置 | 控制信息公开范围 |
| `/pages/user/notification` | 通知设置 | 控制接收通知类型 |
| `/pages/user/setting` | 设置页面 | 通用设置、关于我们、退出登录 |

#### 消息与客服
| 页面路径 | 页面名称 | 功能说明 |
|---------|---------|---------|
| `/pages/message/list` | 消息列表 | 系统消息、订单消息 |
| `/pages/message/chat` | 聊天页面 | IM 聊天（用户-代练） |

#### 协议与帮助
| 页面路径 | 页面名称 | 功能说明 |
|---------|---------|---------|
| `/pages/agreement/user` | 用户协议 | 用户服务协议 |
| `/pages/agreement/privacy` | 隐私政策 | 隐私保护政策 |
| `/pages/help/index` | 帮助中心 | 常见问题、使用指南 |

---

### 2.2 用户端页面（顾客）

#### 首页与浏览
| 页面路径 | 页面名称 | 功能说明 | 静态数据 |
|---------|---------|---------|---------|
| `/pages-user/home/index` | 用户首页 | 游戏分类、热门代练、推荐服务 | 游戏列表、轮播图、热门代练 |
| `/pages-user/category/list` | 分类列表 | 按游戏分类浏览服务 | 游戏分类、服务列表 |
| `/pages-user/search/index` | 搜索页面 | 搜索代练、服务 | 搜索历史、热门搜索 |

#### 代练浏览
| 页面路径 | 页面名称 | 功能说明 | 静态数据 |
|---------|---------|---------|---------|
| `/pages-user/player/list` | 代练列表 | 浏览所有代练、筛选排序 | 代练列表（含评分、段位、价格） |
| `/pages-user/player/detail` | 代练详情 | 代练信息、评价、服务项目 | 代练详细信息、评价列表 |

#### 服务浏览
| 页面路径 | 页面名称 | 功能说明 | 静态数据 |
|---------|---------|---------|---------|
| `/pages-user/service/list` | 服务列表 | 浏览服务套餐 | 服务套餐列表 |
| `/pages-user/service/detail` | 服务详情 | 服务详情、价格、选择代练 | 服务详情、代练推荐 |

#### 订单流程
| 页面路径 | 页面名称 | 功能说明 | 静态数据 |
|---------|---------|---------|---------|
| `/pages-user/order/create` | 创建订单 | 填写订单信息、选择代练 | 服务信息、代练列表 |
| `/pages-user/order/list` | 我的订单 | 订单列表（全部/待支付/进行中/已完成） | 订单列表（各种状态） |
| `/pages-user/order/detail` | 订单详情 | 订单详情、进度跟踪、操作 | 订单详情、流转记录 |
| `/pages-user/order/evaluate` | 评价页面 | 评价代练服务 | - |

#### 支付
| 页面路径 | 页面名称 | 功能说明 | 静态数据 |
|---------|---------|---------|---------|
| `/pages-user/payment/pay` | 支付确认 | 确认支付信息、选择支付方式 | 订单金额、支付方式 |
| `/pages-user/payment/result` | 支付结果 | 支付成功/失败页面 | - |

---

### 2.3 商家端页面（工作室管理者）

#### 商家工作台
| 页面路径 | 页面名称 | 功能说明 | 静态数据 |
|---------|---------|---------|---------|
| `/pages-merchant/home/index` | 商家首页 | 数据概览、今日订单、待处理事项 | 统计数据、订单概览 |
| `/pages-merchant/dashboard/index` | 数据看板 | 收入趋势、订单统计、代练排行 | 图表数据、统计信息 |

#### 订单管理
| 页面路径 | 页面名称 | 功能说明 | 静态数据 |
|---------|---------|---------|---------|
| `/pages-merchant/order/list` | 订单列表 | 所有订单（待派单/进行中/已完成） | 订单列表（各状态） |
| `/pages-merchant/order/detail` | 订单详情 | 订单详情、派单操作 | 订单详情、代练列表 |
| `/pages-merchant/order/dispatch` | 派单页面 | 选择代练进行派单 | 可用代练列表 |

#### 代练管理
| 页面路径 | 页面名称 | 功能说明 | 静态数据 |
|---------|---------|---------|---------|
| `/pages-merchant/player/list` | 代练列表 | 管理所有代练 | 代练列表（含状态、接单数） |
| `/pages-merchant/player/detail` | 代练详情 | 代练信息、订单记录、收益统计 | 代练详情、历史订单 |
| `/pages-merchant/player/audit` | 代练审核 | 审核代练注册申请 | 申请列表、申请详情 |

#### 邀请管理
| 页面路径 | 页面名称 | 功能说明 | 静态数据 |
|---------|---------|---------|---------|
| `/pages-merchant/invite/index` | 邀请代练 | 生成邀请链接/二维码 | 邀请记录、邀请统计 |
| `/pages-merchant/invite/list` | 邀请记录 | 查看邀请记录、使用情况 | 邀请列表、使用详情 |

#### 服务管理
| 页面路径 | 页面名称 | 功能说明 | 静态数据 |
|---------|---------|---------|---------|
| `/pages-merchant/service/list` | 服务管理 | 管理服务套餐（上架/下架/编辑） | 服务套餐列表 |
| `/pages-merchant/service/edit` | 编辑服务 | 新增/编辑服务套餐 | 服务分类、服务信息 |

#### 财务管理
| 页面路径 | 页面名称 | 功能说明 | 静态数据 |
|---------|---------|---------|---------|
| `/pages-merchant/finance/income` | 收入统计 | 收入明细、收入趋势 | 收入数据、趋势图表 |
| `/pages-merchant/finance/withdraw` | 提现管理 | 申请提现、提现记录 | 提现记录、账户余额 |
| `/pages-merchant/finance/bill` | 账单明细 | 收支明细、对账 | 账单列表、交易详情 |

---

### 2.4 代练端页面（执行者）

#### 代练工作台
| 页面路径 | 页面名称 | 功能说明 | 静态数据 |
|---------|---------|---------|---------|
| `/pages-player/home/index` | 代练首页 | 待接单订单、今日收益、接单统计 | 订单列表、收益数据 |

#### 代练注册
| 页面路径 | 页面名称 | 功能说明 | 静态数据 |
|---------|---------|---------|---------|
| `/pages-player/register/index` | 代练注册 | 通过邀请链接注册 | 邀请码、注册表单 |
| `/pages-player/register/result` | 注册结果 | 注册成功/待审核提示 | - |

#### 订单管理
| 页面路径 | 页面名称 | 功能说明 | 静态数据 |
|---------|---------|---------|---------|
| `/pages-player/order/list` | 我的订单 | 订单列表（待接单/进行中/已完成） | 订单列表（各状态） |
| `/pages-player/order/detail` | 订单详情 | 订单详情、接单/拒单/完成操作 | 订单详情、用户信息 |
| `/pages-player/order/execute` | 执行订单 | 执行订单、上传进度/截图 | 订单信息、上传记录 |

#### 收益管理
| 页面路径 | 页面名称 | 功能说明 | 静态数据 |
|---------|---------|---------|---------|
| `/pages-player/income/index` | 收益中心 | 总收益、收益趋势、明细 | 收益数据、趋势图表 |
| `/pages-player/income/detail` | 收益明细 | 收益明细列表、筛选 | 收益记录列表 |
| `/pages-player/income/withdraw` | 提现申请 | 申请提现、提现记录 | 提现记录、账户余额 |

#### 个人中心（代练专属）
| 页面路径 | 页面名称 | 功能说明 | 静态数据 |
|---------|---------|---------|---------|
| `/pages-player/profile/index` | 代练资料 | 编辑代练信息、技能、段位 | 代练信息、技能列表 |
| `/pages-player/profile/skill` | 技能设置 | 设置擅长游戏、段位 | 游戏列表、段位选项 |

---

## 三、组件清单

### 3.1 公共组件

| 组件名称 | 路径 | 功能说明 |
|---------|------|---------|
| Navbar | `/components/navbar/index.vue` | 自定义导航栏 |
| Tabbar | `/components/tabbar/index.vue` | 自定义底部导航（根据角色切换） |
| Empty | `/components/empty/index.vue` | 空状态组件 |
| LoadingMore | `/components/loading-more/index.vue` | 加载更多组件 |
| Avatar | `/components/avatar/index.vue` | 头像组件 |
| ImageUpload | `/components/image-upload/index.vue` | 图片上传组件 |

### 3.2 业务组件

| 组件名称 | 路径 | 功能说明 |
|---------|------|---------|
| ServiceCard | `/components/service-card/index.vue` | 服务卡片 |
| PlayerCard | `/components/player-card/index.vue` | 代练卡片 |
| OrderItem | `/components/order-item/index.vue` | 订单项（根据角色显示不同操作） |
| DispatchDialog | `/components/dispatch-dialog/index.vue` | 派单弹窗 |
| ReviewItem | `/components/review-item/index.vue` | 评价项 |
| GameTag | `/components/game-tag/index.vue` | 游戏标签 |
| StatusBadge | `/components/status-badge/index.vue` | 状态徽章 |
| RoleSwitch | `/components/role-switch/index.vue` | 角色切换组件 |

---

## 四、静态数据结构

### 4.1 用户数据

```typescript
interface User {
  id: number
  openid: string
  phone: string
  nickname: string
  avatar: string
  userType: 'customer' | 'merchant' | 'player'
  customerId?: number
  merchantId?: number
  playerId?: number
  tenantId?: number
}
```

### 4.2 代练数据

```typescript
interface Player {
  id: number
  name: string
  avatar: string
  phone: string
  gameId: string
  gameName: string
  level: string
  rating: number
  orderCount: number
  completeCount: number
  completeRate: number
  skills: string[]
  intro: string
  isOnline: boolean
  status: '0' | '1' | '2' // 0正常 1禁用 2待审核
}
```

### 4.3 服务数据

```typescript
interface Service {
  id: number
  tenantId: number
  categoryId: number
  categoryName: string
  name: string
  coverImage: string
  images: string[]
  price: number
  originalPrice: number
  description: string
  detail: string
  serviceTime: number
  status: '0' | '1' // 0上架 1下架
  salesCount: number
  rating: number
  reviewCount: number
}
```

### 4.4 订单数据

```typescript
interface Order {
  id: number
  orderNo: string
  tenantId: number
  customerId: number
  customerName: string
  customerAvatar: string
  serviceId: number
  serviceName: string
  serviceCover: string
  price: number
  actualPrice: number
  status: number // 0待支付 1待派单 2已派单 3已接单 4进行中 5待确认 6已完成 7已评价 9已取消
  selectedPlayerId?: number
  playerId?: number
  playerName?: string
  playerAvatar?: string
  gameInfo: any
  contactInfo: any
  remark: string
  createTime: string
  payTime?: string
  dispatchTime?: string
  acceptTime?: string
  startTime?: string
  finishTime?: string
  confirmTime?: string
}
```

### 4.5 评价数据

```typescript
interface Evaluation {
  id: number
  orderId: number
  customerId: number
  customerName: string
  customerAvatar: string
  playerId: number
  playerName: string
  serviceId: number
  serviceName: string
  rating: number
  content: string
  images: string[]
  isAnonymous: boolean
  reply?: string
  replyTime?: string
  createTime: string
}
```

---

## 五、状态管理（Pinia Stores）

### 5.1 Store 清单

| Store 名称 | 路径 | 功能说明 |
|-----------|------|---------|
| user | `/store/modules/user.ts` | 用户信息、登录状态 |
| role | `/store/modules/role.ts` | 角色管理、角色切换 |
| tenant | `/store/modules/tenant.ts` | 租户信息 |
| order | `/store/modules/order.ts` | 订单数据 |
| service | `/store/modules/service.ts` | 服务数据 |
| player | `/store/modules/player.ts` | 代练数据 |
| message | `/store/modules/message.ts` | 消息数据 |

---

## 六、路由与权限

### 6.1 路由配置

**分包策略**:
- 主包: 启动页、登录、个人中心
- 用户端分包: `pages-user`
- 商家端分包: `pages-merchant`
- 代练端分包: `pages-player`

### 6.2 权限控制

**路由守卫**:
- 白名单: 启动页、登录页、协议页
- 需登录: 所有业务页面
- 角色权限: 不同角色只能访问对应分包

---

## 七、开发优先级

### 第一阶段：基础框架（Day 1-2）
- [x] 项目初始化（uni-app + Vue3 + TS）
- [x] UI 框架集成（uView UI）
- [x] 目录结构搭建
- [x] Pinia 状态管理
- [x] 路由守卫
- [x] 静态数据准备

### 第二阶段：公共功能（Day 3-4）
- [x] 登录页面
- [x] 角色切换
- [x] 个人中心
- [x] 个人信息管理
- [x] 公共组件开发

### 第三阶段：用户端（Day 5-7）
- [x] 用户首页
- [x] 代练列表/详情
- [x] 服务列表/详情
- [x] 下单流程
- [x] 订单列表/详情
- [x] 评价功能

### 第四阶段：商家端（Day 8-10）
- [x] 商家首页
- [x] 订单管理
- [x] 派单功能
- [x] 代练管理
- [x] 服务管理
- [x] 数据统计

### 第五阶段：代练端（Day 11-12）
- [x] 代练首页
- [x] 代练注册
- [x] 订单管理
- [x] 订单执行
- [x] 收益管理

### 第六阶段：优化与测试（Day 13-14）
- [x] 功能测试
- [x] 交互优化
- [x] 样式调整
- [x] 性能优化

---

## 八、技术要点

### 8.1 技术栈

```
uni-app
├── Vue 3 (Composition API)
├── TypeScript
├── Pinia (状态管理)
├── uView UI (UI组件库)
├── uni-scss (样式预处理)
└── dayjs (日期处理)
```

### 8.2 开发规范

**命名规范**:
- 页面文件: kebab-case (如: `user-profile.vue`)
- 组件文件: PascalCase (如: `ServiceCard.vue`)
- 方法/变量: camelCase (如: `getUserInfo`)

**目录规范**:
```
game-service-miniapp-v2/
├── pages/              # 主包页面
├── pages-user/         # 用户端分包
├── pages-merchant/     # 商家端分包
├── pages-player/       # 代练端分包
├── components/         # 公共组件
├── store/             # 状态管理
├── utils/             # 工具函数
├── static/            # 静态资源
├── mock/              # 模拟数据
└── types/             # TypeScript 类型定义
```

**代码规范**:
- 使用 Composition API
- 使用 TypeScript 类型定义
- 使用 ESLint + Prettier
- 使用 Git 提交规范

---

## 九、核心功能流程

### 9.1 用户下单流程

```
浏览服务 → 选择代练 → 创建订单 → 支付 → 等待派单 →
服务中 → 确认完成 → 评价
```

### 9.2 商家派单流程

```
接收订单 → 查看订单详情 → 选择代练 → 派单 →
监控进度 → 完成审核
```

### 9.3 代练接单流程

```
收到派单通知 → 查看订单 → 接单/拒单 → 开始服务 →
上传进度 → 完成订单 → 获得收益
```

---

## 十、注意事项

### 10.1 静态数据处理

- 所有数据存放在 `/mock` 目录
- 使用 `setTimeout` 模拟异步请求
- 保持数据结构与真实 API 一致
- 预留真实 API 接口位置

### 10.2 角色权限

- 不同角色显示不同 Tabbar
- 不同角色首页不同
- 路由守卫控制页面访问
- 操作权限根据角色判断

### 10.3 性能优化

- 使用分包加载
- 图片懒加载
- 列表虚拟滚动
- 合理使用缓存

---

## 十一、总结

本项目共需实现:
- **页面数量**: 约 60+ 页面
- **组件数量**: 约 15+ 组件
- **状态管理**: 7 个 Store
- **角色支持**: 3 种角色
- **核心流程**: 3 条主流程

**开发周期**: 预计 14 天
**开发模式**: 静态数据驱动
**交付标准**: 所有功能可演示，交互完整

---

**文档生成时间**: 2025-12-30
**文档版本**: v1.0