docs: 完善PRD文档,新增咨询人弹窗和咨询人档案详情章节,更新页面截图和截图规范
@@ -2,7 +2,7 @@
|
||||
|
||||
> **所属端**:员工端 APP
|
||||
> **模块路径**:`employee-app/health-consult/`
|
||||
> **最后更新**:2026-04-14
|
||||
> **最后更新**:2026-04-15
|
||||
|
||||
---
|
||||
|
||||
@@ -15,14 +15,14 @@
|
||||
```
|
||||
健康咨询首页
|
||||
├── 找专家
|
||||
│ ├── 综合搜索 → 专家主页 / 医院详情 / 专家列表
|
||||
│ ├── 综合搜索 → 搜索结果 → 专家主页 / 医院详情 / 专家列表
|
||||
│ ├── [按医院] → 医院详情 → 专家主页
|
||||
│ ├── [按科室] → 专家列表 → 专家主页
|
||||
│ └── [按疾病] → 专家列表 → 专家主页
|
||||
├── AI 小助手
|
||||
├── 咨询小助手
|
||||
└── 我的咨询
|
||||
├── [咨询专家] → 图文咨询详情 / 视频咨询详情
|
||||
└── [咨询小助手] → AI 小助手聊天
|
||||
└── [咨询小助手] → 小助手咨询记录
|
||||
|
||||
专家主页
|
||||
├── [图文咨询] → 咨询须知弹窗 → 选择咨询人 → 图文咨询聊天 → 结束咨询确认弹窗 → 评价医生
|
||||
@@ -48,34 +48,37 @@ stateDiagram-v2
|
||||
|
||||
### 页面清单
|
||||
|
||||
| # | 文件 | 名称 | 类型 |
|
||||
|---|------|------|------|
|
||||
| 1 | index.html | 模块首页 | 页面 |
|
||||
| 2 | find-expert.html | 找专家 | 页面 |
|
||||
| 3 | search.html | 综合搜索 | 页面 |
|
||||
| 4 | expert-list.html | 专家列表 | 页面 |
|
||||
| 5 | hospital-detail.html | 医院详情 | 页面 |
|
||||
| 6 | expert-profile.html | 专家主页 | 页面 |
|
||||
| 7 | expert-reviews.html | 用户评价列表 | 页面 |
|
||||
| 8 | (内嵌于 expert-profile.html) | 咨询须知弹窗 | 弹窗 |
|
||||
| 9 | select-person.html | 选择咨询人 | 页面 |
|
||||
| 10 | add-health-record.html | 新增健康档案 | 页面 |
|
||||
| 11 | text-chat.html | 图文咨询聊天 | 页面 |
|
||||
| 12 | select-report-dialog.html | 选择体检报告弹窗 | 弹窗 |
|
||||
| 13 | end-consult-dialog.html | 结束咨询确认弹窗 | 弹窗 |
|
||||
| 14 | text-chat-history.html | 图文咨询历史对话 | 页面 |
|
||||
| 15 | video-booking.html | 视频咨询预约 | 页面 |
|
||||
| 16 | video-success.html | 预约成功 | 页面 |
|
||||
| 17 | video-detail-confirming.html | 视频咨询详情 - 待确认 | 页面 |
|
||||
| 18 | video-detail-pending.html | 视频咨询详情 - 待开始 | 页面 |
|
||||
| 19 | video-detail-done.html | 视频咨询详情 - 已完成 | 页面 |
|
||||
| 20 | video-detail-cancelled.html | 视频咨询详情 - 已取消 | 页面 |
|
||||
| 21 | video-detail-rejected.html | 视频咨询详情 - 已拒绝 | 页面 |
|
||||
| 22 | rate-doctor.html | 评价医生 | 页面 |
|
||||
| 23 | my-records.html | 我的咨询 | 页面 |
|
||||
| 24 | record-detail.html | 咨询详情 | 页面 |
|
||||
| 25 | assistant-chat.html | AI 小助手聊天 | 页面 |
|
||||
| 26 | assistant-chat-history.html | 小助手历史对话 | 页面 |
|
||||
| # | 文件 | 名称 | 类型 |
|
||||
|---|------|--------------|------|
|
||||
| 1 | index.html | 模块首页 | 页面 |
|
||||
| 2 | find-expert.html | 找专家 | 页面 |
|
||||
| 3 | search.html | 综合搜索 | 页面 |
|
||||
| 4 | (search.html 结果态) | 搜索结果 | 页面状态 |
|
||||
| 5 | expert-list.html | 专家列表 | 页面 |
|
||||
| 6 | hospital-detail.html | 医院详情 | 页面 |
|
||||
| 7 | expert-profile.html | 专家主页 | 页面 |
|
||||
| 8 | expert-reviews.html | 用户评价列表 | 页面 |
|
||||
| 9 | (内嵌于 expert-profile.html) | 咨询须知弹窗 | 弹窗 |
|
||||
| 10 | select-person.html | 选择咨询人 | 页面 |
|
||||
| 11 | (内嵌于 select-person.html) | 新增咨询人弹窗 | 弹窗 |
|
||||
| 12 | add-health-record.html | 新增健康档案 | 页面 |
|
||||
| 13 | consult-person-detail.html | 咨询人档案详情 | 页面 |
|
||||
| 14 | text-chat.html | 图文咨询聊天 | 页面 |
|
||||
| 15 | select-report-dialog.html | 选择体检报告弹窗 | 弹窗 |
|
||||
| 16 | end-consult-dialog.html | 结束咨询确认弹窗 | 弹窗 |
|
||||
| 17 | text-chat-history.html | 图文咨询历史对话 | 页面 |
|
||||
| 18 | video-booking.html | 视频咨询预约 | 页面 |
|
||||
| 19 | video-success.html | 预约成功 | 页面 |
|
||||
| 20 | video-detail-confirming.html | 视频咨询详情 - 待确认 | 页面 |
|
||||
| 21 | video-detail-pending.html | 视频咨询详情 - 待开始 | 页面 |
|
||||
| 22 | video-detail-done.html | 视频咨询详情 - 已完成 | 页面 |
|
||||
| 23 | video-detail-cancelled.html | 视频咨询详情 - 已取消 | 页面 |
|
||||
| 24 | video-detail-rejected.html | 视频咨询详情 - 已拒绝 | 页面 |
|
||||
| 25 | rate-doctor.html | 评价医生 | 页面 |
|
||||
| 26 | my-records.html | 我的咨询 | 页面 |
|
||||
| 27 | record-detail.html | 咨询详情 | 页面 |
|
||||
| 28 | assistant-chat.html | 咨询小助手 | 页面 |
|
||||
| 29 | assistant-chat-history.html | 小助手历史对话 | 页面 |
|
||||
|
||||
---
|
||||
|
||||
@@ -88,21 +91,22 @@ stateDiagram-v2
|
||||
|
||||
**功能说明**
|
||||
|
||||
模块入口页,提供三大功能快捷入口(找专家、AI 小助手、我的咨询)和推荐专家列表。专家卡片展示姓名、职称、医院科室、擅长标签、评分、咨询次数、回复率。
|
||||
模块入口页,提供三大功能快捷入口(找专家、咨询小助手、我的咨询)和推荐专家列表。专家卡片展示姓名、职称、医院科室、擅长标签、评分、咨询次数、回复率。
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 推荐专家由后端根据评分、咨询量等维度综合排序
|
||||
- 推荐专家由后端根据咨询量 -> 评分 ->回复率3个维度综合排序,3个排序因子都相同时使用随机策略
|
||||
- 首页推荐专家至多只显示6个,没有专家使用占位图
|
||||
- 每张专家卡片展示不超过 3 个擅长标签
|
||||
|
||||
**交互说明**
|
||||
|
||||
- 点击「找专家」跳转到找专家页
|
||||
- 点击「AI 小助手」跳转到 AI 小助手聊天页
|
||||
- 点击「小助手」跳转到 小助手聊天页
|
||||
- 点击「我的咨询」跳转到我的咨询记录页
|
||||
- 点击「查看全部」跳转到找专家页
|
||||
- 点击专家卡片或卡片上的「咨询」按钮,跳转到专家主页
|
||||
- 导航栏返回 → 员工端首页
|
||||
- 导航栏返回 → 精确返回来源页
|
||||
|
||||
---
|
||||
|
||||
@@ -113,27 +117,27 @@ stateDiagram-v2
|
||||
|
||||
**功能说明**
|
||||
|
||||
三维度查找专家:按医院、按科室、按疾病。顶部搜索栏点击后跳转到综合搜索页。
|
||||
按三维度查找专家:按医院、按科室、按疾病。顶部搜索栏点击后跳转到综合搜索页。
|
||||
|
||||
- **全部医院**:医院卡片列表,展示名称、等级、距离、专家数、地址
|
||||
- **全部科室**:左侧一级分类 + 右侧二级科室网格,每项展示科室名和专家数
|
||||
- **全部疾病**:横向分类 Tab + 疾病列表,每项展示疾病名和专家数
|
||||
- **按医院**:医院卡片列表,展示名称、等级、距离、专家数、地址
|
||||
- **按科室**:左侧一级分类 + 右侧二级科室网格,每项展示科室名和专家数
|
||||
- **按疾病**:左侧科室名称 + 右侧科室关联的疾病名称列表,每项展示疾病名和专家数
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 搜索基于 ElasticSearch 模糊匹配,可搜医院、科室、疾病、医生姓名
|
||||
- 科室体系:6 个一级分类(内科、外科、妇产科、儿科、眼耳鼻喉、皮肤科),每级含多个二级科室
|
||||
- 疾病体系:6 大类(心血管、内分泌、骨骼肌肉、神经系统、消化系统、呼吸系统)
|
||||
- 医院距离基于用户当前定位计算
|
||||
- 顶部搜索框跳转至综合搜索二级页面
|
||||
- 按医院:下拉分页(每页10条)展示所有医院信息,取当前用户位置信息按距离进行升序,位置信息获取失败按医院等级排序
|
||||
- 按科室:左侧展示所有一级科室分类,右侧展示该分类下二级科室网格并按专家数量倒序
|
||||
- 按疾病:左侧展示所有一级科室分类,右侧展示该分类下所有关联的疾病信息并按擅长此疾病的专家数量倒序
|
||||
|
||||
**交互说明**
|
||||
|
||||
- 点击搜索栏跳转到综合搜索页
|
||||
- 顶部 Tab 切换「全部医院 / 全部科室 / 全部疾病」三个面板
|
||||
- 顶部 Tab 切换「按医院 / 按科室 / 按疾病」三个面板
|
||||
- 点击医院卡片跳转到医院详情页
|
||||
- 科室面板:点击左侧一级分类联动切换右侧二级科室;点击二级科室项跳转到专家列表页
|
||||
- 疾病面板:点击横向分类 Tab 切换疾病列表;点击疾病项跳转到专家列表页
|
||||
- 导航栏返回 → 健康咨询首页
|
||||
- 疾病面板:点击左侧一级分类联动切换右侧关联疾病;点击疾病项跳转到专家列表页
|
||||
- 导航栏返回 → 健康咨询首页(index.html)
|
||||
|
||||
---
|
||||
|
||||
@@ -144,98 +148,126 @@ stateDiagram-v2
|
||||
|
||||
**功能说明**
|
||||
|
||||
综合搜索二级页面,支持按关键字搜索所有相关信息。搜索结果按专家、医院、科室、疾病四个分类混合展示。
|
||||
综合搜索二级页面,支持按关键字搜索所有相关信息。
|
||||
|
||||
- **默认态**:展示搜索历史标签和热门搜索标签
|
||||
- **结果态**:按分类展示匹配结果,专家和医院分类带"查看全部"入口
|
||||
- **空态**:无匹配结果时展示空状态提示
|
||||
- **默认态**:展示搜索历史标签
|
||||
- **搜索态**:输入关键字或点击历史搜索标签后,跳转到搜索结果页展示匹配结果
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 搜索基于 ElasticSearch 全文模糊匹配,同时搜索专家姓名、医院名称、科室名称、疾病名称
|
||||
- 搜索历史本地存储,最多保留 10 条
|
||||
- 热门搜索由后端配置,定期更新
|
||||
- 搜索基于用户输入的关键字全文模糊匹配,同时搜索专家姓名、医院名称、科室名称、疾病名称
|
||||
- 搜索历史移动端本地存储,最多保留 10 条
|
||||
|
||||
**交互说明**
|
||||
|
||||
- 输入框自动聚焦,输入文字后实时展示搜索结果
|
||||
- 输入框自动聚焦,输入文字后按搜索或回车跳转到搜索结果页
|
||||
- 输入框右侧清除按钮,点击清空输入并回到默认态
|
||||
- 点击搜索历史/热门搜索标签,自动填入关键字并触发搜索
|
||||
- 点击搜索历史搜索标签,跳转到搜索结果页
|
||||
- 点击"清空"清除所有搜索历史
|
||||
- 点击专家卡片跳转到专家主页
|
||||
- 点击医院卡片跳转到医院详情页
|
||||
- 点击科室/疾病标签跳转到专家列表页
|
||||
- 点击"取消"返回找专家页
|
||||
|
||||
---
|
||||
### 2.4 专家列表(expert-list.html)
|
||||
|
||||
### 2.4 搜索结果(search.html 结果态)
|
||||
|
||||

|
||||
|
||||
**功能说明**
|
||||
|
||||
综合搜索的结果展示页面。顶部保留搜索栏(显示当前搜索关键词,支持修改后重新搜索)。搜索结果按专家、医院、科室、疾病四个分类混合展示,每个分类默认展示前几条,专家和医院分类带"查看全部"入口。无匹配结果时展示空状态提示。
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 搜索基于输入的管检词模糊匹配,同时搜索专家姓名、医院名称、科室名称、疾病名称
|
||||
- 各个分类的搜索结果均按关键词的匹配度排序,匹配度最高地排在前
|
||||
- 无结果时展示空状态提示"未找到相关结果"
|
||||
|
||||
**交互说明**
|
||||
|
||||
- 搜索栏显示当前关键词,可修改后重新搜索(刷新当前页面结果)
|
||||
- 输入框右侧清除按钮,点击清空输入内容
|
||||
- 点击专家卡片跳转到专家主页
|
||||
- 点击医院卡片跳转到医院详情页
|
||||
- 点击科室/疾病标签跳转到专家列表页
|
||||
- 点击专家/医院分类的"查看全部"跳转到对应的完整列表
|
||||
- 点击"取消"返回综合搜索页
|
||||
- 导航栏返回 → 综合搜索页
|
||||
|
||||
---
|
||||
### 2.5 专家列表(expert-list.html)
|
||||
|
||||

|
||||
|
||||
|
||||
**功能说明**
|
||||
|
||||
展示特定分类(科室/疾病)下的专家列表。根据 URL 参数 `type`(dept/disease)和 `name` 动态切换页面上下文:
|
||||
展示特定分类(医院/科室/疾病)下的专家列表。根据 URL 参数 `type`(hospital/dept/disease)和 `name` 动态切换页面上下文:
|
||||
- 科室维度(type=hospital):导航标题"医院专家",头部显示医院名称
|
||||
- 科室维度(type=dept):导航标题"科室专家",头部显示科室名称
|
||||
- 疾病维度(type=disease):导航标题"疾病专家",头部显示疾病名称,专家卡片展示与该疾病相关的擅长标签
|
||||
|
||||
支持排序(好评优先 / 热度优先 / 回复率)和按姓名搜索过滤。
|
||||
支持排序(咨询量/评分/回复率)和按姓名搜索过滤。
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 默认按好评优先排序
|
||||
- 搜索为前端实时过滤,匹配医生姓名
|
||||
- 支持咨询量(热度)/评分 /回复率3个维度排序,默认根据热度排序
|
||||
- 下拉分页加载,搜索匹配医生姓名
|
||||
- 无结果时展示空状态提示
|
||||
- 页面通过 URL 参数区分来源,同一页面服务科室和疾病两种入口
|
||||
- 页面通过 URL 参数区分来源,同一页面服务医院、科室和疾病三种入口
|
||||
|
||||
**交互说明**
|
||||
|
||||
- 点击排序按钮切换排序方式,高亮当前选中项
|
||||
- 搜索输入框输入关键词实时过滤卡片列表
|
||||
- 点击专家卡片跳转到专家主页
|
||||
- 导航栏返回 → 找专家页
|
||||
- 导航栏返回 → 精确返回来源页
|
||||
|
||||
---
|
||||
|
||||
### 2.5 医院详情(hospital-detail.html)
|
||||
### 2.6 医院详情(hospital-detail.html)
|
||||
|
||||

|
||||
|
||||
|
||||
**功能说明**
|
||||
|
||||
展示医院信息(实景图、名称、等级、地址、距离、导航按钮)、医院简介(支持展开/收起),以及本院专家列表(排序 + 搜索,逻辑同专家列表页)。底部展示用户评价区域。
|
||||
展示医院信息(图片、名称、等级、地址、距离、导航按钮)、医院简介(支持展开/收起),以及本院专家列表(排序 + 搜索,逻辑同专家列表页)。底部展示用户评价区域。
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 导航按钮调用地图导航(原型仅模拟提示)
|
||||
- 简介默认收起,超长文本截断
|
||||
- 专家列表为两列网格布局
|
||||
- 简介默认收起,超长文本截断,默认显示3行
|
||||
- 专家列表为两列网格布局,至多显示6个,排序规则使用咨询量 -> 评分2个维度综合排序,2个排序因子都相同时使用随机策略
|
||||
- 用户评价列表按时间倒序展示本院下医生的评价信息,默认只显示四条
|
||||
|
||||
**交互说明**
|
||||
|
||||
- 点击导航按钮提示"正在为您导航..."(原型演示)
|
||||
- 点击导航按钮提示"选择打开手上的地图软件"(原型演示)
|
||||
- 点击展开/收起按钮切换简介文本显示
|
||||
- 排序按钮切换专家列表排序方式
|
||||
- 点击专家卡片跳转到专家主页
|
||||
- 点击全部专家跳转至专家列表页面(医院专家)
|
||||
- 点击用户评价-查看全部跳转至用户评价列表页(按医院筛选)
|
||||
- 导航栏返回 → 找专家页
|
||||
|
||||
---
|
||||
|
||||
### 2.6 专家主页(expert-profile.html)
|
||||
### 2.7 专家主页(expert-profile.html)
|
||||
|
||||

|
||||
|
||||
|
||||
**功能说明**
|
||||
|
||||
专家个人详情页。展示头像、姓名、职称、科室、所属医院,统计数据(综合评价、24h 回复率、总咨询量),医生简介、擅长方向标签,以及最新 3 条用户评价。提供图文咨询和视频咨询两个入口。
|
||||
专家个人详情页。展示头像、姓名、职称、科室、所属医院,统计数据(综合评价、24h回复率、总咨询量),医生简介、擅长方向标签,以及最新 3 条用户评价。提供图文咨询和视频咨询两个入口。
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 点击任一咨询按钮,先弹出「咨询须知」弹窗,用户点击「同意并开始咨询」后才进入对应流程
|
||||
- 图文咨询确认后跳转到选择咨询人页;视频咨询确认后进入预约选时
|
||||
- 返回按钮根据来源页精确返回(从首页进入则返回首页,从专家列表进入则返回专家列表,其他情况返回上一页)
|
||||
- 24h回复率 = 专家首次回复在24小时内的图文咨询数 / 图文咨询总数 × 100%
|
||||
- 医生简介和职业经历默认是收起状态,收起状态下至多显示3行,点击展开查看全部
|
||||
|
||||
**交互说明**
|
||||
|
||||
@@ -247,7 +279,7 @@ stateDiagram-v2
|
||||
|
||||
---
|
||||
|
||||
### 2.7 用户评价列表(expert-reviews.html)
|
||||
### 2.8 用户评价列表(expert-reviews.html)
|
||||
|
||||

|
||||
|
||||
@@ -259,11 +291,14 @@ stateDiagram-v2
|
||||
**业务规则**
|
||||
|
||||
- 评价按时间倒序排列
|
||||
- 评价标签由系统预设:专业、耐心、回复及时、负责任、个性化、实用
|
||||
- 评价标签由系统预设:专业、耐心、回复及时、负责任、个性化、实用...,评价标签由服务端根据评价内容自动提取
|
||||
- 匿名评价不展示用户名称和图像,统一使用默认图像以及“匿名用户”
|
||||
- 数据过滤:从医院主页进入显示该医院下所有专家的评价,从专家主页进入显示该专家的评价
|
||||
- 评价列表使用下拉分页加载
|
||||
|
||||
**交互说明**
|
||||
|
||||
- 导航栏返回 → 专家主页
|
||||
- 导航栏返回 → 精确返回来源页
|
||||
|
||||
---
|
||||
|
||||
@@ -271,15 +306,14 @@ stateDiagram-v2
|
||||
|
||||
### 3.1 咨询须知弹窗(consult-notice-dialog.html)
|
||||
|
||||

|
||||
|
||||
**功能说明**
|
||||
|
||||
发起咨询前的告知弹窗,底部滑出样式。所有咨询入口(图文/视频)必须先展示此弹窗,用户同意后才能进入实际咨询流程。
|
||||
|
||||
**须知内容:**
|
||||
1. 本平台提供在线健康咨询服务,不替代线下就医
|
||||
2. 请如实描述症状和病史,以便医生准确判断
|
||||
3. 医生将在 24 小时内回复(图文)/ 按预约时间进行(视频)
|
||||
4. 如遇紧急情况,请立即拨打 120
|
||||
1. 须知内容从接口获取,在后台统一配置,图文咨询和视频咨询须知内容不同
|
||||
|
||||
**交互说明**
|
||||
|
||||
@@ -299,11 +333,12 @@ stateDiagram-v2
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 员工开启一个新的咨询前可选当前咨询人以及咨询人档案信息,也可跳过该流程直接进入到咨询对话页
|
||||
- 咨询人卡片展示:头像、姓名、年龄、性别、身高、体重、与本人关系标签
|
||||
- 有档案的咨询人:卡片下方展开档案列表,每条档案显示档案名称、问题摘要、创建时间
|
||||
- 无档案的咨询人:卡片独立展示,无档案区域
|
||||
- 选中档案时自动高亮所属咨询人
|
||||
- 未选择档案时仍可发送咨询(仅发送咨询人基本信息)
|
||||
- 未创建咨询人或没有咨询档案前不能发起咨询,前端需要提示先创建咨询人或创建咨询档案
|
||||
|
||||
**交互说明**
|
||||
|
||||
@@ -311,12 +346,56 @@ stateDiagram-v2
|
||||
- 点击档案条目选中该档案,同时高亮所属咨询人
|
||||
- 点击「+ 新增健康档案」跳转到新增健康档案页
|
||||
- 点击「+ 新增咨询人」进入新增咨询人流程
|
||||
- 点击「发送咨询」将咨询人信息和档案发送到对话框并返回
|
||||
- 导航栏返回 → 上一页
|
||||
- 点击「确定」开启一个新的图文咨询并将咨询人信息和档案发送到对话框并返回
|
||||
- 点击「快速咨询」直接进入到咨询对话页
|
||||
- 导航栏返回 → 精确返回来源页
|
||||
|
||||
---
|
||||
|
||||
### 3.3 新增健康档案(add-health-record.html)
|
||||
### 3.3 新增咨询人弹窗(内嵌于 select-person.html)
|
||||
|
||||

|
||||
|
||||
**功能说明**
|
||||
|
||||
弹窗表单,从选择咨询人页底部「+ 新增咨询人」按钮触发。用于为当前用户添加家属或其他咨询人,表单分为基本信息、生活习惯、身体情况三个区块。保存后新咨询人卡片自动插入选择咨询人列表。
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 基本信息所有内容均为必填项,保存时校验
|
||||
- 性别默认选中"男"
|
||||
- 生活习惯各项均有默认选中值(吸烟:否、饮酒:否、饮食:清淡、睡眠:良好)
|
||||
- 保存成功后弹窗关闭,新咨询人卡片出现在列表中(无档案状态)
|
||||
- 底部展示温馨提示:咨询人信息用于平台审核,不会外传.....
|
||||
|
||||
**交互说明**
|
||||
|
||||
- 点击右上角关闭按钮或遮罩层区域关闭弹窗
|
||||
- 性别、生活习惯各项通过按钮组单选切换
|
||||
- 点击「保存」校验姓名后保存并关闭弹窗
|
||||
|
||||
**表单字段表**
|
||||
|
||||
| 字段 | 类型 | 必填 | 规则 |
|
||||
|------|------|----|----------------------------|
|
||||
| 姓名 | 文本 | 是 | 请输入姓名 |
|
||||
| 性别 | 按钮组单选 | 是 | 男 / 女,默认"男" |
|
||||
| 出生日期 | 日期选择 | 是 | date 类型 |
|
||||
| 与本人关系 | 文本 | 是 | 如:配偶、朋友、父母等 |
|
||||
| 是否吸烟 | 按钮组单选 | 否 | 否 / 偶尔 / 是,默认"否" |
|
||||
| 是否饮酒 | 按钮组单选 | 否 | 否 / 偶尔 / 是,默认"否" |
|
||||
| 饮食喜好 | 按钮组单选 | 否 | 清淡 / 均衡 / 偏油腻 / 偏辛辣,默认"清淡" |
|
||||
| 睡眠质量 | 按钮组单选 | 否 | 良好 / 一般 / 较差,默认"良好" |
|
||||
| 身高(cm) | 数字 | 否 | 如:170 |
|
||||
| 体重(kg) | 数字 | 否 | 如:65 |
|
||||
| 过敏史 | 文本 | 否 | 如:青霉素过敏 |
|
||||
| 遗传史 | 文本 | 否 | 如:高血压家族史 |
|
||||
| 既往史 | 文本 | 否 | 如:2020年阑尾炎手术 |
|
||||
| 其他疾病 | 文本 | 否 | 如:慢性胃炎 |
|
||||
|
||||
---
|
||||
|
||||
### 3.4 新增健康档案(add-health-record.html)
|
||||
|
||||

|
||||
|
||||
@@ -327,7 +406,7 @@ stateDiagram-v2
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 档案名称和问题描述为必填项
|
||||
- 基本信息所有内容为必填项
|
||||
- 上传图片仅自己和医生可见,最多 9 张
|
||||
- 选择"是否去医院就诊过"为"是"时,展开医院名称、科室、疾病名称三个字段
|
||||
- 保存后档案关联到当前咨询人
|
||||
@@ -356,33 +435,57 @@ stateDiagram-v2
|
||||
|
||||
---
|
||||
|
||||
### 3.4 图文咨询聊天(text-chat.html)
|
||||
### 3.5 咨询人档案详情(consult-person-detail.html)
|
||||
|
||||

|
||||
|
||||
**功能说明**
|
||||
|
||||
三级页面,展示咨询人的完整健康档案信息。页面分为四个区块:个人信息头部、基础体检数据、生活习惯、健康档案详情。供用户在咨询前查看或确认咨询人的健康状况。
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 头部展示咨询人头像、姓名、与本人关系标签、年龄/性别/身高/体重
|
||||
- 基础数据卡片以两列网格展示:身高、体重、BMI、血压、血糖、心率
|
||||
- 生活习惯以标签形式展示,绿色标签表示良好习惯,橙色标签表示需关注项
|
||||
- 健康档案卡片展示:问题描述、持续时间、检查资料(图片)、就诊经历(医院/科室/疾病名称)、期望帮助
|
||||
|
||||
**交互说明**
|
||||
|
||||
- 导航栏返回 → 上一页
|
||||
|
||||
---
|
||||
|
||||
### 3.6 图文咨询聊天(text-chat.html)
|
||||
|
||||

|
||||
|
||||
|
||||
**功能说明**
|
||||
|
||||
与医生的实时图文聊天界面。聊天头部展示医生头像、姓名、在线状态和「结束咨询」按钮。底部输入区含 + 按钮(展开功能面板)、消息输入框、发送按钮。功能面板提供 5 项操作:图片、拍摄、体检报告、选择档案、结束咨询。
|
||||
发起图文咨询后医生的实时图文聊天界面。聊天头部展示医生头像、姓名、在线状态和「结束咨询」按钮。底部输入区含 + 按钮(展开功能面板)、消息输入框、发送按钮。功能面板提供 6 项操作:图片、拍摄、体检报告、选择档案、文件、位置。
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 图文咨询有效期为 24 小时
|
||||
- 消息发送后 HTML 转义防 XSS
|
||||
- 结束咨询需通过二次确认弹窗
|
||||
- 本页无导航栏返回按钮,只能通过结束咨询离开
|
||||
- 距专家最后一次回复时间超过7天的且状态是进行中的咨询系统自动置为已完成状态(已结束,待评价)
|
||||
- 超过7天没有专家回复的图文咨询系统自动置为超时状态
|
||||
|
||||
**交互说明**
|
||||
|
||||
- 点击发送按钮或按 Enter 发送消息,追加到消息列表
|
||||
- 点击 + 按钮展开/收起功能面板
|
||||
- 功能面板点击「体检报告」打开选择体检报告弹窗
|
||||
- 功能面板点击「选择档案」跳转到选择咨询人页
|
||||
- 点击头部「结束咨询」按钮或功能面板中的「结束咨询」,弹出结束咨询确认弹窗,确认后跳转到评价医生页
|
||||
|
||||
- 功能面板点击「图片」选择系统相册中的图片发送至聊天框
|
||||
- 功能面板点击「拍摄」可拍照或录制视频发送至聊天框
|
||||
- 功能面板点击「体检报告」打开选择体检报告弹窗,选择咨询人对应年份的体检报告点击发送将体检报告以卡片形式发送至对话框
|
||||
- 功能面板点击「选择档案」再次发送咨询前填写的档案信息(只能发送咨询时填写的档案,不能发送其他的档案信息,若从快速咨询进入则档案页为空)
|
||||
- 功能面板点击「文件」选择手机文件系统保存的文件
|
||||
- 功能面板点击「位置」发送员工当前位置或自选位置信息
|
||||
- 点击头部「结束咨询」按钮或,弹出结束咨询确认弹窗,确认后跳转到评价医生页
|
||||
- 导航栏返回 → 图文咨询列表
|
||||
---
|
||||
|
||||
### 3.5 选择体检报告弹窗(select-report-dialog.html)
|
||||
### 3.7 选择体检报告弹窗(select-report-dialog.html)
|
||||
|
||||

|
||||
|
||||
@@ -393,17 +496,16 @@ stateDiagram-v2
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 已发送的报告按钮变为"已发送"(绿色),不可重复发送
|
||||
- 报告数据来自健康体检模块
|
||||
|
||||
**交互说明**
|
||||
|
||||
- 点击「发送」发送报告给医生,按钮变为"已发送"
|
||||
- 点击「发送」发送将体检报告以卡片形式发送至对话框并自动返回到对话页面
|
||||
- 点击关闭按钮关闭弹窗
|
||||
|
||||
---
|
||||
|
||||
### 3.6 结束咨询确认弹窗(end-consult-dialog.html)
|
||||
### 3.7 结束咨询确认弹窗(end-consult-dialog.html)
|
||||
|
||||

|
||||
|
||||
@@ -419,7 +521,7 @@ stateDiagram-v2
|
||||
|
||||
---
|
||||
|
||||
### 3.7 图文咨询历史对话(text-chat-history.html)
|
||||
### 3.9 图文咨询历史对话(text-chat-history.html)
|
||||
|
||||

|
||||
|
||||
@@ -451,14 +553,13 @@ stateDiagram-v2
|
||||
|
||||
**功能说明**
|
||||
|
||||
视频咨询预约页面。展示医生信息卡片和预约须知提示。提供日期横向选择器(未来 6 天)和时段网格(上午 6 个 / 下午 6 个),底部确认栏显示已选时段和「立即预约」按钮。
|
||||
视频咨询预约页面。展示医生信息卡片和预约须知提示。提供日期横向选择器(未来 7 天)和时段网格(时段根据后台设置显示),底部确认栏显示已选时段和「立即预约」按钮。
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 已约满时段置灰不可选,显示"约满"标记
|
||||
- 可用时段显示剩余号源数
|
||||
- 必须同时选择日期和时段才能提交预约
|
||||
- 视频咨询不收取额外费用,如停诊将短信通知
|
||||
|
||||
**交互说明**
|
||||
|
||||
@@ -476,16 +577,15 @@ stateDiagram-v2
|
||||
|
||||
**功能说明**
|
||||
|
||||
视频咨询预约成功结果页。展示成功图标、提示文案(提前 15 分钟推送提醒)、预约信息卡片(医生、医院、科室、类型、时间、费用),以及两个操作按钮。
|
||||
视频咨询预约成功结果页。展示成功图标、提示文案、预约信息卡片(医生、医院、科室、类型、时间、费用),以及两个操作按钮。
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 无导航栏返回按钮,仅通过底部按钮离开
|
||||
- 费用信息以蓝色高亮显示
|
||||
|
||||
**交互说明**
|
||||
|
||||
- 点击「查看我的咨询」跳转到我的咨询记录页
|
||||
- 点击「查看我的咨询」跳转到我的视频咨询记录列表
|
||||
- 点击「返回首页」跳转到健康咨询首页
|
||||
|
||||
---
|
||||
@@ -503,8 +603,7 @@ stateDiagram-v2
|
||||
|
||||
- 用户提交视频咨询预约后进入待确认状态,等待医生确认接诊
|
||||
- 医生确认后状态流转为"待开始",并确定最终预约时间
|
||||
- 用户可在医生确认前取消预约
|
||||
- "等待医生确认"按钮为置灰禁用状态
|
||||
- 用户可在咨询未开始前取消预约
|
||||
|
||||
**交互说明**
|
||||
|
||||
@@ -525,7 +624,6 @@ stateDiagram-v2
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 预约时间前 15 分钟系统推送提醒
|
||||
- 用户可在预约时间前取消预约
|
||||
- "等待预约时间"按钮为置灰禁用状态
|
||||
|
||||
@@ -571,14 +669,14 @@ stateDiagram-v2
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 取消原因由用户取消时填写或系统自动生成
|
||||
- 取消原因由用户取消时填写或专家填写
|
||||
- 取消原因区块使用灰色左边框样式
|
||||
|
||||
**交互说明**
|
||||
|
||||
- 点击「咨询人健康档案」展开/收起档案详情
|
||||
- 点击「再次预约」跳转到视频咨询预约页
|
||||
- 导航栏返回 → 我的咨询记录页
|
||||
- 导航栏返回 → 我的视频咨询记录页
|
||||
|
||||
---
|
||||
|
||||
@@ -589,12 +687,11 @@ stateDiagram-v2
|
||||
|
||||
**功能说明**
|
||||
|
||||
视频咨询已拒绝状态的详情页。展示医生信息(红色"已拒绝"标签)、可展开/收起的咨询人健康档案、红色视频咨询 Banner、咨询信息卡片、拒绝原因区块。
|
||||
视频咨询已拒绝状态的详情页。展示医生信息("已拒绝"标签)、可展开/收起的咨询人健康档案、视频咨询 Banner、咨询信息卡片、拒绝原因区块。
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 拒绝原因由医生填写
|
||||
- 拒绝原因区块使用红色左边框样式
|
||||
|
||||
**交互说明**
|
||||
|
||||
@@ -612,7 +709,7 @@ stateDiagram-v2
|
||||
|
||||
**功能说明**
|
||||
|
||||
咨询结束后对医生进行评价。展示医生信息和"本次咨询已结束"提示,提供星级评分和文字评价输入。
|
||||
图文或视频咨询结束后对医生进行评价。展示医生信息和"本次咨询已结束"提示,提供星级评分和文字评价输入。
|
||||
|
||||
**业务规则**
|
||||
|
||||
@@ -631,10 +728,10 @@ stateDiagram-v2
|
||||
|
||||
**表单字段表**
|
||||
|
||||
| 字段 | 类型 | 必填 | 规则 |
|
||||
|------|------|------|------|
|
||||
| 星级评分 | 星级选择(1~5) | 是 | 默认 5 星 |
|
||||
| 评价内容 | 多行文本 | 否 | 无字数限制 |
|
||||
| 字段 | 类型 | 必填 | 规则 |
|
||||
|------|------|------|-----------------|
|
||||
| 星级评分 | 星级选择(1~5) | 是 | 默认 5 星 |
|
||||
| 评价内容 | 多行文本 | 否 | 字数限制300 |
|
||||
| 匿名评价 | 开关 | 否 | 默认关闭,开启后隐藏评价者姓名 |
|
||||
|
||||
---
|
||||
@@ -648,22 +745,22 @@ stateDiagram-v2
|
||||
|
||||
展示用户的所有咨询记录。通过一级 Tab 栏切换「咨询专家 / 咨询小助手」两大类型:
|
||||
- **咨询专家**:内嵌二级 Tab 切换「图文咨询 / 视频咨询」,记录卡片展示医生头像、姓名、科室、状态标签、咨询人、消息摘要、时间
|
||||
- **咨询小助手**:展示 AI 小助手历史咨询记录列表,卡片展示对话主题、AI 标识、状态标签、消息摘要、时间
|
||||
- **咨询小助手**:展示咨询小助手历史咨询记录列表,卡片展示对话主题、图像、状态标签、消息摘要、时间
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 咨询状态及对应样式:`进行中`(蓝色)、`已完成`(绿色)、`待开始`(橙色)、`待确认`(紫色)、`已取消`(灰色)、`已拒绝`(红色)
|
||||
- 已完成的图文咨询如已评价则显示"已评价"标记
|
||||
- 视频咨询 `待确认` 状态显示期望时间,`待开始` 状态显示预约时间,`已完成` 显示通话时长,`已取消` 显示预约时间,`已拒绝` 显示预约时间
|
||||
- 咨询状态及对应样式:`进行中`、`已完成`、`待开始`、`待确认`、`已取消`、`已拒绝`、`已超时`
|
||||
- 已完成的咨询如已评价则显示"已评价"标记,未评价则显示"待评价"标记
|
||||
- 视频咨询 `待确认` `待开始``已取消` `已拒绝` 显示预约时间,`已完成` 显示通话时长,
|
||||
- 小助手咨询仅有「进行中」和「已完成」两种状态
|
||||
|
||||
**交互说明**
|
||||
|
||||
- 一级 Tab 栏切换咨询专家/咨询小助手面板
|
||||
- 咨询专家面板内二级 Tab 切换图文/视频记录列表
|
||||
- 点击图文咨询记录卡片跳转到咨询详情页
|
||||
- 点击图文咨询记录卡片已完成的跳转到咨询详情页,进行中的跳转至对话页面
|
||||
- 点击视频咨询记录卡片根据状态跳转到对应的视频详情页(待确认/待开始/已完成/已取消/已拒绝)
|
||||
- 点击小助手咨询记录卡片:进行中跳转到 AI 小助手聊天页,已完成跳转到小助手历史对话页
|
||||
- 点击小助手咨询记录卡片:进行中跳转到小助手聊天页,已完成跳转到小助手历史对话页
|
||||
- 导航栏返回 → 健康咨询首页
|
||||
|
||||
---
|
||||
@@ -675,47 +772,53 @@ stateDiagram-v2
|
||||
|
||||
**功能说明**
|
||||
|
||||
展示单条图文咨询记录详情。包含医生信息栏、咨询信息卡片、咨询人健康档案入口、历史对话入口、医生咨询小结。根据咨询是否已评价,显示不同的 UI:
|
||||
已结束的图文咨询点击咨询记录展示单条图文咨询记录详情。包含医生信息栏、咨询信息卡片、咨询人健康档案入口、历史对话入口、医生咨询小结。根据咨询是否已评价,显示不同的 UI:
|
||||
- **已评价状态**:显示"我的评价"区域(5 星评价)、医生咨询小结,底部按钮为"再次咨询"(蓝色边框)+ "已评价"(灰色禁用)
|
||||
- **未评价状态**:隐藏"我的评价"区域,显示医生咨询小结,底部按钮为"再次咨询"(蓝色边框)+ "评价"(蓝色填充)
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 已完成的咨询显示医生咨询小结
|
||||
- 已评价的咨询显示 5 星评价,"评价"按钮变为"已评价"禁用状态
|
||||
- 已评价的咨询显示评价星级,"评价"按钮变为"已评价"禁用状态
|
||||
- 未评价的咨询隐藏评价区域,显示"评价"按钮
|
||||
|
||||
**交互说明**
|
||||
|
||||
- 点击对话入口卡片跳转到图文咨询历史对话页
|
||||
- 点击「再次咨询」跳转到图文咨询聊天页
|
||||
- 点击「咨询人健康档案」入口跳转到健康档案详情页
|
||||
- 点击对话入口卡片跳转到图文咨询历史对话页(只读状态)
|
||||
- 点击「再次咨询」跳转到本次咨询的专家主页
|
||||
- 点击「咨询人健康档案」入口跳转到健康档案详情页,从快速咨询产生的业务因没有咨询人健康档案信息,自动隐藏该区域
|
||||
- 点击「评价」按钮(未评价状态)跳转到评价医生页
|
||||
- 导航栏返回 → 我的咨询记录页
|
||||
|
||||
---
|
||||
|
||||
## 六、AI 小助手
|
||||
## 六、咨询小助手
|
||||
|
||||
### 6.1 AI 小助手聊天(assistant-chat.html)
|
||||
### 6.1 小助手聊天(assistant-chat.html)
|
||||
|
||||

|
||||
|
||||
|
||||
**功能说明**
|
||||
|
||||
AI 智能问诊聊天界面。头部展示机器人头像和"健康小助手"。底部输入区含 + 按钮、消息输入框、发送按钮。功能面板提供 4 项操作:图片、拍摄、体检报告、选择档案。
|
||||
点击咨询主页的小助手进入到与小助手的聊天页面。头部展示机器人头像和"健康小助手"。底部输入区含 + 按钮、消息输入框、发送按钮。功能面板提供 4 项操作:图片、拍摄、文件、位置。
|
||||
|
||||
**业务规则**
|
||||
|
||||
- AI 回复为系统自动生成,不可人工干预
|
||||
- 不替代专业医生诊断,仅作初步健康咨询参考
|
||||
- 结束咨询需通过二次确认弹窗
|
||||
- 距小组手最后一次回复时间超过7天的且状态是进行中的咨询系统自动置为已完成状态(已结束,待评价)
|
||||
- 超过7天没有小助手回复的图文咨询系统自动置为超时状态
|
||||
|
||||
**交互说明**
|
||||
|
||||
- 点击发送按钮发送消息,AI 自动回复
|
||||
- 点击发送按钮或按 Enter 发送消息,追加到消息列表
|
||||
- 点击 + 按钮展开/收起功能面板
|
||||
- 导航栏返回 → 健康咨询首页
|
||||
- 功能面板点击「图片」选择系统相册中的图片发送至聊天框
|
||||
- 功能面板点击「拍摄」可拍照或录制视频发送至聊天框
|
||||
- 功能面板点击「文件」选择手机文件系统保存的文件
|
||||
- 功能面板点击「位置」发送员工当前位置或自选位置信息
|
||||
- 点击头部「结束咨询」按钮」,弹出结束咨询确认弹窗,二次确认结束本次咨询跳转至咨询小助手记录列表
|
||||
- 导航栏返回 → 图文咨询列表
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 51 KiB |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 76 KiB |
|
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 78 KiB |
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 35 KiB |
@@ -95,8 +95,8 @@
|
||||
<!-- [交互] 排序栏 - 点击切换排序方式 -->
|
||||
<div class="sort-bar">
|
||||
<span class="sort-label">排序:</span>
|
||||
<button class="sort-btn active" onclick="setSortOrder(this)">好评优先</button>
|
||||
<button class="sort-btn" onclick="setSortOrder(this)">热度优先</button>
|
||||
<button class="sort-btn active" onclick="setSortOrder(this)">热度优先</button>
|
||||
<button class="sort-btn" onclick="setSortOrder(this)">好评优先</button>
|
||||
<button class="sort-btn" onclick="setSortOrder(this)">回复率</button>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -356,21 +356,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部三列维度评分 -->
|
||||
<div class="rating-dimensions">
|
||||
<div class="dimension-item">
|
||||
<div class="dimension-score">4.9</div>
|
||||
<div class="dimension-name">专业性</div>
|
||||
</div>
|
||||
<div class="dimension-item">
|
||||
<div class="dimension-score">4.8</div>
|
||||
<div class="dimension-name">回复速度</div>
|
||||
</div>
|
||||
<div class="dimension-item">
|
||||
<div class="dimension-score">4.9</div>
|
||||
<div class="dimension-name">服务态度</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 评价总数 -->
|
||||
<div class="rating-total">共 1,280 条评价</div>
|
||||
</div>
|
||||
|
||||
@@ -133,7 +133,6 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div class="result-section">
|
||||
<div class="section-header">
|
||||
<div class="section-title"><span class="section-icon">👨⚕️</span>专家<span class="section-count">(6)</span></div>
|
||||
<span class="section-more">查看全部 <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="#1677ff" stroke-width="1.5"><path d="M4.5 3l3 3-3 3"/></svg></span>
|
||||
</div>
|
||||
<!-- [交互] 点击专家卡片跳转到专家主页 -->
|
||||
<div class="expert-result" onclick="window.location.href='expert-profile.html'">
|
||||
@@ -166,7 +165,6 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div class="result-section">
|
||||
<div class="section-header">
|
||||
<div class="section-title"><span class="section-icon">🏥</span>医院<span class="section-count">(3)</span></div>
|
||||
<span class="section-more">查看全部 <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="#1677ff" stroke-width="1.5"><path d="M4.5 3l3 3-3 3"/></svg></span>
|
||||
</div>
|
||||
<!-- [交互] 点击医院跳转到医院详情 -->
|
||||
<div class="hospital-result" onclick="window.location.href='hospital-detail.html'">
|
||||
|
||||
@@ -1,234 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>选择咨询人弹窗</title>
|
||||
<style>
|
||||
/* ===== 全局重置 ===== */
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
/* ===== 手机壳模拟器 ===== */
|
||||
.phone-shell {
|
||||
width: 390px;
|
||||
height: 844px;
|
||||
border-radius: 44px;
|
||||
background: #f5f5f5;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 0 0 2px #d0d0d0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ===== 状态栏 ===== */
|
||||
.status-bar {
|
||||
height: 54px; display: flex; align-items: flex-end; justify-content: space-between;
|
||||
padding: 0 24px 8px; font-size: 14px; font-weight: 600; color: #333; flex-shrink: 0; background: #fff;
|
||||
}
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 13px; }
|
||||
.page-content { flex: 1; background: #f5f5f5; }
|
||||
|
||||
/* ===== 底部全屏弹窗遮罩 ===== */
|
||||
.fullsheet-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: flex-end; justify-content: center; z-index: 100; }
|
||||
/* ===== 全屏弹窗面板 ===== */
|
||||
.fullsheet { background: #fff; border-radius: 24px 24px 0 0; width: 100%; max-height: 82%; display: flex; flex-direction: column; }
|
||||
.fullsheet-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.fullsheet-header h3 { font-size: 16px; font-weight: 700; color: #333; }
|
||||
.fullsheet-header .close-btn { font-size: 22px; color: #999; cursor: pointer; background: none; border: none; line-height: 1; }
|
||||
.fullsheet-body { flex: 1; overflow-y: auto; padding: 12px 16px; }
|
||||
|
||||
/* ===== 咨询人卡片 ===== */
|
||||
.person-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1.5px solid #e8e8e8; margin-bottom: 10px; cursor: pointer; }
|
||||
.person-card:active, .person-card.selected { border-color: #1677ff; background: #e8f4ff; }
|
||||
.person-avatar { font-size: 28px; flex-shrink: 0; }
|
||||
.person-info { flex: 1; }
|
||||
.person-name { font-size: 15px; font-weight: 600; color: #333; }
|
||||
.person-detail { font-size: 12px; color: #999; margin-top: 2px; }
|
||||
.person-tag { font-size: 11px; background: #f0f5ff; color: #1677ff; padding: 2px 8px; border-radius: 10px; flex-shrink: 0; }
|
||||
|
||||
/* ===== 新增咨询人按钮 ===== */
|
||||
.add-person-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px; border-radius: 14px; border: 1.5px dashed #d0d0d0; background: #fafafa; font-size: 14px; color: #666; cursor: pointer; }
|
||||
|
||||
/* ===== 新增表单视图 ===== */
|
||||
.form-view { display: none; }
|
||||
.form-view.active { display: block; }
|
||||
.list-view.hidden { display: none; }
|
||||
.form-back { font-size: 14px; color: #1677ff; cursor: pointer; background: none; border: none; margin-bottom: 14px; }
|
||||
.form-group { margin-bottom: 14px; }
|
||||
.form-label { font-size: 13px; color: #666; margin-bottom: 6px; display: block; }
|
||||
.form-input { width: 100%; padding: 10px 12px; border: 1.5px solid #e0e0e0; border-radius: 10px; font-size: 14px; outline: none; }
|
||||
.form-input:focus { border-color: #1677ff; }
|
||||
.form-section { font-size: 14px; font-weight: 600; color: #333; margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 1px solid #f0f0f0; }
|
||||
/* ===== 性别/选项按钮组 ===== */
|
||||
.gender-group { display: flex; gap: 8px; margin-bottom: 14px; }
|
||||
.gender-btn { flex: 1; padding: 9px; border: 1.5px solid #e0e0e0; border-radius: 10px; font-size: 14px; background: #fff; cursor: pointer; text-align: center; }
|
||||
.gender-btn.active { border-color: #1677ff; background: #e8f4ff; color: #1677ff; font-weight: 600; }
|
||||
.option-group { display: flex; gap: 8px; flex-wrap: wrap; }
|
||||
.option-btn { padding: 7px 14px; border: 1.5px solid #e0e0e0; border-radius: 10px; font-size: 13px; background: #fff; cursor: pointer; }
|
||||
.option-btn.active { border-color: #1677ff; background: #e8f4ff; color: #1677ff; font-weight: 600; }
|
||||
|
||||
/* ===== 保存按钮 ===== */
|
||||
.save-btn { width: 100%; padding: 12px; border-radius: 24px; font-size: 15px; font-weight: 600; background: #1677ff; color: #fff; border: none; cursor: pointer; margin-top: 16px; margin-bottom: 20px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<span class="icons"><span>●●●●</span><span>WiFi</span><span>🔋</span></span>
|
||||
</div>
|
||||
<div class="page-content"></div>
|
||||
|
||||
<!-- [交互] 选择咨询人弹窗 - 默认打开状态 -->
|
||||
<div class="fullsheet-overlay" id="sheetOverlay">
|
||||
<div class="fullsheet">
|
||||
<div class="fullsheet-header">
|
||||
<h3 id="sheetTitle">选择咨询人</h3>
|
||||
<button class="close-btn" onclick="closeSheet()">×</button>
|
||||
</div>
|
||||
<div class="fullsheet-body">
|
||||
<!-- 列表视图 -->
|
||||
<div class="list-view" id="listView">
|
||||
<div class="person-card selected" onclick="selectPerson(this)">
|
||||
<span class="person-avatar">👤</span>
|
||||
<div class="person-info"><div class="person-name">本人</div><div class="person-detail">28岁 · 男</div></div>
|
||||
<span class="person-tag">本人</span>
|
||||
</div>
|
||||
<div class="person-card" onclick="selectPerson(this)">
|
||||
<span class="person-avatar">👴</span>
|
||||
<div class="person-info"><div class="person-name">张三</div><div class="person-detail">58岁 · 男</div></div>
|
||||
<span class="person-tag">父亲</span>
|
||||
</div>
|
||||
<div class="person-card" onclick="selectPerson(this)">
|
||||
<span class="person-avatar">👩</span>
|
||||
<div class="person-info"><div class="person-name">李梅</div><div class="person-detail">55岁 · 女</div></div>
|
||||
<span class="person-tag">母亲</span>
|
||||
</div>
|
||||
<div class="person-card" onclick="selectPerson(this)">
|
||||
<span class="person-avatar">🧒</span>
|
||||
<div class="person-info"><div class="person-name">张小宇</div><div class="person-detail">8岁 · 男</div></div>
|
||||
<span class="person-tag">儿子</span>
|
||||
</div>
|
||||
<!-- 新增咨询人入口 -->
|
||||
<div class="add-person-btn" onclick="showAddForm()">+ 新增咨询人</div>
|
||||
<div id="newPersons"></div>
|
||||
</div>
|
||||
|
||||
<!-- 新增咨询人表单视图 -->
|
||||
<div class="form-view" id="formView">
|
||||
<button class="form-back" onclick="backToList()">← 返回</button>
|
||||
<div class="form-group"><label class="form-label">姓名</label><input class="form-input" id="fname" placeholder="请输入姓名"></div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">性别</label>
|
||||
<div class="gender-group" data-field="gender">
|
||||
<div class="gender-btn active" onclick="toggleBtn(this)">男</div>
|
||||
<div class="gender-btn" onclick="toggleBtn(this)">女</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group"><label class="form-label">出生日期</label><input class="form-input" type="date" id="fbirthdate"></div>
|
||||
<div class="form-group"><label class="form-label">与本人关系</label><input class="form-input" id="frelation" placeholder="如:配偶、朋友等"></div>
|
||||
|
||||
<div class="form-section">生活习惯</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">是否吸烟</label>
|
||||
<div class="option-group" data-field="smoke"><div class="option-btn active" onclick="toggleBtn(this)">否</div><div class="option-btn" onclick="toggleBtn(this)">偶尔</div><div class="option-btn" onclick="toggleBtn(this)">是</div></div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">是否饮酒</label>
|
||||
<div class="option-group" data-field="drink"><div class="option-btn active" onclick="toggleBtn(this)">否</div><div class="option-btn" onclick="toggleBtn(this)">偶尔</div><div class="option-btn" onclick="toggleBtn(this)">是</div></div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">饮食喜好</label>
|
||||
<div class="option-group" data-field="diet"><div class="option-btn active" onclick="toggleBtn(this)">清淡</div><div class="option-btn" onclick="toggleBtn(this)">均衡</div><div class="option-btn" onclick="toggleBtn(this)">偏油腻</div><div class="option-btn" onclick="toggleBtn(this)">偏辛辣</div></div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">睡眠质量</label>
|
||||
<div class="option-group" data-field="sleep"><div class="option-btn active" onclick="toggleBtn(this)">良好</div><div class="option-btn" onclick="toggleBtn(this)">一般</div><div class="option-btn" onclick="toggleBtn(this)">较差</div></div>
|
||||
</div>
|
||||
|
||||
<div class="form-section">身体情况</div>
|
||||
<div class="form-group" style="display:flex;gap:8px;">
|
||||
<div style="flex:1"><label class="form-label">身高(cm)</label><input class="form-input" id="fheight" placeholder="170"></div>
|
||||
<div style="flex:1"><label class="form-label">体重(kg)</label><input class="form-input" id="fweight" placeholder="65"></div>
|
||||
</div>
|
||||
<div class="form-group"><label class="form-label">过敏史</label><input class="form-input" id="fallergy" placeholder="如:青霉素过敏"></div>
|
||||
<div class="form-group"><label class="form-label">遗传史</label><input class="form-input" id="fgenetic" placeholder="如:高血压家族史"></div>
|
||||
<div class="form-group"><label class="form-label">既往史</label><input class="form-input" id="fpast" placeholder="如:2020年阑尾炎手术"></div>
|
||||
<div class="form-group"><label class="form-label">其他疾病</label><input class="form-input" id="fother" placeholder="如:慢性胃炎"></div>
|
||||
<div class="form-label">温馨提示:咨询人信息用于平台审核,不会外传。请输入正确的咨询人信息</div>
|
||||
<button class="save-btn" onclick="savePerson()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* ===== 交互逻辑 ===== */
|
||||
|
||||
/** 关闭弹窗 - 返回上一页 */
|
||||
function closeSheet() {
|
||||
history.back();
|
||||
}
|
||||
|
||||
/** 选中咨询人卡片 - 切换高亮状态 */
|
||||
function selectPerson(card) {
|
||||
document.querySelectorAll('.person-card').forEach(function(c) { c.classList.remove('selected'); });
|
||||
card.classList.add('selected');
|
||||
}
|
||||
|
||||
/** 显示新增表单视图 */
|
||||
function showAddForm() {
|
||||
document.getElementById('listView').classList.add('hidden');
|
||||
document.getElementById('formView').classList.add('active');
|
||||
document.getElementById('sheetTitle').textContent = '新增咨询人';
|
||||
}
|
||||
|
||||
/** 返回列表视图 */
|
||||
function backToList() {
|
||||
document.getElementById('formView').classList.remove('active');
|
||||
document.getElementById('listView').classList.remove('hidden');
|
||||
document.getElementById('sheetTitle').textContent = '选择咨询人';
|
||||
}
|
||||
|
||||
/** 按钮组切换 - 同组内单选 */
|
||||
function toggleBtn(btn) {
|
||||
var siblings = btn.parentElement.children;
|
||||
for (var i = 0; i < siblings.length; i++) { siblings[i].classList.remove('active'); }
|
||||
btn.classList.add('active');
|
||||
}
|
||||
|
||||
/** 保存新咨询人 - 添加卡片并返回列表 */
|
||||
function savePerson() {
|
||||
var name = document.getElementById('fname').value.trim();
|
||||
if (!name) { alert('请输入姓名'); return; }
|
||||
var gender = document.querySelector('[data-field="gender"] .active').textContent;
|
||||
var relation = document.getElementById('frelation').value.trim() || '其他';
|
||||
var emoji = gender === '女' ? '👩' : '👤';
|
||||
// 创建新卡片并插入列表
|
||||
var card = document.createElement('div');
|
||||
card.className = 'person-card';
|
||||
card.setAttribute('onclick', 'selectPerson(this)');
|
||||
card.innerHTML = '<span class="person-avatar">' + emoji + '</span><div class="person-info"><div class="person-name">' + name + '</div><div class="person-detail">' + gender + '</div></div><span class="person-tag">' + relation + '</span>';
|
||||
document.getElementById('newPersons').appendChild(card);
|
||||
// 重置表单并返回列表
|
||||
document.getElementById('fname').value = '';
|
||||
document.getElementById('frelation').value = '';
|
||||
backToList();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
@@ -166,8 +166,6 @@
|
||||
</div>
|
||||
|
||||
<!-- 温馨提示卡片 -->
|
||||
<div class="notice-card">📌 温馨提示:请详细描述您的症状,医生将尽快回复。如遇紧急情况请立即就医。</div>
|
||||
|
||||
<!-- 聊天消息区域(可滚动) -->
|
||||
<div class="chat-messages" id="chatMessages">
|
||||
<!-- 医生消息 -->
|
||||
|
||||