2026-07-10 08:32:48 +08:00
2026-07-05 14:43:34 +08:00
2026-07-05 14:43:34 +08:00
2026-07-05 14:43:34 +08:00
2026-07-05 14:43:34 +08:00
2026-07-05 14:43:34 +08:00
2026-07-05 14:43:34 +08:00
2026-07-05 14:43:34 +08:00
2026-07-05 14:43:34 +08:00
2026-07-05 14:43:34 +08:00
2026-07-05 14:43:34 +08:00
1
2026-07-10 08:32:48 +08:00
2026-07-05 14:43:34 +08:00
2026-07-05 14:43:34 +08:00
2026-07-05 14:43:34 +08:00
2026-07-05 14:43:34 +08:00
2026-07-05 14:43:34 +08:00
2026-07-05 14:43:34 +08:00
2026-07-05 14:43:34 +08:00
2026-07-05 14:43:34 +08:00

医院预约挂号小程序

基于 Taro 4.x + React + TypeScript 的医院预约挂号小程序,配套 Node.js + Express 后端 API。

功能概览

  • 医院简介(轮播 Banner + 详细介绍 + 联系方式)
  • 分栏展示:医院简介 / 科室设置 / 医院荣誉
  • 预约挂号:选择科室 → 选择医生 → 选择日期时段 → 填写姓名电话
  • 我的预约:查看列表 / 查看详情 / 取消预约
  • 预约成功页与温馨提示

目录结构

.
├── src/                  # 小程序前端(Taro + React + TS
│   ├── pages/            # 5 个页面(3 tabBar + 2 二级页)
│   ├── components/       # 通用组件
│   ├── services/         # API 请求封装
│   ├── store/            # Zustand 状态
│   ├── data/             # Mock 数据
│   ├── types/            # TS 类型定义
│   ├── styles/           # 全局样式
│   └── utils/            # 工具函数
├── server/               # Node.js 后端 API
│   ├── src/
│   │   ├── routes/       # 业务路由
│   │   ├── data.js       # Mock 数据
│   │   └── index.js      # 入口
│   ├── package.json
│   └── README.md
└── README.md

快速开始

1. 小程序预览

项目根目录已配置 Taro 模板,可直接通过 IDE 内的预览服务打开二维码,在微信开发者工具中扫码体验。

2. 启动后端

cd server
npm install
npm start
# 监听 http://localhost:3000

后端 API

详见 server/README.md

主要接口:

  • GET /api/hospitals — 医院列表
  • GET /api/departments — 科室列表
  • GET /api/doctors?departmentId= — 医生列表
  • POST /api/appointments — 创建预约
  • GET /api/appointments?phone= — 我的预约
  • PUT /api/appointments/:id/cancel — 取消预约

小程序接入真实后端

修改 src/services/request.ts 中的 BASE_URL

const BASE_URL = 'http://localhost:3000';

然后把 src/services/*.ts 中返回 mock 数据的函数改为调用 request(),并把 src/data/*.ts 删除即可完成对接。

技术栈

  • 前端:Taro 4.1.9、React 18、TypeScript 5、Sass
  • 后端:Node.js、Express 4、CORS

数据存储

当前为内存 Mock,重启服务后预约数据会清空。生产环境请替换为 MySQL / PostgreSQL / MongoDB 等持久化方案。

S
Description
No description provided
Readme 1.9 MiB
Languages
JavaScript 49.8%
TypeScript 27.7%
SCSS 9.4%
Shell 6.5%
CSS 4.8%
Other 1.8%