全源码提供-高端大气的医疗健康预约小程序
下载地址见文末
一个面向医疗机构的服务预约与管理平台，覆盖患者端 + 管理后台，基于 Vue 3 构建。
项目背景
医疗机构长期面临几个痛点：患者挂号排队时间长、科室号源管理复杂、医院财务对账效率低下。医疗健康预约小程序正是为了解决这些问题而设计的一站式平台，目标是打通"科室浏览 → 在线预约 → 支付 → 签到 → 就诊 → 报告查看"的完整业务闭环。
适用场景包括：医院门诊预约、体检中心套餐预约、专科诊所服务预约等各类医疗机构。
技术选型
| 层级 | 技术栈 |
|---|---|
| 前端框架 | Vue 3 + Composition API |
| 路由 | Vue Router 4 |
| 状态管理 | Pinia |
| 构建工具 | Vite |
| UI 风格 | 自定义 CSS 变量体系，移动端优先 |
| 目标平台 | 微信小程序 / H5 / App（UniApp 可扩展） |
功能全景
患者端（移动端）
患者端采用底部 Tab 导航，包含 5 个主入口和多个二级页面。
1. 登录页
支持微信一键登录和手机号登录两种方式，底部提供管理员入口。
2. 首页
展示科室分类入口（内科、外科、体检、儿科、妇科等）、热门推荐和最新科室列表。
3. 科室浏览与详情
科室列表支持分类筛选，科室详情页包含价格、医生介绍、诊疗流程、注意事项、患者评价等完整信息，底部提供收藏、咨询、预约三个操作按钮。
4. 预约与支付
确认预约页支持选择就诊人、查看优惠券、确认支付金额。支付完成后展示结果页，可直接查看预约或返回首页。
5. 我的预约
日历视图展示每月预约安排，点击日期切换当天预约列表，有预约的日期标注蓝色圆点。
6. 消息中心
按类型展示就诊提醒、预约成功、调整通知、号源不足等消息，支持未读红点标记。
7. 个人中心
包含预约管理、就诊人管理、就诊记录、体检报告、优惠券、收藏项目、意见反馈、设置等功能入口。
8. 预约记录
预约记录列表支持按状态筛选（全部/待就诊/已完成/已取消），预约详情页展示项目信息、支付信息和就诊状态。
9. 就诊人管理
支持查看已绑定就诊人信息、添加新就诊人（每个账号最多 5 位），包含身份证号、医保卡号、过敏史、既往病史、血型等医疗相关信息。
10. 就诊记录
展示历史就诊信息，包括诊断结果、处方信息、复诊预约入口等。
11. 体检报告
体检报告列表展示报告名称、体检日期，支持 PDF 报告在线预览和下载功能。
12. 更多功能页
- 优惠券：分"可使用/已使用/已过期"三栏展示
- 收藏的项目：支持取消收藏，点击跳转项目详情
- 意见反馈：选择反馈类型 + 文字描述 + 联系方式
- 设置：账号管理、通知开关、隐私政策、关于我们
管理后台（PC 端）
管理后台采用左侧边栏导航，支持多医院切换，包含 8 个功能模块。
1. 数据看板
展示核心运营指标：今日挂号数、本月营收、候诊人数、签到率。下方提供挂号趋势图和营收统计图。
2. 诊疗项目管理
诊疗项目列表支持搜索、分类筛选、状态筛选，提供新增项目、编辑、发布/下架等操作。
3. 排班管理
周视图展示科室 × 时间的排班网格，支持按医生和诊室筛选，可新增排班并自动检测冲突。
4. 就诊人管理
就诊人列表展示预约次数、就诊记录、签到率等关键数据，支持搜索和导出名单。
5. 叫号管理
实时展示各科室当前叫号和等待队列，支持按科室叫号、标记已签到、标记过号等操作。
6. 退号审批
分"待审批/已通过/已拒绝"三栏管理退号申请，支持一键通过或填写拒绝原因。
7. 财务报表
按日/月/年维度展示收入、退号、净收入等财务数据，支持自定义日期范围和 Excel 导出。
8. 医院管理
支持多医院/多科室管理，可新增、编辑、启用/停用医院，侧边栏顶部实时切换当前医院。
9. 权限管理
基于 RBAC 模型的角色权限矩阵，支持自定义角色和细粒度权限配置。
项目结构
01-frontend-healthcare-prd01/src/
├── router/index.js # 路由配置
├── stores/app.js # Pinia 全局状态
├── i18n/index.js # 国际化配置（医疗术语映射）
├── components/
│ └── CourseCard.vue # 可复用诊疗项目卡片
├── pages/
│ ├── LoginPage.vue # 登录
│ ├── MainLayout.vue # Tab 布局容器
│ ├── HomePage.vue # 首页
│ ├── CoursesPage.vue # 科室列表
│ ├── CourseDetailPage.vue # 科室详情
│ ├── ConfirmPage.vue # 确认预约
│ ├── PayResultPage.vue # 预约成功
│ ├── SchedulePage.vue # 我的预约
│ ├── MessagesPage.vue # 消息中心
│ ├── MyPage.vue # 个人中心
│ ├── OrdersPage.vue # 预约记录
│ ├── OrderDetailPage.vue # 预约详情
│ ├── StudentsPage.vue # 就诊人管理
│ ├── AttendancePage.vue # 就诊记录
│ ├── RefundPage.vue # 退号申请
│ ├── MedicalRecordPage.vue # 就诊记录
│ ├── ReportPage.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 # 权限管理设计亮点
移动端体验优先：患者端全部页面按 375px 宽度设计，圆角卡片 + 渐变色彩 + 底部弹窗交互，贴合微信小程序的使用习惯。
CSS 变量体系 ：全局定义 --blue、--green、--red 等语义化颜色变量，一处修改全局生效，方便后续品牌定制。
国际化术语映射：通过 i18n 配置实现医疗健康术语与原课程预约术语的灵活切换，支持快速适配不同业务场景。
前后端分离架构：前端使用 Pinia 管理 Mock 数据，所有页面预留 API 接口调用位置，后端就绪后可无缝切换。
完整的交互反馈：每个按钮都有明确的点击响应 --- 弹窗确认、Toast 提示、状态切换、页面跳转，没有"死按钮"。
医疗场景特色功能：
- 就诊人管理支持身份证号、医保卡号、过敏史、血型等医疗信息
- 排班管理支持 15/30/60 分钟时段粒度设置
- 叫号管理支持实时队列展示和科室叫号
- 体检报告支持 PDF 在线预览和下载
其他
源码下载:https://srcs.hei-ai.com/266.html
本项目为医疗健康行业数字化转型的一次实践探索，欢迎交流讨论。