焕发造型 · 美发门店预约小程序

美发门店预约小程序

美发门店预约系统由三端组成：微信小程序（顾客端）、Vue3 管理后台（运营端）、Express API（服务端），共享同一 MySQL 业务库。

---

一、各端功能说明

1. 微信小程序（min/）

面向顾客的预约与会员入口，品牌为「焕发造型」。底部 Tab：门店 / 资讯 / 我的。

1.1 门店与预约

页面	功能说明
门店首页 index	展示 Banner、门店列表；进入指定门店开始预约
门店预约 detail	选择日期 → 服务项目 → 技师 → 可约时段；收藏门店；查看门店公告入口；项目可展开查看说明
确认预约 comfirm	确认项目/技师/时段，可加购护理；姓名、手机号可编辑并同步资料；钱包扣款下单
技师列表 stylistList	按门店查看在职技师
技师详情 stylistDetail	技师简介、擅长项目、作品集、顾客评价；可跳转回该门店预约并预选技师

预约规则（前端配合后端）：

• 时段按门店营业时间 / 技师个人档期计算，粒度半小时
• 技师请假、已被占用的时段不可约；过期未约用删除线，不向顾客展示「技师休息」等内部原因
• 下单成功生成预约码（order_no），费用从会员钱包扣除（项目价 + 加购，按 VIP/SVIP 折扣）

1.2 订单与评价

页面	功能说明
预约列表 orderList	按状态查看我的预约（待到店 / 已取消 / 已完成等）
预约详情 orderDetail	查看预约信息与预约码；符合条件时可取消（服务开始前 2 小时可退，退回钱包）
发表评价 reviewAdd	对已完成订单评分、文字与图片评价
我的评价 reviewMine	查看自己提交的评价及商家回复

1.3 资讯与内容

页面	功能说明
资讯列表 newsList	门店公告 / 活动列表（可按门店筛选）
资讯详情 newsDetail	富文本公告正文

1.4 会员中心

页面	功能说明
我的 my	登录态展示、入口汇总（订单、钱包、收藏、评价、反馈、资料等）
登录 auth	微信登录：wx.login code 换真实 openId；新用户默认头像「微信用户」；头像/昵称在个人信息页自行修改
个人信息 userInfo	编辑昵称、头像、姓名、手机号等
会员钱包 wallet	查看余额与流水
钱包充值 walletAdd	模拟充值入账（演示环境）
收藏门店 star	已收藏门店列表，快速进入预约
预约趋势 trend	本周 / 本月预约次数与时长、项目偏好（近 30 日柱状图已隐藏）
问题反馈 question	提交反馈；查看回复（每条反馈仅支持商家回复一次）

---

2. 管理后台（admin-vue3/）

面向门店运营人员的 Web 中台，按菜单分组如下。

2.1 数据洞察

模块	功能说明
运营概览 Welcome	门店/订单/会员等核心指标卡片，近期经营一览
数据分析 Analytics	预约量、门店排行等图表分析

2.2 门店运营

模块	功能说明
轮播管理 Banner	小程序首页 Banner 增删改、排序、启停
门店管理 Shop	门店名称、封面、地址、电话、营业时段维护
服务项目 Cate	按门店维护剪发/烫发/染发/护理/造型等项目：价格、时长、封面、是否热门
加购护理 Equ	预约时可加购的护理项（按门店）
技师管理 Stylist	技师资料、可服务项目、个人档期（可跟随门店）、在职状态；请假（全天/按小时）；档期预览；与待到店预约冲突时拦截请假（不自动取消退款），需先改约或换档期
作品管理 Works	技师作品图文，按门店/技师维护

2.3 交易与用户

模块	功能说明
预约订单 Order	订单查询、按预约码核销完成、取消退钱包；改派：先选同门店技师，再选日期与可约时段（可换日/换时段/换技师）
会员管理 User	会员列表与资料查看/维护
充值记录 Paylist	钱包充值流水查询

2.4 内容与反馈

模块	功能说明
公告管理 News	门店公告/活动富文本发布
收藏统计 Star	各门店被收藏次数统计
问题反馈 Question	查看顾客反馈并回复（每条仅可回复一次）
评价管理 Review	查看顾客评价并回复（每条仅可回复一次）

2.5 登录与权限

• 账号密码登录（管理员角色，演示账号见 运行手册.md）
• Token 存本地，路由守卫控制未登录跳转登录页

---

3. 服务端 API（express/）

统一业务与数据入口，静态资源与上传文件也由此提供。

3.1 接口分区

分区	路径前缀	用途
小程序端	/api/web/*	门店、项目、技师档期、下单、钱包、评价、收藏、公告、反馈等
管理端	/api/admin/*	上述资源的后台 CRUD、核销改派、统计概览等（需管理员鉴权）
上传	POST /api/upload	图片等文件上传（字段 file + bucket）
静态资源	/images/*	public/images 下的门店/项目/技师/作品等图片

3.2 核心业务能力

• 鉴权：Authorization: Bearer <token>；区分顾客与管理员
• 微信登录：必须 wx.login code 走 jscode2session 换到真实 openId 才发 Token；新用户默认昵称「微信用户」、默认头像 /images/avatar/default-avatar.jpg；头像/昵称在个人信息页修改。依赖 config/index.js 中 AppId / AppSecret 与当前小程序一致
• 档期引擎（util/schedule.js）：合并门店营业时间、技师个人档期、请假、已约订单，输出半小时粒度可约时段；小程序 slots 不返回请假原因等内部字段
• 下单与支付：校验门店/项目/技师归属与时段可用性；价格以后端项目 + 加购 + 会员折扣为准；钱包扣款；生成预约码
• 取消与退款：顾客须在服务开始前 2 小时取消并退钱包；管理端取消不受该时限限制
• 请假：与待到店预约时段冲突时接口返回 409 及冲突列表，不写入请假、不自动取消退款
• 核销与改派：待到店 → 已完成；改派须同门店在职技师，并校验目标日期/时段（请假、占用、服务时长）
• 库初始化（config/initDb.js）：首次启动可自动导入 db_hair_salon.sql（已存在则跳过）

3.3 统一响应约定

成功示例：{ code: 200, msg, data }。业务失败以非 200 的 code 与 msg 返回。

---

二、项目文件目录

约定：图片目录、第三方插件不展开；小程序页面只列目录名（内含标准 js/json/wxml/wxss）；关键目录与文件右侧备注用途。已排除 node_modules/、.git/、构建产物。

node-hair-salon-min/
├── db_hair_salon.sql              # 数据库结构 + 演示种子数据
├── 项目说明.md                     # 本说明（功能 + 目录）
├── 运行手册.md                     # 环境与启动步骤
├── SQL自动导入.md                  # 后端启动自动导库说明
├── 演示材料/                      # 演示素材
│   └── 演示视频.mp4               # 功能演示录像
├── .gitignore
│
├── express/                       # 后端 API（默认 :3564）
│   ├── app.js                     # Express 入口、中间件、静态目录挂载
│   ├── package.json
│   ├── bin/
│   │   └── www                    # HTTP 监听启动
│   ├── config/
│   │   ├── index.js               # 业务配置（小程序 AppId 等）
│   │   ├── dbConfig.js            # 数据库连接配置
│   │   ├── db.js                  # SQL 查询封装
│   │   └── initDb.js              # 首次启动建库 / 导入 SQL
│   ├── middleware/
│   │   └── auth.js                # Token 鉴权（顾客 / 管理员）
│   ├── util/
│   │   ├── schedule.js            # 档期 / 请假 / 可约时段计算
│   │   ├── wechat.js              # 微信登录（jscode2session，失败不发假 openId）
│   │   └── index.js               # 通用工具
│   ├── routes/
│   │   ├── index.js               # 路由总挂载
│   │   ├── upload.js              # 文件上传接口
│   │   ├── paylistMid.js          # 充值相关中间逻辑
│   │   ├── web/                   # 小程序端 API
│   │   │   ├── index.js           # web 路由汇总
│   │   │   ├── shop.js            # 门店列表 / 详情
│   │   │   ├── cate.js            # 服务项目
│   │   │   ├── stylist.js         # 技师列表 / 详情 / 可约时段（脱敏，不暴露请假原因）
│   │   │   ├── works.js           # 技师作品
│   │   │   ├── equ.js             # 加购护理
│   │   │   ├── order.js           # 下单 / 取消 / 我的预约
│   │   │   ├── wallet.js          # 钱包余额
│   │   │   ├── paylist.js         # 充值流水
│   │   │   ├── review.js          # 评价提交与查询
│   │   │   ├── news.js            # 公告资讯
│   │   │   ├── banner.js          # 首页轮播
│   │   │   ├── star.js            # 收藏门店
│   │   │   ├── question.js        # 问题反馈
│   │   │   ├── user.js            # 微信登录与资料
│   │   │   └── stats.js           # 个人预约趋势（本周本月 / 项目偏好）
│   │   └── admin/                 # 管理端 API（需管理员鉴权）
│   │       ├── index.js           # admin 路由汇总
│   │       ├── home.js            # 运营概览 / 排行统计
│   │       ├── shop.js            # 门店 CRUD、营业时段
│   │       ├── cate.js            # 服务项目 CRUD
│   │       ├── stylist.js         # 技师 / 档期 / 请假（冲突拦截）
│   │       ├── works.js           # 作品 CRUD
│   │       ├── equ.js             # 加购项 CRUD
│   │       ├── order.js           # 订单核销 / 取消 / 改派（技师+日期+时段）
│   │       ├── user.js            # 会员管理
│   │       ├── paylist.js         # 充值记录
│   │       ├── news.js            # 公告管理
│   │       ├── banner.js          # 轮播管理
│   │       ├── star.js            # 收藏统计
│   │       ├── question.js        # 反馈回复
│   │       └── review.js          # 评价回复
│   └── public/
│       └── images/                # 静态图资源（按业务分子目录，不逐文件列出）
│           ├── shop/              # 门店封面
│           ├── cate/              # 服务项目封面
│           ├── stylist/           # 技师头像
│           ├── works/             # 技师作品图
│           ├── banner/            # 首页轮播图
│           ├── avatar/            # 用户头像等
│           ├── review/            # 评价配图
│           ├── news/              # 公告配图
│           └── question/          # 反馈配图
│
├── admin-vue3/                    # Vue3 管理后台（默认 :7832）
│   ├── index.html
│   ├── vite.config.js             # Vite 配置、开发代理到后端
│   ├── package.json
│   ├── jsconfig.json
│   └── src/
│       ├── main.js                # 应用入口
│       ├── App.vue
│       ├── api/
│       │   ├── index.js           # 接口方法汇总
│       │   └── request.js         # Axios 封装、Token 注入
│       ├── router/
│       │   └── index.js           # 路由表 + 登录守卫
│       ├── stores/
│       │   └── user.js            # 登录用户状态
│       ├── layouts/
│       │   └── MainLayout.vue     # 侧栏菜单 + 顶栏布局
│       ├── components/
│       │   ├── ListImagePreview.vue     # 列表图预览（居中卡片）
│       │   └── components/
│       │       ├── Editor.vue     # 富文本编辑器
│       │       └── ImageListUpload.vue  # 图片上传组件
│       ├── utils/
│       │   ├── formatTime.js      # 时间格式化
│       │   └── media.js           # 媒体地址拼接
│       ├── assets/
│       │   └── main.css           # 全局主题样式
│       └── views/                 # 业务页面（与菜单一一对应）
│           ├── Login.vue          # 登录
│           ├── Welcome.vue        # 运营概览
│           ├── Analytics.vue      # 数据分析
│           ├── Banner.vue         # 轮播管理
│           ├── Shop.vue           # 门店管理
│           ├── Cate.vue           # 服务项目
│           ├── Equ.vue            # 加购护理
│           ├── Stylist.vue        # 技师 / 档期 / 请假
│           ├── Works.vue          # 作品管理
│           ├── Order.vue          # 预约订单 / 核销 / 改派档期
│           ├── User.vue           # 会员管理
│           ├── Paylist.vue        # 充值记录
│           ├── News.vue           # 公告管理
│           ├── Star.vue           # 收藏统计
│           ├── Question.vue       # 问题反馈
│           └── Review.vue         # 评价管理
│
└── min/                           # 微信原生小程序
    ├── app.js                     # 小程序入口逻辑
    ├── app.json                   # 页面注册、TabBar、窗口样式
    ├── app.wxss                   # 全局样式（墨色铜金主题）
    ├── project.config.json        # 微信开发者工具项目配置
    ├── project.private.config.json
    ├── sitemap.json
    ├── images/                    # 小程序本地静态图
    │   ├── tabbar/                # TabBar 图标
    │   ├── auth-hero.jpg          # 登录页氛围图
    │   └── banner.jpg             # 其他本地图
    ├── utils/
    │   ├── request.js             # 请求基址与封装
    │   ├── api.js                 # 业务接口封装
    │   ├── date.js                # 日期工具
    │   ├── media.js               # 图片地址处理
    │   ├── util.js                # 通用工具
    │   ├── feedback.js            # 反馈相关辅助
    │   └── markdown.js            # Markdown 辅助
    ├── components/
    │   ├── weekCalendar/          # 周历选日期组件
    │   └── wxParse/               # 第三方富文本解析插件（内部不展开）
    └── pages/                     # 业务页面（每页为目录，内含 js/json/wxml/wxss）
        ├── index/                 # 门店 Tab 首页
        ├── newsList/              # 资讯列表
        ├── newsDetail/            # 资讯详情
        ├── my/                    # 我的
        ├── auth/                  # 微信授权登录（头像+昵称+真实 openId）
        ├── userInfo/              # 个人信息
        ├── detail/                # 门店预约（选日/项目/技师/时段）
        ├── comfirm/               # 确认下单（含加购）
        ├── stylistList/           # 技师列表
        ├── stylistDetail/         # 技师详情 / 作品 / 评价
        ├── orderList/             # 我的预约列表
        ├── orderDetail/           # 预约详情 / 取消
        ├── reviewAdd/             # 发表评价
        ├── reviewMine/            # 我的评价
        ├── wallet/                # 钱包余额与流水
        ├── walletAdd/             # 钱包充值
        ├── star/                  # 收藏门店
        ├── trend/                 # 预约趋势（本周本月 + 项目偏好）
        └── question/              # 问题反馈

获取完整源码

• 网站：AI源码
• 本项目详情：https://www.aiyuanma.vip/posts/node-hair-salon-min