场地预约小程序

一个基于 Taro + Vue3 + NutUI 开发的场地预约管理微信小程序，用于校园活动场地的预约、审核和管理。

📋 项目简介

本项目是一个场地预约管理系统的微信小程序端，提供以下核心功能：

• 🏢 场地展示：查看可预约场地列表及详细信息
• 📅 在线预约：选择时段、填写活动信息并提交预约
• 📝 预约管理：查看个人预约记录和审核状态
• 📸 活动记录：活动结束后上传现场照片
• 🔔 消息通知：预约状态变更的订阅消息推送

🛠️ 技术栈

• 框架: Taro 4.1.4 - 多端统一开发框架
• UI库: Vue 3.3.0 - 渐进式 JavaScript 框架
• 组件库: NutUI-Taro 4.2.8 - 京东风格的移动端组件库
• 构建工具: Webpack 5
• 包管理器: pnpm 9.15.4
• 代码规范: ESLint

📁 项目结构

twminiapp/
├── src/
│   ├── pages/              # 页面目录
│   │   ├── home/          # 首页 - 场地展示
│   │   ├── booking/       # 预约页 - 填写预约信息
│   │   ├── booking-detail/ # 预约详情 - 查看和上传照片
│   │   └── my-bookings/   # 我的预约 - 预约记录管理
│   ├── utils/             # 工具函数
│   │   └── request.js     # 网络请求封装
│   ├── assets/            # 静态资源
│   │   ├── icons/         # 图标
│   │   └── images/        # 图片
│   ├── app.config.js      # 页面配置
│   ├── app.css           # 全局样式
│   └── app.js            # 入口文件
├── config/                # 构建配置
│   ├── dev.js            # 开发环境配置
│   ├── prod.js           # 生产环境配置
│   └── index.js          # 基础配置
├── dist/                  # 编译输出目录
├── package.json          # 项目依赖
└── project.config.json   # 微信小程序配置

🚀 快速开始

环境要求

• Node.js >= 16
• pnpm >= 9.15.4
• 微信开发者工具

安装依赖

# 使用 pnpm 安装依赖
pnpm install

开发调试

# 启动微信小程序开发模式
pnpm run dev:weapp

构建打包

# 构建微信小程序生产版本
pnpm run build:weapp

📱 功能特性

1. 场地展示（首页）

• 场地列表卡片展示
• 查看场地详细信息（容纳人数、设备、预约状态）
• 已预约时间段展示
• 快速跳转预约

2. 场地预约

• 表单验证：

  • 日期选择（日历组件）
  • 时段选择（时分精确到分钟）
  • 学院选择（下拉菜单 + 自定义输入）
  • 指导老师和学生信息
  • 活动名称和简介
  • 参与人数限制（1-1000人）

• 智能提醒：

  • 时间冲突检测
  • 预约须知弹窗
  • 表单错误提示

• 用户体验：

  • 首次使用强制阅读须知
  • 订阅消息推送
  • 提交成功后自动跳转

3. 我的预约

• 预约记录列表
• 审核状态展示（待审核/已通过/已拒绝）
• 查看预约详情
• 删除预约记录

4. 预约详情

• 完整预约信息展示
• 活动照片上传（1-3张）
• 照片预览和删除
• 审核意见查看

🔧 配置说明

API 配置

在 src/utils/request.js 中配置后端 API 地址：

const BASE_URL = 'https://your-api-domain.com'

小程序配置

在 project.config.json 中配置小程序 AppID：

{
  "appid": "your-appid-here"
}

订阅消息配置

在 src/pages/booking/index.vue 中配置消息模板 ID：

wx.requestSubscribeMessage({
  tmplIds: ['your-template-id']
})

📝 开发规范

代码风格

• 使用 ESLint 进行代码检查
• Vue 3 Composition API 风格
• 使用 <script setup> 语法糖

命名规范

• 组件文件：index.vue
• 样式文件：index.scss
• 配置文件：index.config.js

Git 提交规范

feat: 新功能
fix: 修复问题
docs: 文档更新
style: 代码格式调整
refactor: 重构代码
test: 测试相关
chore: 构建/工具链更新

🌐 API 接口

场地相关

• GET /api/v1/utils/places - 获取场地列表

预约相关

• POST /api/v1/bookings/ - 创建预约
• GET /api/v1/bookings/my - 获取我的预约列表
• GET /api/v1/bookings/{id} - 获取预约详情
• DELETE /api/v1/bookings/{id} - 删除预约

图片上传

• POST /api/v1/bookings/{id}/upload_image - 上传活动照片

🎨 主题定制

项目使用 NutUI 组件库，可在 src/app.css 中自定义主题色：

:root {
  --primary-color: #your-color;
}

📋 TODO

状态管理优化

• 引入 Pinia 状态管理
  • 创建 Auth Store - 统一管理 token 和登录状态
  • 创建 Venue Store - 缓存场地数据，减少重复请求
  • 创建 User Store - 管理用户信息（姓名、学工号）
  • 创建 Booking Store - 管理预约列表和草稿
  • 配置持久化插件 - 自动同步到 wx.Storage
  • 重构 request.js - 使用 Auth Store 管理 token
  • 优化页面组件 - 使用 Store 替代本地状态

功能优化

• 添加预约草稿保存功能
• 实现离线缓存机制
• 优化图片上传体验（压缩、预览）
• 添加预约提醒功能

性能优化

• 启用 Taro 持久化缓存
• 优化首屏加载速度
• 实现场地数据懒加载