全源码提供-温暖贴心的陪诊服务预约小程序

一个面向陪诊服务行业的在线预约与管理平台，覆盖客户 + 陪诊师 + 管理后台，基于 Vue 3 构建。

项目背景

技术选型

功能全景

客户端（移动端）

登录页

• 8 大服务分类
  ：老年陪诊、儿科陪诊、全程陪诊、代办挂号、代取报告、代取药、接送就医、视频问诊陪护
• 推荐陪诊师
  ：横向滚动卡片，展示头像、姓名、评分、服务次数、专长标签、价格（¥198/半天）
• 服务项目列表
  ：全程陪诊(4小时) ¥198、代办挂号 ¥50、代取报告 ¥80、接送就医 ¥150
• 

  首页

•   #### 3. 陪诊师列表  支持按专长分类筛选（全部/老年陪诊/儿科陪诊/急诊陪诊/孕产陪诊），按评分/距离/服务次数排序。每位陪诊师展示：头像、姓名、综合评分、服务次数、从业年限、专长标签、价格。点击进入陪诊师详情。  
• 

  陪诊师列表

•   #### 4. 陪诊师详情（核心决策页）  这个页面是客户决定下单的关键。展示： 
• 基本信息
  ：头像、姓名、评分、服务次数、从业年限（5年）、好评率（100%）
• 资质证书
  ：护士资格证、健康管理师等（可点击查看大图）
• 擅长医院
  ：协和医院、人民医院等
• 顾客评价
  ：星级+文字评价列表，增强信任感
•   底部固定栏显示价格"¥198/半天"和
• 立即预约
• 按钮。这个页面比任何营销话术都有效——证书+评价就是最好的背书。  
• 

  陪诊师详情

•   #### 5. 下单流程  4 步完成预约：
• 选择服务 → 选择陪诊师 → 填写信息 → 确认支付
• 。  填写信息页展示：服务项目卡片、陪诊师选择（可选"系统分配"）、就诊人选择、就诊医院/科室/日期/时间、备注。底部实时显示合计金额。  
• 

  下单确认

•   #### 6. 服务追踪时间线（行业独有）  9 步服务追踪，客户实时掌握陪诊进度：  
• 已接单 → 已出发 → 已到达医院 → 挂号中 → 候诊中 → 就诊中 → 缴费取药 → 取报告中 → 服务完成
•   每个已完成步骤显示时间戳，当前步骤高亮显示。顶部展示陪诊师实时位置地图，底部提供
• 联系陪诊师
• 电话按钮。客户无需反复打电话问"到哪了"。  
• 

  服务追踪

•   #### 7. 订单详情  展示完整的订单信息：状态横幅（已接单/进行中/已完成）、陪诊师信息（头像+电话）、服务信息（类型/医院/科室/日期）、就诊人信息（姓名/性别/年龄/过敏史）、费用明细。已完成后可查看服务追踪记录和评价入口。  
• 

  订单详情

•   #### 8. 就诊人管理  支持添加多位就诊人（父亲、母亲、配偶、子女等），每位就诊人独立档案：姓名、性别、年龄、身份证号（脱敏）、医保卡号（脱敏）、过敏史、既往病史。下单时一键切换。  
• 

  就诊人管理

•   #### 9. 个人中心  顶部展示用户头像、手机号。统计区显示进行中/已完成/优惠券数量。菜单包含：我的订单、就诊人管理、消息中心、我的评价、优惠券、收藏的陪诊师、意见反馈、设置。  
• 

  个人中心

• ---

• 陪诊师端（移动端）

•   陪诊师拥有独立的工作台，底部 3 个 Tab：工作台、订单、收入。  #### 1. 工作台  顶部展示陪诊师头像、姓名、在线/离线切换开关。统计行展示今日订单数、本月收入、评分。下方分"待处理"和"进行中"两个区块展示订单列表，每个订单显示患者姓名、金额、医院、日期。  
• 

  陪诊师工作台

•   #### 2. 订单管理  支持按全部/待接单/进行中/已完成筛选。新订单有 10 分钟接单窗口。订单详情页可查看客户信息、服务信息，并
• 上报服务进度
• （拍照上传），完成后可导航至医院。  #### 3. 收入明细  本月收入、累计收入、可提现余额，按日期分组展示收入明细。底部提供提现按钮。  

• ---

• 管理后台（PC 端）

•   管理后台采用深色侧边栏布局，5 组菜单，支持多机构切换。  #### 1. 数据看板  4 个指标卡片：今日订单（28）、本月营收（¥86,400）、在线陪诊师（12）、待分配订单（5）。下方提供订单趋势图和订单状态分布。最近订单表格实时更新。  
• 

  数据看板

•   #### 2. 订单管理  全平台订单列表，支持按状态筛选和日期范围搜索。待分配订单可点击
• 分配陪诊师
• ，弹窗展示可选陪诊师列表一键分配。  
• 

  订单管理

•   #### 3. 陪诊师管理  陪诊师列表展示姓名、手机号、专长标签、评分、服务次数、注册日期、审核状态。支持
• 入驻审核
• （查看资质证书 → 通过/驳回）、编辑、下线/上线。  
• 

  陪诊师管理

•   #### 4. 财务报表  4 个汇总卡片（总营收、平台抽佣、退款、订单数）+ 营收趋势图 + 交易明细表（订单编号、金额、平台抽佣、陪诊师收入、日期）。支持日/周/月切换和 Excel 导出。  
• 

  财务报表

•   #### 5. 评价管理  全平台评价列表，可查看评价详情、隐藏不当评价。  #### 6. 机构管理  多机构卡片网格展示，每个机构显示陪诊师数、今日订单、平均评分、月营收。  

• ---

• 项目结构

•   ``
•  22-frontend-escort-prd22/src/ ├── router/index.js              # 路由配置（三端共 32+ 条路由） ├── stores/app.js                # Pinia 状态（陪诊师/服务/就诊人/订单） ├── pages/ │   ├── LoginPage.vue            # 登录 │   ├── MainLayout.vue           # 客户 Tab 布局 │   ├── HomePage.vue             # 首页（Banner+分类+推荐+服务） │   ├── EscortListPage.vue       # 陪诊师列表（筛选+排序） │   ├── EscortDetailPage.vue     # 陪诊师详情（资质+评价） │   ├── ServiceListPage.vue      # 服务项目列表 │   ├── PatientListPage.vue      # 就诊人管理 │   ├── PatientAddPage.vue       # 添加就诊人 │   ├── OrderConfirmPage.vue     # 下单确认（4步流程） │   ├── OrderSuccessPage.vue     # 预约成功 │   ├── OrderDetailPage.vue      # 订单详情 │   ├── OrderTrackingPage.vue    # 9步服务追踪时间线 │   ├── ReviewPage.vue           # 服务评价 │   ├── OrdersPage.vue           # 我的订单 │   ├── MyPage.vue               # 个人中心 │   │ │   ├── escort/                  # 陪诊师端 │   │   ├── EscortLayout.vue     # 陪诊师 Tab 布局 │   │   ├── EscortHomePage.vue   # 工作台 │   │   ├── EscortOrdersPage.vue # 订单管理 │   │   ├── EscortOrderDetailPage.vue # 订单详情+进度上报 │   │   └── EscortIncomePage.vue # 收入明细 │   │ │   └── admin/                   # 管理后台 │       ├── AdminLayout.vue      # 深色侧边栏布局 │       ├── DashboardPage.vue    # 数据看板 │       ├── OrderMgmtPage.vue    # 订单管理+分配 │       ├── EscortMgmtPage.vue   # 陪诊师管理+审核 │       ├── ServiceMgmtPage.vue  # 服务管理 │       ├── FinancePage.vue      # 财务报表 │       ├── ReviewMgmtPage.vue   # 评价管理 │       └── OrgMgmtPage.vue      # 机构管理 
• `

• ---

  设计亮点

  9 步服务追踪时间线：这是陪诊服务区别于其他预约系统的核心功能。已接单→已出发→已到达→挂号中→候诊中→就诊中→缴费取药→取报告中→服务完成，每一步都有时间戳。客户端和陪诊师端双向同步，让等待不再焦虑。  陪诊师信誉体系：资质证书上传+平台审核+服务评价三重信用机制。客户可查看陪诊师的护士资格证、健康管理师证等资质，以及历史客户的真实评价。证书+评价就是最好的转化工具。  LBS 智能派单：系统根据客户就诊医院位置，优先推荐 5 公里内专长匹配的陪诊师。客户也可指定心仪陪诊师或选择系统自动分配。  双端进度同步：陪诊师在 App 端上报进度（如"已到达医院""就诊中"），客户实时同步查看。上传的检查报告、处方照片也同步展示在客户端的订单详情中。  就诊人档案管理：一个账号绑定全家人，过敏史+既往病史+医保卡号完整关联。下单时一键切换，免去重复填写。  三端分离架构：客户端、陪诊师端、管理后台三个独立路由入口，一套代码部署三角色。  CSS 变量品牌定制：主色调为温暖珊瑚色（
• --primary: #FF6B6B
• ），契合陪诊服务温馨关怀的行业属性。  陪诊行业特色功能总结： 
• 9 步服务追踪
  ：从接单到完成，每步可查
• 陪诊师资质
  ：证书上传+平台审核
• LBS 就近派单
  ：5 公里内最优匹配
• 服务报告上传
  ：陪诊师拍照上传病历/报告/处方
• 紧急联系
  ：一键拨号陪诊师

• ---

• 源代码获取

• 演示地址：
• http://escort.hei-ai.com/
• 源码购买：
• https://srcs.hei-ai.com/
• （搜索"陪诊服务预约"）  交付内容： 
• 完整前端源码（Vue 3 + Vite，开箱即跑 
• npm install && npm run dev`）
• 产品需求文档（含完整数据模型、API 设计和业务逻辑）
• 部署说明文档

• ---

•   *本项目为陪诊服务行业数字化转型的一次实践探索。既是可直接上线运营的 SaaS 产品原型，也是学习 Vue 3 多角色架构（客户+服务者+管理）开发的优质参考项目。欢迎交流讨论。*