yixiong/platform-prototype
17
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增已超时图文咨询详情页，咨询记录列表增加已超时状态

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
liuyunqin
2026-04-16 14:34:27 +08:00
co-authored by Claude Opus 4.6
parent af7fd8a60f
commit 71a9c91f32
3 changed files with 241 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
employee-app/health-consult/my-records.html
+15
View File
@@ -88,6 +88,7 @@
.status-cancelled { background: #f5f5f5; color: #999; }
.status-rejected { background: #fff2f0; color: #ff4d4f; }
.status-confirming { background: #f9f0ff; color: #722ed1; }
.status-timeout { background: #fff2e8; color: #d4380d; }
.ri-consult-person { font-size: 12px; color: #666; margin-top: 10px; display: flex; align-items: center; gap: 6px; }
.ri-consult-person .rated-tag { font-size: 11px; background: #f6ffed; color: #52c41a; padding: 1px 6px; border-radius: 10px; }
.ri-msg { font-size: 13px; color: #666; margin-top: 8px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -205,6 +206,20 @@
<div class="ri-msg">建议您做颈椎MRI检查，明确诊断...</div>
<div class="ri-time">2026-03-15 09:10</div>
</a>
<!-- [交互] 记录4：陈美华医生 - 已超时 → 点击跳转 record-detail-timeout.html -->
<a class="record-item" href="record-detail-timeout.html" data-status="ended">
<div class="ri-top">
<div class="ri-avatar">👩‍⚕️</div>
<div class="ri-info">
<div class="ri-name">陈美华医生</div>
<div class="ri-dept">北京天坛医院 · 神经内科</div>
</div>
<span class="ri-status status-timeout">已超时</span>
</div>
<div class="ri-consult-person">咨询人：本人</div>
<div class="ri-msg">咨询已超时自动关闭，如需继续请重新发起...</div>
<div class="ri-time">2026-03-02 16:40</div>
</a>
</div>
<!-- 视频咨询列表（默认隐藏） -->
employee-app/health-consult/record-detail-timeout.html
+222
View File
@@ -0,0 +1,222 @@
<!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: #f0f2f5;
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
padding: 20px;
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
}
/* 手机壳模拟器 */
.phone-shell {
width: 390px;
min-height: 844px;
background: #f5f5f5;
border-radius: 44px;
box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
}
/* 状态栏 */
.phone-status-bar {
height: 44px;
background: #fff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
font-size: 12px;
font-weight: 600;
flex-shrink: 0;
}
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
/* 导航栏 */
.nav-bar {
height: 44px;
display: flex;
align-items: center;
padding: 0 16px;
background: #fff;
border-bottom: 1px solid #f0f0f0;
flex-shrink: 0;
position: relative;
}
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
/* 可滚动内容区 */
.scroll-content { flex: 1; overflow-y: auto; }
.scroll-content::-webkit-scrollbar { display: none; }
/* 医生信息栏 */
.detail-doctor-bar { display: flex; align-items: center; gap: 12px; padding: 16px; background: #fff; border-bottom: 1px solid #f0f0f0; }
.detail-doctor-bar .dd-avatar { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg,#e8f4ff,#bdd7ff); display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.detail-doctor-bar .dd-info { flex: 1; }
.detail-doctor-bar .dd-name { font-size: 16px; font-weight: 700; color: #1a1a1a; }
.detail-doctor-bar .dd-dept { font-size: 13px; color: #999; margin-top: 2px; }
.detail-doctor-bar .dd-status { font-size: 12px; padding: 3px 10px; border-radius: 20px; background: #fff2e8; color: #d4380d; white-space: nowrap; }
/* 咨询信息卡片 */
.detail-info-card { margin: 12px 16px; background: #f8f9fa; border-radius: 14px; padding: 14px 16px; }
.detail-info-card .dic-row { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; border-bottom: 1px solid #f0f0f0; }
.detail-info-card .dic-row:last-child { border-bottom: none; }
.detail-info-card .dic-label { color: #999; }
.detail-info-card .dic-value { color: #1a1a1a; font-weight: 500; }
/* 超时提示卡片 */
.timeout-notice {
margin: 12px 16px;
background: #fff2e8;
border-radius: 14px;
padding: 16px;
border-left: 4px solid #d4380d;
}
.timeout-notice .tn-title { font-size: 14px; font-weight: 600; color: #d4380d; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.timeout-notice .tn-content { font-size: 13px; color: #ad4e00; line-height: 1.6; }
/* 对话入口卡片 */
.chat-entry {
margin: 12px 16px;
background: #fff;
border-radius: 14px;
padding: 16px;
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
text-decoration: none;
color: inherit;
transition: transform 0.15s;
}
.chat-entry:active { transform: scale(0.98); }
.chat-entry .ce-icon { font-size: 28px; flex-shrink: 0; }
.chat-entry .ce-info { flex: 1; }
.chat-entry .ce-title { font-size: 15px; font-weight: 600; color: #1a1a1a; }
.chat-entry .ce-sub { font-size: 12px; color: #999; margin-top: 2px; }
.chat-entry .ce-arrow { font-size: 18px; color: #ccc; flex-shrink: 0; }
/* 咨询人健康档案入口 */
.health-record-entry {
margin: 12px 16px;
background: #fff;
border-radius: 14px;
padding: 16px;
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
text-decoration: none;
color: inherit;
transition: transform 0.15s;
}
.health-record-entry:active { transform: scale(0.98); }
.health-record-entry .hre-icon { font-size: 24px; flex-shrink: 0; }
.health-record-entry .hre-title { font-size: 15px; font-weight: 600; color: #1a1a1a; flex: 1; }
.health-record-entry .hre-arrow { font-size: 18px; color: #ccc; flex-shrink: 0; }
/* 底部安全区留白 */
.bottom-spacer { height: 34px; flex-shrink: 0; }
</style>
</head>
<body>
<!-- 手机壳模拟器 -->
<div class="phone-shell">
<!-- 状态栏：时间 + 信号电池图标 -->
<div class="phone-status-bar">
<span class="time">10:24</span>
<div class="icons">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
</div>
</div>
<!-- [交互] 导航栏：返回按钮 → my-records.html + 标题 -->
<div class="nav-bar">
<a class="nav-back" href="my-records.html">← 返回</a>
<span class="nav-title">咨询详情</span>
</div>
<!-- 可滚动内容区 -->
<div class="scroll-content">
<!-- 医生信息栏：头像 + 姓名科室 + 已超时状态标签 -->
<div class="detail-doctor-bar">
<div class="dd-avatar">👩‍⚕️</div>
<div class="dd-info">
<div class="dd-name">陈美华医生</div>
<div class="dd-dept">北京天坛医院 · 神经内科</div>
</div>
<span class="dd-status">已超时</span>
</div>
<!-- 咨询信息卡片 -->
<div class="detail-info-card">
<div class="dic-row">
<span class="dic-label">咨询类型</span>
<span class="dic-value">💬 图文咨询</span>
</div>
<div class="dic-row">
<span class="dic-label">咨询人</span>
<span class="dic-value">本人</span>
</div>
<div class="dic-row">
<span class="dic-label">咨询时间</span>
<span class="dic-value">2026-03-02 16:40</span>
</div>
<div class="dic-row">
<span class="dic-label">结束时间</span>
<span class="dic-value">2026-03-03 16:40</span>
</div>
<div class="dic-row">
<span class="dic-label">结束原因</span>
<span class="dic-value" style="color:#d4380d;">超时自动关闭</span>
</div>
</div>
<!-- 超时提示卡片 -->
<div class="timeout-notice">
<div class="tn-title">⏰ 咨询已超时</div>
<div class="tn-content">医生未在规定时间内回复，本次咨询已自动关闭。如需继续咨询，请重新发起。</div>
</div>
<!-- [交互] 咨询人健康档案入口 -->
<div class="health-record-entry" onclick="location.href='consult-person-detail.html'">
<span class="hre-icon">📋</span>
<span class="hre-title">咨询人健康档案</span>
<span class="hre-arrow">›</span>
</div>
<!-- [交互] 对话入口卡片：点击跳转查看历史对话 -->
<a class="chat-entry" href="text-chat-history.html?from=record-detail-timeout">
<span class="ce-icon">💬</span>
<div class="ce-info">
<div class="ce-title">查看历史对话记录</div>
<div class="ce-sub">点击查看完整对话内容</div>
</div>
<span class="ce-arrow">›</span>
</a>
</div>
<!-- 底部安全区留白 -->
<div class="bottom-spacer"></div>
</div>
</body>
</html>