完全开源-支持二开-可做毕业答辩-全源码提供-一站式场地租赁预约平台 — 从需求到落地的全栈实践

码视野

364人浏览 · 2026-05-01 00:14:12

码视野 · 2026-05-01 00:14:12 发布

完全开源-支持二开-可做毕业答辩-全源码提供-一站式场地租赁预约平台 — 从需求到落地的全栈实践

一个面向场地租赁行业的预约与管理平台，覆盖预约端 + 管理后台，基于 Vue 3 构建。

项目背景

场地租赁行业长期面临几个痛点：时段管理混乱、人工统计效率低、入场验证繁琐、拼场分摊费用难协调。场地租赁预约小程序正是为了解决这些问题而设计的一站式平台，目标是打通"场地浏览 → 时段选择 → 在线预约 → 支付 → 入场验证 → 拼场分摊"的完整业务闭环。

适用场景包括：羽毛球馆、网球场、篮球场、自习室、会议室、排练厅、棋牌室、露营地等各类场地租赁场所。

技术选型

层级	技术栈
前端框架	Vue 3 + Composition API
路由	Vue Router 4
状态管理	Pinia
构建工具	Vite
UI 风格	自定义 CSS 变量体系，移动端优先
目标平台	微信小程序 / H5 / App（UniApp 可扩展）

功能全景

预约端（移动端）

预约端采用底部 Tab 导航，包含 5 个主入口和多个二级页面。

1. 登录页

支持微信一键登录和手机号登录两种方式，底部提供管理员入口。

2. 首页

展示场地分类入口（羽毛球、网球、篮球、会议室、自习室等）、推荐场地和热门拼场列表。

3. 场地浏览与详情

场地列表支持分类筛选和价格排序，场地详情页包含照片轮播、设施标签、使用规则、价格表等完整信息，底部提供收藏和预约两个操作按钮。

4. 时段选择与预约

预约日历页支持日期选择，时段网格展示可用/已占用/已锁定状态，点击选择连续时段后自动计算价格。确认页展示预约信息和价格明细，支付完成后生成入场码。

5. 我的预约

列表页支持按状态筛选（全部/待支付/已支付/已完成/已取消），预约详情页展示场地信息、时段信息和入场码二维码。

6. 拼场功能

拼场列表展示正在招募的活动，支持按场地类型筛选。用户可以创建拼场并设置人数上限和人均价格，也可参与他人的拼场活动。

7. 消息中心

按类型展示预约成功、入场提醒、拼场通知等消息，支持未读红点标记。

8. 个人中心

包含预约管理、拼场记录、收藏场地、意见反馈、设置等功能入口。

9. 更多功能页

优惠券：分"可使用/已使用/已过期"三栏展示
收藏的场地：支持取消收藏，点击跳转场地详情
意见反馈：选择反馈类型 + 文字描述 + 联系方式
设置：账号管理、通知开关、隐私政策、关于我们

管理后台（PC 端）

管理后台采用左侧边栏导航，包含 9 个功能模块。

1. 数据看板

展示核心运营指标：今日预约数、本月营收、场地利用率、服务完成率。下方提供预约趋势图和营收统计图。

2. 场地管理

场地列表展示场地名称、类型、状态等关键数据，支持搜索和筛选。提供新增场地、编辑、启用/停用等操作，可设置场地设施和照片。

3. 价格管理

时段定价支持按工作日/周末/节假日设置不同价格，可设置每个时段的价格和最少预约时长。

4. 场地占用热力图

日历网格展示场地 × 时段的占用情况，支持批量锁定/解锁时段，直观查看场地利用率。

5. 预约管理

实时展示各场地当前预约列表，支持按状态筛选，可查看预约详情和入场码，支持取消操作。

6. 拼场管理

拼场活动列表展示招募中/已满员/已完成等状态，支持查看参与者信息和取消活动。

7. 退款审批

分"待审批/已通过/已拒绝"三栏管理退款申请，支持一键通过或填写拒绝原因。

8. 财务报表

按日/月/年维度展示收入、退款、净收入等财务数据，支持自定义日期范围和 Excel 导出。

9. 权限管理

基于 RBAC 模型的角色权限矩阵，支持自定义角色和细粒度权限配置。

项目结构

08-frontend-venue-prd08/src/
├── router/index.js              # 路由配置
├── stores/
│   ├── app.js                 # Pinia 全局状态
│   ├── user.js                # 用户状态管理
│   ├── reservation.js         # 预约状态管理
│   └── share.js               # 拼场状态管理
├── api/
│   ├── request.js             # API 请求封装
│   ├── auth.js                # 认证相关 API
│   ├── venue.js               # 场地相关 API
│   ├── reservation.js          # 预约相关 API
│   ├── share.js               # 拼场相关 API
│   └── admin.js               # 管理端 API
├── utils/
│   ├── auth.js                # 认证工具函数
│   ├── pay.js                 # 支付工具函数
│   ├── qrcode.js              # 二维码生成工具
│   └── format.js              # 格式化工具函数
├── components/
│   ├── VenueCard.vue           # 可复用场地卡片
│   ├── TimeSlotPicker.vue     # 时段选择器组件
│   ├── CalendarView.vue        # 日历视图组件
│   ├── ShareCard.vue           # 拼场卡片组件
│   └── QRCodeDisplay.vue       # 二维码显示组件
├── pages/
│   ├── LoginPage.vue           # 登录
│   ├── MainLayout.vue          # Tab 布局容器
│   ├── HomePage.vue            # 首页
│   ├── VenuesPage.vue          # 场地列表
│   ├── VenueDetailPage.vue     # 场地详情
│   ├── BookingCalendarPage.vue # 预约日历（时段选择）
│   ├── BookingConfirmPage.vue   # 预约确认
│   ├── BookingPayPage.vue      # 支付
│   ├── BookingSuccessPage.vue   # 预约成功
│   ├── ReservationsPage.vue    # 我的预约
│   ├── ReservationDetailPage.vue # 预约详情
│   ├── SharesPage.vue          # 拼场列表
│   ├── ShareDetailPage.vue     # 拼场详情
│   ├── ShareCreatePage.vue     # 创建拼场
│   ├── MessagesPage.vue        # 消息中心
│   ├── MyPage.vue             # 个人中心
│   ├── CouponsPage.vue        # 优惠券
│   ├── FavoritesPage.vue      # 收藏场地
│   ├── FeedbackPage.vue       # 意见反馈
│   ├── SettingsPage.vue       # 设置
│   └── RefundPage.vue         # 退款申请
│   └── admin/
│       ├── AdminLayout.vue         # 管理后台布局
│       ├── DashboardPage.vue       # 数据看板
│       ├── VenueMgmtPage.vue       # 场地管理
│       ├── PricingMgmtPage.vue     # 价格管理
│       ├── OccupancyMgmtPage.vue   # 场地占用热力图
│       ├── ReservationMgmtPage.vue # 预约管理
│       ├── ShareMgmtPage.vue       # 拼场管理
│       ├── FinancePage.vue         # 财务报表
│       ├── OrgMgmtPage.vue         # 门店管理
│       └── RoleMgmtPage.vue       # 权限管理