摄影约拍预约小程序

一、功能介绍

「光影约拍」是一套面向摄影门店 / 工作室的约拍预约系统，覆盖用户选购套餐、选择摄影师与档期、下单支付，以及运营侧对套餐、订单、样片等内容的统一管理。系统由三端组成：微信小程序（用户端）、Vue3 管理后台（运营端）、Express + MySQL API（服务端）。用户侧以钱包余额完成支付（演示场景，不接入微信支付）；后台按角色菜单动态授权，支持订单确认、改档期、退款及客户反馈等日常运营。

---

1. 微信小程序（min/）

底部 Tab：首页、公告、订单、我的。

1.1 浏览与选购

功能	说明
首页展示	轮播图（可跳套餐 / 样片 / 复制外链）、拍摄品类入口、热门/推荐套餐、精选样片、摄影师速览
套餐列表（趋势页）	按分类、关键词筛选套餐；可携带摄影师编号，进入详情时预选该摄影师
套餐详情	图集预览、简介、加购项勾选、实时报价、评价列表、收藏开关；选择摄影师、拍摄日期与时段（上午/下午/全天，含档期冲突校验）后进入确认页
样片详情	展示样片标题与图集（与套餐封面解耦）；可跳转关联套餐预约、可进摄影师主页
摄影师列表	搜索姓名/擅长风格，进入摄影师主页
摄影师主页	简介、擅长、作品、档期概览、代表样片；可「预约拍摄」进入套餐列表并透传当前摄影师

1.2 预约与订单

功能	说明
确认预约	展示套餐、摄影师、日期时段、加购与应付金额；填写联系人/电话/备注；余额不足可去充值
创建订单	校验套餐、摄影师、档期冲突后落单，状态为待支付
钱包支付	用账户余额支付；超时未支付订单会自动释放档期
订单列表	按状态筛选：全部 / 待支付 / 待确认 / 待拍摄 / 已完成 / 已取消 / 已退款；支持去支付、取消
订单详情	查看完整信息；待支付可支付；可取消；已完成后可评价；待拍摄等状态可申请改档期；套餐名/摄影师名可跳转对应页面

1.3 账户与资产

功能	说明
登录	微信登录（本地无密钥时可用演示身份）；登录成功回跳原操作页；「暂不登录」离开登录页，避免死循环
个人资料	头像、昵称、真实姓名、性别、手机号
钱包	查看余额与流水（充值、支付、退款等）
充值	预设金额或自定义金额，直接增加钱包余额
收藏	收藏/取消套餐，收藏列表进入套餐详情
意见反馈	提交反馈，查看历史与回复状态

1.4 公告

功能	说明
公告列表	已发布公告，按日期展示
公告详情	标题与正文内容

---

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

登录后按角色菜单动态渲染路由；超级管理员可管理权限体系。

2.1 工作台

功能	说明
数据概览	订单数、营收、用户数、摄影师数等统计卡片
待办指标	待支付、待确认、待拍摄、待回复反馈等
图表	近 7 日订单趋势、套餐订单占比、摄影师档期负荷
快捷入口	跳转常用业务模块

2.2 业务管理

模块	功能说明
分类管理	拍摄品类的增删改、排序、启用/禁用；小程序首页与套餐筛选依赖分类
套餐管理	套餐增删改查、封面与图集、价格时长、热门标记、启用/禁用；管理加购项（增删改、启用/禁用）；下架套餐会清理相关收藏
摄影师管理	摄影师资料、擅长、作品图、评分等；档期屏蔽（不可约日期/时段）；启用/禁用；新增/删除等高权限操作受限
样片管理	样片增删改查，关联分类、摄影师、套餐；封面与图集；精选与排序；启用/禁用
订单管理	订单列表与详情；确认订单、完成拍摄、取消、退款；后台改档期；列表/详情会同步释放超时未支付单
评价管理	查看用户评价，管理员回复；启用/禁用展示
客户管理	小程序用户列表；查看资料与余额；启用/禁用（封禁后不可登录）
轮播管理	首页轮播图；链接类型（套餐/样片/外链）；启用/禁用、排序
公告管理	公告发布/下架、标题检索、物理删除
反馈管理	用户反馈列表、回复、状态处理

2.3 系统管理

模块	功能说明
用户管理	后台账号增删改、重置密码、启用/禁用、分配角色
角色管理	角色增删改查、菜单权限分配；有用户绑定时禁止删除
菜单管理	后台菜单树维护，驱动动态路由与侧栏
个人中心	当前登录管理员资料与密码等

---

3. 服务端（express/）

统一接口服务，分三大块：系统管理、业务后台、小程序用户端。

3.1 系统接口

模块	能力
用户	登录、当前用户信息、后台用户增删改查、改密、启停
角色	角色增删改查、角色菜单授权
菜单	菜单树增删改查、按角色返回可访问菜单

3.2 业务后台接口

模块	能力
分类 / 套餐 / 摄影师 / 样片	对应后台业务的列表、详情、增删改、状态切换；套餐含加购子接口；摄影师含档期屏蔽
订单	订单列表/详情、状态变更（确认/完成/取消/退款）、改档期
评价 / 客户 / 轮播 / 公告 / 反馈	评价、客户、轮播、公告、反馈的后台管理接口

3.3 小程序接口

模块	能力
登录认证	微信登录、手机号登录、资料查询与更新
公开内容	轮播、分类、套餐列表/详情、摄影师列表/详情/档期、样片列表/详情、公告、评价列表、品牌介绍
订单	报价、下单、我的订单、详情、取消、钱包支付、用户改档期；支付与列表会释放超时未支付单并校验档期
钱包	余额充值、流水查询
收藏	收藏切换、收藏列表
评价 / 反馈	提交评价、提交/查询反馈

3.4 公共能力

能力	说明
文件上传	图片等静态资源上传与访问
工作台	工作台统计与图表数据
鉴权	区分后台用户与小程序客户；部分公开接口可匿名，写操作需登录

---

二、菜单目录介绍

1. 小程序目录（min/）

min/
├── app.js / app.json / app.wxss   # 小程序入口、全局配置、全局样式
├── project.config.json           # 微信开发者工具项目配置
├── sitemap.json                  # 搜索索引配置
├── images/                       # 本地静态图（含 tabBar 图标）
├── components/                   # 可复用组件
│   ├── weekCalendar/             # 周历组件
│   └── wxParse/                  # 富文本解析
├── utils/                        # 工具与请求封装
│   ├── api.js                    # 接口方法汇总
│   ├── request.js                # wx.request 封装、401 跳登录
│   ├── auth.js                   # 登录跳转与登录后回跳
│   ├── media.js                  # 媒体 URL 拼接/规范化
│   ├── util.js                   # 订单状态文案、支付失败处理等
│   ├── feedback.js               # Toast / Confirm 封装
│   ├── date.js                   # 日期工具
│   └── markdown.js               # Markdown 相关
└── pages/                        # 页面
    ├── index/                    # 首页
    ├── newsList/                 # 公告列表
    ├── newsDetail/               # 公告详情
    ├── orderList/                # 订单列表
    ├── orderDetail/              # 订单详情
    ├── my/                       # 我的
    ├── auth/                     # 登录
    ├── trend/                    # 套餐列表
    ├── detail/                   # 套餐详情（选摄影师/日期/加购）
    ├── comfirm/                  # 确认预约与支付（历史命名保留）
    ├── sampleDetail/             # 样片详情
    ├── exam/                     # 摄影师列表
    ├── photographer/             # 摄影师主页
    ├── wallet/                   # 钱包
    ├── walletAdd/                # 充值
    ├── star/                     # 我的收藏
    ├── userInfo/                 # 个人资料
    └── question/                 # 意见反馈

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

admin-vue3/
├── index.html
├── vite.config.js
├── package.json
├── public/                       # 静态公共资源
└── src/
    ├── main.js                   # 应用入口
    ├── App.vue
    ├── api/                      # 接口层
    │   ├── request.js            # Axios 封装
    │   ├── index.js              # 导出聚合
    │   ├── sys.js                # 系统管理接口
    │   └── biz.js                # 业务管理接口
    ├── router/
    │   ├── index.js              # 路由与守卫
    │   └── dynamicRoutes.js      # 按菜单生成动态路由
    ├── stores/
    │   ├── user.js               # 登录用户状态
    │   └── role.js               # 角色相关状态
    ├── layouts/
    │   └── MainLayout.vue        # 侧栏 + 顶栏主布局
    ├── hooks/
    │   └── useRole.js            # 角色/权限相关逻辑
    ├── components/
    │   ├── UploadFile.vue        # 上传
    │   ├── MediaThumb.vue        # 媒体缩略图
    │   ├── Editor.vue            # 富文本编辑
    │   └── markedHtml.vue        # Markdown/HTML 展示
    ├── utils/                    # 常量、加解密、格式化、媒体、菜单图标
    ├── assets/                   # 前端静态资源
    └── views/
        ├── Login.vue             # 登录
        ├── Dashboard.vue         # 工作台
        ├── 404.vue               # 404 页面
        ├── biz/
        │   ├── Category.vue      # 套餐分类
        │   ├── Package.vue       # 套餐管理
        │   ├── Photographer.vue  # 摄影师管理
        │   ├── Order.vue         # 订单管理
        │   ├── Sample.vue        # 样片案例
        │   ├── Review.vue        # 评价管理
        │   ├── Customer.vue      # 客户列表
        │   ├── Banner.vue        # 轮播管理
        │   ├── Notice.vue        # 公告管理
        │   └── Feedback.vue      # 意见反馈
        └── system/
            ├── UserManage.vue        # 用户管理
            ├── RoleManage.vue        # 角色管理
            ├── MenuManage.vue        # 菜单管理
            └── userCenterMange.vue   # 个人中心

3. 服务端目录（express/）

express/
├── app.js                        # Express 应用组装（中间件、静态目录、挂载路由）
├── bin/www                       # 进程启动入口（监听端口）
├── package.json
├── config/
│   ├── index.js                  # 配置汇总
│   ├── db.js / dbConfig.js       # MySQL 连接池与库配置（直接改 dbConfig.js，无 .env）
│   ├── initDb.js                 # 库初始化辅助
│   └── security.js               # 安全相关配置
├── routes/
│   ├── index.js                  # 路由总入口（CORS、挂载各子路由）
│   ├── upload.js                 # /api/upload 文件上传
│   ├── dashboard.js              # /api/dashboard 工作台统计
│   ├── sys/                      # 挂载前缀 /api/sys/*（后台系统管理）
│   │   ├── user.js               # /api/sys/user/*
│   │   ├── role.js               # /api/sys/role/*
│   │   └── menu.js               # /api/sys/menu/*
│   ├── biz/                      # 挂载前缀 /api/biz/*（后台业务管理）
│   │   ├── category.js           # /api/biz/category/*
│   │   ├── package.js            # /api/biz/package/*（含 addon 加购）
│   │   ├── photographer.js       # /api/biz/photographer/*（含 block 档期屏蔽）
│   │   ├── sample.js             # /api/biz/sample/*
│   │   ├── order.js              # /api/biz/order/*
│   │   ├── review.js             # /api/biz/review/*
│   │   ├── customer.js           # /api/biz/customer/*
│   │   ├── banner.js             # /api/biz/banner/*
│   │   ├── notice.js             # /api/biz/notice/*
│   │   └── feedback.js           # /api/biz/feedback/*
│   └── web/                      # 挂载前缀 /api/web/*（小程序 C 端，单文件聚合）
│       └── index.js              # 认证 / 公开内容 / 订单 / 钱包 / 收藏 / 评价反馈
├── controllers/
│   ├── dashboardController.js    # 工作台统计
│   ├── sys/
│   │   ├── userController.js     # 后台用户
│   │   ├── roleController.js     # 角色
│   │   └── menuController.js     # 菜单
│   ├── biz/
│   │   ├── categoryController.js     # 套餐分类
│   │   ├── packageController.js      # 套餐管理
│   │   ├── photographerController.js # 摄影师管理
│   │   ├── sampleController.js       # 样片案例
│   │   ├── orderController.js        # 订单管理
│   │   ├── reviewController.js       # 评价管理
│   │   ├── customerController.js     # 客户列表
│   │   ├── bannerController.js       # 轮播管理
│   │   ├── noticeController.js       # 公告管理
│   │   └── feedbackController.js     # 意见反馈
│   └── web/
│       ├── authController.js         # 登录认证与个人资料
│       ├── homeController.js         # 首页公开内容（轮播/分类/套餐/摄影师/样片/公告等）
│       ├── orderController.js        # 小程序订单（报价/下单/支付/改档期）
│       └── customerBizController.js  # 钱包/收藏/评价/反馈
├── util/
│   ├── auth.js                   # JWT 鉴权、后台用户 / 客户身份校验
│   ├── orderHelper.js            # 报价、档期冲突、超时未支付释放等订单公共逻辑
│   ├── crypto.js                 # 加解密
│   ├── role.js                   # 角色判断辅助
│   ├── wechat.js                 # 微信相关调用
│   └── index.js                  # 通用工具
├── services/                     # 预留业务服务层（当前可为空）
├── scripts/
│   ├── init_db.js                # 初始化数据库脚本
│   └── full_api_review.py        # 接口巡检辅助脚本
└── public/
    └── images/                   # 上传与静态图（banner / sample / photographer 等）

获取完整源码

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