抖音小程序 - 体育场馆

一部手机管好整个场馆。基于抖音小程序（字节跳动小程序）原生框架开发的综合体育场馆运营管理模板，开箱即用，可二次开发接入真实场地、会员与支付能力。

一、产品简介

抖音小程序 - 体育场馆 是一套面向城市综合体育中心、球类馆、健身房的场馆运营管理类小程序源码。覆盖「场地状态总览 → 订场下单 → 到场使用 → 维护工单 → 数据看板」完整运营闭环，界面精致、交互流畅、布局自适应。内置本地模拟数据与模拟接口层（场地、订单、工单、设置完整 CRUD），无需后端即可在抖音开发者工具中直接预览运行，是搭建体育场馆、文体中心、球馆预约类小程序的优质起步模板。

二、功能介绍

1. 工作台（首页）

• 场馆品牌信息与营业时间展示

• 概览统计：总场地、空闲、占用、维护数量

• 今日营收实时汇总

• 快捷入口：场地总览 / 订场管理 / 服务工单 / 场馆设置（固定双列）

• 场地速览（双列卡片，含编号、状态、类型、价格）

• 运营提醒公告

• 待处理工单列表

2. 场地总览（CRUD）

• 场地关键字搜索（名称 / 编号 / 类型）

• 类型筛选：羽毛球 / 篮球 / 游泳 / 网球 / 乒乓球 / 健身 / 足球

• 状态筛选：空闲 / 使用中 / 已预约 / 维护中

• 场地双列卡片网格（编号、状态标签、名称、类型、标签、价格）

• 一键新增场地

3. 场地详情

• 场地编号、名称、状态、价格、属性标签

• 场地信息：类型、区域位置、今日订单数

• 状态切换（双列：空闲 / 使用中 / 已预约 / 维护中）

• 调整价格、立即开单、删除场地

4. 订场管理（CRUD）

• 订单关键字搜索（场地编号 / 名称 / 用户）

• 状态筛选：待确认 / 已付款 / 使用中 / 已完成 / 已取消

• 待确认订单汇总提醒

• 订单卡片：场地、用户、时段、时长、渠道、金额、状态

• 一键新增订场订单

5. 订单详情

• 场地编号、名称、订单状态、金额

• 订单信息：预订人、电话、日期、时段、时长、渠道、备注

• 订单流程进度条（待确认 → 已付款 → 使用中 → 已完成）

• 操作：确认并收款、开始使用、完成结算、取消订单、删除订单

• 订单状态自动联动场地状态

6. 服务工单（CRUD）

• 按状态筛选：待处理 / 处理中 / 已完成

• 按类型筛选：场地维护 / 设备检修 / 卫生保洁 / 客需服务 / 安全巡检

• 工单卡片：场地、标题、类型、处理人、优先级、创建时间

• 操作：开始处理、标记完成、删除、一键新增

7. 我的（个人中心）

• 场馆信息卡（名称、运营方、等级、地址、营业时间）

• 数据看板（双列）：使用中 / 维护中 / 待确认 / 待办工单

• 运营设置开关：超时提醒 / 自动释放 / 会员核验 / 夜场模式

• 数据管理：恢复初始数据、清除本地缓存

• 版本信息

8. 底部导航

• 自定义 TabBar：工作台 / 场地 / 订场 / 工单 / 我的

三、使用场景

四、技术特点

• 框架：抖音小程序（字节跳动小程序）原生开发，基于 tt API

• 界面：自定义导航栏 + 自定义 TabBar，适配状态栏与右上角原生胶囊按钮；体育主题视觉（能量橙 + 深炭灰 + 草场绿渐变）

• 数据：内置本地 Mock 数据与模拟接口层（utils/mock-api.js），基于本地存储模拟后端 CRUD，调用方式贴近真实 API

• 业务逻辑完备：场地/订单/工单全链路增删改查、订单状态流转、场地与订单状态自动联动、运营数据看板汇总

• 自适应布局：所有列表/网格使用 CSS Grid 双列布局（repeat(2, minmax(0,1fr))），不同手机屏宽下始终保持固定 2 列展示

• 结构：页面（pages）、组件（components）、数据（data）、工具（utils）、资源（assets）分层清晰，注释完善

• 图标：内置多套配色图标资源

• 版本管理：含 APP 版本号机制，发版时自动清空旧缓存与旧数据，保证真机调试始终为最新代码

五、交付内容

项目目录结构（解压后）

源码_体育场馆/
├── app.js                  # 小程序入口（导航栏适配、版本缓存初始化）
├── app.json                # 全局配置（页面路由、窗口、自定义组件）
├── app.ttss                # 全局样式（主题变量、通用类）
├── project.config.json     # 项目配置
├── assets/                 # 静态资源（多套配色图标）
├── components/             # 公共组件
│   ├── tabbar/             # 自定义底部导航
│   └── empty/              # 空状态组件
├── data/
│   ├── mock-data.js        # 种子演示数据（场地/订单/工单/公告/设置）
│   └── mock-data.json      # 同结构 JSON 数据
├── utils/
│   └── mock-api.js         # 模拟接口层（场地/订单/工单/设置 CRUD + 看板）
└── pages/                  # 页面
    ├── index/              # 工作台（首页）
    ├── venues/             # 场地总览
    ├── venue-detail/       # 场地详情
    ├── orders/             # 订场管理
    ├── order-detail/       # 订单详情
    ├── services/           # 服务工单
    └── my/                 # 我的（设置/数据管理）

六、运行方式

1. 下载并安装 抖音开发者工具（字节跳动小程序开发者工具）。

2. 解压 源码_体育场馆.zip。

3. 在开发者工具中选择「导入项目」，项目目录指向解压后的 源码_体育场馆 文件夹。

4. 填写自己的 AppID（或使用测试号），点击导入即可预览。

5. 真机调试时如遇旧缓存，可在「我的」页点击「清除本地缓存」，或调大 app.js 中 APP_VER 版本号强制刷新。

6. 如需接入真实能力，替换 utils/mock-api.js 中的场地、订单、工单等接口实现，对接实际后端即可上线运营。

说明：源码中所有场馆、公司、人员、地址、电话均为演示占位数据，无任何真实信息。