17套预约小程序源码合集 — 一个人也能做全行业SaaS
一个人，17个行业，1000+页面，Vue 3 三端分离架构。从课后报名到婚纱摄影，每一套都是完整的行业解决方案原型，开箱即用。
写在前面
过去一个月，我用 Vue 3 + Pinia + Vite 一整套技术栈，从零做了 17 个行业的预约小程序原型。
每个项目都包含 完整的二/三端架构：
所有项目技术栈完全统一，页面结构完全一致。拿到源码，npm install && npm run dev 直接跑起来，改数据就能上线。
每套源码均提供在线演示、完整产品需求文档（PRD）和部署说明。
项目总览
教育与生活服务
| 项目 | 行业 | 核心特色 | 演示地址 | 源码 |
|---|
| 课后报名 | 教育培训 | 课程展示→在线报名→支付→排课→考勤全闭环 | 演示 | 获取 |
| 众包任务平台 | 众包兼职 | 任务发布→接单→执行→验收→结算完整流程 | 演示 | 获取 |
| 二手交易闲置 | 二手买卖 | 商品发布、分类搜索、买卖聊天 | 演示 | 获取 |
医疗健康
| 项目 | 行业 | 核心特色 | 演示地址 | 源码 |
|---|
| 医疗健康预约 | 医疗挂号 | 科室→医生→时间段预约，多院区切换，就诊记录 | 演示 | 获取 |
| 陪诊服务预约 | 陪诊陪护 | 9步服务追踪（挂号中→候诊中→就诊中→缴费取药...），就诊人档案管理 | 演示 | 获取 |
| 理疗按摩上门 | 推拿理疗 | 8大中医理疗品类，经络推拿/艾灸/拔罐/足疗，理疗师资质认证 | 演示 | 获取 |
美业与婚庆
| 项目 | 行业 | 核心特色 | 演示地址 | 源码 |
|---|
| 美容美发预约 | 美业综合 | 技师等级定价（总监/资深/高级），次卡+储值卡+期限卡会员体系，作品集展示 | 演示 | 获取 |
| 婚纱摄影预约 | 婚庆摄影 | 3列作品集画廊，定金+尾款30/70，5步进度（拍摄中→修图中→选片中...），档期日历 | 演示 | 获取 |
家政物业
| 项目 | 行业 | 核心特色 | 演示地址 | 源码 |
|---|
| 家政服务预约 | 家政保洁 | 日常保洁/深度清洁/开荒保洁等分类，按面积自动估价 | 演示 | 获取 |
| 家电清洗维修 | 家电服务 | 8大品类（空调/洗衣机/热水器/油烟机...），8步服务进度追踪，技师实名认证 | 演示 | 获取 |
| 搬家拉货预约 | 搬家货运 | 8步进度追踪（装车中→运输中→卸车中...），双地址+楼层计费，车型选择器 | 演示 | 获取 |
| 物业社区服务 | 物业管理 | 6状态报修工单，滞纳金自动计算，访客通行码，批量账单生成 | 演示 | 获取 |
运动场地
| 项目 | 行业 | 核心特色 | 演示地址 | 源码 |
|---|
| 健身运动预约 | 健身私教 | 团课/私教课/体验课分类，教练排课日历 | 演示 | 获取 |
| 场地租赁预约 | 场地预订 | 篮球场/羽毛球场/网球场/会议室等，按时段+场地双维度预约 | 演示 | 获取 |
餐饮出行
| 项目 | 行业 | 核心特色 | 演示地址 | 源码 |
|---|
| 餐饮扫码点餐 | 餐厅点餐 | 扫码点菜、加入购物车、下单支付 | 演示 | 获取 |
| 汽车养护预约 | 汽车服务 | 保养/维修/美容/年检分类，门店选择+预约时间段 | 演示 | 获取 |
| 宠物服务预约 | 宠物服务 | 洗澡美容/寄养/医疗/疫苗，宠物档案管理 | 演示 | 获取 |
技术架构
所有 18 个项目使用完全统一的技术栈：
| 层级 | 技术选型 | 说明 |
|---|
| 前端框架 | Vue 3 + Composition API | 现代化响应式框架 |
| 路由 | Vue Router 4 | 三端分离路由（客户端/服务者端/管理后台） |
| 状态管理 | Pinia | 集中式 Mock 数据管理 |
| 构建工具 | Vite | 秒级热更新 |
| UI | 自定义 CSS 变量体系 | 移动端优先，通过 --primary 变量一键换肤 |
| 部署 | 静态文件 (dist/) | Nginx 一键部署，无需 Node 运行环境 |
三端架构示意：
src/pages/
├── LoginPage.vue → 登录入口（含客户端/服务者端/管理员入口）
├── MainLayout.vue → 客户端底部 Tab 导航
├── HomePage.vue → 首页（Banner + 分类 + 推荐）
├── *ListPage.vue → 列表页（筛选 + 排序）
├── *DetailPage.vue → 详情页
├── OrderConfirmPage.vue → 下单确认
├── OrderDetailPage.vue → 订单详情 + 进度追踪
├── OrdersPage.vue → 我的订单
├── MyPage.vue → 个人中心
├── service-worker/ → 服务者端（技师/司机/陪诊师/摄影师...）
└── admin/ → 管理后台（Dashboard + 订单 + 人员 + 财务）
各项目行业特色功能
课后报名
课程展示 → 在线报名 → 支付 → 排课 → 考勤。教师端可管理课表和学员考勤，机构管理端可管理课程、排课、财务统计。
医疗健康预约
科室→医生→时间段三级联动预约。支持多院区切换，就诊记录和检查报告在线查看。
陪诊服务预约
9步服务追踪时间线——已接单→已出发→已到达→挂号中→候诊中→就诊中→缴费取药→取报告中→服务完成。每步带时间戳，陪诊师可拍照上传病历/报告。就诊人档案管理（一个账号绑定全家人+过敏史+既往病史）。
美容美发预约
技师等级差异化定价（总监/资深/高级/初级四级），同一服务不同等级收费不同。会员卡三维体系（次卡+储值卡+期限卡），消费记录时间线展示。技师作品集（前后对比照片），排班管理（周/月视图）。
家电清洗维修
8大品类覆盖：空调/冰箱/洗衣机/热水器/油烟机/地暖/净水器/管道疏通。技师实名认证+智能派单，8步服务进度（已派单→已接单→已出发→已到达→工作中→已完成→已验收→已评价）。
搬家拉货预约
车型选择器（小面/金杯/4.2米/6.8米厢货）不同起步价。双地址+楼层计费（有无电梯、楼层数自动计算楼层费）。物品清单（提前列出大件物品）。8步进度追踪含搬家特有的装车中/运输中/卸车中。
婚纱摄影预约
3列作品集画廊——比任何文字都有说服力。定金30%锁定档期，尾款拍摄前付清。5步服务进度：已付定金→拍摄中→修图中→选片中→已交付。档期日历智能分配避免撞档。妆面造型风格选择（韩式/中式/自然/复古）。
物业社区服务
6状态报修工单：待处理→已派单→处理中→已完成→已评价→已取消。滞纳金自动计算（0.3%/天）。访客通行码（6位数字，当日有效）。匿名投诉。管理端批量生成账单按楼栋推送。
宠物服务预约
洗澡美容/寄养/医疗/疫苗/商品五大品类。宠物档案管理（品种/年龄/疫苗记录）。寄养状态看板（已入住/即将到期）。
众包任务平台
任务发布→接单→执行→上传成果→验收→结算。任务大厅支持分类筛选和赏金排序，接单者端查看收入明细。管理后台含任务审核和违规处理。
餐饮扫码点餐
扫码进入→浏览菜单→加入购物车→下单支付。管理后台含菜品分类管理、订单处理和厨房打印。
二手交易闲置
商品发布（拍照+描述+价格）→分类浏览→搜索筛选→联系卖家。个人中心管理我的发布、我的收藏、浏览记录。管理后台含商品审核和违规下架。
其他项目
家政服务预约：按面积自动估价 / 健身运动预约：团课+私教+排课日历 / 场地租赁预约：按时段+场地双维度预约 / 汽车养护预约：保养/维修/美容分类+门店选择 / 餐饮预约排队：在线取号+排队进度推送。
交付内容
每套源码包含：
| 交付物 | 说明 |
|---|
| 完整前端源码 | Vue 3 + Vite，npm install && npm run dev 开箱即跑 |
| 产品需求文档 | 含完整数据模型、API 接口设计、业务逻辑 |
| 部署说明 | Nginx 配置示例，静态文件一键部署 |
源码使用 Mock 数据（Pinia Store 集中管理），所有页面可独立运行，无需后端。接入真实 API 只需替换 Store 中的数据层。
如何获取
在线演示：点击上方表格中每个项目的"演示"链接即可在线预览
源码购买：访问 https://srcs.hei-ai.com/ 搜索项目名称
定制开发：需要基于这些原型做二次开发或定制，欢迎联系
这 17 个项目覆盖了预约类小程序最常见的业务场景——从医疗到美业、从家政到婚庆、从搬家到宠物。无论你是独立开发者想快速上线一个预约产品，还是团队需要一套可定制的前端原型，都能在这里找到合适的起点。
技术栈统一、代码结构清晰、页面风格一致——学一套，通十七套。
有任何问题欢迎留言交流。
10个月宝宝每天需要喝多少奶粉？
