抖音小程序 - 医院陪诊

陪诊有温度 · 就医更安心。基于抖音小程序（字节跳动小程序）原生框架开发的医院陪诊服务预约运营管理模板，开箱即用，可二次开发接入真实陪诊机构、陪诊师与在线支付能力。

一、产品简介

抖音小程序 - 医院陪诊 是一套面向医院陪诊、代办问诊、就医陪同服务的陪诊师预约与运营管理类小程序源码。覆盖「在线选陪诊师 → 服务预约 → 陪同就诊 → 服务完成 → 订单管理」完整业务闭环，界面精致、交互流畅、布局自适应。内置本地模拟数据与模拟接口层（服务、陪诊师、订单、设置完整 CRUD），无需后端即可在抖音开发者工具中直接预览运行，是搭建医院陪诊、就医陪同、代办问诊类预约小程序的优质起步模板。

二、功能介绍

1. 首页（工作台）

• 机构品牌信息与营业时间展示（含品牌口号）
• 累计服务人次与满意度双指标徽章
• 概览统计：陪诊师总数 / 可预约 / 陪诊中 / 今日营收（上浮卡片）
• 快捷入口：一键预约 / 陪诊师 / 我的订单 / 服务中心（固定双列）
• 服务承诺：持证陪诊师 / 准时守约 / 全程陪同 / 医嘱记录
• 陪诊服务双列卡片（含现价、划线价、时长、标签，尊享卡带金边专属样式）
• 优选陪诊师双列卡片（头像、职级、擅长、评分、接单数）
• 就诊小贴士公告

2. 优选陪诊师（核心选陪诊师）

• 陪诊师关键字搜索（姓名 / 工号 / 擅长）
• 状态筛选：可预约 / 服务中 / 休息中
• 职级筛选：首席 / 资深 / 高级 / 中级陪诊师
• 陪诊师双列卡片（头像、工号、职级、擅长项目、性别、从业年限、标签、评分、接单数）
• 可预约陪诊师一键预约（非可预约按钮置灰禁用）

3. 陪诊订单（CRUD）

• 订单关键字搜索（订单号 / 客户 / 陪诊师 / 就诊人）
• 状态筛选：已预约 / 陪诊中 / 已完成 / 已取消
• 待陪诊与进行中订单汇总提醒
• 订单卡片：状态色标识、服务、陪诊师、医院科室、时间、渠道、金额
• 一键新增预约

4. 陪诊详情

• 服务名称、订单号、状态、金额、陪诊师、科室
• 订单信息：就诊人、下单人、电话、陪诊师、医院、科室、时间、渠道、备注
• 3 步陪诊流程进度条（已预约 → 陪诊中 → 已完成，当前及之前步骤自动高亮）
• 状态流转操作：开始陪诊 / 陪诊完成 / 取消预约
• 删除订单（状态联动陪诊师状态与流程进度）

5. 预约陪诊（下单表单）

• 选择服务套餐（单选列表，尊享样式高亮）
• 选择陪诊师（双列选择，含擅长与评分）
• 就诊信息表单：就诊人、电话、医院、科室、时间、备注
• 实时费用明细与合计
• 确认预约一键下单

6. 服务中心（个人中心）

• 机构信息卡（名称、运营方、等级、地址、营业时间）
• 数据看板（双列）：可预约陪诊师 / 陪诊中 / 待陪诊 / 总订单
• 运营设置开关：就诊自动提醒 / 医护资质核验 / 短信通知 / 绿色通道
• 数据管理：恢复初始数据、清除本地缓存
• 版本信息

7. 底部导航

• 自定义 TabBar：首页 / 陪诊师 / 订单 / 我的

三、使用场景

四、技术特点

• 框架：抖音小程序（字节跳动小程序）原生开发，基于 tt API
• 界面：自定义导航栏 + 自定义 TabBar，适配状态栏与右上角原生胶囊按钮；青松医疗绿主题视觉（青绿 + 天空蓝 + 米白渐变，体现医疗陪诊的专业与安心）
• 数据：内置本地 Mock 数据与模拟接口层（utils/mock-api.js），基于本地存储模拟后端 CRUD，调用方式贴近真实 API
• 业务逻辑完备：服务/陪诊师/订单全链路增删改查、订单 3 步流程状态流转与进度联动、陪诊师状态自动联动（预约占用、完成释放）、按服务单价自动计价、运营数据看板汇总
• 自适应布局：所有列表/网格使用 CSS Grid 双列布局（repeat(2, minmax(0,1fr))），不同手机屏宽下始终保持固定 2 列展示
• 结构：页面（pages）、组件（components）、数据（data）、工具（utils）、资源（assets）分层清晰，注释完善
• 图标：内置多套配色图标资源
• 版本管理：含 APP 版本号机制，发版时自动清空旧缓存与旧数据，保证真机调试始终为最新代码

五、交付内容

项目目录结构（解压后）

源码_医院陪诊/
├── app.js                  # 小程序入口（导航栏适配、版本缓存初始化）
├── app.json                # 全局配置（页面路由、窗口、自定义组件）
├── app.ttss                # 全局样式（主题变量、通用类）
├── project.config.json     # 项目配置
├── assets/                 # 静态资源（多套配色图标）
├── components/             # 公共组件
│   ├── tabbar/             # 自定义底部导航
│   └── empty/              # 空状态组件
├── data/
│   ├── mock-data.js        # 种子演示数据（机构/服务/陪诊师/订单/公告/设置）
│   └── mock-data.json      # 同结构 JSON 数据
├── utils/
│   └── mock-api.js         # 模拟接口层（服务/陪诊师/订单/设置 CRUD + 看板）
└── pages/                  # 页面
    ├── index/              # 首页（工作台）
    ├── companions/         # 优选陪诊师
    ├── orders/             # 陪诊订单
    ├── detail/             # 陪诊详情（流程进度）
    ├── booking/            # 预约陪诊（下单表单）
    └── my/                 # 服务中心（设置/数据管理）

六、运行方式

1. 下载并安装 抖音开发者工具（字节跳动小程序开发者工具）。
2. 解压 源码_医院陪诊.zip。
3. 在开发者工具中选择「导入项目」，项目目录指向解压后的 源码_医院陪诊 文件夹。
4. 填写自己的 AppID（或使用测试号），点击导入即可预览。
5. 真机调试时如遇旧缓存，可在「服务中心」页点击「清除本地缓存」，或调大 app.js 中 APP_VER 版本号强制刷新。
6. 如需接入真实能力，替换 utils/mock-api.js 中的服务、陪诊师、订单等接口实现，对接实际后端即可上线运营。

说明：源码中所有机构、公司、人员、医院、地址、电话均为演示占位数据，无任何真实信息。