records.html · 约 3133 字符
1<!DOCTYPE html>2<html lang="zh-CN">3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">6<title>就诊记录 · 小草医院</title>7<link rel="stylesheet" href="style.css">8</head>9<body>10 <div class="app-top">11 <div class="loc">📋 就诊中心</div>12 <h1 id="topTitle">我的问诊</h1>13 <div class="sub" id="topSub">图文/视频记录 · 挂号 · 电子处方 · 报告查询</div>14 </div>1516 <div class="stat3">17 <div class="b"><div class="n">4</div><div class="l">问诊次数</div></div>18 <div class="b"><div class="n">2</div><div class="l">电子处方</div></div>19 <div class="b"><div class="n">¥138</div><div class="l">累计问诊费</div></div>20 </div>2122 <div id="tabs" class="row" style="gap:8px;margin:4px 14px 0;flex-wrap:wrap">23 <span class="chip on" data-t="all">全部</span>24 <span class="chip" data-t="图文问诊">图文</span>25 <span class="chip" data-t="视频问诊">视频</span>26 <span class="chip" data-t="预约挂号">挂号</span>27 </div>2829 <div class="list" id="recList"></div>3031 <div class="card">32 <div style="font-weight:700;margin-bottom:6px">📑 检验报告</div>33 <div class="item" onclick="toast('演示：打开血常规报告')"><span class="ic">🧪</span><div style="flex:1"><div class="tt">血常规 + 生化全套</div><div class="ds">2026-07-30 · 小草医院检验科</div></div><span class="ar">查看</span></div>34 <div class="item" onclick="toast('演示：打开心电图报告')"><span class="ic">❤️</span><div style="flex:1"><div class="tt">心电图（ECG）</div><div class="ds">2026-07-30 · 小草医院心功能室</div></div><span class="ar">查看</span></div>35 </div>3637 <div class="section-gap"></div>38 <div class="tabbar" id="tabbar"></div>39 <script src="data.js"></script><script src="app.js"></script>40 <script>41 let cur = 'all';42 function render(){43 const list = RECORDS.filter(r=> cur==='all' || r.type===cur);44 const color = t => t==='视频问诊'?'b':(t==='预约挂号'?'w':'g');45 document.getElementById('recList').innerHTML = list.length ? list.map(r=>46 `<div class="item" onclick="toast('演示：查看问诊详情')">47 <span class="ic">${r.type==='预约挂号'?'🏥':'💬'}</span>48 <div style="flex:1">49 <div class="row bt"><div class="tt">${r.doctor}</div><span class="pill ${color(r.type)}">${r.status}</span></div>50 <div class="ds">${r.dept} · ${r.type} · ${r.date}</div>51 <div class="ds">${r.summary}</div>52 <div class="ds">问诊费 ¥${r.fee}</div>53 </div>54 <span class="ar">›</span>55 </div>`56 ).join('') : `<div class="empty">暂无该类型记录</div>`;57 }58 document.getElementById('tabs').onclick = e=>{59 const c = e.target.closest('.chip'); if(!c) return;60 cur = c.dataset.t;61 $all('.chip', document.getElementById('tabs')).forEach(x=>x.classList.toggle('on', x===c));62 render();63 };64 render();65 renderTab('记录');66 </script>67</body>68</html>69