# 苏州肛泰中医院 · 预约挂号系统 基于 **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. 后端 ```bash cd server npm install # 创建数据库并导入 schema mysql -u root -p < src/schema.sql # 配置环境变量 cp .env.example .env # 编辑 .env 填写数据库连接信息 npm start # 监听 http://localhost:3000 ``` ### 2. 小程序前端 ```bash 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` — 管理员账号