551 lines
17 KiB
Markdown
551 lines
17 KiB
Markdown
# 游戏服务交易平台 - 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
|