当前位置：首页 > news >正文

全源码提供-浪漫定格的婚纱摄影预约小程序

news 2026/5/30 19:25:55

全源码提供-浪漫定格的婚纱摄影预约小程序

一个面向婚纱摄影行业的在线预约与档期管理平台，覆盖客户 + 摄影师 + 管理后台三端，基于 Vue 3 构建。

项目背景

每年超过 800 万对新人步入婚姻殿堂，婚纱摄影是刚需中的高客单消费——客单价从 ¥2,999 到 ¥19,999 不等。但大量影楼仍靠门市接待 + 纸质合同 + 电话排档，存在三大痛点：

新人看作品难：想选摄影师只能到店翻 iPad，线上只有几张精修图
档期协调难：摄影师档期靠 Excel 排，撞档、漏档频发
进度不透明：拍完等修图一等就是两个月，新人天天打电话催

婚纱摄影预约小程序正是为这个行业打造的 O2O 平台，打通"浏览作品集 → 选择套餐 → 预约档期 → 拍摄进度 → 选片交付 → 评价"的完整业务闭环。

适用：婚纱影楼、写真工作室、婚礼跟拍、旅拍摄影、情侣写真馆。

技术选型

层级	技术栈
前端框架	Vue 3 + Composition API
路由	Vue Router 4
状态管理	Pinia
构建工具	Vite
UI 风格	自定义 CSS 变量体系，移动端优先，浪漫粉色系（`--primary: #FF6B6F`）
目标平台	H5 / 微信小程序（UniApp 可扩展）

功能全景

客户端（移动端）

客户端采用底部 Tab 导航，覆盖从浏览作品到评价的完整链路。

1. 登录页

支持微信一键登录和手机号登录。slogan"浪漫定格，预约你的专属摄影师"。底部提供管理员入口和摄影师入口。

2. 首页

顶部 Banner"定格浪漫瞬间专属摄影师为你记录"，粉色渐变背景搭配婚纱照氛围图。下方展示：

6 大分类：婚纱摄影、写真摄影、婚礼跟拍、旅拍摄影、情侣写真、孕妇照
推荐摄影师：横向滚动卡片，展示头像、风格标签（ins风/韩式/中式/复古/清新）、作品数量、起拍价
热门套餐：经典婚纱 ¥3,999、户外旅拍 ¥6,999、室内纯色 ¥2,999、婚礼跟拍 ¥5,888

3. 摄影师列表

核心筛选维度：风格标签（ins风/韩式/中式/复古/清新）——这是新人选择摄影师的第一决策因素。支持按评分/作品数/价格排序。

每位摄影师展示：头像、姓名、风格标签、评分、作品数量、起拍价。

4. 摄影师详情与作品集（核心决策页）

这个页面是新人决定预约的关键，信息密度极高：

基本信息：头像、姓名、评分、从业年限（8年）、服务次数（856单）、好评率（98%）
风格标签：ins风 / 韩式简约 / 中式复古——快速匹配新人审美偏好
资质证书：摄影师资格证、修图师证等
3 列作品集画廊：这是比任何文字描述都有说服力的功能。网格展示摄影师的代表作品，新人可以直观判断拍摄风格是否合心意
顾客评价：带新人头像和婚期的真实评价列表

底部固定栏显示"¥3,999起"和预约档期按钮。

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. 下单确认（行业特色）

婚纱摄影特有的下单信息：

套餐 + 摄影师选择：可指定摄影师或系统分配
拍摄地点：室内影棚 / 户外公园 / 海边沙滩 / 古镇街道
拍摄日期：日历选择，自动过滤摄影师已约日期
服装套数：3套/5套/7套，影响价格浮动
妆面造型风格：韩式/中式/自然/复古——化妆师提前准备
备注：描述期望的拍摄风格和特殊需求

30% 定金机制：下单支付 30% 定金锁定档期，尾款拍摄前付清。符合婚纱摄影行业惯例。

7. 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 # 机构管理