苏州肛泰中医院 · 预约挂号系统

基于 Taro 4.x + React + TypeScript 的微信小程序，配套 Node.js + Express + MySQL 后端 API 和运营管理后台。

线上地址：https://y.szgtlive.com

功能概览

小程序端（5 个 TabBar 页 + 2 个二级页）

• 首页：医院名称（后台可配置）、三栏中心入口（独立图标图片 + 名称 + 预约咨询）、轮播 Banner
• 医院简介：轮播图 + 医院详细介绍 + 联系方式 + 地址
• 自助预约：选择中心 → 填写姓名/电话/年龄/症状 → 选择预约日期 → 提交
• 在线自测：7 道问卷题 → 自动评分 → 提交为意向客户
• 电话咨询：直接拨打后台配置的咨询电话
• 中心详情页：名称 + 简介 → 立即预约/电话咨询按钮 → 配图
• 预约成功页：成功提示 + 返回首页

手机号授权（可开关）

• 打开小程序时自动弹出手机号授权（微信官方 getPhoneNumber）
• 通过 Button openType="getPhoneNumber" 获取 code，后端调微信 API 解密手机号
• 管理后台可控制开关、配置 AppID/AppSecret
• 同一手机号只创建一条意向客户记录，后续操作补充升级来源

位置采集（可开关）

• 授权时可选采集模糊位置（getFuzzyLocation 到市级别）
• 管理后台显示地区名称（如"江苏省苏州市"）
• 未开通时可关闭，关闭后不调用定位 API

管理后台（单页应用）

• 概览：预约统计 + 最近预约列表
• 首页内容：轮播图管理 + 三中心管理（图标图片/配图/简介等）
• 医院简介：简介文字 + 轮播图片管理
• 系统设置：医院名称、咨询电话、地址、微信手机号授权开关、AppID/AppSecret、高德 Key、位置采集开关、企业微信通知配置
• 预约管理：查看/确认/完成/取消/删除预约，搜索过滤
• 意向客户：查看客户列表、问卷详情（中文显示）、来源筛选
• 账号设置：修改密码

企业微信通知

• 新预约、新意向客户时自动推送 Markdown 消息到企业微信群
• 支持多个 Webhook 地址（每行一个）
• 通知内容包含患者姓名、电话、科室、日期、症状等详情
• 管理后台可发送测试通知

目录结构

.
├── src/                      # 小程序前端（Taro + React + TypeScript）
│   ├── pages/                # 页面
│   │   ├── home/             # 首页
│   │   ├── hospital/         # 医院简介
│   │   ├── appointment/      # 自助预约
│   │   ├── self-test/        # 在线自测
│   │   ├── center/           # 中心详情
│   │   ├── success/          # 预约成功
│   │   ├── mine/             # 我的（保留）
│   │   └── phone-consult/    # 电话咨询占位
│   ├── components/           # 通用组件（PhoneAuthModal 等）
│   ├── custom-tab-bar/       # 自定义 TabBar（第5个直接拨号）
│   ├── services/             # API 请求封装
│   ├── types/                # TypeScript 类型定义
│   ├── styles/               # 全局样式（theme/variables/compat）
│   └── utils/                # 工具函数
├── server/                   # Node.js 后端 API
│   └── src/
│       ├── modules/           # 业务模块
│       │   ├── adminAuth/     # 管理员认证
│       │   ├── appointment/   # 预约
│       │   ├── banner/        # 轮播图
│       │   ├── center/        # 中心
│       │   ├── config/        # 站点/首页配置
│       │   ├── lead/          # 意向客户
│       │   ├── notification/  # 企业微信通知
│       │   ├── wechat/        # 微信手机号服务
│       │   ├── upload/        # 文件上传
│       │   └── ...            # 其他模块
│       ├── seeds/             # 种子数据
│       ├── utils/             # 工具函数
│       ├── schema.sql         # 数据库表结构
│       └── index.js           # 入口
├── admin/                    # 运营管理后台（单页应用）
│   ├── index.html
│   ├── app.js
│   └── styles.css
├── scripts/                  # 部署脚本
├── dist/                     # 构建产物（微信小程序）
└── project.config.json       # 微信开发者工具配置

快速开始

环境要求

• Node.js 18+
• MySQL 8.0+
• 微信开发者工具（最新稳定版）

1. 后端

cd server
npm install
# 创建数据库并导入 schema
mysql -u root -p < src/schema.sql
# 配置环境变量
cp .env.example .env
# 编辑 .env 填写数据库连接信息
npm start
# 监听 http://localhost:3000

2. 小程序前端

npm install
npm run build:weapp
# 用微信开发者工具打开 dist/ 目录

3. 管理后台

管理后台为静态文件，通过后端 Express 托管在 /admin 路径下，或通过 Nginx 单独部署。

访问 https://y.szgtlive.com/admin/ 即可。

主要 API

接口	说明
POST /api/v1/appointments	创建预约
GET /api/v1/appointments	预约列表
PUT /api/v1/appointments/:id/confirm	确认预约
PUT /api/v1/appointments/:id/complete	标记完成
PUT /api/v1/appointments/:id/cancel	取消预约
POST /api/v1/leads	提交意向客户
GET /api/v1/leads	意向客户列表
GET /api/v1/centers	中心列表
GET /api/v1/config/home	首页配置
GET /api/v1/config/site	站点配置
PUT /api/config/site	更新站点配置（管理员）
POST /api/v1/wechat/phone	微信手机号解密
GET /api/v1/wechat/phone-required	手机号授权开关
POST /api/v1/notification/test	测试通知
POST /api/admin/auth/login	管理员登录

技术栈

• 前端：Taro 4.x、React 18、TypeScript 5、Sass
• 后端：Node.js、Express 4、MySQL（mysql2/promise）
• 部署：PM2 进程管理、Nginx 反向代理、HTTPS
• 通知：企业微信 Webhook

数据存储

MySQL 持久化存储，主要表：

• centers — 中心（含 icon_image 图标图片 + image 详情配图）
• appointments — 预约记录
• leads — 意向客户（唯一约束 phone+source 去重）
• home_config — 首页配置 + 系统设置（JSON）
• banners / hospital_images / hospital_intro — 内容管理
• admins — 管理员账号