231 lines
6.3 KiB
Markdown
231 lines
6.3 KiB
Markdown
# 🎮 游戏服务交易平台 - 电竞赛博朋克风格
|
|
|
|
> 基于 uni-app 开发的游戏服务交易平台微信小程序,采用电竞赛博朋克视觉风格,融合游戏元素、科技感和竞技感。
|
|
|
|
## ✨ 项目特色
|
|
|
|
### 🎨 视觉设计
|
|
- **电竞赛博朋克风格**: 霓虹色、数字雨效果、科技光效
|
|
- **游戏化UI**: 游戏主题图标、竞技感配色、等级系统
|
|
- **动效丰富**: 扫描线动画、霓虹发光、粒子效果
|
|
- **深色主题**: 深蓝黑背景,青色霓虹主色调
|
|
|
|
### 🛠️ 技术亮点
|
|
- **Vue 3 Composition API**: 最新的Vue3语法
|
|
- **静态数据Mock**: 完整的Mock数据支持,无需后端即可运行
|
|
- **组件化开发**: 高度复用的公共组件
|
|
- **响应式设计**: 适配各种屏幕尺寸
|
|
|
|
## 📁 项目结构
|
|
|
|
```
|
|
game-service-miniapp/
|
|
├── pages/ # 页面
|
|
│ ├── index/ # 首页
|
|
│ │ └── index.vue # 游戏分类、热门推荐
|
|
│ ├── category/ # 分类
|
|
│ │ └── list.vue # 服务列表(筛选、排序)
|
|
│ ├── service/ # 服务
|
|
│ │ └── detail.vue # 服务详情
|
|
│ ├── order/ # 订单
|
|
│ │ ├── create.vue # 创建订单
|
|
│ │ ├── list.vue # 订单列表
|
|
│ │ └── detail.vue # 订单详情
|
|
│ └── user/ # 用户
|
|
│ └── index.vue # 个人中心
|
|
│
|
|
├── components/ # 公共组件
|
|
│ ├── service-card/ # 服务卡片组件
|
|
│ ├── order-card/ # 订单卡片组件
|
|
│ └── game-category/ # 游戏分类组件
|
|
│
|
|
├── mock/ # Mock数据
|
|
│ ├── categories.js # 游戏分类数据
|
|
│ ├── services.js # 服务数据
|
|
│ ├── orders.js # 订单数据
|
|
│ ├── user.js # 用户数据
|
|
│ ├── players.js # 选手数据
|
|
│ ├── evaluations.js # 评价数据
|
|
│ └── index.js # 统一导出
|
|
│
|
|
├── static/ # 静态资源
|
|
│ ├── images/ # 图片
|
|
│ └── icons/ # 图标
|
|
│
|
|
├── App.vue # 应用入口
|
|
├── main.js # 主入口
|
|
├── uni.scss # 全局样式变量
|
|
├── pages.json # 页面配置
|
|
├── manifest.json # 应用配置
|
|
└── package.json # 项目配置
|
|
```
|
|
|
|
## 🎯 核心功能
|
|
|
|
### 1. 首页
|
|
- ✅ 搜索功能入口
|
|
- ✅ 游戏分类横向滚动
|
|
- ✅ 服务类型快捷入口
|
|
- ✅ 热门服务推荐
|
|
|
|
### 2. 服务列表
|
|
- ✅ 按分类筛选
|
|
- ✅ 多种排序方式(价格/销量/评分)
|
|
- ✅ 服务卡片展示
|
|
|
|
### 3. 服务详情
|
|
- ✅ 服务信息展示
|
|
- ✅ 商家信息
|
|
- ✅ 用户评价
|
|
- ✅ 一键下单
|
|
|
|
### 4. 订单管理
|
|
- ✅ 创建订单(表单填写)
|
|
- ✅ 订单列表(Tab分类)
|
|
- ✅ 订单详情(状态流转)
|
|
- ✅ 订单操作(支付/取消/确认/评价)
|
|
|
|
### 5. 个人中心
|
|
- ✅ 用户信息展示
|
|
- ✅ 资产信息(余额/积分/优惠券)
|
|
- ✅ 订单统计
|
|
- ✅ 功能菜单
|
|
|
|
## 🎨 设计系统
|
|
|
|
### 配色方案
|
|
```scss
|
|
// 主色调
|
|
$neon-cyan: #00ffff // 青色霓虹(主色)
|
|
$neon-magenta: #ff00ff // 洋红霓虹
|
|
$neon-blue: #0099ff // 蓝色霓虹
|
|
$neon-pink: #ff1493 // 粉色霓虹
|
|
|
|
// 背景色
|
|
$bg-primary: #0a0e27 // 主背景
|
|
$bg-secondary: #0f1229 // 次背景
|
|
$bg-tertiary: #1a1d3a // 三级背景
|
|
|
|
// 文字颜色
|
|
$text-primary: #ffffff // 主文字
|
|
$text-secondary: #a0a4c4 // 次文字
|
|
$text-tertiary: #7a7e9d // 三级文字
|
|
```
|
|
|
|
### 视觉元素
|
|
- **霓虹边框**: 青色发光边框
|
|
- **渐变背景**: 深色渐变卡片背景
|
|
- **扫描线**: 赛博朋克扫描动画
|
|
- **光效**: 霓虹光晕效果
|
|
- **粒子**: 数字雨背景(可选)
|
|
|
|
## 🚀 快速开始
|
|
|
|
### 环境要求
|
|
- Node.js >= 14.x
|
|
- HBuilderX (推荐) 或 微信开发者工具
|
|
|
|
### 方式一:使用 HBuilderX (推荐)
|
|
|
|
1. **安装 HBuilderX**
|
|
- 下载地址: https://www.dcloud.io/hbuilderx.html
|
|
|
|
2. **导入项目**
|
|
```
|
|
HBuilderX > 文件 > 导入 > 从本地目录导入
|
|
选择 game-service-miniapp 文件夹
|
|
```
|
|
|
|
3. **运行到微信开发者工具**
|
|
```
|
|
运行 > 运行到小程序模拟器 > 微信开发者工具
|
|
```
|
|
|
|
### 方式二:使用命令行
|
|
|
|
1. **安装依赖**
|
|
```bash
|
|
cd game-service-miniapp
|
|
npm install
|
|
```
|
|
|
|
2. **运行开发环境**
|
|
```bash
|
|
npm run dev:mp-weixin
|
|
```
|
|
|
|
3. **用微信开发者工具打开**
|
|
```
|
|
打开微信开发者工具
|
|
导入项目 > 选择 dist/dev/mp-weixin 目录
|
|
```
|
|
|
|
## 📱 功能演示
|
|
|
|
### 首页
|
|
- 顶部搜索栏 + 通知按钮
|
|
- 游戏分类滑动选择
|
|
- 服务类型网格
|
|
- 热门服务瀑布流
|
|
|
|
### 服务详情
|
|
- 大图封面展示
|
|
- 价格、评分、销量统计
|
|
- 商家信息卡片
|
|
- 用户评价列表
|
|
- 底部下单按钮
|
|
|
|
### 订单流程
|
|
```
|
|
浏览服务 → 查看详情 → 填写订单 → 确认下单 →
|
|
待支付 → 待接单 → 进行中 → 待确认 → 已完成 → 评价
|
|
```
|
|
|
|
## 📊 Mock数据说明
|
|
|
|
项目包含完整的Mock数据,无需后端即可运行:
|
|
|
|
- **8种游戏分类**: 王者荣耀、英雄联盟、VALORANT等
|
|
- **10+服务套餐**: 代练、陪玩、教学等
|
|
- **5个订单示例**: 覆盖各种订单状态
|
|
- **4位选手数据**: 包含头像、评分、接单数
|
|
- **5条用户评价**: 展示评价系统
|
|
|
|
所有数据位于 `/mock` 目录,可根据需求自行修改。
|
|
|
|
## 🎯 下一步计划
|
|
|
|
- [ ] 接入真实后端API
|
|
- [ ] 支付功能集成
|
|
- [ ] IM聊天系统
|
|
- [ ] 分享功能
|
|
- [ ] 更多动效优化
|
|
- [ ] 性能优化
|
|
|
|
## 📝 注意事项
|
|
|
|
1. **图片资源**: 项目使用 picsum.photos 占位图,实际使用时需替换为真实图片
|
|
2. **AppID配置**: manifest.json 中的 appid 需替换为你的小程序appid
|
|
3. **API接口**: 当前使用Mock数据,接入后端时需修改 `/api` 目录
|
|
4. **支付功能**: 支付相关功能为演示,实际使用需接入微信支付
|
|
|
|
## 💡 技术栈
|
|
|
|
- **框架**: uni-app (Vue 3)
|
|
- **语言**: JavaScript ES6+
|
|
- **样式**: SCSS
|
|
- **状态管理**: Pinia (可选)
|
|
- **构建工具**: Vue CLI
|
|
|
|
## 📄 License
|
|
|
|
MIT License
|
|
|
|
## 🙏 致谢
|
|
|
|
感谢 uni-app 团队提供的优秀跨端框架!
|
|
|
|
---
|
|
|
|
**🎮 Powered by Cyber Tech - 让游戏服务更智能**
|