# 🎮 游戏服务交易平台 - 电竞赛博朋克风格

> 基于 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 - 让游戏服务更智能**