fix: 修复健康咨询模块导航交互问题及新增体检报告卡片功能

- 修复5个弹窗dialog关闭后空白页问题,改为history.back()返回上一页
- 补充text-chat和video-success缺失的返回按钮
- 修复rate-doctor与text-chat返回按钮死循环跳转
- text-chat返回按钮支持?from参数动态返回来源页
- expert-profile返回按钮移除history.back()避免跳回聊天页
- index.html入口页返回按钮取消点击事件
- 聊天页新增内嵌体检报告选择弹窗及报告卡片气泡展示

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-10 14:35:50 +08:00
co-authored by Claude Opus 4.6
parent 47596eb02c
commit 3504c1fe31
11 changed files with 177 additions and 35 deletions
@@ -103,10 +103,9 @@
<script>
/* ===== 交互逻辑 ===== */
/** 取消按钮 - 关闭弹窗并提示 */
/** 取消按钮 - 返回上一页 */
function handleCancel() {
document.getElementById('modalOverlay').style.display = 'none';
alert('您已取消咨询');
history.back();
}
/** 同意按钮 - 跳转到图文咨询页面 */
@@ -4,6 +4,34 @@
---
## [2026-04-10] fix: 修复返回按钮死循环跳转问题
**涉及文件(2个):**
- `rate-doctor.html` — 返回按钮移除 `?from=text-chat` 路由逻辑,统一返回 `my-records.html`,避免评价页与聊天页互相跳转死循环
- `text-chat.html` — 返回按钮从硬编码 `index.html` 改为根据 `?from` 参数动态返回来源页(`record-detail` → 咨询详情页,`expert-profile` → 专家主页,默认 → 首页)
---
## [2026-04-10] feat: 聊天页发送体检报告时在对话中显示报告卡片
**涉及文件(1个):**
- `text-chat.html` — 体检报告选择弹窗从外部跳转改为内嵌弹窗;点击发送后在聊天区域插入体检报告卡片气泡(含报告名称、来源机构、日期、标签),医生自动回复确认收到
---
## [2026-04-10] fix: 修复弹窗关闭后空白页问题,补充缺失的返回按钮
**涉及文件(7个):**
- `consult-notice-dialog.html` — 取消按钮从隐藏弹窗改为 `history.back()` 返回上一页
- `end-consult-dialog.html` — 继续咨询按钮从隐藏弹窗改为 `history.back()` 返回上一页
- `rate-dialog.html` — 取消按钮从隐藏弹窗改为 `history.back()` 返回上一页
- `select-person-dialog.html` — 关闭按钮从隐藏弹窗改为 `history.back()` 返回上一页
- `select-report-dialog.html` — 关闭按钮从隐藏弹窗改为 `history.back()` 返回上一页
- `text-chat.html` — 聊天头部左侧新增返回按钮,跳转到健康咨询首页
- `video-success.html` — 导航栏左侧新增返回按钮,跳转到我的咨询页
---
## [2026-04-10] feat: 新增视频咨询四种状态详情页,完善视频咨询列表
**涉及文件(5个):**
@@ -89,9 +89,9 @@
<script>
/* ===== 交互逻辑 ===== */
/** 继续咨询 - 关闭弹窗 */
/** 继续咨询 - 返回上一页 */
function handleCancel() {
document.getElementById('modalOverlay').style.display = 'none';
history.back();
}
/** 确认结束 - 跳转到评价页面 */
@@ -541,8 +541,6 @@
window.location.href = 'index.html';
} else if (from === 'expert-list') {
window.location.href = 'expert-list.html';
} else if (history.length > 1) {
history.back();
} else {
window.location.href = 'index.html';
}
+2 -9
View File
@@ -140,7 +140,7 @@
<!-- [交互] 导航栏:返回按钮 + 标题 + 右侧消息图标 -->
<div class="nav-bar">
<a class="nav-back" onclick="goBack()">← 返回</a>
<span class="nav-back" style="cursor:default;color:#999;">← 返回</span>
<span class="nav-title">健康咨询</span>
<span class="nav-right">💬</span>
</div>
@@ -248,13 +248,6 @@
<div class="bottom-spacer"></div>
</div><!-- /.phone-shell -->
<script>
function goBack() {
if (history.length > 1) {
history.back();
}
// index.html 是入口页,无需 fallback 跳转
}
</script>
<!-- index.html 是模块入口页,返回按钮仅作占位,无点击事件 -->
</body>
</html>
+2 -2
View File
@@ -111,9 +111,9 @@
}
}
/** 取消 - 关闭弹窗 */
/** 取消 - 返回上一页 */
function handleCancel() {
document.getElementById('modalOverlay').style.display = 'none';
history.back();
}
/** 提交评价 */
+1 -9
View File
@@ -160,15 +160,7 @@
* 返回上一页:读取 ?from 参数决定目标页
*/
function goBack() {
var params = new URLSearchParams(window.location.search);
var from = params.get('from');
if (from === 'text-chat') {
window.location.href = 'text-chat.html';
} else if (history.length > 1) {
history.back();
} else {
window.location.href = 'my-records.html';
}
window.location.href = 'my-records.html';
}
</script>
</body>
@@ -175,9 +175,9 @@
<script>
/* ===== 交互逻辑 ===== */
/** 关闭弹窗 */
/** 关闭弹窗 - 返回上一页 */
function closeSheet() {
document.getElementById('sheetOverlay').style.display = 'none';
history.back();
}
/** 选中咨询人卡片 - 切换高亮状态 */
@@ -99,9 +99,9 @@
<script>
/* ===== 交互逻辑 ===== */
/** 关闭弹窗 */
/** 关闭弹窗 - 返回上一页 */
function closeSheet() {
document.getElementById('sheetOverlay').style.display = 'none';
history.back();
}
/** 发送报告 - 提示已发送 */
+133 -3
View File
@@ -79,6 +79,31 @@
.plus-item .pi-icon { width: 52px; height: 52px; border-radius: 14px; background: #f5f5f5; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.plus-item .pi-label { font-size: 11px; color: #666; }
/* ===== 体检报告卡片气泡 ===== */
.bubble-report { max-width: 240px; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid #e8e8e8; }
.msg-row.mine .bubble-report { border-bottom-right-radius: 4px; }
.bubble-report__header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: linear-gradient(135deg, #fff7e6, #ffd591); }
.bubble-report__icon { width: 32px; height: 32px; border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.bubble-report__title { font-size: 13px; font-weight: 600; color: #333; line-height: 1.4; }
.bubble-report__body { padding: 8px 12px 10px; }
.bubble-report__meta { font-size: 11px; color: #999; }
.bubble-report__tag { display: inline-block; font-size: 10px; color: #1677ff; background: #e8f4ff; padding: 2px 6px; border-radius: 4px; margin-top: 4px; }
/* ===== 报告选择弹窗 ===== */
.report-sheet-overlay { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 100; align-items: flex-end; justify-content: center; }
.report-sheet-overlay.show { display: flex; }
.report-sheet { background: #fff; border-radius: 24px 24px 0 0; width: 100%; max-height: 70%; display: flex; flex-direction: column; }
.report-sheet__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
.report-sheet__header h3 { font-size: 16px; font-weight: 700; color: #333; }
.report-sheet__close { font-size: 22px; color: #999; cursor: pointer; background: none; border: none; line-height: 1; }
.report-sheet__body { flex: 1; overflow-y: auto; padding: 12px 16px; }
.report-sheet__card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1.5px solid #e8e8e8; margin-bottom: 10px; }
.report-sheet__card-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg,#fff7e6,#ffd591); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.report-sheet__card-info { flex: 1; }
.report-sheet__card-title { font-size: 14px; font-weight: 600; color: #333; }
.report-sheet__card-meta { font-size: 12px; color: #999; margin-top: 3px; }
.report-sheet__send-btn { margin-left: auto; font-size: 12px; background: #1677ff; color: #fff; padding: 4px 12px; border-radius: 20px; white-space: nowrap; cursor: pointer; border: none; }
/* ===== 模态弹窗 ===== */
.modal-overlay { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 100; justify-content: center; align-items: center; }
.modal-overlay.show { display: flex; }
@@ -102,8 +127,9 @@
<span>&#128267;</span>
</span>
</div>
<!-- [交互] 聊天头部:无返回键,通过"结束咨询"按钮离开 -->
<!-- [交互] 聊天头部:左侧返回按钮返回首页,右侧结束咨询按钮 -->
<div class="chat-header">
<a class="back-btn" id="backBtn" href="index.html"></a>
<div class="chat-avatar">👨‍⚕️</div>
<div class="chat-info">
<span class="chat-name">张建国医生</span>
@@ -148,8 +174,8 @@
<div class="plus-panel" id="plusPanel">
<div class="plus-item"><div class="pi-icon">🖼️</div><div class="pi-label">图片</div></div>
<div class="plus-item"><div class="pi-icon">📷</div><div class="pi-label">拍摄</div></div>
<!-- [交互] 跳转到选择体检报告弹窗 -->
<div class="plus-item" onclick="location.href='select-report-dialog.html'"><div class="pi-icon">📋</div><div class="pi-label">体检报告</div></div>
<!-- [交互] 点击打开体检报告选择弹窗 -->
<div class="plus-item" onclick="openReportSheet()"><div class="pi-icon">📋</div><div class="pi-label">体检报告</div></div>
<!-- [交互] 跳转到选择档案弹窗页 -->
<div class="plus-item" onclick="location.href='select-person-dialog.html'"><div class="pi-icon">📁</div><div class="pi-label">选择档案</div></div>
<!-- [交互] 点击结束咨询弹出确认弹窗 -->
@@ -170,9 +196,53 @@
</div>
</div>
</div>
<!-- [交互] 选择体检报告弹窗 - 内嵌在聊天页,点击发送后插入报告卡片到对话 -->
<div class="report-sheet-overlay" id="reportSheet">
<div class="report-sheet">
<div class="report-sheet__header">
<h3>选择体检报告</h3>
<button class="report-sheet__close" onclick="closeReportSheet()">&times;</button>
</div>
<div class="report-sheet__body">
<div class="report-sheet__card" data-title="2026年度综合体检报告" data-meta="2026-03-15 · 北京协和医院">
<div class="report-sheet__card-icon">📄</div>
<div class="report-sheet__card-info"><div class="report-sheet__card-title">2026年度综合体检报告</div><div class="report-sheet__card-meta">2026-03-15 · 北京协和医院</div></div>
<button class="report-sheet__send-btn" onclick="sendReport(this)">发送</button>
</div>
<div class="report-sheet__card" data-title="心内科专项检查报告" data-meta="2025-11-20 · 北京天坛医院">
<div class="report-sheet__card-icon">📄</div>
<div class="report-sheet__card-info"><div class="report-sheet__card-title">心内科专项检查报告</div><div class="report-sheet__card-meta">2025-11-20 · 北京天坛医院</div></div>
<button class="report-sheet__send-btn" onclick="sendReport(this)">发送</button>
</div>
<div class="report-sheet__card" data-title="2025年度综合体检报告" data-meta="2025-03-10 · 上海瑞金医院">
<div class="report-sheet__card-icon">📄</div>
<div class="report-sheet__card-info"><div class="report-sheet__card-title">2025年度综合体检报告</div><div class="report-sheet__card-meta">2025-03-10 · 上海瑞金医院</div></div>
<button class="report-sheet__send-btn" onclick="sendReport(this)">发送</button>
</div>
<div class="report-sheet__card" data-title="血液常规检验报告" data-meta="2025-08-05 · 广州中山医院">
<div class="report-sheet__card-icon">📄</div>
<div class="report-sheet__card-info"><div class="report-sheet__card-title">血液常规检验报告</div><div class="report-sheet__card-meta">2025-08-05 · 广州中山医院</div></div>
<button class="report-sheet__send-btn" onclick="sendReport(this)">发送</button>
</div>
</div>
</div>
</div>
</div>
<script>
/** 根据 ?from 参数设置返回按钮目标 */
(function() {
var params = new URLSearchParams(window.location.search);
var from = params.get('from');
var backBtn = document.getElementById('backBtn');
if (from === 'record-detail') {
backBtn.href = 'record-detail.html';
} else if (from === 'expert-profile') {
backBtn.href = 'expert-profile.html';
}
})();
/**
* 切换展开面板的显示/隐藏
*/
@@ -236,6 +306,66 @@
div.appendChild(document.createTextNode(str));
return div.innerHTML;
}
/**
* 打开体检报告选择弹窗,同时收起+面板
*/
function openReportSheet() {
document.getElementById('plusPanel').classList.remove('show');
document.getElementById('reportSheet').classList.add('show');
}
/**
* 关闭体检报告选择弹窗
*/
function closeReportSheet() {
document.getElementById('reportSheet').classList.remove('show');
}
/**
* 发送体检报告:关闭弹窗,在聊天区插入报告卡片气泡,医生自动回复
*/
function sendReport(btn) {
var card = btn.closest('.report-sheet__card');
var title = card.getAttribute('data-title');
var meta = card.getAttribute('data-meta');
// 按钮变为已发送状态
btn.textContent = '已发送';
btn.style.background = '#52c41a';
btn.disabled = true;
// 关闭弹窗
closeReportSheet();
var container = document.getElementById('chatMessages');
// 插入报告卡片气泡(用户侧)
var myRow = document.createElement('div');
myRow.className = 'msg-row mine';
myRow.innerHTML = '<div class="msg-avatar">😊</div>'
+ '<div class="bubble-report">'
+ ' <div class="bubble-report__header">'
+ ' <div class="bubble-report__icon">📄</div>'
+ ' <div class="bubble-report__title">' + escapeHtml(title) + '</div>'
+ ' </div>'
+ ' <div class="bubble-report__body">'
+ ' <div class="bubble-report__meta">' + escapeHtml(meta) + '</div>'
+ ' <span class="bubble-report__tag">体检报告</span>'
+ ' </div>'
+ '</div>';
container.appendChild(myRow);
container.scrollTop = container.scrollHeight;
// 1.2秒后医生自动回复
setTimeout(function() {
var docRow = document.createElement('div');
docRow.className = 'msg-row';
docRow.innerHTML = '<div class="msg-avatar">👨‍⚕️</div><div class="bubble">已收到您的「' + escapeHtml(title) + '」,我仔细看一下,稍后给您反馈。</div>';
container.appendChild(docRow);
container.scrollTop = container.scrollHeight;
}, 1200);
}
</script>
</body>
</html>
@@ -27,9 +27,10 @@
/* 导航栏 */
.nav-bar {
height: 44px; display: flex; align-items: center; justify-content: center;
background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0;
background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative;
}
.nav-title { font-size: 17px; font-weight: 600; color: #1a1a1a; }
.nav-back { position: absolute; left: 16px; font-size: 22px; color: #333; text-decoration: none; cursor: pointer; }
/* 内容区 */
.content { flex: 1; overflow-y: auto; padding: 32px 20px 20px; }
.content::-webkit-scrollbar { display: none; }
@@ -72,6 +73,7 @@
</div>
<!-- 导航栏 -->
<div class="nav-bar">
<a class="nav-back" href="my-records.html"></a>
<span class="nav-title">预约详情</span>
</div>
<!-- 内容区 -->