美发门店预约小程序

美发门店预约小程序美发门店预约系统由三端组成微信小程序顾客端、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.logincode 换真实 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 登录与权限账号密码登录管理员角色演示账号见运行手册.mdToken 存本地路由守卫控制未登录跳转登录页3. 服务端 APIexpress/统一业务与数据入口静态资源与上传文件也由此提供。3.1 接口分区分区路径前缀用途小程序端/api/web/*门店、项目、技师档期、下单、钱包、评价、收藏、公告、反馈等管理端/api/admin/*上述资源的后台 CRUD、核销改派、统计概览等需管理员鉴权上传POST /api/upload图片等文件上传字段filebucket静态资源/images/*public/images下的门店/项目/技师/作品等图片3.2 核心业务能力鉴权Authorization: Bearer token区分顾客与管理员微信登录必须wx.logincode 走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/ # 问题反馈