LimeLive - 运动场馆直播平台

📋 项目概述

LimeLive 是一个基于微信小程序的运动场馆直播平台，为运动场馆提供专业的直播解决方案，支持篮球、足球、网球等多种运动项目的实时直播和精彩视频生成。

🏗️ 项目架构

技术栈

• 前端框架: Taro 3.x + Vue 3 + TypeScript
• UI组件: 自定义组件 + Taro UI
• 状态管理: Vue 3 Composition API
• 样式: SCSS + Tailwind CSS
• 构建工具: Taro CLI
• 后端: Node.js + Express + Prisma ORM
• 数据库: MySQL
• 支付: 微信支付
• 直播: WebView + 第三方直播平台集成

项目结构

LimeLive/
├── admin/                    # 管理后台 (Next.js)
│   ├── src/
│   │   ├── app/             # 页面组件
│   │   ├── components/      # 通用组件
│   │   ├── lib/            # 工具库
│   │   └── store/          # 状态管理
│   └── config/             # 配置文件
├── client/                  # 客户端应用 (Next.js)
│   ├── src/
│   │   ├── app/            # 页面路由
│   │   ├── components/     # 组件库
│   │   ├── lib/           # 工具库
│   │   └── services/      # API服务
│   └── styles/            # 样式文件
├── weapp/                  # 微信小程序 (Taro)
│   ├── src/
│   │   ├── pages/         # 页面组件
│   │   ├── components/    # 通用组件
│   │   ├── services/      # API服务
│   │   ├── lib/          # 工具库
│   │   └── config/       # 配置文件
│   └── dist/             # 构建输出
├── server/                 # 后端服务 (Node.js)
│   ├── routes/            # 路由模块
│   ├── middleware/        # 中间件
│   ├── database/          # 数据库配置
│   ├── prisma/           # 数据库模型
│   └── scripts/          # 脚本工具
└── docs/                  # 文档

🎯 核心业务功能

1. 场馆管理

• 场馆信息管理: 场馆基本信息、位置、设施配置
• 场地管理: 多场地支持，场地状态实时更新
• 在线状态监控: 实时监控场馆直播状态

2. 直播服务

• 多平台直播: 支持抖音、视频号等主流直播平台
• 小程序直播: 内置小程序直播功能
• 直播套餐: 灵活的价格套餐体系
  • 平台直播: ¥25/半小时
  • 小程序直播: ¥35/半小时
• 精彩视频生成: 自动生成比赛精彩片段，云端保存7天

3. 用户系统

• 用户认证: 微信授权登录
• 会员体系: VIP会员权益管理
• 订单管理: 直播订单、支付记录
• 观看历史: 用户观看记录管理

4. 支付系统

• 微信支付: 集成微信小程序支付
• 订单管理: 完整的订单生命周期管理
• 费用计算: 根据套餐和时长自动计算费用
• 支付状态: 实时支付状态同步

📱 小程序页面结构

主要页面

• 首页 (/pages/index): 场馆列表、推荐内容
• 场馆详情 (/pages/zone): 场馆信息、精彩瞬间、比赛直播
• 比赛详情 (/pages/competition-detail): 比赛信息、发起直播
• 场馆选择 (/pages/venue-select): 场馆和场地选择
• 直播播放器 (/pages/live-player): 横屏直播播放
• 个人中心 (/pages/profile): 用户信息、设置
• VIP中心 (/pages/vip): 会员权益、购买
• 订单管理 (/pages/orders): 订单列表、详情

核心组件

• CreateLiveModal: 创建直播弹窗组件
• LiveStream: 直播流组件
• CompetitionItem: 比赛项目组件
• AuthModal: 授权弹窗组件

🛠️ 开发指南

环境要求

• Node.js >= 16.0.0
• npm >= 8.0.0
• 微信开发者工具
• MySQL >= 8.0

安装依赖

# 安装根目录依赖
npm install

# 安装小程序依赖
cd weapp && npm install

# 安装后端依赖
cd server && npm install

# 安装管理后台依赖
cd admin && npm install

开发命令

# 小程序开发
cd weapp
npm run dev:weapp          # 微信小程序开发模式
npm run build:weapp        # 构建微信小程序

# 后端开发
cd server
npm run dev               # 开发模式
npm run start             # 生产模式

# 管理后台开发
cd admin
npm run dev               # 开发模式
npm run build             # 构建生产版本

数据库配置

1. 创建MySQL数据库
2. 配置 server/config/production.env 或 development.env
3. 运行数据库迁移:

cd server
npx prisma migrate dev
npx prisma generate

🔧 配置说明

小程序配置

• app.config.ts: 全局配置、页面路由、权限设置
• 项目配置: project.config.json 微信小程序项目配置

后端配置

• 环境变量: 数据库连接、API密钥、支付配置
• 中间件: 认证、错误处理、日志记录
• 路由模块: 按平台分类的API路由

支付配置

• 微信支付: 商户号、应用ID、API密钥配置
• 支付流程: 订单创建 → 支付参数生成 → 支付回调处理

📊 业务流程图

直播创建流程

用户选择场馆 → 选择场地 → 创建直播弹窗 → 填写比赛信息 → 选择套餐 → 支付 → 开始直播

支付流程

创建订单 → 生成支付参数 → 微信支付 → 支付回调 → 订单状态更新 → 直播权限开通

🚀 部署说明

小程序部署

1. 构建小程序: npm run build:weapp
2. 上传到微信开发者工具
3. 提交审核发布

后端部署

1. 配置生产环境变量
2. 构建应用: npm run build
3. 使用 PM2 部署: pm2 start ecosystem.config.cjs