小程序做的会议室预约管理系统

284 阅读2分钟

会议室预约微信小程序 (纯前端版)

这是一个基于微信小程序原生框架开发的、纯前端实现的会议室预约系统。它不依赖任何后端服务器或数据库,所有数据都存储在小程序的全局变量中,非常适合用于学习、演示或快速原型开发。

✨ 功能介绍

本项目包含两种角色:普通用户管理员

普通用户

  • 注册与登录:用户可以注册新账号,并使用账号密码登录。
  • 浏览会议室:查看所有可用的会议室及其详细信息(如容量)。
  • 提交预约:选择会议室、日期和时间,填写会议主题后提交预约申请。
  • 查看我的预约:在"我的"页面可以查看自己所有的预约记录及其审批状态(待审核、已通过、已驳回)。
  • 退出登录:可以安全退出当前账号。

管理员

  • 专属登录:使用预设的账号 admin 和密码 admin 登录,进入管理员后台。
  • 会议室管理
    • 新增会议室:可以添加新的会议室,并设置其名称、容量。
    • 删除会议室:可以删除不再使用的会议室。
  • 预约审批
    • 查看待审列表:可以查看所有用户提交的、状态为"待审核"的预约申请。
  • 退出登录:可以安全退出管理员账号。

🚀 技术实现

  • 框架: 微信小程序原生框架
  • 数据存储: 小程序全局变量 globalData (位于 app.js),用于模拟数据库。
  • UI: 使用原生 WXML/WXSS 构建界面,实现了简洁美观的UI。

🛠️ 如何运行

  1. 下载或克隆本项目代码到本地。
  2. 打开"微信开发者工具"。
  3. 点击"导入",选择本项目的根目录。
  4. 填写你自己的 AppID (如果没有,可使用测试号)。
  5. 点击"导入"即可在模拟器中查看和运行。

📁 文件结构

├── pages │ ├── admin # 管理员主页 │ ├── approval # 预约审批页 │ ├── book # 预约表单页 │ ├── index # 用户首页 (会议室列表) │ ├── login # 登录页 │ ├── my # 我的预约页 │ ├── register # 注册页 │ └── room-manage # 会议室管理页 ├── app.js # 小程序逻辑,全局数据初始化 ├── app.json # 全局配置,页面注册 ├── app.wxss # 全局样式 └── readme.md # 项目说明文档

登录.png

会议室管理.png

会议室列表.png

我的.png

预约审批.png

主页.png

注册.png