夜雨聆风全源码提供-浪漫定格的婚纱摄影预约小程序
一个面向婚纱摄影行业的在线预约与档期管理平台，覆盖客户 + 摄影师 + 管理后台三端，基于 Vue 3 构建。
项目背景
每年超过 800 万对新人步入婚姻殿堂，婚纱摄影是刚需中的高客单消费——客单价从 ¥2,999 到 ¥19,999 不等。但大量影楼仍靠门市接待 + 纸质合同 + 电话排档，存在三大痛点：技术选型
| 层级 | 技术栈 | |------|--------| | 前端框架 | Vue 3 + Composition API | | 路由 | Vue Router 4 | | 状态管理 | Pinia | | 构建工具 | Vite | | UI 风格 | 自定义 CSS 变量体系，移动端优先，浪漫粉色系（--primary: #FF6B6F） |
| 目标平台 | H5 / 微信小程序（UniApp 可扩展） |
功能全景
客户端（移动端）
客户端采用底部 Tab 导航，覆盖从浏览作品到评价的完整链路。 #### 1. 登录页 支持微信一键登录和手机号登录。slogan"浪漫定格，预约你的专属摄影师"。底部提供管理员入口和摄影师入口。
登录页
#### 2. 首页 顶部 Banner"定格浪漫瞬间 专属摄影师为你记录"，粉色渐变背景搭配婚纱照氛围图。下方展示：
首页
#### 3. 摄影师列表 核心筛选维度：风格标签（ins风/韩式/中式/复古/清新）——这是新人选择摄影师的第一决策因素。支持按评分/作品数/价格排序。 每位摄影师展示：头像、姓名、风格标签、评分、作品数量、起拍价。
摄影师列表
#### 4. 摄影师详情与作品集（核心决策页） 这个页面是新人决定预约的关键，信息密度极高：
摄影师详情
#### 5. 套餐选择 分类筛选套餐，每套标注关键信息： | 套餐 | 价格 | 服装套数 | 精修张数 | 拍摄时长 | |------|------|----------|----------|----------| | 经典婚纱 | ¥3,999 | 4套 | 40张 | 半天 | | 户外旅拍 | ¥6,999 | 5套 | 60张 | 全天 | | 室内纯色 | ¥2,999 | 3套 | 30张 | 3小时 | | 婚礼跟拍 | ¥5,888 | 2套 | 80张 | 全天 | | 情侣写真 | ¥1,999 | 3套 | 25张 | 3小时 | | 孕妇照 | ¥1,688 | 2套 | 20张 | 2小时 |
服务项目
#### 6. 下单确认（行业特色） 婚纱摄影特有的下单信息：
确认下单
#### 7. 5 步服务进度追踪 婚纱摄影特有的进度追踪，新人在手机上追踪婚照进度： 已付定金 → 拍摄中 → 修图中 → 选片中 → 已交付
5步服务进度
#### 8. 订单详情 展示完整订单信息：状态横幅、摄影师信息（头像+电话+风格）、套餐信息（类型/服装套数/精修张数）、拍摄日期/地点、费用明细（定金+尾款）。进行中订单显示 5 步进度追踪。 #### 9. 个人中心 顶部展示用户头像、手机号。统计区显示进行中/已完成/优惠券数量。菜单包含：我的订单、消息中心、我的评价、收藏的摄影师、优惠券、意见反馈、设置。
个人中心
摄影师端（移动端）
摄影师拥有独立的工作台，底部 3 个 Tab：工作台、订单、收入。 #### 1. 工作台 顶部展示摄影师头像、姓名、在线/离线切换开关。统计行展示今日订单数、本月收入、评分。下方展示档期日历视图——已约日期标记红色、可选日期绿色、休假灰色，一目了然避免撞档。
摄影师工作台
#### 2. 订单管理 支持按全部/待接单/进行中/已完成筛选。订单详情页可查看客户信息、套餐信息、拍摄要求，并上报服务进度（拍摄完成→修图完成→选片完成→交付完成）。
摄影师订单管理
#### 3. 收入明细 本月收入、累计收入、可提现余额，按日期分组展示收入明细（订单编号、套餐类型、时间、金额）。底部提供提现按钮。
摄影师收入明细
管理后台（PC 端）
管理后台采用深色侧边栏布局，6 组菜单，支持多机构/多门店切换。 #### 1. 数据看板 4 个指标卡片：今日订单（12）、本月营收（¥128,600）、在线摄影师（6）、待分配订单（4）。下方提供订单趋势图和订单状态分布。
管理后台
#### 2. 订单管理 全平台订单列表，支持按状态筛选和日期范围搜索。待分配订单可点击分配摄影师，弹窗展示摄影师档期——空闲的摄影师高亮，已约的摄影师显示冲突日期，避免撞档分配。
订单管理
#### 3. 摄影师管理 摄影师列表展示姓名、手机号、风格标签、评分、作品数、注册日期、审核状态。支持入驻审核（查看资质证书和作品集→通过/驳回）、编辑作品集、上线/下线。 #### 4. 套餐管理 管理套餐类目和定价：经典婚纱、户外旅拍、室内纯色等，支持增删改。每套标注服装套数、精修张数、拍摄时长、价格。
套餐管理
#### 5. 财务报表 4 个汇总卡片（总营收、平台抽佣、退款、订单数）+ 营收趋势图 + 交易明细表。支持日/周/月切换和 Excel 导出。
财务报表
#### 6. 评价管理 + 机构管理 全平台评价列表。多机构/多门店卡片网格展示运营数据。
评价管理
项目结构
``
26-frontend-wedding/src/
├── router/index.js # 路由配置（三端共 35+ 条路由）
├── stores/app.js # Pinia 状态（摄影师/套餐/订单）
├── pages/
│ ├── LoginPage.vue # 登录
│ ├── MainLayout.vue # 客户 Tab 布局
│ ├── HomePage.vue # 首页（Banner+分类+推荐+套餐）
│ ├── PhotographerListPage.vue # 摄影师列表（风格筛选+排序）
│ ├── PhotographerDetailPage.vue # 摄影师详情（资质+3列作品集）
│ ├── ServiceListPage.vue # 套餐列表
│ ├── OrderConfirmPage.vue # 下单确认（套餐+摄影师+妆面风格）
│ ├── OrderSuccessPage.vue # 预约成功
│ ├── OrderDetailPage.vue # 订单详情
│ ├── ReviewPage.vue # 服务评价
│ ├── OrdersPage.vue # 我的订单
│ ├── MyPage.vue # 个人中心
│ ├── MessagesPage.vue # 消息中心
│ ├── CouponsPage.vue # 优惠券
│ ├── FavoritesPage.vue # 收藏列表
│ ├── FeedbackPage.vue # 意见反馈
│ ├── SettingsPage.vue # 设置
│ │
│ ├── photographer/ # 摄影师端
│ │ ├── PhotographerLayout.vue # 摄影师 Tab 布局
│ │ ├── PhotographerHomePage.vue # 工作台（档期日历）
│ │ ├── PhotographerOrdersPage.vue # 订单管理
│ │ ├── PhotographerOrderDetailPage.vue # 订单详情+进度上报
│ │ └── PhotographerIncomePage.vue # 收入明细
│ │
│ └── admin/ # 管理后台
│ ├── AdminLayout.vue # 深色侧边栏布局
│ ├── DashboardPage.vue # 数据看板
│ ├── OrderMgmtPage.vue # 订单管理+分配（含档期冲突检测）
│ ├── PhotographerMgmtPage.vue # 摄影师管理+审核
│ ├── ServiceMgmtPage.vue # 套餐管理
│ ├── FinancePage.vue # 财务报表
│ ├── ReviewMgmtPage.vue # 评价管理
│ └── OrgMgmtPage.vue # 机构管理
`
设计亮点
3 列作品集画廊：比任何文字描述都有说服力。影楼省去了"到店看 iPad"的环节，新人在手机上就能浏览摄影师的完整作品集，直观判断拍摄风格是否合心意。这是摄影师详情页转化率提升的关键。
定金 + 尾款 30/70 机制：30% 定金锁定档期，尾款拍摄前付清。符合婚纱摄影行业高客单价的消费习惯，降低新人决策门槛的同时保障影楼现金流。
5 步服务进度：已付定金→拍摄中→修图中→选片中→已交付。婚纱摄影特有的长周期进度追踪，修图阶段新人可在线选片，交付后可在线查看和下载成片。省去了"拍完等两个月天天催"的焦虑。
档期日历：摄影师端日历视图，已约/可选/休假一目了然。管理后台分配订单时自动检测档期冲突，避免撞档——这是传统 Excel 排档最容易出错的地方。
风格标签体系：ins风/韩式/中式/复古/清新——匹配新人审美偏好的核心筛选维度。从列表页到详情页到下单页，风格标签贯穿整个决策链路。
妆面造型选择：下单时选择韩式/中式/自然/复古妆面风格，化妆师提前准备。这个细节体现了对婚纱摄影行业多角色协作的理解——不只是摄影师，化妆师也是关键角色。
三端分离架构：客户端、摄影师端、管理后台三个独立路由入口，一套代码部署三角色。摄影师端支持在线/离线切换和档期管理。
婚纱摄影行业特色功能总结：
作品集画廊：3 列网格，直观判断风格
定金 30%：锁定档期，降低决策门槛
5 步进度：拍摄→修图→选片→交付，在线选片
档期日历：避免撞档，智能分配
风格标签：贯穿整个决策链路
妆面选择：化妆师提前准备
源代码获取
演示地址：http://wedding.hei-ai.com/
源码购买：https://srcs.hei-ai.com/（搜索"婚纱摄影"）
交付内容：
完整前端源码（Vue 3 + Vite，开箱即跑 npm install && npm run dev`）
*本项目为婚纱摄影行业数字化转型的一次实践探索。既是可直接上线运营的 SaaS 产品原型，也是学习 Vue 3 多角色架构（客户+摄影师+管理）开发的优质参考项目。欢迎交流讨论。*
