夜雨聆风全源码提供-专业可靠的医疗健康预约小程序
一个面向诊所、体检中心、中医馆的在线预约挂号与管理平台，覆盖患者端 + 管理后台，基于 Vue 3 构建。
项目背景
中国有超过 90 万家中小型医疗机构——私立诊所、口腔门诊、体检中心、中医馆、康复理疗馆。它们每天服务着数千万患者，但大部分机构的预约管理方式依然停留在电话+本子的阶段。 想象一下这个场景：前台一边接电话一边翻纸质排班表，患者到了现场不知道要等多久，医生看完一个病人不知道下一个是谁，病历堆在档案室里找起来像大海捞针，体检报告打印出来患者弄丢了还得重开。对于机构经营者来说，号源利用率低、患者流失率高、财务报表靠 Excel 手动汇总——这些都是真金白银的损失。 大型三甲医院有昂贵的 HIS 系统，但对于中小型机构，一套轻量、专业、开箱即用的预约管理平台才是真正需要的。医疗健康预约小程序正是为这个场景而设计的，目标是打通"科室选择 → 医生排班 → 在线挂号 → 支付确认 → 就诊记录 → 体检报告"的完整业务闭环。 适用场景包括：私立诊所、体检中心、康复理疗馆、中医馆、口腔门诊、社区医院、眼科诊所等各类中小型医疗机构。技术选型
| 层级 | 技术栈 | |------|--------| | 前端框架 | Vue 3 + Composition API | | 路由 | Vue Router 4 | | 状态管理 | Pinia | | 构建工具 | Vite | | UI 风格 | 自定义 CSS 变量体系，移动端优先，专业医疗风格 | | 目标平台 | 微信小程序 / H5 / App（UniApp 可扩展） |功能全景
患者端（移动端）
患者端采用底部 Tab 导航，包含首页、科室、预约、消息、我的 5 个主入口，覆盖从挂号到报告查阅的完整就医链路。 #### 1. 登录页 支持微信一键登录和手机号登录两种方式。首次使用需绑定手机号并完成实名认证——这是医疗行业的合规要求。底部提供管理员入口，一套代码服务患者和机构两端。
登录页
#### 2. 首页 展示医院/诊所的品牌信息、科室分类入口（内科、外科、儿科、妇科、体检中心、检验科等）、热门诊疗项目卡片（医生姓名+职称+价格+剩余号源）、推荐诊疗项目、快捷服务入口。 顶部 Banner 区域展示医院品牌 slogan——"健康预约，便捷就医，提前预约免排队烦恼"。
首页
#### 3. 科室与医生浏览 按科室筛选医生列表，每位医生以卡片形式展示：头像、姓名、职称（主任医师/副主任医师/主治医师）、专长标签、出诊时间、剩余号源数量。支持按日期筛选——患者选择具体日期后只展示当天出诊的医生。 #### 4. 医生详情与预约入口 医生详情页是患者做决策的关键页面。展示：高清头像、职称、科室、专长详细介绍（"擅长呼吸系统、消化系统、心血管系统疾病"）、从业年限（"15年临床经验"）、出诊安排、剩余号源数量、就诊时长（"15分钟/人"）、就诊地点、注意事项（"请携带身份证和医保卡"）。 底部固定两个操作按钮——收藏医生（❤️）和立即预约。
医生详情
#### 5. 确认挂号（核心流程） 挂号流程 3 步完成：选择就诊人 → 选择日期和时段 → 确认支付。
确认挂号
#### 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`）
*本项目为医疗健康行业数字化转型的一次实践探索。既是可直接上线运营的 SaaS 产品原型，也是学习 Vue 3 复杂业务流程（叫号系统、排班管理、RBAC 权限）开发的优质参考项目。欢迎交流讨论。*
