夜雨聆风全源码提供-贴心专业的月嫂育儿嫂预约小程序
一个面向月嫂/育儿嫂行业的在线预约与智能匹配平台，覆盖客户 + 月嫂 + 管理后台三端，基于 Vue 3 构建。
项目背景
中国每年有超过 900 万新生儿出生，月嫂育儿嫂是新手爸妈的绝对刚需——但找到一位靠谱月嫂的过程堪称"玄学"：朋友圈问一圈、熟人推荐几个、中介推送一批，面试两三个后凭感觉定一个。更让人焦虑的是，月嫂档期全凭手记，交了定金还可能被放鸽子，上户后不满意想换人更是难上加难。 在月嫂端，痛点同样突出：档期管理靠日历本、工资结算靠微信转账、客户来源全靠老客户转介绍。优秀月嫂接单靠运气，新手月嫂入行没人带。 月嫂育儿嫂预约小程序正是为规范这个高客单价行业而设计的一站式平台，目标是打通"月嫂展示 → 档期查看 → 面试预约 → 合同签约 → 上户服务 → 进度追踪 → 双向评价"的完整业务闭环。 月嫂客单价在 ¥12,800-25,800 元/单之间，是所有服务预约品类中客单价最高的赛道之一，客户决策慎重、对平台信任度要求高——小程序恰恰能通过资质展示、档期透明、评价公开来解决信息不对称问题。 适用场景包括：月嫂家政公司、月子中心、育婴师中介机构、产后修复中心和独立月嫂个人接单。技术选型
| 层级 | 技术栈 | |------|--------| | 前端框架 | Vue 3 + Composition API | | 路由 | Vue Router 4 | | 状态管理 | Pinia | | 构建工具 | Vite | | UI 风格 | 自定义 CSS 变量体系，移动端优先，温馨母婴配色 | | 目标平台 | 微信小程序 / H5 / App（UniApp 可扩展） |功能全景
客户端（移动端）
客户端采用底部 Tab 导航，覆盖从浏览月嫂到服务评价的完整链路。月嫂客单价高、决策周期长，每个页面的信息密度都经过精心设计。 #### 1. 登录页 支持微信一键登录和手机号登录两种方式。slogan"专业月嫂，呵护每一个新生命"，👶 图标传递温馨感。底部提供管理员入口和月嫂入口——一套代码服务客户、月嫂、平台三角色。
登录页
#### 2. 首页 顶部 Banner"安心月嫂 科学育儿 - 为您匹配最合适的专业月嫂"。下方展示：
首页
#### 3. 月嫂列表 核心筛选维度围绕"档期"和"专长"——这是宝妈选月嫂最关心的两个维度：
月嫂列表
#### 4. 月嫂详情与档期日历（核心决策页） 这个页面承载了宝妈 80% 的决策信息：
月嫂详情
#### 5. 套餐选择 按月嫂服务天数分为三个档次： | 套餐 | 价格 | 天数 | 适用场景 | |------|------|------|---------| | 金牌月嫂 | ¥12,800 | 26天 | 顺产单胎，基础护理 | | 钻石月嫂 | ¥19,800 | 42天 | 剖腹产/双胎，延长产褥期 | | 至尊月嫂 | ¥25,800 | 52天 | 早产儿/特殊护理，超长产假 | 另有育儿嫂（住家/不住家）¥8,000-15,000/月，催乳通乳 ¥380/次，产后修复 ¥2,980/10次，月子餐定制 ¥4,800/月。 #### 6. 下单确认（行业核心表单） 月嫂行业特有的下单流程，4 步完成： 选择套餐 → 选择月嫂 → 填写宝宝信息 → 确认支付 关键是第 3 步——宝宝信息表单是月嫂服务区别于所有其他预约系统的核心：
确认下单
#### 7. 6 步服务进度追踪 月嫂服务周期长（26-52天），宝妈需要全程了解进度： 已付定金 → 安排面试 → 合同签约 → 月嫂上户 → 服务中 → 服务完成
订单详情
#### 8. 预约成功 支付完成后展示预约成功页：绿色对勾 +"预约成功"文字、预约编号、套餐名称、月嫂姓名、上户日期、实付金额（定金）。底部提供查看订单和返回首页两个操作按钮。
预约成功
#### 9. 套餐列表 按分类筛选套餐，每项展示图标、名称、描述、时长、价格。点击进入下单流程。
套餐列表
#### 10. 个人中心 顶部展示用户头像、手机号。统计区显示进行中/已完成/待评价数量。菜单包含：我的订单（全部/待付定金/服务中/已完成）、消息中心（面试提醒/合同通知/满意度调研）、我的评价、优惠券、收藏的月嫂、意见反馈、设置。
个人中心
月嫂端（移动端）
月嫂拥有独立的工作台，底部 3 个 Tab：工作台、订单、收入。 #### 1. 工作台 顶部展示月嫂头像、姓名、在线/离线切换开关。核心模块—— 档期管理日历：按月展示，已约日期红色、空闲绿色——月嫂最核心的工具。点击日期可设置"可约/休假"状态，代理人帮接单时一目了然。 统计行展示：本月订单数（2单）、本月收入（¥25,600）、综合评分（4.9）。 下方"待处理"区块：新预约面试请求、新签约订单。"进行中"区块：当前服务中的家庭信息和进度条。
月嫂工作台
#### 2. 订单管理 按"全部/待面试/已签约/服务中/已完成"筛选。每张订单卡展示：宝爸宝妈姓名、套餐类型、服务天数、日期、金额、当前状态。 订单详情页展示：家庭信息（宝爸/宝妈电话）、宝宝信息（预产期/胎次/单双胎）、套餐详情、合同信息。上报服务进度按钮可标记"面试通过→合同签约→上户→服务第X天→即将结束→已完成"。
月嫂订单
#### 3. 收入明细 本月收入 ¥25,600、累计收入 ¥328,500、可提现余额 ¥18,200。按订单展示收入明细，底部提现按钮支持微信零钱/银行卡。
月嫂收入
管理后台（PC 端）
管理后台采用深色侧边栏布局，6 组菜单，支持多机构/多门店切换。 #### 1. 数据看板 4 个指标卡片：今日新增订单（28）、本月营收（¥368,500）、在户服务月嫂（45 人）、待安排面试（12 单）。下方提供订单趋势图和订单状态分布（待面试/服务中/已完成/已取消）。
数据看板
#### 2. 订单管理 全平台订单列表，支持按状态筛选和日期范围搜索。表格展示：订单编号、客户姓名、月嫂姓名、套餐类型、服务日期、金额、状态。 待分配订单可点击匹配月嫂——系统智能推荐：根据预产期（或上户日期）自动筛选档期空闲的月嫂，按评分和专长匹配度排序。点击分配后自动检测档期冲突，避免撞档——这是传统 Excel 排档最容易出错的地方。
订单管理
#### 3. 月嫂管理 月嫂列表展示：姓名、年龄、从业年限、擅长标签、评分、服务家庭数、审核状态（已审核/待审核/已下线）。 入驻审核流程：月嫂提交申请（姓名/身份证/月嫂证/催乳师证/育婴师证/健康证/体检报告）→ 管理员审核证书真伪 → 通过后月嫂上线接单。每张证书支持大图预览。 支持编辑月嫂信息、设置档期状态、下线/上线操作。
月嫂管理
#### 4. 套餐管理 管理套餐类目和定价：金牌月嫂(26天)、钻石月嫂(42天)、至尊月嫂(52天)、育儿嫂(住家/不住家)、催乳通乳(单次)、产后修复(10次一疗程)、月子餐定制(月)、婴儿抚触(10次)。每套标注服务天数、价格、服务内容描述。支持增删改和内联编辑。
套餐管理
#### 5. 财务报表 4 个汇总卡片（总营收 ¥368,500 / 平台抽佣 ¥73,700 / 退款 ¥5,200 / 订单数 312）+ 营收趋势图 + 交易明细表（订单编号/金额/平台抽佣/月嫂收入/日期）。支持日/周/月切换和 Excel 导出。
财务报表
#### 6. 评价管理与机构管理 全平台评价列表，可查看详情、隐藏不当评价。多机构/多门店卡片网格展示（门店名称/在户月嫂数/本月订单/平均评分/月营收）。项目结构
``
27-frontend-nanny/src/
├── router/index.js # 路由配置（三端共 35+ 条路由 + 短路径别名）
├── stores/app.js # Pinia 状态（月嫂/套餐/订单/地址）
├── pages/
│ ├── LoginPage.vue # 登录
│ ├── MainLayout.vue # 客户 Tab 布局
│ ├── HomePage.vue # 首页（Banner+分类+推荐+套餐）
│ ├── NannyListPage.vue # 月嫂列表（档期筛选+排序）
│ ├── NannyDetailPage.vue # 月嫂详情（资质+档期日历+评价）
│ ├── ServiceListPage.vue # 套餐列表
│ ├── OrderConfirmPage.vue # 下单确认（套餐+月嫂+宝宝信息）
│ ├── OrderSuccessPage.vue # 预约成功
│ ├── OrderDetailPage.vue # 订单详情（6步进度）
│ ├── ReviewPage.vue # 服务评价
│ ├── OrdersPage.vue # 我的订单
│ ├── MyPage.vue # 个人中心
│ ├── MessagesPage.vue # 消息中心
│ ├── CouponsPage.vue # 优惠券
│ ├── FavoritesPage.vue # 收藏月嫂
│ ├── FeedbackPage.vue # 意见反馈
│ ├── SettingsPage.vue # 设置
│ ├── nanny/ # 月嫂端
│ │ ├── NannyLayout.vue # 月嫂 Tab 布局
│ │ ├── NannyHomePage.vue # 工作台（档期日历）
│ │ ├── NannyOrdersPage.vue # 订单管理
│ │ ├── NannyOrderDetailPage.vue # 订单详情+进度上报
│ │ └── NannyIncomePage.vue # 收入明细
│ └── admin/ # 管理后台
│ ├── AdminLayout.vue # 深色侧边栏布局
│ ├── DashboardPage.vue # 数据看板
│ ├── OrderMgmtPage.vue # 订单管理+智能匹配
│ ├── NannyMgmtPage.vue # 月嫂管理+证书审核
│ ├── ServiceMgmtPage.vue # 套餐管理
│ ├── FinancePage.vue # 财务报表
│ ├── ReviewMgmtPage.vue # 评价管理
│ └── OrgMgmtPage.vue # 机构管理
`
设计亮点
档期日历系统：月嫂详情页、月嫂端工作台、管理后台订单分配三处档期日历实时同步。宝妈在详情页就能看到月嫂哪些天已约、哪些天空闲，省去反复电话确认的麻烦。管理后台分配订单时自动检测档期冲突——这是 Excel 排档最常出错的地方。
宝宝信息表单：下单时采集预产期、胎次、单双胎等关键信息。系统根据预产期自动推荐合适的服务套餐（26/42/52天），根据单双胎筛选有相关经验的月嫂。这比通用的"备注"字段精确得多，体现了对母婴行业的深度理解。
资质+体检双审核：月嫂入驻需提交 4 类证书（月嫂证/催乳师证/育婴师证/健康证）和体检报告。管理后台逐张审核，通过后月嫂才能上线接单。客户可在月嫂详情页查看每张证书的大图——这是建立信任的硬机制。
面试+合同流程：月嫂行业特有的中介流程被数字化——付定金→预约面试→双方确认→签合同→上户。面试环节是宝妈决策的关键触点，系统支持推送面试时间并双方确认。
30% 定金 + 70% 尾款：高客单价行业的标配支付方式。定金锁定档期（避免被其他家庭抢走），面试不满意可退定金；面试通过后签约付尾款。保障双方利益。
6 步服务进度追踪：月嫂服务周期长达 26-52 天，6 步进度让宝妈全程掌握状态。第 14 天/21 天自动推送满意度调研，及时发现问题。
三端分离架构：客户端、月嫂端、管理后台三个独立路由入口，一套代码部署三角色。月嫂端支持在线/离线切换和档期自主管理。
母婴行业特色功能总结：
档期日历：客户端/月嫂端/管理端三处同步
宝宝信息表单：预产期/胎次/单双胎，智能推荐套餐和月嫂
资质双审核：4 类证书+体检报告，政府认证可查
面试+合同流程：行业特有的中介数字化流程
30/70 定金机制：锁定档期，降低双方风险
6 步服务进度：26-52 天全程追踪
源代码获取
演示地址：http://nanny.hei-ai.com/
源码购买： https://srcs.hei-ai.com/321.html（搜索"月嫂育儿嫂"）
交付内容：
完整前端源码（Vue 3 + Vite，开箱即跑 npm install && npm run dev`）
*本项目为母婴护理行业数字化转型的一次实践探索。既是可直接上线运营的 SaaS 产品原型，也是学习 Vue 3 档期日历、资质审核和智能匹配系统开发的优质参考项目。欢迎交流讨论。*
