doctors.html · 约 3626 字符
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 id="deptChips" class="row" style="flex-wrap:wrap;gap:8px;margin:13px 14px 0"></div>1718 <div class="card">19 <div class="row bt" style="margin-bottom:4px">20 <strong>问诊方式</strong>21 <span id="modeInfo" style="font-size:12.5px;color:var(--text-mute)">图文免费 · 语音+10 · 视频+20</span>22 </div>23 <div id="modeChips" class="row" style="flex-wrap:wrap;gap:8px;margin-top:6px"></div>24 </div>2526 <div class="list" id="docList"></div>2728 <div class="tabbar" id="tabbar"></div>29 <script src="data.js"></script><script src="app.js"></script>30 <script>31 const params = new URLSearchParams(location.search);32 let curDept = params.get('dept') || 'all';33 let curMode = 'all';3435 document.getElementById('deptChips').innerHTML =36 `<span class="chip ${curDept==='all'?'on':''}" data-d="all">全部科室</span>` +37 DEPARTMENTS.map(d=>`<span class="chip ${curDept===d.id?'on':''}" data-d="${d.id}">${d.emoji} ${d.name}</span>`).join('');3839 document.getElementById('modeChips').innerHTML =40 `<span class="chip ${curMode==='all'?'on':''}" data-m="all">全部</span>` +41 CONSULT_TYPES.map(m=>`<span class="chip ${curMode===m.id?'on':''}" data-m="${m.id}">${m.emoji} ${m.name}</span>`).join('');4243 function render(){44 let list = DOCTORS.slice();45 if(curDept!=='all') list = list.filter(d=>d.dept===deptName(curDept));46 document.getElementById('docList').innerHTML = list.length ? list.map(d=>47 `<div class="doc" onclick="go('chat.html?id=${d.id}')">48 <div class="avatar ${d.online?'':'sm'}">${d.name[0]}</div>49 <div style="flex:1">50 <div class="nm">${d.name} <span style="font-weight:500;color:var(--text-mute);font-size:12px">${d.title}</span>51 ${d.online?'<span class="pill g">在线</span>':'<span class="pill w">离线</span>'}</div>52 <div class="mt">${d.dept} · ${d.hospital}</div>53 <div class="mt">擅长：${d.good}</div>54 <div class="rt">⭐ ${d.rating} · 已服务 ${d.consults} 人 · 图文 ¥${d.price} 起</div>55 </div>56 <button class="btn sm" onclick="event.stopPropagation();go('chat.html?id=${d.id}')">问诊</button>57 </div>`58 ).join('') : `<div class="empty">该科室暂无可约医生</div>`;59 }6061 document.getElementById('deptChips').onclick = e=>{62 const c = e.target.closest('.chip'); if(!c) return;63 curDept = c.dataset.d;64 $all('.chip', document.getElementById('deptChips')).forEach(x=>x.classList.toggle('on', x===c));65 render();66 };67 document.getElementById('modeChips').onclick = e=>{68 const c = e.target.closest('.chip'); if(!c) return;69 curMode = c.dataset.m;70 $all('.chip', document.getElementById('modeChips')).forEach(x=>x.classList.toggle('on', x===c));71 const m = CONSULT_TYPES.find(x=>x.id===curMode);72 document.getElementById('modeInfo').textContent = m ? `${m.name}：${m.desc}` : '图文免费 · 语音+10 · 视频+20';73 toast(m ? `已选 ${m.name}` : '已显示全部方式');74 };7576 render();77 renderTab('问诊');78 </script>79</body>80</html>81