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-06-01 13:36:30 +08:00
co-authored by Claude Opus 4.6
parent 09e2860b4f
commit 2f7830a336
2 changed files with 188 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
employee-app/health-checkup/gastro-date-selected.html
+187
View File
@@ -0,0 +1,187 @@
<!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; }
:root {
--primary: #13c2c2; --primary-dark: #0f9b9b; --primary-light: #e6fffb;
--danger: #ff4d4f; --danger-light: #fff1f0;
--text-primary: #1a1a1a; --text-secondary: #666666; --text-muted: #8c8c8c;
--bg-page: #f0f2f5; --bg-content: #f7f9fb;
--shadow: 0 10px 30px rgba(19, 194, 194, 0.08);
}
body {
background: var(--bg-page); 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;
color: var(--text-primary);
}
.phone-shell {
width: 390px; min-height: 844px; background: var(--bg-content);
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-back { font-size: 18px; color: var(--text-primary); cursor: pointer; line-height: 1; text-decoration: none; }
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; }
.scroll-content {
flex: 1; overflow-y: auto;
background: linear-gradient(180deg, #effbfb 0%, #f7f9fb 180px, #f7f9fb 100%);
padding-bottom: 100px;
}
.scroll-content::-webkit-scrollbar { display: none; }
.page-body { padding: 16px; }
.stepper { display: flex; align-items: center; justify-content: center; margin-bottom: 18px; padding: 16px 0; }
.stepper__item { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; text-decoration: none; }
.stepper__dot {
width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700; background: #e8e8e8; color: #bfbfbf; transition: all 0.25s;
}
.stepper__item--done .stepper__dot { background: var(--primary); color: #fff; }
.stepper__item--done { pointer-events: none; }
.stepper__label { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.stepper__item--done .stepper__label { color: var(--primary-dark); }
.stepper__line { width: 44px; height: 3px; background: #e8e8e8; margin: 0 8px; margin-bottom: 22px; border-radius: 2px; }
.stepper__line--done { background: var(--primary); }
.section-title { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.info-card {
background: #fff; border-radius: 20px; padding: 18px 16px; margin-bottom: 14px;
box-shadow: var(--shadow); border: 1px solid rgba(19,194,194,0.06);
}
.info-card__row {
display: flex; justify-content: space-between; align-items: center;
padding: 12px 0; border-bottom: 1px solid #f0f0f0;
}
.info-card__row:first-child { padding-top: 0; }
.info-card__row:last-child { border-bottom: none; padding-bottom: 0; }
.info-card__label { font-size: 13px; color: var(--text-muted); }
.info-card__value { font-size: 14px; font-weight: 600; color: var(--text-primary); text-align: right; }
.info-card__value--highlight { color: var(--primary-dark); }
.tips-card {
background: #fff; border-radius: 20px; padding: 16px; margin-bottom: 14px;
border: 1px solid #eef5f5; box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}
.tips-card__title { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.tips-card__item {
display: flex; gap: 8px; font-size: 13px; line-height: 1.7;
color: var(--text-secondary); margin-bottom: 8px;
}
.tips-card__item:last-child { margin-bottom: 0; }
.tips-card__dot {
width: 6px; height: 6px; border-radius: 50%; background: var(--primary);
margin-top: 8px; flex-shrink: 0;
}
.bottom-actions {
position: absolute; left: 16px; right: 16px; bottom: 18px;
display: flex; gap: 12px; padding-bottom: 16px;
}
.bottom-actions__btn {
flex: 1; height: 48px; border-radius: 24px; font-size: 15px; font-weight: 600; border: none; cursor: pointer;
}
.bottom-actions__btn--ghost {
background: var(--danger-light); color: var(--danger); border: 1px solid rgba(255,77,79,0.2);
}
.bottom-actions__btn--primary {
background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
color: #fff; box-shadow: 0 10px 20px rgba(19,194,194,0.22);
}
.toast {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.9);
background: rgba(0,0,0,0.75); color: #fff; padding: 14px 22px; border-radius: 12px;
font-size: 13px; line-height: 1.6; text-align: center; z-index: 200;
opacity: 0; pointer-events: none; transition: all 0.25s ease; max-width: 280px;
}
.toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
</style>
</head>
<body>
<div class="phone-shell">
<div class="phone-status-bar">
<span class="time">12:00</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>
<div class="nav-bar">
<a class="nav-back" href="index.html">&#8249;</a>
<span class="nav-title">胃肠镜预约</span>
</div>
<div class="scroll-content">
<div class="page-body">
<!-- 步骤条：全部完成 -->
<div class="stepper">
<div class="stepper__item stepper__item--done" onclick="showToast()"><div class="stepper__dot">&#10003;</div><div class="stepper__label">选择医院</div></div>
<div class="stepper__line stepper__line--done"></div>
<div class="stepper__item stepper__item--done" onclick="showToast()"><div class="stepper__dot">&#10003;</div><div class="stepper__label">填问卷</div></div>
<div class="stepper__line stepper__line--done"></div>
<div class="stepper__item stepper__item--done" onclick="showToast()"><div class="stepper__dot">&#10003;</div><div class="stepper__label">预约日期</div></div>
</div>
<!-- 预约信息 -->
<div class="info-card">
<div class="section-title">预约信息</div>
<div class="info-card__row">
<span class="info-card__label">体检医院</span>
<span class="info-card__value">宁夏宝石花医院</span>
</div>
<div class="info-card__row">
<span class="info-card__label">体检员工</span>
<span class="info-card__value">刘韵琴</span>
</div>
<div class="info-card__row">
<span class="info-card__label">体检地址</span>
<span class="info-card__value">银川市西夏区怀远路148号</span>
</div>
<div class="info-card__row">
<span class="info-card__label">体检日期</span>
<span class="info-card__value info-card__value--highlight">2026年3月23日</span>
</div>
<div class="info-card__row">
<span class="info-card__label">体检项目</span>
<span class="info-card__value info-card__value--highlight">胃肠镜体检</span>
</div>
</div>
<!-- 体检须知 -->
<div class="tips-card">
<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>
<div class="tips-card__item"><span class="tips-card__dot"></span><span>检查当天需空腹，禁食禁水至少8小时。</span></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>若选择无痛胃肠镜，检查后24小时内请勿驾车。</span></div>
<div class="tips-card__item"><span class="tips-card__dot"></span><span>若需取消预约，请至少提前一天操作。</span></div>
</div>
</div>
</div>
<div class="bottom-actions">
<button class="bottom-actions__btn bottom-actions__btn--ghost" onclick="window.location.href='gastro-date.html'">取消预约</button>
<button class="bottom-actions__btn bottom-actions__btn--primary" onclick="window.location.href='index.html'">返回首页</button>
</div>
<div class="toast" id="stepToast">当前已预约胃肠镜检查，无法重新选择，请先取消预约</div>
</div>
<script>
var toastTimer = null;
function showToast() {
var toast = document.getElementById('stepToast');
toast.classList.add('show');
clearTimeout(toastTimer);
toastTimer = setTimeout(function() { toast.classList.remove('show'); }, 2200);
}
</script>
</body>
</html>
employee-app/health-checkup/gastro-date.html
+1 -4
View File
@@ -302,10 +302,7 @@
function closeConfirm() { document.getElementById('confirmModal').classList.add('hidden'); }
function showSuccessToast() {
closeConfirm();
var toast = document.getElementById('successToast');
toast.classList.add('show');
clearTimeout(toastTimer);
toastTimer = setTimeout(function() { toast.classList.remove('show'); }, 2200);
window.location.href = 'gastro-date-selected.html';
}
</script>
</body>