宿舍洗衣房自助预约小程序

项目介绍

本项目是面向高校宿舍场景的洗衣房自助预约系统，覆盖学生端预约使用与管理端日常运营。学生可在微信小程序中查看楼栋洗衣房、按日期与小时时段预约洗衣机 / 烘干机，按需加购洗涤耗材，通过钱包余额完成支付；管理员通过 PC 后台维护洗衣房与设备、处理预约订单、发布公告并查看运营数据。适合作为计算机设计 / 课程设计的本地全栈演示项目。

技术组成

• 后端：Node.js + Express + MySQL
• 管理后台：Vue 3 + Element Plus + Vite + ECharts
• 客户端：微信原生小程序

---

一、小程序端功能（学生）

1. 首页与洗衣房浏览

• 展示运营配置的首页 Banner 轮播
• 按列表展示各楼栋洗衣房（封面、名称、位置、开放时间）
• 进入详情前校验登录状态，未登录跳转授权页

2. 洗衣房详情与时段预约

• 查看洗衣房多图封面、开放时间、位置说明
• 支持收藏 / 取消收藏当前洗衣房
• 周历选择预约日期（可切换上一周 / 下一周）
• 设备列表支持筛选：全部 / 洗衣机 / 烘干机
• 按时段格子展示设备空闲情况，三种状态区分：
  • 可选：可点击选中
  • 已约：他人已占用
  • 过期：当日已过去的时段
• 选定设备与一个或多个小时时段后进入确认页

3. 确认预约与支付

• 展示预约设备、日期时段与设备费用
• 可选加购洗涤耗材（按次计费，可多选）
• 预约人姓名、手机号直接读取个人资料，无需重复填写
• 支持会员折扣计价（VIP / SVIP）
• 使用钱包余额确认支付并生成预约订单

4. 公告

• TabBar「公告」查看各洗衣房相关通知列表
• 进入详情阅读富文本内容（支持图文）

5. 我的

• 展示头像、昵称、会员等级
• 入口包括：个人信息、洗衣钱包、我的预约、问题反馈、收藏洗衣房

6. 个人信息

• 更换微信头像
• 维护姓名、昵称、手机号、性别
• 查看当前会员等级

7. 洗衣钱包

• 查看账户余额
• 在线充值
• 查看充值、消费、退款等账户变动记录
• 累计充值达到门槛后自动升级会员：
  • 累计充值 ≥ 100：VIP（预约约 9.5 折）
  • 累计充值 ≥ 500：SVIP（预约约 9 折）

8. 我的预约

• 按状态查看预约订单（待付款 / 已付款 / 已取消 / 已完成等）
• 进入详情查看设备、时段、费用、耗材等信息
• 支持取消预约等订单操作（按业务规则处理退款）

9. 收藏洗衣房

• 查看已收藏洗衣房列表，可快速再次进入预约

10. 问题反馈

• 提交投诉建议：上传截图、填写问题描述与联系邮箱
• 查看历史提交记录及管理员回复

11. 登录授权

• 未登录时引导微信快捷登录，获取用户身份后进入预约流程

---

二、管理后台功能（管理员）

1. 登录与权限

• 管理员账号密码登录
• 登录后进入带侧栏菜单的后台主框架

2. 数据概览

• 展示核心运营数据（用户、订单、洗衣房等汇总）
• 近几日预约趋势等图表，便于掌握使用情况

3. Banner 管理

• 维护小程序首页轮播图
• 支持上传图片、排序、启用 / 停用

4. 洗衣房管理

• 新增 / 编辑 / 删除楼栋洗衣房
• 维护名称、封面图、位置描述、开放时段

5. 设备管理

• 为洗衣房配置洗衣机、烘干机
• 维护设备名称、类型、小时单价、备注说明与图片

6. 耗材管理

• 维护洗衣液、柔顺剂等可选加购项
• 设置所属洗衣房、单价、说明与图片

7. 预约订单

• 按状态、日期等条件查询学生预约单
• 查看订单详情并完成核销 / 状态处理

8. 用户管理

• 查看与编辑学生用户资料（姓名、昵称、手机号等）
• 区分普通学生与管理员角色

9. 公告管理

• 按洗衣房发布运营公告
• 使用富文本编辑器编写内容，支持插图
• 支持编辑、删除已有公告

10. 收藏统计

• 查看用户收藏洗衣房的汇总情况

11. 问题反馈

• 查看学生提交的反馈与截图信息
• 对反馈进行回复

12. 充值记录

• 查询钱包充值与相关流水，便于对账与运营统计

---

三、业务对象说明（便于理解功能边界）

名称	含义
洗衣房	按宿舍楼划分的洗衣场所
设备	洗衣机或烘干机，按小时时段预约
耗材	预约时可加购的洗涤用品
订单	一次设备预约记录（含时段、费用、可选耗材）
钱包	学生余额账户，用于充值与支付预约
公告	面向学生的洗衣房通知
收藏	学生对常用洗衣房的收藏
反馈	学生提交的问题 / 投诉建议

---

目录结构

node-room-xiyiji-yuyue-min/                      # 项目根目录（管理后台 + 后端 + 小程序）
│
├── admin/                                      # PC 管理后台：洗衣房运营侧 Web 端
│   ├── index.html                              # Vite 挂载页，承载 #app
│   ├── jsconfig.json                           # IDE / 编译路径别名（@ → src）
│   ├── package.json                            # 后台依赖与 npm 脚本（dev / build）
│   ├── vite.config.js                          # 开发服务器、别名、依赖预构建等配置
│   └── src/                                    # 后台业务源码
│       ├── main.js                             # 创建 Vue 应用，注册路由 / Pinia / Element Plus
│       ├── App.vue                             # 根组件，仅承载路由出口
│       ├── api/                                # 与 Express 通信的接口层
│       │   ├── index.js                        # 各业务接口方法（登录、CRUD、统计等）
│       │   └── request.js                      # axios 实例、Token 拦截、上传地址、BASE_URL
│       ├── assets/                             # 静态样式资源
│       │   └── main.css                        # 全局基础样式（页面卡片、表格区等）
│       ├── components/                         # 可复用业务组件
│       │   └── components/
│       │       ├── Editor.vue                  # Quill 富文本（公告内容编辑、插图上传）
│       │       └── ImageListUpload.vue         # 多图 / 单图上传（封面、Banner 等）
│       ├── layouts/                            # 页面骨架布局
│       │   └── MainLayout.vue                  # 登录后主框架：左侧菜单 + 顶栏 + 内容区
│       ├── router/                             # 前端路由
│       │   └── index.js                        # 路由定义与登录鉴权跳转
│       ├── stores/                             # Pinia 状态
│       │   └── user.js                         # 管理员 Token、用户信息存取与退出
│       ├── utils/                              # 通用工具
│       │   ├── formatTime.js                   # 接口返回时间字段统一格式化展示
│       │   └── media.js                        # 图片相对路径 ↔ 完整访问地址转换
│       └── views/                              # 业务页面（与侧栏菜单一一对应）
│           ├── Login.vue                       # 管理员登录页
│           ├── Welcome.vue                     # 数据概览：统计卡片与预约趋势图表
│           ├── Banner.vue                      # 首页轮播 Banner 增删改查、启停、排序
│           ├── Shop.vue                        # 楼栋洗衣房信息与封面维护
│           ├── Cate.vue                        # 洗衣机 / 烘干机设备及单价维护
│           ├── Equ.vue                         # 洗涤耗材（洗衣液等）维护
│           ├── Order.vue                       # 预约订单查询与核销 / 状态处理
│           ├── User.vue                        # 学生用户资料维护
│           ├── News.vue                        # 洗衣房公告发布与富文本编辑
│           ├── Star.vue                        # 用户收藏洗衣房统计查看
│           ├── Question.vue                    # 用户问题反馈查看与回复
│           └── Paylist.vue                     # 钱包充值 / 消费流水查询
│
├── express/                                    # 后端 API 服务：供后台与小程序共用
│   ├── app.js                                  # 创建 Express、CORS、JWT、静态资源与错误处理
│   ├── package.json                            # 后端依赖与启动脚本（dev / prod）
│   ├── ecosystem.config.js                     # 生产环境 pm2 进程配置
│   ├── bin/
│   │   └── www                                 # HTTP 监听入口（默认端口 3564）
│   ├── config/                                 # 运行配置
│   │   ├── db.js                               # MySQL 连接参数（库名 / 账号 / 密码）
│   │   └── index.js                            # JWT 密钥、微信 APPID / APPSECRET 等
│   ├── util/                                   # 服务端工具
│   │   ├── index.js                            # 日期格式化、随机串等通用方法
│   │   └── wechat.js                           # 微信 code 换 openId 等登录辅助
│   ├── public/                                 # 对外可访问静态资源根目录
│   │   └── images/                             # 上传文件落盘目录（按业务分子目录）
│   │       ├── avatar/                         # 用户头像
│   │       ├── banner/                         # 首页 Banner 图
│   │       ├── shop/                           # 洗衣房封面图
│   │       ├── cate/                           # 设备图片
│   │       ├── equ/                            # 耗材图片
│   │       ├── news/                           # 公告正文插图
│   │       └── question/                       # 问题反馈截图
│   └── routes/                                 # 接口路由（按端拆分）
│       ├── index.js                            # 挂载 admin / web / upload 等子路由
│       ├── upload.js                           # 统一图片上传，返回相对路径
│       ├── paylistMid.js                       # 充值消费后写流水、更新余额的中间逻辑
│       ├── admin/                              # 管理后台专用接口（需管理员登录）
│       │   ├── index.js                        # admin 子路由汇总
│       │   ├── home.js                         # 概览统计、近几日趋势、排行等
│       │   ├── banner.js                       # Banner CRUD
│       │   ├── shop.js                         # 洗衣房 CRUD
│       │   ├── cate.js                         # 设备 CRUD（含洗涤 / 烘干类型）
│       │   ├── equ.js                          # 耗材 CRUD
│       │   ├── order.js                        # 订单列表、详情、状态变更
│       │   ├── user.js                         # 后台登录、用户列表与编辑
│       │   ├── news.js                         # 公告 CRUD
│       │   ├── star.js                         # 收藏数据查询
│       │   ├── question.js                     # 反馈列表、回复、删除
│       │   └── paylist.js                      # 充值流水查询
│       └── web/                                # 小程序端接口（学生侧）
│           ├── index.js                        # web 子路由汇总
│           ├── banner.js                       # 首页启用中的 Banner 列表
│           ├── shop.js                         # 洗衣房列表与详情
│           ├── cate.js                         # 某洗衣房下的设备列表
│           ├── equ.js                          # 某洗衣房下的可选耗材
│           ├── order.js                        # 下单、订单列表、取消 / 完成等
│           ├── user.js                         # 微信登录、资料查询与更新
│           ├── news.js                         # 公告列表与详情
│           ├── star.js                         # 收藏 / 取消收藏、收藏列表
│           ├── question.js                     # 提交反馈、我的反馈列表
│           ├── wallet.js                       # 钱包余额查询
│           ├── paylist.js                      # 钱包流水、充值入账
│           └── address.js                      # 地址相关（预留 / 辅助）
│
├── min/                                        # 微信原生小程序（学生端）
│   ├── app.js                                  # 小程序生命周期入口
│   ├── app.json                                # 页面注册、窗口主题、TabBar 配置
│   ├── app.wxss                                # 全局主题色、通用布局工具类
│   ├── project.config.json                     # 微信开发者工具工程配置
│   ├── project.private.config.json             # 本机私有配置（不建议提交敏感项）
│   ├── sitemap.json                            # 小程序索引配置
│   ├── components/                             # 自定义组件
│   │   ├── weekCalendar/                       # 周历：切换周、选择预约日期
│   │   │   ├── weekCalendar.js                 # 周数据计算与点击事件
│   │   │   ├── weekCalendar.json               # 组件声明
│   │   │   ├── weekCalendar.wxml               # 周历结构
│   │   │   └── weekCalendar.wxss               # 周历样式（选中日高亮）
│   │   └── wxParse/                            # 富文本渲染（公告 HTML 展示）
│   │       └── wxParse/
│   │           ├── wxParse.js                  # 组件逻辑
│   │           ├── wxParse.json
│   │           ├── wxParse.wxml                # 节点递归渲染模板
│   │           ├── wxParse.wxss
│   │           └── utils/                      # HTML 解析、转码等内部工具
│   ├── images/                                 # 本地静态图
│   │   ├── banner.jpg                          # 列表缺省封面占位图
│   │   ├── checked.png                         # 选中态图标
│   │   ├── right.png                           # 「我的」列表右箭头
│   │   ├── star.png / star1.png                # 未收藏 / 已收藏图标
│   │   └── tabbar/                             # 底部导航普通态 / 选中态图标
│   │       ├── index.png / index_active.png    # 「洗衣房」Tab
│   │       ├── news.png / news_active.png      # 「公告」Tab
│   │       └── my.png / my_active.png          # 「我的」Tab
│   ├── utils/                                  # 小程序工具层
│   │   ├── request.js                          # wx.request 封装、baseUrl、Token、时间字段处理
│   │   ├── api.js                              # 各业务请求方法（对接 express/web）
│   │   ├── util.js                             # 时间格式化、开放时段格子生成（可选/已约/过期）
│   │   ├── date.js                             # 本周 / 上下周日期列表
│   │   ├── media.js                            # 图片相对路径补全为可访问完整地址
│   │   ├── feedback.js                         # 统一 Toast、二次确认弹窗
│   │   └── markdown.js                         # Markdown 辅助（如有历史内容处理）
│   └── pages/                                  # 业务页面（每个目录含 js/json/wxml/wxss）
│       ├── index/                              # 首页：Banner 轮播 + 附近洗衣房列表
│       ├── detail/                             # 详情：封面、收藏、周历、设备筛选与时段预约
│       ├── comfirm/                            # 确认页：选耗材、读取个人资料、确认支付
│       ├── newsList/                           # 公告列表（TabBar）
│       ├── newsDetail/                         # 公告详情（富文本展示）
│       ├── my/                                 # 个人中心入口：钱包、订单、收藏、反馈等
│       ├── userInfo/                           # 个人信息编辑（头像、姓名、手机、性别等）
│       ├── wallet/                             # 钱包余额与账户变动记录
│       ├── walletAdd/                          # 钱包充值
│       ├── orderList/                          # 我的预约列表（按状态筛选）
│       ├── orderDetail/                        # 单笔预约详情与操作
│       ├── star/                               # 我收藏的洗衣房
│       ├── question/                           # 投诉建议提交 + 我的反馈记录
│       └── auth/                               # 未登录时的微信快捷登录引导
│
├── db_laundry_room.sql                         # 完整建库建表及初始演示数据脚本
├── init-db.sh                                  # 一键导入 SQL、创建数据库的辅助脚本
├── 演示材料/                                   # 答辩 / 演示用材料目录
├── 运行手册.md                                 # 运行环境与各端启动步骤说明
└── 项目说明.md                                 # 项目介绍与目录说明（本文档）