chat.html · 约 4419 字符
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" onclick="back()">‹ 返回</div>12 <h1 id="docName">图文问诊</h1>13 <div class="sub" id="docMeta"></div>14 </div>1516 <div class="card tight">17 <div class="row">18 <div class="avatar" id="dAvatar"></div>19 <div style="flex:1">20 <div class="nm" id="dTitle"></div>21 <div class="mt" id="dGood"></div>22 <div class="rt" id="dStat"></div>23 </div>24 <button class="btn sm" onclick="toVideo()">📹 视频</button>25 </div>26 </div>2728 <div class="notice"><span class="ic">🔒</span> 诊疗全程加密留痕，电子处方经药师审核后生效，仅供演示。</div>2930 <div class="card">31 <div style="font-weight:700;margin-bottom:8px">⚡ 快捷补充信息</div>32 <div id="quickTags" class="row" style="flex-wrap:wrap;gap:8px"></div>33 </div>3435 <div class="card">36 <div style="font-weight:700;margin-bottom:8px">💬 问诊记录</div>37 <div class="chat-area" id="chat"></div>38 <div class="row" style="margin-top:10px;gap:8px">39 <input id="msgInput" placeholder="输入您的问题…" style="flex:1;border:1px solid var(--border);border-radius:999px;padding:10px 14px;font-size:14px;font-family:inherit">40 <button class="btn sm" onclick="sendMsg()">发送</button>41 </div>42 <div class="row" style="margin-top:10px;gap:8px">43 <button class="btn ghost sm" onclick="uploadImg()">🖼️ 上传化验单</button>44 <button class="btn ghost sm" onclick="toRx()">💊 查看电子处方</button>45 </div>46 </div>4748 <div class="sticky-bar">49 <button class="btn full" onclick="finish()">结束问诊并评价</button>50 </div>5152 <div class="tabbar" id="tabbar"></div>53 <script src="data.js"></script><script src="app.js"></script>54 <script>55 const id = new URLSearchParams(location.search).get('id') || 'd1';56 const d = docById(id) || DOCTORS[0];57 document.getElementById('docName').textContent = d.name + ' · 图文问诊';58 document.getElementById('docMeta').textContent = d.dept + ' · ' + d.hospital;59 document.getElementById('dAvatar').textContent = d.name[0];60 document.getElementById('dTitle').textContent = d.name + ' ' + d.title;61 document.getElementById('dGood').textContent = '擅长：' + d.good;62 document.getElementById('dStat').textContent = '⭐ ' + d.rating + ' · 已服务 ' + d.consults + ' 人 · ' + (d.online?'在线':'离线');6364 document.getElementById('quickTags').innerHTML = ['症状持续3天','已服药无好转','有化验单','备孕/孕期','过敏体质']65 .map(t=>`<span class="chip" onclick="fillTag('${t}')">${t}</span>`).join('');6667 function renderChat(){68 document.getElementById('chat').innerHTML = CHAT.map(m=>69 `<div class="msg ${m.me?'me':''}"><div class="avatar sm" style="background:${m.me?'var(--brand)':'linear-gradient(135deg,var(--accent),var(--brand))'}">${m.me?'我':d.name[0]}</div>70 <div><div class="who">${m.who}</div><div class="bubble">${esc(m.text)}</div></div></div>`71 ).join('');72 document.getElementById('chat').scrollTop = 1e6;73 }74 renderChat();7576 function fillTag(t){ document.getElementById('msgInput').value = t; }77 function sendMsg(){78 const v = document.getElementById('msgInput').value.trim();79 if(!v){ toast('请输入内容'); return; }80 CHAT.push({me:true, who:'我', text:v});81 renderChat();82 document.getElementById('msgInput').value='';83 setTimeout(()=>{84 CHAT.push({me:false, who:d.name+' '+d.title, text:'收到，已为您记录。如需进一步评估，建议您补充近期检查报告或预约视频问诊。'});85 renderChat();86 }, 700);87 }88 function uploadImg(){ toast('演示：已选择 化验单.jpg'); }89 function toVideo(){ toast('已发起视频问诊（演示）'); }90 function toRx(){ go('prescription.html'); }91 function finish(){92 const r = confirm('本次问诊已结束，是否进行评价？');93 if(r){ toast('感谢评价，已记录 ⭐⭐⭐⭐⭐'); }94 setTimeout(()=>go('records.html'), 900);95 }96 renderTab('问诊');97 </script>98</body>99</html>100