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

基于 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. 个人中心

• ✅ 用户信息展示
• ✅ 资产信息(余额/积分/优惠券)
• ✅ 订单统计
• ✅ 功能菜单

🎨 设计系统

配色方案

// 主色调
$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. 安装依赖

   cd game-service-miniapp
   npm install
   

2. 运行开发环境

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