ni ziyi 6bc1907d7a 小程序端初始化

2026-01-12 16:48:28 +08:00

17 KiB

Raw Blame History

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

📋 项目概述

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

一、核心功能模块

1.1 认证与角色管理

登录认证

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

角色管理

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

1.2 用户端功能（顾客）

核心功能

浏览游戏服务
挑选代练下单
支付（模拟）
订单跟踪
评价反馈

1.3 商家端功能（工作室）

核心功能

订单管理
派单操作
代练管理
数据统计
收款管理

1.4 代练端功能（执行者）

核心功能

接收派单
订单执行
完成确认
收益查看

二、页面结构清单

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 用户数据

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 代练数据

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 服务数据

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 订单数据

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 评价数据

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）

项目初始化（uni-app + Vue3 + TS）
UI 框架集成（uView UI）
目录结构搭建
Pinia 状态管理
路由守卫
静态数据准备

第二阶段：公共功能（Day 3-4）

登录页面
角色切换
个人中心
个人信息管理
公共组件开发

第三阶段：用户端（Day 5-7）

用户首页
代练列表/详情
服务列表/详情
下单流程
订单列表/详情
评价功能

第四阶段：商家端（Day 8-10）

商家首页
订单管理
派单功能
代练管理
服务管理
数据统计

第五阶段：代练端（Day 11-12）

代练首页
代练注册
订单管理
订单执行
收益管理

第六阶段：优化与测试（Day 13-14）

功能测试
交互优化
样式调整
性能优化

八、技术要点

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

17 KiB Raw Blame History Unescape Escape

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

📋 项目概述

一、核心功能模块

1.1 认证与角色管理

登录认证

角色管理

1.2 用户端功能（顾客）

核心功能

1.3 商家端功能（工作室）

核心功能

1.4 代练端功能（执行者）

核心功能

二、页面结构清单

2.1 公共页面（所有角色）

启动与登录

个人中心

消息与客服

协议与帮助

2.2 用户端页面（顾客）

首页与浏览

代练浏览

服务浏览

订单流程

支付

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

商家工作台

订单管理

代练管理

邀请管理

服务管理

财务管理

2.4 代练端页面（执行者）

代练工作台

代练注册

订单管理

收益管理

个人中心（代练专属）

三、组件清单

3.1 公共组件

3.2 业务组件

四、静态数据结构

4.1 用户数据

4.2 代练数据

4.3 服务数据

4.4 订单数据

4.5 评价数据

五、状态管理（Pinia Stores）

5.1 Store 清单

六、路由与权限

6.1 路由配置

6.2 权限控制

七、开发优先级

第一阶段：基础框架（Day 1-2）

第二阶段：公共功能（Day 3-4）

第三阶段：用户端（Day 5-7）

第四阶段：商家端（Day 8-10）

第五阶段：代练端（Day 11-12）

第六阶段：优化与测试（Day 13-14）

八、技术要点

8.1 技术栈

8.2 开发规范

九、核心功能流程

9.1 用户下单流程

9.2 商家派单流程

9.3 代练接单流程

十、注意事项

10.1 静态数据处理

10.2 角色权限

10.3 性能优化

十一、总结

17 KiB

Raw Blame History