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

feat: 健康体检员工端原型完善（选项目页费用横幅重做为体检额度卡片含额度使用进度条与必检/选检/可用额度三格、年度额度调至1600并新增心脏彩超与胃幽门螺杆菌两项选检、提交确认弹窗精简为项目总额/必检项目/体检总额度/可用额度四行；常规与胃肠镜选医院页移除医院承检类型标签；选日期页文案改为"预约开放日期"；胃肠镜预约结果页新增成功/失败两态演示（结果横幅、失败原因详情弹窗、重新预约按钮），常规与胃肠镜结果页失败态隐藏体检须知；"我的预约"页面更名重做为"现场体检"（移除已取消状态面板与已选项目展示，胃肠镜项目列表简化为静态已检/未检），首页站点地图/功能卡、到院体检页返回按钮、非活动首页、办理流程文案同步更名；首页未开启计划文案2027调整为2026；指标纵向对比详情异常结论去红字高亮并两行截断；消息中心AI风险预警示例由痛风改为2型糖尿病）

Browse Source 
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
fengpu
2026-09-04 10:44:10 +08:00
co-authored by Claude Opus 4.7
parent 2213106961
commit 118d143767
16 changed files with 317 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.idea/claudeCodeTabState.xml
Generated
+63 -3
View File
@@ -7,7 +7,7 @@
<value>
<TabSessionState>
<option name="provider" value="claude" />
<option name="sessionId" value="425e7bbd-2330-488e-94e7-baccc9bfcac4" />
<option name="sessionId" value="c788d99a-7e82-4744-99ea-240fd47fff30" />
<option name="cwd" value="$PROJECT_DIR$" />
<option name="model" value="claude-opus-4-7[1m]" />
<option name="permissionMode" value="bypassPermissions" />
@@ -19,7 +19,67 @@
<value>
<TabSessionState>
<option name="provider" value="claude" />
<option name="sessionId" value="3a6a70e4-7245-4bc2-b5fa-534f29ad6bfb" />
<option name="sessionId" value="a2b724c3-b000-4b97-b78b-de01348b0343" />
<option name="cwd" value="$PROJECT_DIR$" />
<option name="model" value="claude-opus-4-7[1m]" />
<option name="permissionMode" value="bypassPermissions" />
<option name="reasoningEffort" value="high" />
</TabSessionState>
</value>
</entry>
<entry key="2">
<value>
<TabSessionState>
<option name="provider" value="claude" />
<option name="sessionId" value="b7fee47b-6fb5-47f4-9bcc-7e886a50a566" />
<option name="cwd" value="$PROJECT_DIR$" />
<option name="model" value="claude-opus-4-7[1m]" />
<option name="permissionMode" value="bypassPermissions" />
<option name="reasoningEffort" value="high" />
</TabSessionState>
</value>
</entry>
<entry key="3">
<value>
<TabSessionState>
<option name="provider" value="claude" />
<option name="sessionId" value="10a4736e-8c0e-4eb9-8ff5-0d6a7bf93d6c" />
<option name="cwd" value="$PROJECT_DIR$" />
<option name="model" value="claude-opus-4-7[1m]" />
<option name="permissionMode" value="bypassPermissions" />
<option name="reasoningEffort" value="high" />
</TabSessionState>
</value>
</entry>
<entry key="4">
<value>
<TabSessionState>
<option name="provider" value="claude" />
<option name="sessionId" value="808742be-17a1-4752-84ee-2da5b8d02dfc" />
<option name="cwd" value="$PROJECT_DIR$" />
<option name="model" value="claude-opus-4-7[1m]" />
<option name="permissionMode" value="bypassPermissions" />
<option name="reasoningEffort" value="high" />
</TabSessionState>
</value>
</entry>
<entry key="5">
<value>
<TabSessionState>
<option name="provider" value="claude" />
<option name="sessionId" value="514986c8-0e40-473a-8532-cbd3cd7b09a3" />
<option name="cwd" value="$PROJECT_DIR$" />
<option name="model" value="claude-opus-4-7[1m]" />
<option name="permissionMode" value="bypassPermissions" />
<option name="reasoningEffort" value="high" />
</TabSessionState>
</value>
</entry>
<entry key="6">
<value>
<TabSessionState>
<option name="provider" value="claude" />
<option name="sessionId" value="d4678fb6-8a87-406a-9b68-a1b67a317c0c" />
<option name="cwd" value="$PROJECT_DIR$" />
<option name="model" value="claude-opus-4-7[1m]" />
<option name="permissionMode" value="bypassPermissions" />
@@ -29,6 +89,6 @@
</entry>
</map>
</option>
<option name="tabCount" value="2" />
<option name="tabCount" value="7" />
</component>
</project>
employee-app/health-checkup/booking-date-selected.html
+5 -3
View File
@@ -283,8 +283,8 @@
</div>
</div>
<!-- 体检须知 -->
<div class="tips-card">
<!-- [交互] 体检须知:仅预约成功态显示，失败态隐藏 -->
<div class="tips-card" id="tipsCard">
<div class="tips-card__title">体检须知</div>
<div class="tips-card__item"><span class="tips-card__dot"></span><span>体检前一天请勿饮酒，避免高脂饮食。</span></div>
<div class="tips-card__item"><span class="tips-card__dot"></span><span>体检当天需空腹，请勿进食或饮水。</span></div>
@@ -359,7 +359,7 @@
toastTimer = setTimeout(() => { toast.classList.remove('show'); }, 2200);
}
// [交互] 原型演示：切换预约成功/失败两态（横幅、底部按钮、步骤条提示联动）
// [交互] 原型演示：切换预约成功/失败两态（横幅、底部按钮、体检须知、步骤条提示联动）
function setResult(state) {
const fail = state === 'fail';
const banner = document.getElementById('resultBanner');
@@ -369,6 +369,8 @@
document.getElementById('resultSub').style.display = fail ? 'none' : '';
document.getElementById('actionsSuccess').style.display = fail ? 'none' : 'flex';
document.getElementById('actionsFail').style.display = fail ? 'flex' : 'none';
// 预约失败时隐藏体检须知（未成功到检，须知无意义）
document.getElementById('tipsCard').style.display = fail ? 'none' : '';
document.getElementById('stepToast').textContent = fail
? '预约未成功，请点击下方「重新预约」按钮重新预约'
: '当前已预约体检，无法重新选择，请先取消预约';
employee-app/health-checkup/booking-date.html
+1 -1
View File
@@ -346,7 +346,7 @@
function fmtDate(d) {
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
}
document.getElementById('rangeText').textContent = `可预约日期:${fmtDate(today)} 至 ${fmtDate(maxBookDate)}`;
document.getElementById('rangeText').textContent = `预约开放日期 : ${fmtDate(today)} 至 ${fmtDate(maxBookDate)}`;
let currentYear = today.getFullYear();
let currentMonth = today.getMonth();
let selectedDate = null;
employee-app/health-checkup/booking-hospital.html
-17
View File
@@ -159,12 +159,6 @@
font-size: 12px;
color: var(--text-muted);
}
/* 医院承检类型标签：常规体检与胃肠镜体检互斥，职业体检可与任一叠加 */
.hospital-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.htag { font-size: 10px; line-height: 16px; padding: 0 8px; border-radius: 8px; }
.htag--routine { background: #e6f7ff; color: #1890ff; }
.htag--gastro { background: #f6ffed; color: #52c41a; }
.htag--occupation { background: #fff7e6; color: #fa8c16; }
.radio-dot {
width: 22px;
height: 22px;
@@ -343,10 +337,6 @@
<div>
<div class="hospital-card__name">宁夏宝石花医院</div>
<div class="hospital-card__addr">宁夏银川市</div>
<div class="hospital-card__tags">
<span class="htag htag--routine">常规体检</span>
<span class="htag htag--occupation">职业体检</span>
</div>
</div>
</div>
<div class="radio-dot"></div>
@@ -357,10 +347,6 @@
<div>
<div class="hospital-card__name">CQ星龙园医院</div>
<div class="hospital-card__addr">陕西西安市</div>
<div class="hospital-card__tags">
<span class="htag htag--gastro">胃肠镜体检</span>
<span class="htag htag--occupation">职业体检</span>
</div>
</div>
</div>
<div class="radio-dot"></div>
@@ -371,9 +357,6 @@
<div>
<div class="hospital-card__name">西安CQ医院</div>
<div class="hospital-card__addr">陕西西安市</div>
<div class="hospital-card__tags">
<span class="htag htag--routine">常规体检</span>
</div>
</div>
</div>
<div class="radio-dot"></div>
employee-app/health-checkup/booking-project.html
+88 -83
View File
@@ -81,14 +81,34 @@
.stepper__item--done:hover .stepper__label { text-decoration: underline; text-underline-offset: 3px; }
.stepper__line { width: 44px; height: 3px; background: #e8e8e8; margin: 0 8px; margin-bottom: 22px; border-radius: 2px; }
.stepper__line--done { background: var(--primary); }
/* 费用卡片 */
.fee-banner {
/* 体检额度卡片 */
.quota-card {
background: linear-gradient(135deg, #f0fffe 0%, #f7fffd 100%);
border: 1px solid #d7f5f3; border-radius: 18px; padding: 14px 16px;
display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px;
border: 1px solid #d7f5f3; border-radius: 18px; padding: 14px 16px 12px;
margin-bottom: 14px;
}
.fee-banner__label { font-size: 13px; color: var(--primary-dark); font-weight: 600; }
.fee-banner__value { font-size: 24px; font-weight: 800; color: var(--primary-dark); }
.quota-card__main {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px;
}
.quota-card__label { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
.quota-card__value { font-size: 24px; font-weight: 800; color: var(--primary-dark); line-height: 1.15; }
.quota-card__value--secondary { font-size: 20px; color: var(--text-primary); }
.quota-card__bar {
height: 8px; background: rgba(19,194,194,0.12); border-radius: 4px;
overflow: hidden; margin-bottom: 12px;
}
.quota-card__bar-fill {
height: 100%; width: 0; border-radius: 4px;
background: linear-gradient(90deg, #13c2c2, #36cfc9); transition: width 0.3s;
}
.quota-card__bar-fill--over { background: linear-gradient(90deg, #ff4d4f, #ff7875); }
.quota-card__grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
border-top: 1px dashed #cdeeeb; padding-top: 12px;
}
.quota-cell__label { font-size: 12px; color: var(--text-secondary); }
.quota-cell__value { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-top: 3px; }
.quota-cell__value--danger { color: var(--danger); }
/* 项目列表 */
.section-title { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.project-tabs {
@@ -166,23 +186,6 @@
position: absolute; left: 16px; right: 16px; bottom: 18px;
display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-bottom: 16px;
}
.summary-card {
background: #fff; border-radius: 18px; padding: 12px 14px;
box-shadow: 0 10px 24px rgba(19, 194, 194, 0.10); border: 1px solid rgba(19, 194, 194, 0.08);
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px;
margin-bottom: 14px;
}
.summary-card__title {
display: none;
}
.summary-row {
display: flex; justify-content: space-between; align-items: center;
font-size: 11px; color: var(--text-secondary); margin-bottom: 0; gap: 8px;
}
.summary-row:last-child { margin-bottom: 0; }
.summary-row__value { font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.summary-row__value--highlight { color: var(--primary-dark); font-size: 13px; }
.summary-row__value--danger { color: var(--danger); }
.bottom-actions__btn {
width: 100%; height: 56px; border-radius: 18px; font-size: 15px; font-weight: 600; border: none; cursor: pointer;
}
@@ -220,12 +223,7 @@
.confirm-modal__row:last-child { margin-bottom: 0; }
.confirm-modal__value { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.confirm-modal__value--highlight { color: var(--primary-dark); }
.confirm-modal__fee-group { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.confirm-modal__quota { font-size: 12px; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
/* 弱化行：选检/必检项目费用，金额后追加「≤ 单位额度」 */
.confirm-modal__row--weak { font-size: 13px; color: var(--text-muted); }
.confirm-modal__value--weak { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.confirm-modal__cap { font-size: 11px; font-weight: 500; color: #bfbfbf; white-space: nowrap; }
.confirm-modal__value--limit { color: var(--text-secondary); font-weight: 600; }
.confirm-modal__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.confirm-modal__btn {
height: 44px; border-radius: 22px; font-size: 15px; font-weight: 600; border: none; cursor: pointer;
@@ -269,28 +267,32 @@
<div class="stepper__line"></div>
<div class="stepper__item stepper__item--future"><div class="stepper__dot">3</div><div class="stepper__label">预约日期</div></div>
</div>
<!-- 费用 -->
<div class="fee-banner">
<span class="fee-banner__label">您本年度的体检费用(元)</span>
<span class="fee-banner__value">1500.00</span>
</div>
<div class="summary-card">
<div class="summary-card__title">费用汇总</div>
<div class="summary-row">
<span>已选</span>
<span class="summary-row__value summary-row__value--highlight" id="totalFee">¥0.00</span>
<!-- 体检额度 -->
<div class="quota-card">
<div class="quota-card__main">
<div>
<div class="quota-card__label">年度体检总额度(元)</div>
<div class="quota-card__value" id="annualLimitText">¥0.00</div>
</div>
<div>
<div class="quota-card__label">已选项目费用</div>
<div class="quota-card__value quota-card__value--secondary" id="totalFee">¥0.00</div>
</div>
</div>
<div class="summary-row">
<span>必检项目</span>
<span class="summary-row__value" id="requiredFee">¥0.00</span>
</div>
<div class="summary-row">
<span>选检项目</span>
<span class="summary-row__value" id="optionalFee">¥0.00</span>
</div>
<div class="summary-row">
<span>可用额度</span>
<span class="summary-row__value" id="availableFee">¥0.00</span>
<div class="quota-card__bar"><div class="quota-card__bar-fill" id="quotaBarFill"></div></div>
<div class="quota-card__grid">
<div class="quota-cell">
<div class="quota-cell__label">必检项目</div>
<div class="quota-cell__value" id="requiredFee">¥0.00</div>
</div>
<div class="quota-cell">
<div class="quota-cell__label">选检项目</div>
<div class="quota-cell__value" id="optionalFee">¥0.00</div>
</div>
<div class="quota-cell">
<div class="quota-cell__label">可用额度</div>
<div class="quota-cell__value" id="availableFee">¥0.00</div>
</div>
</div>
</div>
<!-- 项目列表 -->
@@ -321,25 +323,20 @@
<span class="confirm-modal__value" id="confirmCount">0 项</span>
</div>
<div class="confirm-modal__row">
<span>总体检费用</span>
<span class="confirm-modal__fee-group">
<span class="confirm-modal__value confirm-modal__value--highlight" id="confirmFee">¥0.00</span>
<span class="confirm-modal__quota" id="confirmQuota">体检额度 ¥0.00</span>
</span>
<span>项目总额</span>
<span class="confirm-modal__value confirm-modal__value--highlight" id="confirmTotalFee">¥0.00</span>
</div>
<div class="confirm-modal__row confirm-modal__row--weak">
<span>选检项目费用</span>
<span class="confirm-modal__fee-group">
<span class="confirm-modal__value confirm-modal__value--weak" id="confirmOptionalFee">¥0.00</span>
<span class="confirm-modal__cap" id="confirmOptionalCap">可用额度 ≤ ¥0.00</span>
</span>
<div class="confirm-modal__row">
<span>必检项目</span>
<span class="confirm-modal__value" id="confirmRequiredFee">¥0.00</span>
</div>
<div class="confirm-modal__row confirm-modal__row--weak">
<span>必检项目费用</span>
<span class="confirm-modal__fee-group">
<span class="confirm-modal__value confirm-modal__value--weak" id="confirmRequiredFee">¥0.00</span>
<span class="confirm-modal__cap" id="confirmRequiredCap">可用额度 ≤ ¥0.00</span>
</span>
<div class="confirm-modal__row">
<span>体检总额度</span>
<span class="confirm-modal__value confirm-modal__value--limit" id="confirmAnnualLimit">≤ ¥0.00</span>
</div>
<div class="confirm-modal__row">
<span>可用额度</span>
<span class="confirm-modal__value confirm-modal__value--limit" id="confirmAvailableFee">¥0.00</span>
</div>
</div>
<div class="confirm-modal__actions">
@@ -360,9 +357,8 @@
</div>
</div>
<script>
const annualLimit = 1500;
// 单位设定的分项额度（原型模拟数据，用于「≤ 额度」展示）
const unitLimits = { required: 900, optional: 600 };
// 年度体检总额度（可用额度 = 总额度 − 已选项目费用，原型模拟数据）
const annualLimit = 1600;
const projects = [
{ id: 'general', name: '一般检查', desc: '身高、体重、血压、视力', price: 120, type: 'required', level: 'normal' },
{ id: 'blood', name: '血常规', desc: '血红蛋白、白细胞、血小板等', price: 80, type: 'required', level: 'normal' },
@@ -375,7 +371,9 @@
{ id: 'xray', name: '胸部X光', desc: '胸部正位X线摄影', price: 140, type: 'optional', level: 'normal' },
{ id: 'ultrasound', name: '腹部B超', desc: '肝胆脾胰肾超声检查', price: 180, type: 'optional', level: 'key', aiRecommend: true, aiReason: '健康画像显示 BMI 26.8（超重），且近年血脂偏高，建议加做腹部超声，重点筛查脂肪肝与胆囊病变。预计费用 ¥180，在本年度体检额度内。' },
{ id: 'thyroid', name: '甲状腺彩超', desc: '甲状腺结构与结节筛查', price: 160, type: 'optional', level: 'key', aiRecommend: true, aiReason: '既往史显示 2024 年体检发现甲状腺结节（TI-RADS 2 类），建议每年做一次超声随访复查，观察结节变化。预计费用 ¥160，在本年度体检额度内。' },
{ id: 'tumor', name: '肿瘤标志物', desc: '基础肿瘤风险筛查', price: 220, type: 'optional', level: 'key', aiRecommend: true, aiReason: '家族史提示直系亲属有肿瘤病史，结合您所处年龄段（45 岁以上），建议今年纳入基础肿瘤标志物筛查，做到早发现早干预。预计费用 ¥220，在本年度体检额度内。' }
{ id: 'tumor', name: '肿瘤标志物', desc: '基础肿瘤风险筛查', price: 220, type: 'optional', level: 'key', aiRecommend: true, aiReason: '家族史提示直系亲属有肿瘤病史，结合您所处年龄段（45 岁以上），建议今年纳入基础肿瘤标志物筛查，做到早发现早干预。预计费用 ¥220，在本年度体检额度内。' },
{ id: 'echo', name: '心脏彩超', desc: '心脏结构与瓣膜功能超声', price: 360, type: 'optional', level: 'key' },
{ id: 'gastro', name: '胃幽门螺杆菌检测', desc: 'C13 呼气试验，筛查胃部风险', price: 480, type: 'optional', level: 'normal' }
];
let activeTab = 'optional';
@@ -387,9 +385,11 @@
const requiredFeeEl = document.getElementById('requiredFee');
const optionalFeeEl = document.getElementById('optionalFee');
const availableFeeEl = document.getElementById('availableFee');
const quotaBarFillEl = document.getElementById('quotaBarFill');
const annualLimitTextEl = document.getElementById('annualLimitText');
function formatPrice(value) {
return `¥${value.toFixed(2)}`;
return `¥${value.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
}
function getRequiredProjects() {
@@ -412,17 +412,26 @@
.reduce((sum, project) => sum + project.price, 0);
}
function getAvailableFee() {
return annualLimit - getRequiredFee() - getOptionalFee();
}
function updateSummary() {
const requiredFee = getRequiredFee();
const optionalFee = getOptionalFee();
const totalFee = requiredFee + optionalFee;
const availableFee = annualLimit - totalFee;
const overLimit = availableFee < 0;
requiredFeeEl.textContent = formatPrice(requiredFee);
optionalFeeEl.textContent = formatPrice(optionalFee);
totalFeeEl.textContent = formatPrice(totalFee);
availableFeeEl.textContent = formatPrice(Math.max(availableFee, 0));
availableFeeEl.classList.toggle('summary-row__value--danger', availableFee < 0);
availableFeeEl.classList.toggle('quota-cell__value--danger', overLimit);
const ratio = Math.min(totalFee / annualLimit, 1);
quotaBarFillEl.style.width = (ratio * 100).toFixed(1) + '%';
quotaBarFillEl.classList.toggle('quota-card__bar-fill--over', overLimit);
}
function renderProjects() {
@@ -493,22 +502,18 @@
});
});
annualLimitTextEl.textContent = formatPrice(annualLimit);
renderProjects();
updateSummary();
function openSubmitConfirm() {
const requiredCount = getRequiredProjects().length;
const optionalCount = selectedOptionalIds.size;
const totalCount = requiredCount + optionalCount;
const requiredFee = getRequiredFee();
const optionalFee = getOptionalFee();
const totalCount = requiredCount + selectedOptionalIds.size;
document.getElementById('confirmCount').textContent = totalCount + ' 项';
document.getElementById('confirmFee').textContent = formatPrice(requiredFee + optionalFee);
document.getElementById('confirmQuota').textContent = '体检额度 ' + formatPrice(annualLimit);
document.getElementById('confirmOptionalFee').textContent = formatPrice(optionalFee);
document.getElementById('confirmOptionalCap').textContent = '可用额度 ≤ ' + formatPrice(unitLimits.optional);
document.getElementById('confirmRequiredFee').textContent = formatPrice(requiredFee);
document.getElementById('confirmRequiredCap').textContent = '可用额度 ≤ ' + formatPrice(unitLimits.required);
document.getElementById('confirmTotalFee').textContent = formatPrice(getRequiredFee() + getOptionalFee());
document.getElementById('confirmRequiredFee').textContent = formatPrice(getRequiredFee());
document.getElementById('confirmAnnualLimit').textContent = '≤ ' + formatPrice(annualLimit);
document.getElementById('confirmAvailableFee').textContent = formatPrice(Math.max(getAvailableFee(), 0));
document.getElementById('submitModal').classList.remove('hidden');
}
function closeSubmitConfirm() {
employee-app/health-checkup/gastro-date-selected.html
+125 -3
View File
@@ -104,6 +104,58 @@
opacity: 0; pointer-events: none; transition: all 0.25s ease; max-width: 280px;
}
.toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* 原型演示状态下拉框(导航栏右上角) */
.demo-select {
margin-left: auto; flex-shrink: 0; font-family: inherit;
font-size: 11px; font-weight: 600; color: var(--text-secondary);
border: 1px solid #e8e8e8; border-radius: 12px; padding: 3px 6px;
background: #f5f5f5; cursor: pointer; outline: none;
}
/* 预约结果横幅 */
.result-banner {
display: flex; align-items: flex-start; gap: 12px;
border-radius: 20px; padding: 16px; margin-bottom: 14px;
}
.result-banner--success { background: linear-gradient(135deg, #f6ffed 0%, #ffffff 100%); border: 1px solid #b7eb8f; }
.result-banner--fail { background: linear-gradient(135deg, #fff1f0 0%, #ffffff 100%); border: 1px solid #ffccc7; }
.result-banner__icon {
width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.result-banner--success .result-banner__icon { background: #52c41a; }
.result-banner--fail .result-banner__icon { background: #ff4d4f; }
.result-banner--success .icon-cross { display: none; }
.result-banner--fail .icon-check { display: none; }
.result-banner__title { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.result-banner--success .result-banner__title { color: #389e0d; }
.result-banner--fail .result-banner__title { color: #cf1322; }
.result-banner__sub { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.result-banner__reason {
display: none; align-items: center; gap: 6px; margin-top: 6px;
font-size: 13px; color: var(--text-secondary);
}
.result-banner--fail .result-banner__reason { display: flex; }
.reason-help {
width: 16px; height: 16px; border-radius: 50%; border: 1px solid #ff4d4f; color: #ff4d4f;
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; cursor: pointer; flex-shrink: 0; transition: all 0.2s;
}
.reason-help:hover { background: #ff4d4f; color: #fff; }
/* 失败原因详情弹窗 */
.reason-modal {
width: 100%; background: #fff; border-radius: 24px; padding: 22px 20px 18px;
box-shadow: 0 20px 50px rgba(0,0,0,0.16);
}
.reason-modal__title { font-size: 17px; font-weight: 700; text-align: center; margin-bottom: 16px; }
.reason-modal__item { margin-bottom: 14px; }
.reason-modal__label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.reason-modal__text { font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.6; }
.reason-modal__text--danger { color: #cf1322; }
.reason-modal__btn {
width: 100%; height: 44px; border-radius: 22px; border: none; cursor: pointer;
background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%); color: #fff;
font-size: 15px; font-weight: 600; margin-top: 4px;
}
/* 取消预约确认弹窗 */
.modal-overlay {
position: absolute; inset: 0; background: rgba(0,0,0,0.42); z-index: 120;
@@ -155,6 +207,11 @@
<div class="nav-bar">
<a class="nav-back" href="index.html">&#8249;</a>
<span class="nav-title">胃肠镜预约</span>
<!-- [交互] 原型演示:切换预约成功/失败两态 -->
<select class="demo-select" id="demoSelect" title="原型演示：切换预约结果状态" onchange="setResult(this.value)">
<option value="success">预约成功</option>
<option value="fail">预约失败</option>
</select>
</div>
<div class="scroll-content">
<div class="page-body">
@@ -167,6 +224,22 @@
<div class="stepper__item stepper__item--done" onclick="showToast()"><div class="stepper__dot">&#10003;</div><div class="stepper__label">预约日期</div></div>
</div>
<!-- [交互] 预约结果横幅:成功/失败两态,由右上角演示切换器控制 -->
<div class="result-banner result-banner--success" id="resultBanner">
<div class="result-banner__icon">
<svg class="icon-check" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
<svg class="icon-cross" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
</div>
<div>
<div class="result-banner__title" id="resultTitle">预约成功</div>
<div class="result-banner__sub" id="resultSub">已为您锁定胃肠镜检查名额,请按预约日期准时到检</div>
<div class="result-banner__reason">
<span>失败原因:所选日期号源已约满</span>
<span class="reason-help" onclick="openReasonModal()">?</span>
</div>
</div>
</div>
<!-- 预约信息 -->
<div class="info-card">
<div class="section-title">预约信息</div>
@@ -192,8 +265,8 @@
</div>
</div>
<!-- 体检须知 -->
<div class="tips-card">
<!-- [交互] 体检须知:仅预约成功态显示，失败态隐藏 -->
<div class="tips-card" id="tipsCard">
<div class="tips-card__title">体检须知</div>
<div class="tips-card__item"><span class="tips-card__dot"></span><span>检查前3天请清淡饮食，避免高纤维、高脂肪食物。</span></div>
<div class="tips-card__item"><span class="tips-card__dot"></span><span>检查前一天晚上需服用肠道清洁剂，具体用法请遵医嘱。</span></div>
@@ -205,13 +278,38 @@
</div>
</div>
<div class="bottom-actions">
<!-- [交互] 预约成功态底部按钮 -->
<div class="bottom-actions" id="actionsSuccess">
<!-- [交互] 取消预约改为二次确认弹窗,需选择或填写取消原因 -->
<button class="bottom-actions__btn bottom-actions__btn--ghost" onclick="openCancelModal()">取消预约</button>
<button class="bottom-actions__btn bottom-actions__btn--primary" onclick="window.location.href='my-appointments-all.html?type=gastro'">查看预约详情</button>
</div>
<!-- [交互] 预约失败态底部按钮：重新预约，跳回胃肠镜预约日期页 -->
<div class="bottom-actions" id="actionsFail" style="display: none;">
<button class="bottom-actions__btn bottom-actions__btn--primary" onclick="window.location.href='gastro-date.html'">重新预约</button>
</div>
<div class="toast" id="stepToast">当前已预约胃肠镜检查，无法重新选择，请先取消预约</div>
<!-- [交互] 点击失败原因旁的小问号，弹窗查看具体失败原因 -->
<div class="modal-overlay hidden" id="reasonModal">
<div class="reason-modal">
<div class="reason-modal__title">失败原因详情</div>
<div class="reason-modal__item">
<div class="reason-modal__label">失败原因</div>
<div class="reason-modal__text reason-modal__text--danger">号源争抢失败：宁夏宝石花医院 2026年3月23日 胃肠镜检查号源已被其他员工约满</div>
</div>
<div class="reason-modal__item">
<div class="reason-modal__label">发生时间</div>
<div class="reason-modal__text">2026-03-16 12:00:35</div>
</div>
<div class="reason-modal__item">
<div class="reason-modal__label">处理建议</div>
<div class="reason-modal__text">请点击「重新预约」选择其他可约日期；胃肠镜检查仅可预约 7~30 天内的号源，若长期无可用号源，可联系健康管理专员协调加号。</div>
</div>
<button class="reason-modal__btn" onclick="closeReasonModal()">知道了</button>
</div>
</div>
<!-- [交互] 取消预约二次确认:单选原因chips,选「其他」时填写具体原因 -->
<div class="modal-overlay hidden" id="cancelModal">
<div class="cancel-modal">
@@ -244,6 +342,30 @@
toastTimer = setTimeout(function() { toast.classList.remove('show'); }, 2200);
}
// [交互] 原型演示：切换预约成功/失败两态（横幅、底部按钮、体检须知联动）
function setResult(state) {
var fail = state === 'fail';
var banner = document.getElementById('resultBanner');
banner.classList.toggle('result-banner--fail', fail);
banner.classList.toggle('result-banner--success', !fail);
document.getElementById('resultTitle').textContent = fail ? '预约失败' : '预约成功';
document.getElementById('resultSub').style.display = fail ? 'none' : '';
document.getElementById('actionsSuccess').style.display = fail ? 'none' : 'flex';
document.getElementById('actionsFail').style.display = fail ? 'flex' : 'none';
// 预约失败时隐藏体检须知（未成功到检，须知无意义）
document.getElementById('tipsCard').style.display = fail ? 'none' : '';
document.getElementById('stepToast').textContent = fail
? '预约未成功，请点击下方「重新预约」按钮重新预约'
: '当前已预约胃肠镜检查，无法重新选择，请先取消预约';
}
function openReasonModal() {
document.getElementById('reasonModal').classList.remove('hidden');
}
function closeReasonModal() {
document.getElementById('reasonModal').classList.add('hidden');
}
// [交互] 取消预约二次确认:原因单选 + 其他原因填写 + 校验 + 确认后返回预约日期页重新选择
var cancelReason = null;
function selectChip(el) {
employee-app/health-checkup/gastro-hospital.html
-17
View File
@@ -89,12 +89,6 @@
}
.hospital-card__name { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.hospital-card__addr { font-size: 12px; color: var(--text-muted); }
/* 医院承检类型标签：常规体检与胃肠镜体检互斥，职业体检可与任一叠加 */
.hospital-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.htag { font-size: 10px; line-height: 16px; padding: 0 8px; border-radius: 8px; }
.htag--routine { background: #e6f7ff; color: #1890ff; }
.htag--gastro { background: #f6ffed; color: #52c41a; }
.htag--occupation { background: #fff7e6; color: #fa8c16; }
.radio-dot {
width: 22px; height: 22px; border-radius: 50%; border: 2px solid #d9d9d9;
display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; flex-shrink: 0;
@@ -163,10 +157,6 @@
<div>
<div class="hospital-card__name">宁夏宝石花医院</div>
<div class="hospital-card__addr">宁夏银川市</div>
<div class="hospital-card__tags">
<span class="htag htag--routine">常规体检</span>
<span class="htag htag--occupation">职业体检</span>
</div>
</div>
</div>
<div class="radio-dot"></div>
@@ -177,10 +167,6 @@
<div>
<div class="hospital-card__name">CQ星龙园医院</div>
<div class="hospital-card__addr">陕西西安市</div>
<div class="hospital-card__tags">
<span class="htag htag--gastro">胃肠镜体检</span>
<span class="htag htag--occupation">职业体检</span>
</div>
</div>
</div>
<div class="radio-dot"></div>
@@ -192,9 +178,6 @@
<div>
<div class="hospital-card__name">唐都医院</div>
<div class="hospital-card__addr">陕西西安市</div>
<div class="hospital-card__tags">
<span class="htag htag--gastro">胃肠镜体检</span>
</div>
</div>
</div>
<div class="radio-dot"></div>
employee-app/health-checkup/hospital-checkin.html
+1 -1
View File
@@ -246,7 +246,7 @@
<div class="bottom-action">
<!-- [交互] 点击跳转至: my-appointments-all.html -->
<button class="bottom-action__btn" onclick="window.location.href='my-appointments-all.html'">返回我的预约</button>
<button class="bottom-action__btn" onclick="window.location.href='my-appointments-all.html'">返回现场体检</button>
</div>
</div>
</body>
employee-app/health-checkup/index-inactive.html
+3 -3
View File
@@ -230,9 +230,9 @@
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
</div>
<div class="feature-card__content">
<div class="feature-card__title">我的预约</div>
<div class="feature-card__desc">查看历史预约记录与当前预约状态</div>
<span class="feature-card__action">查看预约</span>
<div class="feature-card__title">现场体检</div>
<div class="feature-card__desc">到院体检扫码/体检进度查询</div>
<span class="feature-card__action">查看体检</span>
</div>
<span class="feature-card__arrow">›</span>
</div>
employee-app/health-checkup/index.html
+5 -5
View File
@@ -496,8 +496,8 @@
<div class="banner-slide banner-slide--waiting">
<span class="banner-slide__deco">🌱</span>
<div class="banner-waiting__icon">🌱</div>
<div class="banner-waiting__title">单位暂未开启下一年度体检计划</div>
<div class="banner-waiting__desc">2027 年度体检计划筹备中，开启后将第一时间通知您</div>
<div class="banner-waiting__title">单位暂未开启本年度体检计划</div>
<div class="banner-waiting__desc">2026 年度体检计划筹备中，开启后将第一时间通知您</div>
</div>
</div>
</div>
@@ -541,9 +541,9 @@
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
</div>
<div class="feature-card__content">
<div class="feature-card__title">我的预约</div>
<div class="feature-card__desc">查看/取消体检预约</div>
<span class="feature-card__action">查看预约</span>
<div class="feature-card__title">现场体检</div>
<div class="feature-card__desc">到院体检扫码/体检进度查询</div>
<span class="feature-card__action">查看体检</span>
</div>
<span class="feature-card__arrow">›</span>
</div>
employee-app/health-checkup/indicator-compare-detail.html
+3 -4
View File
@@ -147,7 +147,7 @@
.hero__yoy { font-size: 11px; color: var(--text-secondary); padding-bottom: 3px; }
.hero__yoy b { font-size: 13px; }
.hero__ref { font-size: 11px; color: var(--text-muted); }
.hero__result { font-size: 14px; font-weight: 700; line-height: 1.6; }
.hero__result { font-size: 14px; font-weight: 700; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.badge {
display: inline-flex;
@@ -218,7 +218,6 @@
-webkit-box-orient: vertical;
overflow: hidden;
}
.tl-item__text.is-abn { color: var(--danger); font-weight: 600; }
.tl-item.is-expanded .tl-item__text {
display: block;
-webkit-line-clamp: unset;
@@ -500,7 +499,7 @@
var curAbn = q.st[4] === 'a';
var badge = '<span class="badge badge--' + (curAbn ? 'abn' : 'ok') + '">' + (curAbn ? '存在异常' : '正常') + '</span>';
var html = heroCommon(q.name, badge, '检查项目')
+ '<div class="hero__result" style="' + (curAbn ? 'color:var(--danger)' : '') + '">' + q.txt[4] + '</div>'
+ '<div class="hero__result">' + q.txt[4] + '</div>'
+ '<div class="hero__ref">' + YEARS[4] + '年度体检</div></div>';
html += '<div class="card"><div class="card__label">历年结果对比</div><div class="tl">';
@@ -510,7 +509,7 @@
+ '<div class="tl-item__head"><span class="tl-item__year">' + YEARS[i] + '</span>'
+ '<span class="tl-item__date">' + DATES[i] + '</span>'
+ '<span class="tl-item__tag badge badge--' + (abn ? 'abn' : 'ok') + '">' + (abn ? '存在异常' : '正常') + '</span></div>'
+ '<div class="tl-item__text' + (abn ? ' is-abn' : '') + '">' + q.txt[i] + '</div>'
+ '<div class="tl-item__text">' + q.txt[i] + '</div>'
+ '<button class="tl-item__toggle" type="button" hidden onclick="toggleTl(this)">展开</button></div>';
}
html += '</div></div>';
employee-app/health-checkup/message-detail.html
+5 -5
View File
@@ -249,14 +249,14 @@
},
'warn-predict': {
time: '今天 10:34',
title: '未来 6 个月痛风发作风险约 68%',
title: '未来 3 年进展为 2 型糖尿病风险约 45%',
paras: [
'结合您近三年尿酸变化趋势（487 → 502 → 512 μmol/L）、饮食习惯问卷（高嘌呤饮食频次 &gt;4 次/周）及 BMI 26.4，AI 模型预测您未来 6 个月痛风急性发作概率约 <span class="kv">68%</span>。',
'风险升高触发因素：尿酸持续>540 μmol/L、短期内大量摄入高嘌呤食物或酒精、受凉与剧烈运动。',
'建议：每月复查一次尿酸，若复测值 ≥540 μmol/L 请至风湿免疫科评估降尿酸治疗；限制动物内脏、海鲜、啤酒摄入；每日饮水 2000 ml 以上。'
'结合您近三年空腹血糖变化趋势（5.8 → 6.3 → 6.7 mmol/L，已超参考上限）、本次体检 BMI 26.4 与血脂异常记录，AI 模型评估您已处于糖尿病前期阶段，未来 3 年进展为 2 型糖尿病的概率约 <span class="kv">45%</span>。',
'风险升高触发因素：空腹血糖持续 ≥6.1 mmol/L 且逐年上行、合并超重与血脂异常、缺乏运动、高糖及精制碳水饮食。',
'建议：尽快至内分泌科门诊完善口服葡萄糖耐量试验（OGTT）与糖化血红蛋白复查以明确分期；每日中等强度运动 30 分钟以上，控制精制糖与主食总量，减重 5% 以上可显著降低进展风险；此后每 3 个月复查一次空腹血糖。'
],
ai: true,
consultName: '痛风'
consultName: '糖尿病'
},
'notice-visit': {
time: '08-26 18:00',
employee-app/health-checkup/messages.html
+1 -1
View File
@@ -216,7 +216,7 @@
<span class="msg__cat">健康体检</span>
<span class="msg__time">今天 10:34</span>
</div>
<div class="msg__title">防范痛风发作风险预警</div>
<div class="msg__title">2型糖尿病发病风险预警</div>
</div>
</div>
employee-app/health-checkup/my-appointments-all.html
+14 -139
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的预约</title>
<title>现场体检</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
@@ -306,37 +306,7 @@
.project-item__status { font-size: 12px; font-weight: 600; }
.project-item__status--done { color: var(--success-text); }
.project-item__status--pending { color: var(--warning-text); }
/* 已选体检项目（取消详情） */
.project-section__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.project-section__count { font-size: 13px; color: var(--text-muted); }
.project-section__count em { font-style: normal; color: var(--primary-dark); font-weight: 700; }
.fee-tabs {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
padding: 5px; background: #f5f7f7; border-radius: 14px; margin-bottom: 14px;
}
.fee-tab {
height: 34px; border: none; border-radius: 10px; background: transparent;
color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer;
}
.fee-tab--active { background: #fff; color: var(--primary-dark); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.project-list-panel { max-height: 280px; overflow-y: auto; padding-right: 2px; }
.project-list-panel::-webkit-scrollbar { display: none; }
.picked-item {
display: flex; align-items: center; gap: 12px; padding: 12px 14px;
background: #f9fbfb; border-radius: 14px; border: 1px solid #eef5f5;
}
.picked-item__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }
.picked-item__info { flex: 1; }
.picked-item__name { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.picked-item__desc { font-size: 12px; color: var(--text-muted); }
.picked-item__price { font-size: 13px; font-weight: 700; color: var(--primary-dark); flex-shrink: 0; }
.picked-item__badge {
display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
border-radius: 10px; font-size: 10px; font-weight: 600; flex-shrink: 0;
}
.picked-item__badge--normal { background: #f5f5f5; color: var(--text-muted); }
.picked-item__badge--key { background: #fff1f0; color: #ff4d4f; }
/* 底部操作按钮（重新预约/立即预约） */
/* 底部操作按钮（立即预约） */
.rebook-btn {
display: block;
width: 100%;
@@ -383,7 +353,7 @@
<div class="nav-bar">
<!-- [交互] 点击返回至: index.html -->
<a class="nav-back" href="index.html">‹</a>
<span class="nav-title">我的预约</span>
<span class="nav-title">现场体检</span>
<!-- [交互] 演示专用：点击展开状态下拉，切换查看各状态详情 -->
<div class="demo-select">
<button class="demo-select__trigger" type="button" id="demoTrigger" onclick="toggleDemoMenu(event)">
@@ -392,7 +362,6 @@
</button>
<div class="demo-select__menu hidden" id="demoMenu">
<div class="demo-select__item demo-select__item--active" data-status="pending" onclick="setDemoStatus('pending')">待体检<span class="check">✓</span></div>
<div class="demo-select__item" data-status="cancelled" onclick="setDemoStatus('cancelled')">已取消<span class="check">✓</span></div>
<div class="demo-select__item" data-status="done" onclick="setDemoStatus('done')">已完成<span class="check">✓</span></div>
<div class="demo-select__item" data-status="none" onclick="setDemoStatus('none')">无预约信息<span class="check">✓</span></div>
</div>
@@ -491,36 +460,6 @@
</div>
</div>
<!-- ======================= 常规体检 · 已取消 ======================= -->
<div class="panel hidden" data-type="routine" data-status="cancelled">
<div class="summary-card">
<div class="section-title">常规体检</div>
<div class="summary-list">
<div class="summary-item"><div class="summary-item__label">体检医院</div><div class="summary-item__value">宁夏宝石花医院</div></div>
<div class="summary-item"><div class="summary-item__label">预约日期</div><div class="summary-item__value">2026-03-23</div></div>
<div class="summary-item"><div class="summary-item__label">体检员工</div><div class="summary-item__value">张旭</div></div>
<div class="summary-item"><div class="summary-item__label">单位部门</div><div class="summary-item__value">采油一厂·xx作业区</div></div>
<div class="summary-item"><div class="summary-item__label">状态</div><div class="summary-item__value" style="color:#ff4d4f;">已取消</div></div>
</div>
</div>
<div class="summary-card">
<div class="project-section__header">
<div class="section-title" style="margin-bottom:0">已选体检项目</div>
<span class="project-section__count">共 <em>14</em> 项</span>
</div>
<!-- [交互] 点击切换自选项目/必检项目 -->
<div class="fee-tabs">
<button class="fee-tab fee-tab--active" type="button" id="rcTabOptional" onclick="switchPicked('optional')">自选项目(6)</button>
<button class="fee-tab" type="button" id="rcTabRequired" onclick="switchPicked('required')">必检项目(8)</button>
</div>
<div class="project-list-panel">
<div class="project-list" id="rcPickedList"></div>
</div>
</div>
<!-- [交互] 点击跳转至: booking-date.html（重新走常规体检预约流程） -->
<button class="rebook-btn" type="button" onclick="location.href='booking-date.html'">重新预约</button>
</div>
<!-- ======================= 常规体检 · 无预约信息 ======================= -->
<div class="panel hidden" data-type="routine" data-status="none">
<div class="empty">
@@ -557,13 +496,11 @@
<div class="tips-card__item"><span class="tips-card__dot"></span><span>若需取消预约，请至少提前一天操作。</span></div>
</div>
<div class="progress-card">
<!-- [交互] 点击切换已检/未检 Tab -->
<div class="project-tabs">
<button class="project-tabs__btn" type="button" id="gTabDone" onclick="switchProg('g',0)">已检项目 (0)</button>
<button class="project-tabs__btn project-tabs__btn--active" type="button" id="gTabPending" onclick="switchProg('g',1)">未检项目 (2)</button>
<div class="section-title">项目列表</div>
<div class="project-list">
<div class="project-item"><div class="project-item__icon project-item__icon--pending">&#9679;</div><div class="project-item__name">胃镜检查</div><div class="project-item__status project-item__status--pending">未检</div></div>
<div class="project-item"><div class="project-item__icon project-item__icon--pending">&#9679;</div><div class="project-item__name">肠镜检查</div><div class="project-item__status project-item__status--pending">未检</div></div>
</div>
<div class="project-list hidden" id="gProgDoneList"></div>
<div class="project-list" id="gProgPendingList"></div>
</div>
</div>
@@ -581,31 +518,12 @@
</div>
</div>
<div class="progress-card">
<!-- [交互] 点击切换已检/未检 Tab -->
<div class="project-tabs">
<button class="project-tabs__btn project-tabs__btn--active" type="button" id="gdTabDone" onclick="switchProg('gd',0)">已检项目 (2)</button>
<button class="project-tabs__btn" type="button" id="gdTabPending" onclick="switchProg('gd',1)">未检项目 (0)</button>
</div>
<div class="project-list" id="gdProgDoneList"></div>
<div class="project-list hidden" id="gdProgPendingList"></div>
</div>
</div>
<!-- ======================= 胃肠镜体检 · 已取消 ======================= -->
<div class="panel hidden" data-type="gastro" data-status="cancelled">
<div class="summary-card">
<div class="section-title">胃肠镜体检</div>
<div class="summary-list">
<div class="summary-item"><div class="summary-item__label">体检医院</div><div class="summary-item__value">宁夏宝石花医院</div></div>
<div class="summary-item"><div class="summary-item__label">体检员工</div><div class="summary-item__value">刘韵琴</div></div>
<div class="summary-item"><div class="summary-item__label">体检地址</div><div class="summary-item__value">银川市西夏区怀远路148号</div></div>
<div class="summary-item"><div class="summary-item__label">体检日期</div><div class="summary-item__value">2026年3月23日</div></div>
<div class="summary-item"><div class="summary-item__label">体检项目</div><div class="summary-item__value">胃肠镜体检</div></div>
<div class="summary-item"><div class="summary-item__label">状态</div><div class="summary-item__value" style="color:#ff4d4f;">已取消</div></div>
<div class="section-title">项目列表</div>
<div class="project-list">
<div class="project-item"><div class="project-item__icon project-item__icon--done">&#10003;</div><div class="project-item__name">胃镜检查</div><div class="project-item__status project-item__status--done">已体检</div></div>
<div class="project-item"><div class="project-item__icon project-item__icon--done">&#10003;</div><div class="project-item__name">肠镜检查</div><div class="project-item__status project-item__status--done">已体检</div></div>
</div>
</div>
<!-- [交互] 点击跳转至: gastro-hospital.html（重新走胃肠镜预约流程） -->
<button class="rebook-btn" type="button" onclick="location.href='gastro-hospital.html'">重新预约</button>
</div>
<!-- ======================= 胃肠镜体检 · 无预约信息 ======================= -->
@@ -615,7 +533,7 @@
<svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#bfbfbf" stroke-width="1.6"><rect x="3" y="4" width="18" height="17" rx="3"/><path d="M3 9h18"/><path d="M8 2v4M16 2v4"/><path d="M9 15l2.2 2.2L15 13.5"/></svg>
</div>
<div class="empty__title">暂无胃肠镜体检预约</div>
<div class="empty__desc">您还没有预约胃肠镜体检，预约成功后可在此查看预约详情、体检须知与签到码。</div>
<div class="empty__desc">您还没有预约胃肠镜体检，预约成功后可在此查看预约详情、体检须知与检查项目。</div>
<!-- [交互] 点击跳转至: gastro-hospital.html（进入胃肠镜预约流程） -->
<button class="rebook-btn" style="width:auto;padding:0 40px;" type="button" onclick="location.href='gastro-hospital.html'">立即预约</button>
</div>
@@ -715,7 +633,6 @@
'甲状腺彩超', '泌尿系彩超', '心脏彩超', '颈动脉彩超',
'骨密度检测', '肺功能', '幽门螺杆菌', '中医体质辨识', '总检报告'
];
var GASTRO_PROJECTS = ['胃镜检查', '肠镜检查'];
function renderItem(name, isDone) {
return '<div class="project-item">' +
@@ -749,60 +666,18 @@
document.getElementById(prefix + 'ProgPendingList').classList.toggle('hidden', idx !== 1);
}
// ===== 已取消详情：已选体检项目（自选/必检） =====
var PICKED_PROJECTS = [
{ name: '一般检查', desc: '身高、体重、血压、视力', price: 120, type: 'required', level: 'normal' },
{ name: '血常规', desc: '血红蛋白、白细胞、血小板等', price: 80, type: 'required', level: 'normal' },
{ name: '尿常规', desc: '尿蛋白、尿糖、尿潜血等', price: 45, type: 'required', level: 'normal' },
{ name: '肝功能', desc: 'ALT、AST、总胆红素等', price: 160, type: 'required', level: 'key' },
{ name: '肾功能', desc: '肌酐、尿素氮、尿酸等', price: 110, type: 'required', level: 'key' },
{ name: '血脂四项', desc: '总胆固醇、甘油三酯、HDL、LDL', price: 90, type: 'required', level: 'normal' },
{ name: '空腹血糖', desc: '空腹静脉血糖检测', price: 40, type: 'required', level: 'normal' },
{ name: '心电图', desc: '十二导联心电图检查', price: 75, type: 'required', level: 'key' },
{ name: '胸部X光', desc: '胸部正位X线摄影', price: 140, type: 'optional', level: 'normal' },
{ name: '腹部彩超', desc: '肝胆脾胰肾彩色超声', price: 180, type: 'optional', level: 'key' },
{ name: '甲状腺彩超', desc: '甲状腺彩色多普勒超声', price: 150, type: 'optional', level: 'key' },
{ name: '肿瘤标志物', desc: 'AFP、CEA、CA199等', price: 280, type: 'optional', level: 'key' },
{ name: '幽门螺杆菌', desc: 'C14呼气试验', price: 120, type: 'optional', level: 'normal' },
{ name: '骨密度检测', desc: '超声骨密度检测', price: 100, type: 'optional', level: 'normal' }
];
function renderPicked(activeTab) {
var list = PICKED_PROJECTS.filter(function(item) { return item.type === activeTab; });
document.getElementById('rcPickedList').innerHTML = list.map(function(item) {
var badgeText = item.level === 'key' ? '重点' : '一般';
var badgeClass = item.level === 'key' ? 'picked-item__badge--key' : 'picked-item__badge--normal';
return '<div class="picked-item">' +
'<div class="picked-item__dot"></div>' +
'<div class="picked-item__info"><div class="picked-item__name">' + item.name + '</div>' +
'<div class="picked-item__desc">' + item.desc + '</div></div>' +
'<div class="picked-item__price">¥' + item.price + '</div>' +
'<div class="picked-item__badge ' + badgeClass + '">' + badgeText + '</div></div>';
}).join('');
}
// [交互] 切换自选项目/必检项目列表
function switchPicked(tab) {
document.getElementById('rcTabOptional').classList.toggle('fee-tab--active', tab === 'optional');
document.getElementById('rcTabRequired').classList.toggle('fee-tab--active', tab === 'required');
renderPicked(tab);
}
// ===== 初始化 =====
fillProgress('r', ROUTINE_PROJECTS, 5); // 常规·待体检 5/26
fillProgress('rd', ROUTINE_PROJECTS, 26); // 常规·已完成 26/26
fillProgress('g', GASTRO_PROJECTS, 0); // 胃肠镜·待体检 0/2
fillProgress('gd', GASTRO_PROJECTS, 2); // 胃肠镜·已完成 2/2
renderPicked('optional');
// [交互] URL 参数直达：?type=routine|gastro&status=pending|cancelled|done|none
// [交互] URL 参数直达：?type=routine|gastro&status=pending|done|none
(function initFromUrl() {
if (!window.URLSearchParams) { return; }
var params = new URLSearchParams(window.location.search);
var pType = params.get('type');
var pStatus = params.get('status');
if (pType === 'routine' || pType === 'gastro') { setType(pType); }
if (pStatus === 'pending' || pStatus === 'cancelled' || pStatus === 'done' || pStatus === 'none') {
if (pStatus === 'pending' || pStatus === 'done' || pStatus === 'none') {
setDemoStatus(pStatus);
}
})();
employee-app/health-checkup/process-guide-detail.html
+2 -2
View File
@@ -336,9 +336,9 @@
{ title: '进入预约页面', text: '打开「健康体检」首页，点击「体检预约」进入预约页面。' },
{ title: '选择医院与项目', text: '选择体检医院与体检项目（常规体检 / 胃肠镜体检）。' },
{ title: '选择日期与时间段', text: '选择体检日期与时间段，系统将实时显示可预约号源。' },
{ title: '确认并提交', text: '确认预约信息无误后提交，预约成功后可在「我的预约」中查看。' }
{ title: '确认并提交', text: '确认预约信息无误后提交，预约成功后可在「现场体检」中查看。' }
],
tips: '如需改期或取消，请提前在「我的预约」中操作，避免占用号源。'
tips: '如需改期或取消，请提前在「现场体检」中操作，避免占用号源。'
},
checkin: {
title: '到院体检流程',
index.html
+1 -1
View File
@@ -595,7 +595,7 @@ const SITE_MAP = [
{ file:'booking-date-selected.html', label:'预约-已选日期' },
{ file:'gastro-preselect.html', label:'胃肠镜医院预选' },
{ file:'gastro-preselect-done.html', label:'胃肠镜预选-已提交' },
{ file:'my-appointments-all.html', label:'我的预约' },
{ file:'my-appointments-all.html', label:'现场体检' },
{ file:'hospital-checkin.html', label:'到院体检' },
{ file:'reports.html', label:'体检报告' },
{ file:'report-query.html', label:'报告查询详情' },