全源码提供-专业可靠的医疗健康预约小程序一个面向诊所、体检中心、中医馆的在线预约挂号与管理平台覆盖患者端 管理后台基于 Vue 3 构建。项目背景中国有超过 90 万家中小型医疗机构——私立诊所、口腔门诊、体检中心、中医馆、康复理疗馆。它们每天服务着数千万患者但大部分机构的预约管理方式依然停留在电话本子的阶段。想象一下这个场景前台一边接电话一边翻纸质排班表患者到了现场不知道要等多久医生看完一个病人不知道下一个是谁病历堆在档案室里找起来像大海捞针体检报告打印出来患者弄丢了还得重开。对于机构经营者来说号源利用率低、患者流失率高、财务报表靠 Excel 手动汇总——这些都是真金白银的损失。大型三甲医院有昂贵的 HIS 系统但对于中小型机构一套轻量、专业、开箱即用的预约管理平台才是真正需要的。医疗健康预约小程序正是为这个场景而设计的目标是打通科室选择 → 医生排班 → 在线挂号 → 支付确认 → 就诊记录 → 体检报告的完整业务闭环。适用场景包括私立诊所、体检中心、康复理疗馆、中医馆、口腔门诊、社区医院、眼科诊所等各类中小型医疗机构。技术选型层级技术栈前端框架Vue 3 Composition API路由Vue Router 4状态管理Pinia构建工具ViteUI 风格自定义 CSS 变量体系移动端优先专业医疗风格目标平台微信小程序 / H5 / AppUniApp 可扩展功能全景患者端移动端患者端采用底部 Tab 导航包含首页、科室、预约、消息、我的 5 个主入口覆盖从挂号到报告查阅的完整就医链路。1. 登录页支持微信一键登录和手机号登录两种方式。首次使用需绑定手机号并完成实名认证——这是医疗行业的合规要求。底部提供管理员入口一套代码服务患者和机构两端。2. 首页展示医院/诊所的品牌信息、科室分类入口内科、外科、儿科、妇科、体检中心、检验科等、热门诊疗项目卡片医生姓名职称价格剩余号源、推荐诊疗项目、快捷服务入口。顶部 Banner 区域展示医院品牌 slogan——“健康预约便捷就医提前预约免排队烦恼”。3. 科室与医生浏览按科室筛选医生列表每位医生以卡片形式展示头像、姓名、职称主任医师/副主任医师/主治医师、专长标签、出诊时间、剩余号源数量。支持按日期筛选——患者选择具体日期后只展示当天出诊的医生。4. 医生详情与预约入口医生详情页是患者做决策的关键页面。展示高清头像、职称、科室、专长详细介绍“擅长呼吸系统、消化系统、心血管系统疾病”、从业年限“15年临床经验”、出诊安排、剩余号源数量、就诊时长“15分钟/人”、就诊地点、注意事项“请携带身份证和医保卡”。底部固定两个操作按钮——收藏医生❤️和立即预约。5. 确认挂号核心流程挂号流程 3 步完成选择就诊人 → 选择日期和时段 → 确认支付。选择就诊人从已绑定的就诊人列表中勾选列表展示姓名、性别、年龄选择日期横向滑动日期选择器展示未来 7 天选择时段网格展示可选时段08:00-09:00、09:00-10:00……已约满的时段灰色不可选确认信息底部汇总卡片展示科室名称、就诊时段、预约日期、就诊人一目了然6. 预约成功支付完成后展示预约成功页绿色对勾 预约成功文字、订单编号、科室名称、就诊人姓名、就诊时间、实付金额。底部提供查看预约和返回首页两个操作按钮。就诊前系统自动推送提醒通知。7. 就诊记录历史就诊记录以列表方式展示每条记录包含就诊日期、医院名称、科室医生、诊断结果摘要“上呼吸道感染建议多喝水注意休息服用抗生素治疗”。支持点击展开查看完整处方详情和关联的体检报告。对于慢性病患者所有历史就诊记录集中管理换医生看病时完整病历一目了然。8. 体检报告在线查看体检报告是患者端的高频功能。报告列表展示报告名称“年度健康体检报告”、日期、体检中心名称、检查项目摘要“血常规、尿常规、肝功能、肾功能、心电图、B超”。每份报告提供预览和下载两个操作。9. 就诊人管理一个账号可以绑定多位就诊人——本人、配偶、父母、子女等。每位就诊人拥有独立档案姓名、性别、年龄、身份证号、血型。卡片右下角展示历史预约次数。挂号时一键切换就诊人无需重复填写信息。对有老人和小孩的家庭来说一个账号管理全家人的就医。10. 个人中心包含我的预约、就诊人管理、就诊记录、体检报告、收藏医生、优惠券、意见反馈、设置等功能入口。顶部展示用户头像、姓名和基本信息。采用图标文字列表式布局清晰直观。11. 更多功能页消息中心按类型展示预约确认通知、就诊提醒、报告出具通知支持未读红点标记我的预约预约列表支持按状态筛选待支付/已支付/已签到/已完成/已取消考勤签到到院后扫码签到确认到场自动关联预约记录退款申请支持在线申请退号退费填写退款原因实时查看审批进度优惠券分可使用/已使用/已过期三栏展示收藏医生支持取消收藏点击跳转医生详情意见反馈选择反馈类型 文字描述 联系方式设置账号管理、通知开关、隐私政策、关于我们管理后台PC 端管理后台采用左侧边栏导航支持多院区/多诊所切换包含 9 个功能模块。左侧菜单按业务域分组概览、医疗管理、排队管理、财务、系统。1. 数据看板机构管理者打开后台第一眼看到的页面。顶部四个指标卡片挂号率78%↑12%、就诊人数128人、候诊人数25人、今日营收¥12,580。下方提供挂号率趋势图按今日/本周/本月切换以及热门时段分布图——一眼看出上午 9:00-10:00 是挂号高峰。2. 诊疗项目管理科室是医疗服务的组织单位。支持科室的增删改查名称、图标、排序、状态启用/停用。每个科室下管理对应的诊疗项目——例如口腔科下有常规洗牙“深度洁牙”“补牙”拔牙等。每个项目设置名称、时长、价格、描述、适用人群、状态。3. 排班管理管理员日常使用最频繁的功能。采用周视图日历展示纵向为诊室列表横向为周一至周日的时间轴。支持上午/下午/全天视图切换点击空白时段快速新增排班一键复制上周排班到本周自动检测同一诊室同一时段的排班冲突4. 叫号管理前台/护士使用的核心功能。页面顶部展示各科室实时等待人数内科等待 7 人、外科等待 6 人、儿科等待 5 人等。下方分为两个区域当前叫号展示正在就诊的患者信息等待队列按序号排列等待患者显示姓名和手机号脱敏支持按科室筛选、按状态筛选等待中/已叫号/已签到/已过号。护士一键叫号患者端实时收到通知。5. 预约管理全平台预约列表支持按状态待支付/已支付/已签到/已完成/已取消、日期范围、科室、医生多维度筛选。可查看每单完整详情包括患者信息、挂号时段、支付金额。支持手动处理退号申请。6. 财务报表按日/月/年维度展示挂号收入、退款金额、净收入。支持按科室维度和医生维度下钻分析。支持自定义日期范围查询和 Excel 一键导出。7. 就诊人管理管理端可查看全平台已注册的就诊人档案支持按姓名、手机号、身份证号搜索。查看每位就诊人的详细信息过敏史、既往病史、关联的预约和就诊记录。患者来电咨询时前台输入手机号即可快速调出档案。8. 机构管理支持多院区/多诊所统一管理。可新增、编辑、启用/停用院区每个院区独立配置名称、Logo、地址、联系电话、简介。管理后台侧边栏顶部实时切换当前机构数据和配置自动隔离。9. 权限管理基于 RBAC 模型的角色权限矩阵。预置四种角色超级管理员全部权限机构管理员管理本机构的科室、医生、排班、财务医生查看个人排班、接诊患者前台/护士管理预约、操作叫号队列、处理退号支持自定义角色和细粒度权限配置。项目结构01-frontend-healthcare-prd01/src/ ├── router/index.js # 路由配置35 条路由 ├── stores/ # Pinia 状态管理 ├── i18n/ # 国际化术语映射 ├── api/ # API 接口层 │ └── request.js # Axios 封装拦截器、token 刷新 ├── pages/ │ ├── LoginPage.vue # 登录 │ ├── MainLayout.vue # 患者端 Tab 布局容器 │ ├── HomePage.vue # 首页科室分类热门医生 │ ├── CoursesPage.vue # 科室/医生列表 │ ├── CourseDetailPage.vue # 医生详情 │ ├── ConfirmPage.vue # 确认挂号 │ ├── ReservationPage.vue # 预约时段选择 │ ├── PayResultPage.vue # 支付结果 │ ├── MedicalRecordPage.vue # 就诊记录 │ ├── ReportPage.vue # 体检报告 │ ├── StudentsPage.vue # 就诊人管理 │ ├── OrdersPage.vue # 我的预约 │ ├── OrderDetailPage.vue # 预约详情 │ ├── AttendancePage.vue # 签到记录 │ ├── MyPage.vue # 个人中心 │ ├── RefundPage.vue # 退款申请 │ ├── CouponsPage.vue # 优惠券 │ ├── FavoritesPage.vue # 收藏医生 │ ├── FeedbackPage.vue # 意见反馈 │ ├── SettingsPage.vue # 设置 │ └── admin/ │ ├── AdminLayout.vue # 管理后台布局 │ ├── DashboardPage.vue # 数据看板 │ ├── CourseMgmtPage.vue # 诊疗项目管理 │ ├── SchedulingPage.vue # 排班管理 │ ├── StudentsMgmtPage.vue # 就诊人管理 │ ├── QueueManagementPage.vue # 叫号管理 │ ├── RefundReviewPage.vue # 退款审批 │ ├── FinancePage.vue # 财务报表 │ ├── OrgMgmtPage.vue # 医院管理 │ └── RoleMgmtPage.vue # 权限管理设计亮点完整的挂号闭环从科室选择 → 医生浏览 → 日期时段选择 → 就诊人确认 → 在线支付 → 预约成功通知每一步都经过精心设计。确认挂号页就诊人列表支持 20 人滚动选择时段网格直观展示可用/已满状态。就诊人档案体系一个账号绑定全家人。每位就诊人独立档案关联姓名、性别、年龄、身份证号、血型。挂号时一键切换系统自动带入档案信息。对有老人和小孩的家庭来说省去每次填表的麻烦。体检报告在线查看报告列表展示检查项目摘要支持预览和下载。历史报告集中管理随时随地可查彻底告别纸质报告打印→弄丢→重开的循环。管理后台叫号系统实时展示各科室等待队列支持按科室和状态筛选护士一键叫号。患者端实时收到通知不用挤在前台问到我了没。排班管理周视图诊室 × 时间的网格排班上午/下午/全天视图切换支持一键复制上周排班和自动冲突检测。号源精细化管理支持按医生设置每日号源总量、时段粒度、价格。号满自动停止挂号。CSS 变量品牌定制全局语义化颜色变量体系。口腔门诊改蓝白配色、中医馆改棕米配色、体检中心改绿白配色——5 分钟完成品牌皮肤切换。前后端分离架构前端使用 Pinia 管理 Mock 数据所有页面预留 API 接口调用位置。Axios 拦截器已封装 token 刷新、401 跳转登录等通用逻辑。后端就绪后替换 baseURL 即可无缝对接。医疗行业特色功能就诊人档案管理一人绑定全家身份证号血型过敏史完整关联一患一档体检报告在线查看检查项目摘要预览下载历史报告集中管理管理后台叫号系统科室等待队列实时监控一键叫号状态筛选排班管理周视图诊室×时间网格一键复制冲突检测实名认证手机号绑定身份校验满足医疗行业合规要求多院区管理一套系统管理多个分院数据隔离侧边栏一键切换源代码获取演示地址http://healthcare.hei-ai.com/源码购买https://srcs.hei-ai.com/搜索医疗健康预约交付内容完整前端源码Vue 3 Vite开箱即跑npm install npm run dev产品需求文档含完整数据模型、API 接口设计和业务逻辑说明部署说明文档含 Nginx 配置示例本项目为医疗健康行业数字化转型的一次实践探索。既是可直接上线运营的 SaaS 产品原型也是学习 Vue 3 复杂业务流程叫号系统、排班管理、RBAC 权限开发的优质参考项目。欢迎交流讨论。