2026最新多游戏H5掼蛋房卡

a5656456

### 核心功能清单

| # | 界面 | 文件路径 | 功能描述 |
|---|------|---------|---------|
| 01 | 游戏大厅 | `client/src/views/GameHall.vue` | 用户信息栏、资源显示(钻石/金币/房卡)、6大游戏入口(掼蛋/斗地主/跑得快/好友房/比赛/组队)、快捷操作、底部Tab导航 |
| 02 | 房间列表 | `client/src/views/RoomListPage.vue` | 房间筛选(按游戏类型)、房间卡片列表(房间号/类型/人数/消耗)、加入房间功能 |
| 03 | 创建房间 | `client/src/views/CreateRoomPage.vue` | 游戏类型选择(3种)、规则配置(局数/人数/红心配牌/历史查看等开关)、房卡消耗提示、创建确认 |
| 04 | 邀请玩家 | (集成在GameTablePage) | 四人座位布局(上/左/右/下)、玩家头像/状态、等待开始界面 |
| 05 | 掼蛋对局 | `client/src/views/GameTablePage.vue` | **核心界面** - 绿色牌桌背景、四人座位、手牌扇形展示(27张)、选牌出牌/不出/提示、操作按钮栏、侧边工具栏(聊天/表情/设置/解散)、计时器、离开确认弹窗 |
| 06 | 商城 | `client/src/views/ShopPage.vue` | 资源余额展示、钻石充值商品(4档+赠送)、房卡购买商品(4档+赠送)、支付方式选择(微信/支付宝/银行卡)、底部购买按钮 |
| 07 | 个人中心 | `client/src/views/PersonalCenterPage.vue` | 头像/VIP徽章、数据统计(总局数/胜场/胜率)、钱包资源(钻石/金币/房卡/可提现)、6宫格功能菜单(赠送/推广/提现/充值/设置/退出)、最近对局记录 |
| 08 | 卡票赠送 | `client/src/views/GiftPage.vue` | 资源类型选择(房卡/钻石/金币)、接收人输入(用户ID或手机号)、数量调节(+/-)、留言输入、余额校验、确认赠送 |
| 09 | 邀请推广 | `client/src/views/AgentPromotePage.vue` | **代理系统** - 未成为代理时:5级佣金体系展示(L1-L5各30%/15%/8%/4%/2%)、申请代理按钮;已是代理:等级/推广码/统计数据(可提现/累计佣金/下级代理/直属玩家)、推广二维码、佣金明细列表、团队树形统计 |
| 10 | 设置 | `client/src/views/SettingsPage.vue` | 账号信息、账号安全(改密/绑手机/绑微信)、偏好设置(音效/音乐/震动/深色模式-4个开关)、其他(版本号/协议/隐私政策/退出登录) |

### 后台管理系统

| 模块 | 功能 |
|------|------|
| 数据概览 | 总用户数/今日新增/订单总数/今日营收/代理商数 - 5大数据卡片 |
| 用户管理 | 搜索用户、详情查看、冻结/解封 |
| 代理审核 | 待审核代理列表、通过/拒绝操作 |
| 提现审核 | 待处理提现列表、风控标记(通过/可疑/风险)、通过打款/驳回 |
| 订单管理 | 充值订单查看与对账 |
| 系统配置 | 佣金比例/费率等参数在线修改 |

---

## 二、技术架构

```
guan-dan-game/
├── server/                          # Node.js 后端服务
│   ├── src/
│   │   ├── app.js                  # 服务入口
│   │   ├── config/
│   │   │   └── database.js         # 数据库配置
│   │   ├── routes/
│   │   │   ├── auth.js             # 认证路由(注册/登录/微信登录)
│   │   │   ├── user.js             # 用户路由(信息/代理申请/赠送/推广码)
│   │   │   ├── room.js             # 房间路由(创建/加入/列表/解散)
│   │   │   ├── game.js             # 游戏路由
│   │   │   ├── payment.js          # 支付路由(下单/回调/多通道/佣金分发)
│   │   │   ├── withdraw.js         # 提现路由(申请/记录/风控)
│   │   │   ├── agent.js            # 代理路由(信息/佣金/团队树)
│   │   │   └── admin.js            # 后台管理路由(概览/审核/配置)
│   │   └── utils/
│   │       └── db.js               # MySQL连接池封装
│   ├── database/
│   │   └── schema.sql              # 完整数据库设计(12张表)
│   └── package.json
│
├── client/                          # Vue3 H5前端
│   ├── src/
│   │   ├── main.js                 # 入口
│   │   ├── App.vue                 # 根组件
│   │   ├── router/index.js         # 路由(11个页面)
│   │   ├── stores/user.js          # Pinia状态管理
│   │   ├── api/index.js            # Axios封装
│   │   ├── assets/styles/global.css# 全局样式(移动端优先)
│   │   └── views/
│   │       ├── GameHall.vue        # 01 大厅
│   │       ├── Login.vue           # 登录页
│   │       ├── Register.vue        # 注册页
│   │       ├── RoomListPage.vue    # 02 房间列表
│   │       ├── CreateRoomPage.vue  # 03 创建房间
│   │       ├── GameTablePage.vue   # 04/05 对局界面
│   │       ├── ShopPage.vue        # 06 商城
│   │       ├── PersonalCenterPage.vue # 07 个人中心
│   │       ├── GiftPage.vue        # 08 赠送
│   │       ├── AgentPromotePage.vue # 09 推广代理
│   │       ├── SettingsPage.vue    # 10 设置
│   │       └── AdminDashboard.vue  # 后台管理
│   ├── index.html
│   ├── vite.config.js
│   └── package.json
```

### 技术栈

| 层级 | 技术 | 说明 |
|------|------|------|
| 前端框架 | Vue 3.4 + Vite 5 | Composition API, HMR热更新 |
| 状态管理 | Pinia 2.x | 轻量级全局状态 |
| 路由 | Vue Router 4 | Hash模式, 支持微信内嵌 |
| HTTP客户端 | Axios | 拦截器自动携带Token |
| 后端框架 | Express 4.x | RESTful API设计 |
| 数据库 | MySQL 8.0 | InnoDB引擎, 事务支持 |
| 认证 | JWT (jsonwebtoken) | 7天有效期Token |
| 密码加密 | bcryptjs | saltRounds=10 |
| 二维码 | qrcode | 推广码生成 |
| UI风格 | 原生CSS | 移动端480px适配, 暗色主题 |

请点击此处下载

查看状态：需购买或无权限

您的用户组是：游客

文件名称:网盘.txt 
下载次数:1  文件大小:188 Bytes 
下载权限: 至尊会员    [购买VIP]   [充值狗粮]  [免费赚狗粮]