report-confirm.vue 54 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747
  1. <template>
  2. <view class="confirm-container">
  3. <view class="nav-bar">
  4. <text class="nav-back" @click="goBack">‹ 返回</text>
  5. <text class="nav-title">确认健康报告</text>
  6. <view class="nav-placeholder"></view>
  7. </view>
  8. <view class="tip-banner">
  9. <text class="tip-icon">✅</text>
  10. <text class="tip-text">请核对以下解析内容,可修改后确认入库</text>
  11. </view>
  12. <!-- 解析中状态(仅 draftId 模式,从上传页跳转后自动解析) -->
  13. <view class="parsing-banner" v-if="parsing">
  14. <text class="parsing-icon">⏳</text>
  15. <text class="parsing-text">正在解析报告,请稍候...</text>
  16. </view>
  17. <!-- 匹配可信度 -->
  18. <view class="confidence-card" v-if="confidenceLevelClass">
  19. <view class="confidence-header">
  20. <text class="confidence-label">匹配可信度</text>
  21. <text class="confidence-badge" :class="'badge-' + confidenceLevelClass">{{ confidenceLevelText }}</text>
  22. </view>
  23. <view class="confidence-bar-track">
  24. <view class="confidence-bar-fill" :class="'fill-' + confidenceLevelClass" :style="'width:' + confidencePercent + '%'"></view>
  25. </view>
  26. <text class="confidence-desc">{{ confidenceDesc }}</text>
  27. </view>
  28. <view class="form-section">
  29. <!-- 基本信息 -->
  30. <view class="card">
  31. <view class="card-title">基本信息</view>
  32. <view class="field-row member-select-row" @click="toggleMemberPanel">
  33. <text class="field-label">被检测人</text>
  34. <text class="field-value" :class="{ 'binding-required': needBind && !selectedMemberObj }">{{ memberDisplayText }}</text>
  35. <text class="member-select-arrow">{{ selectedMemberObj ? '修改 ›' : '选择 ›' }}</text>
  36. </view>
  37. <!-- 被检测人选择面板(内联展开) -->
  38. <view class="member-panel" v-if="showMemberPanel">
  39. <!-- 候选匹配列表(按置信度排序) -->
  40. <view class="candidate-section" v-if="candidates.length > 0">
  41. <text class="candidate-section-hint">以下成员与报告信息匹配,请选择:</text>
  42. <view
  43. class="candidate-item"
  44. v-for="(cand, idx) in candidates"
  45. :key="idx"
  46. :class="{ 'candidate-selected': selectedMemberId === (cand.id || cand.userId) }"
  47. @click="selectAndClose(cand)"
  48. >
  49. <view class="candidate-left">
  50. <text class="candidate-avatar">{{ (cand.nickname || cand.name || '?').substring(0, 1) }}</text>
  51. <view class="candidate-info">
  52. <text class="candidate-name">{{ cand.nickname || cand.name || '未知' }}</text>
  53. <text class="candidate-detail" v-if="cand.gender || cand.age">{{ genderText(cand.gender) }}{{ cand.age ? ' · ' + cand.age + '岁' : '' }}</text>
  54. <text class="candidate-fields" v-if="cand.matchFields">匹配: {{ cand.matchFields }}</text>
  55. </view>
  56. </view>
  57. <view class="candidate-right">
  58. <view class="score-bar-track">
  59. <view class="score-bar-fill" :style="'width:' + (cand.similarityScore * 100) + '%'"></view>
  60. </view>
  61. <text class="score-text">{{ Math.round(cand.similarityScore * 100) }}%</text>
  62. </view>
  63. </view>
  64. </view>
  65. <!-- 全量家庭成员列表(后备) -->
  66. <view class="member-list" v-if="familyMembers.length > 0 && (candidates.length === 0 || !showCandidatesOnly)">
  67. <view
  68. class="member-item"
  69. v-for="(member, mIdx) in familyMembers"
  70. :key="mIdx"
  71. :class="{ 'member-selected': selectedMemberId === (member.userId || member.id) }"
  72. @click="selectAndClose(member)"
  73. >
  74. <text class="member-avatar">{{ (member.nickname || '?').substring(0, 1) }}</text>
  75. <text class="member-name">{{ member.nickname || '未知' }}</text>
  76. </view>
  77. </view>
  78. <!-- 新建成员入口 -->
  79. <view class="create-member-entry" @click="toggleAutoCreate">
  80. <text class="create-member-icon">+</text>
  81. <text class="create-member-text">{{ showAutoCreateForm ? '收起新建表单' : '不在列表中?新建家庭成员' }}</text>
  82. </view>
  83. <!-- 新建成员表单(面板内嵌) -->
  84. <view class="auto-create-inline" v-if="showAutoCreateForm">
  85. <view class="form-item">
  86. <text class="form-item-label">姓名</text>
  87. <input class="form-item-input" v-model="newMember.name" placeholder="请输入姓名" />
  88. </view>
  89. <view class="form-item">
  90. <text class="form-item-label">性别</text>
  91. <view class="gender-selector">
  92. <text class="gender-option" :class="{ 'gender-selected': newMember.gender === 'male' }" @click="newMember.gender = 'male'">男</text>
  93. <text class="gender-option" :class="{ 'gender-selected': newMember.gender === 'female' }" @click="newMember.gender = 'female'">女</text>
  94. </view>
  95. </view>
  96. <view class="form-item">
  97. <text class="form-item-label">年龄</text>
  98. <input class="form-item-input" type="number" v-model="newMember.age" placeholder="请输入年龄" />
  99. </view>
  100. <view class="btn-create-submit" :class="{ 'btn-disabled': creatingMember }" @click="doAutoCreate">
  101. <text v-if="creatingMember">创建中...</text>
  102. <text v-else>确认创建</text>
  103. </view>
  104. </view>
  105. </view>
  106. <view class="field-row" v-if="extractedGender">
  107. <text class="field-label">性别</text>
  108. <text class="field-value">{{ extractedGender === 'male' ? '男' : extractedGender === 'female' ? '女' : extractedGender }}</text>
  109. </view>
  110. <view class="field-row" v-if="extractedAge">
  111. <text class="field-label">年龄</text>
  112. <text class="field-value">{{ extractedAge }}</text>
  113. </view>
  114. <view class="field-row" v-if="payload.summary && payload.type !== 'tongue'">
  115. <text class="field-label">综合评分</text>
  116. <input class="field-input" type="number" v-model="payload.summary.overallScore" />
  117. </view>
  118. <view class="field-row" v-if="payload.summary && payload.type !== 'tongue'">
  119. <text class="field-label">报告日期</text>
  120. <input class="field-input" type="text" v-model="payload.summary.reportDate" placeholder="如: 2025-06-15" />
  121. </view>
  122. <view class="field-row" v-if="payload.summary && payload.type !== 'tongue'">
  123. <text class="field-label">报告摘要</text>
  124. <textarea class="field-textarea" v-model="payload.summary.summary" maxlength="500" />
  125. </view>
  126. </view>
  127. <!-- 舌诊指标(只读展示) -->
  128. <view class="card" v-if="payload.type === 'tongue' && payload.indicators && payload.indicators.length">
  129. <view class="card-title">舌象指标</view>
  130. <view class="tongue-indicator-grid">
  131. <view class="tongue-ind-item" v-for="(ind, idx) in payload.indicators" :key="idx">
  132. <text class="tongue-ind-label">{{ indicatorLabel(ind.code) }}</text>
  133. <text class="tongue-ind-value">{{ ind.value }}</text>
  134. </view>
  135. </view>
  136. <view class="tongue-summary" v-if="payload.summary && payload.summary.overallAssessment">
  137. <text class="tongue-summary-title">综合评估</text>
  138. <text class="tongue-summary-text">{{ payload.summary.overallAssessment }}</text>
  139. </view>
  140. </view>
  141. <!-- 健康指标(舌诊时隐藏,使用上方舌象指标卡片) -->
  142. <view class="card" v-if="payload.type !== 'tongue' && payload.indicators && payload.indicators.length">
  143. <view class="card-title">
  144. <text>健康指标</text>
  145. <text class="title-count">共 {{ payload.indicators.length }} 项</text>
  146. <text class="title-abnormal" v-if="totalAbnormalCount > 0">,{{ totalAbnormalCount }} 项异常</text>
  147. <view class="card-title-actions">
  148. <text class="expand-all-btn" @click="toggleAllGroups(true)">全部展开</text>
  149. <text class="expand-all-btn" @click="toggleAllGroups(false)">全部折叠</text>
  150. </view>
  151. </view>
  152. <!-- 按指标类型分组折叠 -->
  153. <view class="indicator-group" v-for="(group, gIdx) in indicatorGroups" :key="gIdx">
  154. <view class="indicator-group-header" @click="toggleGroup(gIdx)">
  155. <view class="indicator-group-header-left">
  156. <text class="indicator-group-arrow" :class="{ 'arrow-open': groupExpandList[gIdx] }">›</text>
  157. <text class="indicator-group-name">{{ group.category }}</text>
  158. </view>
  159. <view class="indicator-group-header-right">
  160. <text class="indicator-group-abnormal" v-if="group.abnormalCount > 0">{{ group.abnormalCount }} 项异常</text>
  161. <text class="indicator-group-count">{{ group.items.length }} 项</text>
  162. </view>
  163. </view>
  164. <view class="indicator-group-body" v-if="groupExpandList[gIdx]">
  165. <view class="indicator-item" v-for="(ind, idx) in group.items" :key="idx">
  166. <view class="ind-header">
  167. <text class="ind-help-btn" @click.stop="showHelp(ind)">?</text>
  168. <input class="ind-name" :class="'ind-name-' + _cssClass(ind.status)" v-model="ind.indicatorName" />
  169. <input class="ind-value" :class="'ind-value-' + _cssClass(ind.status)" v-model="ind.indicatorValue" />
  170. </view>
  171. <view class="ind-detail" v-if="ind.unit || ind.refRange">
  172. <text class="ind-ref" v-if="ind.refRange">参考: {{ ind.refRange }}</text>
  173. <text class="ind-unit" v-if="ind.unit">{{ ind.unit }}</text>
  174. </view>
  175. <view class="ind-symptoms" v-if="ind.symptoms">
  176. <text class="ind-symptom-label">症状:</text>
  177. <input class="ind-symptom-input" v-model="ind.symptoms" />
  178. </view>
  179. </view>
  180. </view>
  181. </view>
  182. </view>
  183. <!-- 指标帮助弹窗 -->
  184. <view class="help-overlay" v-if="showHelpPopup" @click="closeHelp">
  185. <view class="help-popup" @click.stop>
  186. <view class="help-popup-header">
  187. <text class="help-popup-title">{{ helpData.name }}</text>
  188. <text class="help-popup-close" @click="closeHelp">✕</text>
  189. </view>
  190. <view class="help-popup-body">
  191. <view class="help-row">
  192. <text class="help-label">当前值</text>
  193. <text class="help-value">{{ helpData.value }}</text>
  194. </view>
  195. <view class="help-row" v-if="helpData.refRange">
  196. <text class="help-label">参考范围</text>
  197. <text class="help-value">{{ helpData.refRange }}</text>
  198. </view>
  199. <view class="help-row">
  200. <text class="help-label">状态</text>
  201. <text class="help-value" :class="'help-status-' + _cssClass(helpData.status)">{{ statusText(helpData.status) }}</text>
  202. </view>
  203. <view class="help-desc" v-if="helpData.description">
  204. <text class="help-desc-label">说明</text>
  205. <text class="help-desc-text">{{ helpData.description }}</text>
  206. </view>
  207. <view class="help-desc" v-else>
  208. <text class="help-desc-label">说明</text>
  209. <text class="help-desc-text">{{ getDefaultDescription(helpData.name, helpData.status) }}</text>
  210. </view>
  211. </view>
  212. </view>
  213. </view>
  214. <!-- 肠道菌群 -->
  215. <view class="card" v-if="payload.gutFlora && payload.gutFlora.length">
  216. <view class="card-title">肠道菌群 ({{ payload.gutFlora.length }})</view>
  217. <view class="flora-item" v-for="(flora, idx) in payload.gutFlora" :key="idx">
  218. <input class="flora-name" v-model="payload.gutFlora[idx].name" />
  219. <input class="flora-abundance" type="digit" v-model="payload.gutFlora[idx].abundance" />
  220. <view class="status-tag" :class="'status-' + _cssClass(flora.status)">
  221. {{ statusText(flora.status) }}
  222. </view>
  223. </view>
  224. </view>
  225. <!-- 疾病风险 -->
  226. <view class="card" v-if="payload.diseaseRisks && payload.diseaseRisks.length">
  227. <view class="card-title">疾病风险 ({{ payload.diseaseRisks.length }})</view>
  228. <view class="risk-item" v-for="(risk, idx) in payload.diseaseRisks" :key="idx">
  229. <input class="risk-name" v-model="payload.diseaseRisks[idx].diseaseName" />
  230. <view class="risk-level" :class="'risk-' + (risk.riskLevel || 'low')">
  231. {{ riskLevelText(risk.riskLevel) }}
  232. </view>
  233. </view>
  234. </view>
  235. <!-- 饮食推荐 -->
  236. <view class="card" v-if="payload.foods && payload.foods.length">
  237. <view class="card-title">饮食推荐 ({{ payload.foods.length }})</view>
  238. <view class="food-item" v-for="(food, idx) in payload.foods" :key="idx">
  239. <input class="food-name" v-model="payload.foods[idx].foodName" />
  240. <input class="food-category" v-model="payload.foods[idx].category" />
  241. </view>
  242. </view>
  243. <!-- 益生菌种 -->
  244. <view class="card" v-if="payload.probioticSpecies && payload.probioticSpecies.length">
  245. <view class="card-title">益生菌种 ({{ payload.probioticSpecies.length }})</view>
  246. <view class="flora-item" v-for="(flora, idx) in payload.probioticSpecies" :key="idx">
  247. <input class="flora-name" v-model="payload.probioticSpecies[idx].name" />
  248. <input class="flora-abundance" type="digit" v-model="payload.probioticSpecies[idx].abundance" />
  249. <view class="status-tag" :class="'status-' + _cssClass(flora.status)">
  250. {{ statusText(flora.status) }}
  251. </view>
  252. </view>
  253. </view>
  254. <!-- Taxonomy 分类(纲/目/科/属/种) -->
  255. <view class="card" v-if="hasTaxonomyData()">
  256. <view class="card-title">菌群分类组成 ({{ taxonomyTotalCount }})</view>
  257. <view class="taxonomy-group" v-if="payload.taxonomyClass && payload.taxonomyClass.length">
  258. <text class="taxonomy-group-label">菌纲 (Class)</text>
  259. <view class="flora-item" v-for="(flora, idx) in payload.taxonomyClass" :key="getTaxonomyKey('c', idx)">
  260. <input class="flora-name" v-model="payload.taxonomyClass[idx].name" />
  261. <input class="flora-abundance" type="digit" v-model="payload.taxonomyClass[idx].abundance" />
  262. </view>
  263. </view>
  264. <view class="taxonomy-group" v-if="payload.taxonomyOrder && payload.taxonomyOrder.length">
  265. <text class="taxonomy-group-label">菌目 (Order)</text>
  266. <view class="flora-item" v-for="(flora, idx) in payload.taxonomyOrder" :key="getTaxonomyKey('o', idx)">
  267. <input class="flora-name" v-model="payload.taxonomyOrder[idx].name" />
  268. <input class="flora-abundance" type="digit" v-model="payload.taxonomyOrder[idx].abundance" />
  269. </view>
  270. </view>
  271. <view class="taxonomy-group" v-if="payload.taxonomyFamily && payload.taxonomyFamily.length">
  272. <text class="taxonomy-group-label">菌科 (Family)</text>
  273. <view class="flora-item" v-for="(flora, idx) in payload.taxonomyFamily" :key="getTaxonomyKey('f', idx)">
  274. <input class="flora-name" v-model="payload.taxonomyFamily[idx].name" />
  275. <input class="flora-abundance" type="digit" v-model="payload.taxonomyFamily[idx].abundance" />
  276. </view>
  277. </view>
  278. <view class="taxonomy-group" v-if="payload.taxonomyGenus && payload.taxonomyGenus.length">
  279. <text class="taxonomy-group-label">菌属 (Genus)</text>
  280. <view class="flora-item" v-for="(flora, idx) in payload.taxonomyGenus" :key="getTaxonomyKey('g', idx)">
  281. <input class="flora-name" v-model="payload.taxonomyGenus[idx].name" />
  282. <input class="flora-abundance" type="digit" v-model="payload.taxonomyGenus[idx].abundance" />
  283. </view>
  284. </view>
  285. <view class="taxonomy-group" v-if="payload.taxonomySpecies && payload.taxonomySpecies.length">
  286. <text class="taxonomy-group-label">菌种 (Species)</text>
  287. <view class="flora-item" v-for="(flora, idx) in payload.taxonomySpecies" :key="getTaxonomyKey('s', idx)">
  288. <input class="flora-name" v-model="payload.taxonomySpecies[idx].name" />
  289. <input class="flora-abundance" type="digit" v-model="payload.taxonomySpecies[idx].abundance" />
  290. </view>
  291. </view>
  292. </view>
  293. <!-- 病原菌 -->
  294. <view class="card" v-if="hasPathogenData()">
  295. <view class="card-title">病原菌 ({{ pathogenTotalCount }})</view>
  296. <view class="pathogen-group" v-if="payload.pathogenGenus && payload.pathogenGenus.length">
  297. <text class="pathogen-group-label">病原菌属</text>
  298. <view class="flora-item" v-for="(flora, idx) in payload.pathogenGenus" :key="getTaxonomyKey('pg', idx)">
  299. <input class="flora-name" v-model="payload.pathogenGenus[idx].name" />
  300. <input class="flora-abundance" type="digit" v-model="payload.pathogenGenus[idx].abundance" />
  301. <view class="status-tag" :class="'status-' + _cssClass(flora.status)">
  302. {{ statusText(flora.status) }}
  303. </view>
  304. </view>
  305. </view>
  306. <view class="pathogen-group" v-if="payload.pathogenDetection && payload.pathogenDetection.length">
  307. <text class="pathogen-group-label">病原菌检出</text>
  308. <view class="flora-item" v-for="(flora, idx) in payload.pathogenDetection" :key="getTaxonomyKey('pd', idx)">
  309. <input class="flora-name" v-model="payload.pathogenDetection[idx].name" />
  310. <input class="flora-abundance" type="digit" v-model="payload.pathogenDetection[idx].abundance" />
  311. <view class="status-tag" :class="'status-' + _cssClass(flora.status)">
  312. {{ statusText(flora.status) }}
  313. </view>
  314. </view>
  315. </view>
  316. </view>
  317. <!-- 操作按钮 -->
  318. <view class="action-row">
  319. <view class="btn-discard" @click="doDiscard">
  320. <text>放弃</text>
  321. </view>
  322. <view class="btn-confirm" :class="{ 'btn-disabled': !canConfirm }" @click="doConfirm">
  323. <text v-if="confirming">确认中...</text>
  324. <text v-else>确认入库</text>
  325. </view>
  326. </view>
  327. </view>
  328. <view class="bottom-spacer"></view>
  329. </view>
  330. </template>
  331. <script>
  332. import { confirmReportPreview, discardReportDraft, confirmTongue, discardTongue, parseReportDraft } from '../../utils/api.js'
  333. import { addFamilyMember, getFamilyMembers } from '../../utils/api.js'
  334. export default {
  335. data() {
  336. return {
  337. draftId: null,
  338. memberId: null,
  339. familyId: null,
  340. payload: {
  341. summary: {},
  342. indicators: [],
  343. gutFlora: [],
  344. probioticSpecies: [],
  345. taxonomyClass: [],
  346. taxonomyOrder: [],
  347. taxonomyFamily: [],
  348. taxonomyGenus: [],
  349. taxonomySpecies: [],
  350. pathogenGenus: [],
  351. pathogenDetection: [],
  352. foods: [],
  353. diseaseRisks: []
  354. },
  355. extractedName: '',
  356. extractedGender: '',
  357. extractedAge: '',
  358. matchedMemberId: null,
  359. needBind: false,
  360. selectedMemberId: null,
  361. familyMembers: [],
  362. confirming: false,
  363. // 仅 draftId 模式(从上传页跳转)下正在解析
  364. parsing: false,
  365. // Phase 2: 匹配可信度与候选
  366. matchConfidence: null,
  367. matchLabel: '',
  368. candidates: [],
  369. showCandidatesOnly: false,
  370. // 被检测人选择面板
  371. showMemberPanel: false,
  372. selectedMemberObj: null,
  373. // 新建成员
  374. showAutoCreateForm: false,
  375. newMember: {
  376. name: '',
  377. gender: '',
  378. age: ''
  379. },
  380. creatingMember: false,
  381. createdMemberId: null,
  382. // 指标分组折叠状态(按分组下标,默认全部折叠)
  383. groupExpandList: [],
  384. // 指标帮助弹窗
  385. showHelpPopup: false,
  386. helpData: { name: '', value: '', refRange: '', status: '', description: '' }
  387. }
  388. },
  389. computed: {
  390. canConfirm() {
  391. if (this.parsing) return false
  392. if (this.needBind && !this.selectedMemberId && !this.createdMemberId) return false
  393. return this.draftId && !this.confirming
  394. },
  395. confidenceLevelClass() {
  396. if (!this.matchConfidence && this.matchConfidence !== 0) return ''
  397. var val = parseFloat(this.matchConfidence)
  398. if (this.matchLabel === 'exact' || val >= 0.8) return 'high'
  399. if (this.matchLabel === 'fuzzy' || val >= 0.5) return 'medium'
  400. if (this.matchLabel === 'profile_match' || val >= 0.2) return 'low'
  401. return 'none'
  402. },
  403. confidenceLevelText() {
  404. var map = { high: '高', medium: '中', low: '低', none: '未匹配' }
  405. return map[this.confidenceLevelClass] || ''
  406. },
  407. confidencePercent() {
  408. if (!this.matchConfidence && this.matchConfidence !== 0) return 0
  409. return Math.round(parseFloat(this.matchConfidence) * 100)
  410. },
  411. confidenceDesc() {
  412. if (this.matchLabel === 'exact') return '根据姓名、性别、年龄自动精确匹配到家庭成员'
  413. if (this.matchLabel === 'fuzzy') return '部分字段匹配,请确认是否为以下家庭成员'
  414. if (this.matchLabel === 'profile_match') return '根据档案信息推测匹配,请手动确认'
  415. if (this.matchLabel === 'no_match') return '无法匹配到现有家庭成员,可新建成员'
  416. return ''
  417. },
  418. memberDisplayText() {
  419. var m = this.selectedMemberObj
  420. if (m && (m.nickname || m.name)) return m.nickname || m.name
  421. if (this.needBind) return '需手动绑定'
  422. return this.extractedName || '未识别'
  423. },
  424. // 指标按类型(category)分组,保持解析顺序,统计需处理(非正常)数量
  425. indicatorGroups() {
  426. var groups = []
  427. var orderMap = {}
  428. var list = (this.payload && this.payload.indicators) || []
  429. for (var i = 0; i < list.length; i++) {
  430. var ind = list[i]
  431. var cat = ind.category || '其他指标'
  432. if (!orderMap[cat]) {
  433. orderMap[cat] = groups.length
  434. groups.push({ category: cat, items: [], needCount: 0, abnormalCount: 0 })
  435. }
  436. var group = groups[orderMap[cat]]
  437. group.items.push(ind)
  438. if (this.isAbnormalStatus(ind.status)) {
  439. group.needCount++
  440. group.abnormalCount++
  441. }
  442. }
  443. return groups
  444. },
  445. totalAbnormalCount() {
  446. var list = (this.payload && this.payload.indicators) || []
  447. var count = 0
  448. for (var i = 0; i < list.length; i++) {
  449. if (this.isAbnormalStatus(list[i].status)) count++
  450. }
  451. return count
  452. },
  453. taxonomyTotalCount() {
  454. var total = 0
  455. total += (this.payload.taxonomyClass || []).length
  456. total += (this.payload.taxonomyOrder || []).length
  457. total += (this.payload.taxonomyFamily || []).length
  458. total += (this.payload.taxonomyGenus || []).length
  459. total += (this.payload.taxonomySpecies || []).length
  460. return total
  461. },
  462. pathogenTotalCount() {
  463. return (this.payload.pathogenGenus || []).length +
  464. (this.payload.pathogenDetection || []).length
  465. }
  466. },
  467. onLoad: function(options) {
  468. this.draftId = options.draftId ? parseInt(options.draftId) : null
  469. this.memberId = options.memberId ? parseInt(options.memberId) : null
  470. this.familyId = options.familyId ? parseInt(options.familyId) : null
  471. // 仅 draftId 模式(从上传页自动跳转):无 payload 参数 → 调用后端按草稿解析并自动填充
  472. if (this.draftId && !options.payload) {
  473. this.parseByDraftId()
  474. return
  475. }
  476. var payloadStr = decodeURIComponent(options.payload || '{}')
  477. try {
  478. var parsed = typeof payloadStr === 'string' ? JSON.parse(payloadStr) : payloadStr
  479. this.payload = Object.assign({
  480. summary: {},
  481. indicators: [],
  482. gutFlora: [],
  483. probioticSpecies: [],
  484. taxonomyClass: [],
  485. taxonomyOrder: [],
  486. taxonomyFamily: [],
  487. taxonomyGenus: [],
  488. taxonomySpecies: [],
  489. pathogenGenus: [],
  490. pathogenDetection: [],
  491. foods: [],
  492. diseaseRisks: []
  493. }, parsed)
  494. } catch (e) {
  495. console.log('解析payload失败', e)
  496. }
  497. this.extractedName = options.extractedName || ''
  498. this.extractedGender = options.extractedGender || ''
  499. this.extractedAge = options.extractedAge || ''
  500. this.matchedMemberId = options.matchedMemberId ? parseInt(options.matchedMemberId) : null
  501. // 从解析结果填充报告日期
  502. var extractedReportDate = options.extractedReportDate || ''
  503. if (extractedReportDate && this.payload.summary) {
  504. this.payload.summary.reportDate = extractedReportDate
  505. }
  506. this.needBind = options.needBind === 'true' || options.needBind === '1'
  507. this.matchConfidence = options.matchConfidence ? parseFloat(options.matchConfidence) : null
  508. this.matchLabel = decodeURIComponent(options.matchLabel || '')
  509. // 解析候选成员列表
  510. var candidatesStr = decodeURIComponent(options.candidates || '')
  511. if (candidatesStr) {
  512. try {
  513. this.candidates = JSON.parse(candidatesStr)
  514. } catch (e) {
  515. this.candidates = []
  516. }
  517. }
  518. // 有候选时优先展示候选列表
  519. if (this.candidates.length > 0) {
  520. this.showCandidatesOnly = true
  521. }
  522. // 始终加载家庭成员(面板始终可点击,needBind=false 也允许改选)
  523. this.loadFamilyMembers()
  524. if (this.needBind) {
  525. // 高置信度且已匹配 → 直接选中
  526. if (this.matchedMemberId && this.matchConfidence >= 0.8) {
  527. this.selectedMemberId = this.matchedMemberId
  528. }
  529. }
  530. },
  531. methods: {
  532. // 仅 draftId 模式:调用后端按草稿解析,成功后自动填充页面
  533. parseByDraftId() {
  534. var self = this
  535. self.parsing = true
  536. parseReportDraft(self.draftId).then(function(res) {
  537. var detail = res && res.data
  538. if (!detail) {
  539. self.parsing = false
  540. uni.showToast({ title: (res && res.message) || '解析失败,请重试', icon: 'none' })
  541. return
  542. }
  543. self.applyParseResult(detail)
  544. }).catch(function(err) {
  545. self.parsing = false
  546. var msg = (err && err.message) || '解析失败,请重试'
  547. uni.showToast({ title: msg, icon: 'none' })
  548. })
  549. },
  550. // 将后端解析结果应用到页面
  551. applyParseResult(detail) {
  552. this.parsing = false
  553. if (detail.payload) {
  554. this.payload = Object.assign({
  555. summary: {},
  556. indicators: [],
  557. gutFlora: [],
  558. probioticSpecies: [],
  559. taxonomyClass: [],
  560. taxonomyOrder: [],
  561. taxonomyFamily: [],
  562. taxonomyGenus: [],
  563. taxonomySpecies: [],
  564. pathogenGenus: [],
  565. pathogenDetection: [],
  566. foods: [],
  567. diseaseRisks: []
  568. }, detail.payload)
  569. }
  570. this.extractedName = detail.extractedName || ''
  571. this.extractedGender = detail.extractedGender || ''
  572. this.extractedAge = detail.extractedAge || ''
  573. this.matchedMemberId = detail.matchedMemberId ? parseInt(detail.matchedMemberId) : null
  574. this.needBind = !!detail.needBind
  575. this.matchConfidence = detail.confidence !== undefined && detail.confidence !== null ? parseFloat(detail.confidence) : null
  576. this.matchLabel = detail.matchLabel || ''
  577. this.candidates = detail.candidates || []
  578. this.showCandidatesOnly = this.candidates.length > 0
  579. // 始终加载家庭成员
  580. this.loadFamilyMembers()
  581. // 高置信度且已匹配 → 直接选中
  582. if (this.needBind && this.matchedMemberId && this.matchConfidence >= 0.8) {
  583. this.selectedMemberId = this.matchedMemberId
  584. }
  585. },
  586. loadFamilyMembers() {
  587. var self = this
  588. // 从后端获取真实家庭成员(家长 + 孩子),storage 中并无该数据
  589. getFamilyMembers().then(function(res) {
  590. var data = (res && res.data) || {}
  591. var parents = (data.parents || []).map(function(p) {
  592. return { id: p.id, nickname: p.realName || p.nickname, gender: p.gender, role: 'parent' }
  593. })
  594. var children = (data.children || []).map(function(c) {
  595. return { id: c.id, nickname: c.nickname, gender: c.gender, age: c.age, role: 'child' }
  596. })
  597. self.familyMembers = parents.concat(children)
  598. self.syncSelectedMemberObj()
  599. }).catch(function(e) {
  600. console.log('加载家庭成员失败', e)
  601. self.familyMembers = []
  602. })
  603. },
  604. toggleMemberPanel() {
  605. this.showMemberPanel = !this.showMemberPanel
  606. if (!this.showMemberPanel) {
  607. this.showAutoCreateForm = false
  608. }
  609. },
  610. selectAndClose(member) {
  611. var memberId = member.id || member.userId
  612. this.selectedMemberId = memberId
  613. this.selectedMemberObj = member
  614. this.extractedName = member.nickname || member.name || this.extractedName
  615. this.extractedGender = member.gender || this.extractedGender
  616. this.extractedAge = member.age || this.extractedAge
  617. this.showAutoCreateForm = false
  618. this.showMemberPanel = false
  619. },
  620. syncSelectedMemberObj() {
  621. if (!this.selectedMemberId) {
  622. this.selectedMemberObj = null
  623. return
  624. }
  625. var all = this.familyMembers.concat(this.candidates)
  626. for (var i = 0; i < all.length; i++) {
  627. var m = all[i]
  628. if ((m.id || m.userId) === this.selectedMemberId) {
  629. this.selectedMemberObj = m
  630. return
  631. }
  632. }
  633. },
  634. // === Phase 2: 候选匹配与新建成员 ===
  635. genderText(gender) {
  636. if (gender === 'male') return '男'
  637. if (gender === 'female') return '女'
  638. return gender || ''
  639. },
  640. toggleAutoCreate() {
  641. this.showAutoCreateForm = !this.showAutoCreateForm
  642. if (this.showAutoCreateForm) {
  643. this.newMember.name = this.extractedName || ''
  644. this.newMember.gender = this.extractedGender || ''
  645. this.newMember.age = this.extractedAge || ''
  646. this.selectedMemberId = null
  647. }
  648. },
  649. doAutoCreate() {
  650. var self = this
  651. if (!this.newMember.name) {
  652. uni.showToast({ title: '请输入成员姓名', icon: 'none' })
  653. return
  654. }
  655. self.creatingMember = true
  656. uni.showLoading({ title: '创建成员...' })
  657. addFamilyMember({
  658. nickname: self.newMember.name,
  659. gender: self.newMember.gender || '',
  660. age: self.newMember.age ? parseInt(self.newMember.age) : null
  661. }).then(function(res) {
  662. uni.hideLoading()
  663. if (res.code === 200) {
  664. var memberId = res.data && (res.data.userId || res.data.id)
  665. if (memberId) {
  666. self.createdMemberId = memberId
  667. self.selectedMemberId = memberId
  668. self.selectedMemberObj = {
  669. id: memberId,
  670. nickname: self.newMember.name,
  671. gender: self.newMember.gender,
  672. age: self.newMember.age
  673. }
  674. self.extractedName = self.newMember.name
  675. self.extractedGender = self.newMember.gender
  676. self.extractedAge = self.newMember.age
  677. self.showAutoCreateForm = false
  678. self.showMemberPanel = false
  679. uni.showToast({ title: '创建成功', icon: 'success' })
  680. }
  681. } else {
  682. uni.showToast({ title: res.message || '创建失败', icon: 'none' })
  683. }
  684. }).catch(function(e) {
  685. uni.hideLoading()
  686. uni.showToast({ title: '创建失败', icon: 'none' })
  687. }).finally(function() {
  688. self.creatingMember = false
  689. })
  690. },
  691. toggleGroup(gIdx) {
  692. this.$set(this.groupExpandList, gIdx, !this.groupExpandList[gIdx])
  693. },
  694. toggleAllGroups(expand) {
  695. var arr = []
  696. for (var i = 0; i < this.indicatorGroups.length; i++) {
  697. arr.push(expand)
  698. }
  699. this.groupExpandList = arr
  700. },
  701. _cssClass(status) {
  702. var map = { 'high': 'high', 'low': 'low', 'abnormal': 'abnormal', 'normal': 'normal', '缺乏': 'deficient', '偏低': 'low', '不足': 'insufficient', '正常': 'normal', '注意': 'warning', '偏高': 'high', '异常': 'abnormal', '高风险': 'high-risk', '低风险': 'low-risk', '未检出': 'not-detected' }
  703. return map[status] || 'normal'
  704. },
  705. statusText(status) {
  706. if (status === 'high' || status === '偏高') return '偏高'
  707. if (status === 'low' || status === '偏低') return '偏低'
  708. if (status === 'abnormal' || status === '异常') return '异常'
  709. if (status === '缺乏') return '缺乏'
  710. if (status === '不足') return '不足'
  711. if (status === '正常') return '正常'
  712. if (status === '注意') return '注意'
  713. if (status === '高风险') return '高风险'
  714. if (status === '低风险') return '低风险'
  715. if (status === '未检出') return '未检出'
  716. return '正常'
  717. },
  718. // 与 _cssClass 保持同一白名单:仅明确异常/需关注的状态计入异常数,
  719. // 未知状态文本(解析器自由提取)一律视为正常,避免"样式正常却计入异常"的矛盾。
  720. isAbnormalStatus(status) {
  721. if (!status) return false
  722. var abnormalMap = { 'high': 1, 'low': 1, 'abnormal': 1, '偏高': 1, '偏低': 1, '异常': 1, '缺乏': 1, '不足': 1, '注意': 1, '高风险': 1 }
  723. return !!abnormalMap[String(status).trim()]
  724. },
  725. showHelp(ind) {
  726. this.helpData = {
  727. name: ind.indicatorName || ind.name || '',
  728. value: ind.indicatorValue || ind.value || '',
  729. refRange: ind.refRange || ind.normalRange || '',
  730. status: ind.status || 'normal',
  731. description: ind.description || ind.symptoms || ''
  732. }
  733. this.showHelpPopup = true
  734. },
  735. closeHelp() {
  736. this.showHelpPopup = false
  737. },
  738. getDefaultDescription(name, status) {
  739. if (!status || status === 'normal') return '该指标处于正常范围内,无需特别关注。'
  740. if (status === 'high' || status === '偏高') return '该指标偏高,建议咨询专业医生或营养师进行进一步评估。'
  741. if (status === 'low' || status === '偏低') return '该指标偏低,建议咨询专业医生或营养师进行进一步评估。'
  742. if (status === '缺乏' || status === '不足') return '该指标不足,建议通过饮食或补充剂适当补充。'
  743. if (status === 'abnormal') return '该指标异常,建议咨询专业医生进行详细检查。'
  744. if (status === '注意') return '该指标需要关注,建议定期监测并咨询专业人士。'
  745. return '请参考专业医生的建议进行解读。'
  746. },
  747. riskLevelText(level) {
  748. if (level === 'high') return '高风险'
  749. if (level === 'medium' || level === 'moderate') return '中风险'
  750. return '低风险'
  751. },
  752. doConfirm() {
  753. if (!this.canConfirm) return
  754. var self = this
  755. self.confirming = true
  756. uni.showLoading({ title: '确认入库...' })
  757. var postData = {
  758. draftId: self.draftId,
  759. payload: self.payload
  760. }
  761. // 优先级: 已选成员 > 新建成员 > 自动匹配(高置信度) > 子ID
  762. if (self.selectedMemberId) {
  763. postData.subjectId = self.selectedMemberId
  764. } else if (self.createdMemberId) {
  765. postData.subjectId = self.createdMemberId
  766. } else if (self.matchedMemberId) {
  767. postData.subjectId = self.matchedMemberId
  768. } else if (self.memberId) {
  769. postData.subjectId = self.memberId
  770. }
  771. var confirmFn = self.payload.type === 'tongue' ? confirmTongue : confirmReportPreview
  772. confirmFn(postData).then(function(res) {
  773. uni.hideLoading()
  774. if (res.code === 200) {
  775. uni.showToast({ title: '入库成功', icon: 'success' })
  776. var reportId = res.data && res.data.reportId
  777. var reportType = res.data && res.data.reportType || ''
  778. setTimeout(function() {
  779. if (reportId) {
  780. if (reportType === 'gut_flora') {
  781. uni.redirectTo({ url: '/pages/health/report-detail?reportType=gut_flora&reportId=' + reportId })
  782. } else {
  783. uni.redirectTo({ url: '/pages/health/health-plan-summary?initialReportIds=' + reportId + '&subjectId=' + (postData.subjectId || '') })
  784. }
  785. } else {
  786. uni.navigateBack()
  787. }
  788. }, 500)
  789. } else {
  790. uni.showToast({ title: res.message || '确认失败', icon: 'none' })
  791. }
  792. }).catch(function(e) {
  793. uni.hideLoading()
  794. uni.showToast({ title: '确认失败,请重试', icon: 'none' })
  795. console.log('确认入库失败', e)
  796. }).finally(function() {
  797. self.confirming = false
  798. })
  799. },
  800. doDiscard() {
  801. var self = this
  802. uni.showModal({
  803. title: '确认放弃',
  804. content: '放弃后解析数据将被删除,需要重新上传',
  805. success: function(res) {
  806. if (res.confirm) {
  807. var discardFn = self.payload.type === 'tongue' ? discardTongue : discardReportDraft
  808. discardFn(self.draftId).then(function() {
  809. uni.showToast({ title: '已放弃', icon: 'none' })
  810. setTimeout(function() { uni.navigateBack() }, 500)
  811. }).catch(function() {
  812. uni.showToast({ title: '操作失败', icon: 'none' })
  813. })
  814. }
  815. }
  816. })
  817. },
  818. goBack() {
  819. uni.navigateBack()
  820. },
  821. hasTaxonomyData() {
  822. return this.taxonomyTotalCount > 0
  823. },
  824. hasPathogenData() {
  825. return this.pathogenTotalCount > 0
  826. },
  827. // taxonomy/病原菌列表 key(微信小程序禁止 :key 表达式)
  828. getTaxonomyKey(prefix, idx) {
  829. return prefix + idx
  830. },
  831. // 舌诊指标标签映射
  832. indicatorLabel(code) {
  833. var map = {
  834. 'tongue_color': '舌色',
  835. 'coating_color': '苔色',
  836. 'coating_texture': '苔质',
  837. 'fissure': '裂纹',
  838. 'teeth_mark': '齿痕',
  839. 'sublingual_vein': '舌下静脉',
  840. 'constitution': '体质'
  841. }
  842. return map[code] || code
  843. }
  844. }
  845. }
  846. </script>
  847. <style scoped>
  848. .confirm-container {
  849. min-height: 100vh;
  850. background: #F5F7FA;
  851. }
  852. .nav-bar {
  853. position: sticky;
  854. top: 0;
  855. background: #fff;
  856. display: flex;
  857. flex-direction: row;
  858. align-items: center;
  859. justify-content: space-between;
  860. padding: 20rpx 30rpx;
  861. box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
  862. z-index: 100;
  863. }
  864. .nav-back { font-size: 32rpx; color: #5B9BD5; }
  865. .nav-title { font-size: 32rpx; font-weight: bold; color: #333; }
  866. .nav-placeholder { width: 80rpx; }
  867. .tip-banner {
  868. display: flex;
  869. flex-direction: row;
  870. align-items: center;
  871. background: #E8F5E9;
  872. margin: 20rpx 30rpx;
  873. padding: 20rpx 24rpx;
  874. border-radius: 16rpx;
  875. }
  876. .tip-icon { font-size: 32rpx; margin-right: 16rpx; flex-shrink: 0; }
  877. .tip-text { font-size: 24rpx; color: #2E7D32; line-height: 1.5; }
  878. .parsing-banner {
  879. display: flex;
  880. flex-direction: row;
  881. align-items: center;
  882. background: #FFF8E1;
  883. margin: 0 30rpx 20rpx;
  884. padding: 20rpx 24rpx;
  885. border-radius: 16rpx;
  886. }
  887. .parsing-icon { font-size: 32rpx; margin-right: 16rpx; flex-shrink: 0; }
  888. .parsing-text { font-size: 24rpx; color: #F57F17; line-height: 1.5; }
  889. .form-section { margin: 0 30rpx; }
  890. .card {
  891. background: #fff;
  892. border-radius: 16rpx;
  893. padding: 24rpx;
  894. margin-bottom: 20rpx;
  895. box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.04);
  896. }
  897. .card-title {
  898. font-size: 28rpx;
  899. font-weight: bold;
  900. color: #333;
  901. margin-bottom: 20rpx;
  902. padding-bottom: 12rpx;
  903. border-bottom: 2rpx solid #F0F0F0;
  904. display: flex;
  905. flex-direction: row;
  906. align-items: center;
  907. flex-wrap: wrap;
  908. gap: 4rpx;
  909. }
  910. .title-count {
  911. font-size: 24rpx;
  912. font-weight: normal;
  913. color: #94A3B8;
  914. margin-left: 8rpx;
  915. }
  916. .title-abnormal {
  917. font-size: 24rpx;
  918. font-weight: normal;
  919. color: #C62828;
  920. }
  921. .card-title-actions {
  922. margin-left: auto;
  923. display: flex;
  924. flex-direction: row;
  925. gap: 16rpx;
  926. }
  927. .expand-all-btn {
  928. font-size: 22rpx;
  929. color: #5B9BD5;
  930. padding: 4rpx 12rpx;
  931. border: 2rpx solid #5B9BD5;
  932. border-radius: 20rpx;
  933. }
  934. .expand-all-btn:active { opacity: 0.7; }
  935. /* ===== 指标分组折叠 ===== */
  936. .indicator-group {
  937. border: 2rpx solid #E8EDF2;
  938. border-radius: 12rpx;
  939. margin-bottom: 12rpx;
  940. overflow: hidden;
  941. }
  942. .indicator-group-header {
  943. display: flex;
  944. flex-direction: row;
  945. align-items: center;
  946. justify-content: space-between;
  947. padding: 20rpx 16rpx;
  948. background: #F1F5F9;
  949. }
  950. .indicator-group-header:active { opacity: 0.8; }
  951. .indicator-group-header-left {
  952. display: flex;
  953. flex-direction: row;
  954. align-items: center;
  955. flex: 1;
  956. min-width: 0;
  957. }
  958. .indicator-group-arrow {
  959. font-size: 30rpx;
  960. color: #94A3B8;
  961. margin-right: 12rpx;
  962. transform: rotate(0deg);
  963. transition: transform 0.2s ease;
  964. flex-shrink: 0;
  965. }
  966. .indicator-group-arrow.arrow-open {
  967. transform: rotate(90deg);
  968. }
  969. .indicator-group-name {
  970. font-size: 26rpx;
  971. color: #333;
  972. font-weight: 600;
  973. flex: 1;
  974. min-width: 0;
  975. white-space: nowrap;
  976. overflow: hidden;
  977. text-overflow: ellipsis;
  978. }
  979. .indicator-group-header-right {
  980. display: flex;
  981. flex-direction: row;
  982. align-items: center;
  983. gap: 12rpx;
  984. flex-shrink: 0;
  985. margin-left: 12rpx;
  986. }
  987. .indicator-group-need {
  988. font-size: 20rpx;
  989. color: #E65100;
  990. background: #FFF3E0;
  991. padding: 4rpx 12rpx;
  992. border-radius: 20rpx;
  993. font-weight: 500;
  994. }
  995. .indicator-group-count {
  996. font-size: 22rpx;
  997. color: #94A3B8;
  998. }
  999. .indicator-group-abnormal {
  1000. font-size: 22rpx;
  1001. color: #C62828;
  1002. font-weight: 500;
  1003. margin-right: 8rpx;
  1004. }
  1005. .indicator-group-body {
  1006. padding: 16rpx;
  1007. }
  1008. .field-row {
  1009. display: flex;
  1010. flex-direction: row;
  1011. align-items: center;
  1012. margin-bottom: 16rpx;
  1013. }
  1014. .field-label {
  1015. font-size: 26rpx;
  1016. color: #666;
  1017. width: 160rpx;
  1018. flex-shrink: 0;
  1019. }
  1020. .field-value {
  1021. font-size: 26rpx;
  1022. color: #333;
  1023. font-weight: 500;
  1024. flex: 1;
  1025. }
  1026. .field-value.binding-required {
  1027. color: #E65100;
  1028. }
  1029. .member-select-row {
  1030. cursor: pointer;
  1031. }
  1032. .member-select-row:active {
  1033. opacity: 0.7;
  1034. }
  1035. .member-select-arrow {
  1036. font-size: 24rpx;
  1037. color: #5B9BD5;
  1038. margin-left: 12rpx;
  1039. flex-shrink: 0;
  1040. }
  1041. .member-panel {
  1042. background: #F8FAFB;
  1043. border-radius: 12rpx;
  1044. padding: 16rpx;
  1045. margin: 8rpx 0 16rpx;
  1046. }
  1047. .auto-create-inline {
  1048. margin-top: 16rpx;
  1049. padding-top: 16rpx;
  1050. border-top: 2rpx solid #E3F2FD;
  1051. }
  1052. .field-input {
  1053. flex: 1;
  1054. font-size: 26rpx;
  1055. color: #333;
  1056. padding: 8rpx 16rpx;
  1057. background: #F5F7FA;
  1058. border-radius: 8rpx;
  1059. }
  1060. .field-textarea {
  1061. width: 100%;
  1062. min-height: 120rpx;
  1063. font-size: 26rpx;
  1064. color: #333;
  1065. padding: 16rpx;
  1066. background: #F5F7FA;
  1067. border-radius: 12rpx;
  1068. box-sizing: border-box;
  1069. margin-top: 8rpx;
  1070. }
  1071. .member-list {
  1072. display: flex;
  1073. flex-direction: row;
  1074. flex-wrap: wrap;
  1075. gap: 16rpx;
  1076. }
  1077. .member-item {
  1078. display: flex;
  1079. flex-direction: column;
  1080. align-items: center;
  1081. padding: 20rpx 24rpx;
  1082. background: #F5F7FA;
  1083. border-radius: 16rpx;
  1084. border: 2rpx solid transparent;
  1085. min-width: 120rpx;
  1086. }
  1087. .member-selected {
  1088. background: #E3F2FD;
  1089. border-color: #5B9BD5;
  1090. }
  1091. .member-avatar {
  1092. width: 64rpx;
  1093. height: 64rpx;
  1094. border-radius: 50%;
  1095. background: #5B9BD5;
  1096. color: #fff;
  1097. font-size: 28rpx;
  1098. font-weight: bold;
  1099. text-align: center;
  1100. line-height: 64rpx;
  1101. margin-bottom: 8rpx;
  1102. }
  1103. .member-name { font-size: 24rpx; color: #333; }
  1104. .indicator-item {
  1105. background: #F8FAFB;
  1106. border-radius: 12rpx;
  1107. padding: 16rpx;
  1108. margin-bottom: 12rpx;
  1109. }
  1110. .ind-header {
  1111. display: flex;
  1112. flex-direction: row;
  1113. align-items: center;
  1114. gap: 12rpx;
  1115. }
  1116. .ind-name {
  1117. flex: 1;
  1118. font-size: 26rpx;
  1119. color: #333;
  1120. font-weight: 500;
  1121. padding: 4rpx 8rpx;
  1122. background: #fff;
  1123. border-radius: 6rpx;
  1124. }
  1125. .ind-value {
  1126. width: 160rpx;
  1127. font-size: 26rpx;
  1128. color: #1565C0;
  1129. font-weight: bold;
  1130. text-align: right;
  1131. padding: 4rpx 8rpx;
  1132. background: #fff;
  1133. border-radius: 6rpx;
  1134. }
  1135. .ind-detail {
  1136. display: flex;
  1137. flex-direction: row;
  1138. margin-top: 8rpx;
  1139. gap: 16rpx;
  1140. }
  1141. .ind-ref { font-size: 22rpx; color: #94A3B8; }
  1142. .ind-unit { font-size: 22rpx; color: #64748B; }
  1143. .ind-symptoms {
  1144. display: flex;
  1145. flex-direction: row;
  1146. align-items: center;
  1147. margin-top: 8rpx;
  1148. gap: 8rpx;
  1149. }
  1150. .ind-symptom-label { font-size: 22rpx; color: #94A3B8; flex-shrink: 0; }
  1151. .ind-symptom-input {
  1152. flex: 1;
  1153. font-size: 22rpx;
  1154. color: #333;
  1155. padding: 4rpx 8rpx;
  1156. background: #fff;
  1157. border-radius: 6rpx;
  1158. }
  1159. .status-tag {
  1160. display: inline-block;
  1161. font-size: 20rpx;
  1162. padding: 4rpx 12rpx;
  1163. border-radius: 8rpx;
  1164. font-weight: 500;
  1165. }
  1166. .status-normal { background: #E8F5E9; color: #2E7D32; }
  1167. .status-high { background: #FFF3E0; color: #E65100; }
  1168. .status-low { background: #E3F2FD; color: #1565C0; }
  1169. .status-abnormal { background: #FFEBEE; color: #C62828; }
  1170. /* ===== 指标帮助按钮 ===== */
  1171. .ind-help-btn {
  1172. width: 36rpx;
  1173. height: 36rpx;
  1174. border-radius: 50%;
  1175. background: #E2E8F0;
  1176. color: #64748B;
  1177. font-size: 24rpx;
  1178. font-weight: bold;
  1179. text-align: center;
  1180. line-height: 36rpx;
  1181. flex-shrink: 0;
  1182. }
  1183. .ind-help-btn:active {
  1184. background: #CBD5E1;
  1185. }
  1186. /* ===== 指标输入框颜色状态 ===== */
  1187. .ind-name-normal, .ind-value-normal {
  1188. background: #fff;
  1189. }
  1190. .ind-name-high, .ind-value-high,
  1191. .ind-name-low, .ind-value-low,
  1192. .ind-name-abnormal, .ind-value-abnormal,
  1193. .ind-name-deficient, .ind-value-deficient,
  1194. .ind-name-insufficient, .ind-value-insufficient,
  1195. .ind-name-warning, .ind-value-warning,
  1196. .ind-name-high-risk, .ind-value-high-risk,
  1197. .ind-name-low-risk, .ind-value-low-risk,
  1198. .ind-name-not-detected, .ind-value-not-detected {
  1199. background: #FFF0F0;
  1200. color: #C62828;
  1201. }
  1202. /* ===== 指标帮助弹窗 ===== */
  1203. .help-overlay {
  1204. position: fixed;
  1205. top: 0;
  1206. left: 0;
  1207. right: 0;
  1208. bottom: 0;
  1209. background: rgba(0,0,0,0.4);
  1210. z-index: 999;
  1211. display: flex;
  1212. align-items: center;
  1213. justify-content: center;
  1214. }
  1215. .help-popup {
  1216. width: 580rpx;
  1217. max-height: 70vh;
  1218. background: #fff;
  1219. border-radius: 24rpx;
  1220. overflow: hidden;
  1221. }
  1222. .help-popup-header {
  1223. display: flex;
  1224. flex-direction: row;
  1225. align-items: center;
  1226. justify-content: space-between;
  1227. padding: 28rpx 30rpx;
  1228. border-bottom: 2rpx solid #F0F0F0;
  1229. }
  1230. .help-popup-title {
  1231. font-size: 30rpx;
  1232. font-weight: bold;
  1233. color: #333;
  1234. flex: 1;
  1235. }
  1236. .help-popup-close {
  1237. font-size: 32rpx;
  1238. color: #999;
  1239. padding: 8rpx;
  1240. }
  1241. .help-popup-body {
  1242. padding: 24rpx 30rpx;
  1243. }
  1244. .help-row {
  1245. display: flex;
  1246. flex-direction: row;
  1247. align-items: center;
  1248. margin-bottom: 16rpx;
  1249. }
  1250. .help-label {
  1251. font-size: 26rpx;
  1252. color: #94A3B8;
  1253. width: 140rpx;
  1254. flex-shrink: 0;
  1255. }
  1256. .help-value {
  1257. font-size: 28rpx;
  1258. color: #333;
  1259. font-weight: 500;
  1260. flex: 1;
  1261. }
  1262. .help-status-normal { color: #2E7D32; }
  1263. .help-status-high { color: #C62828; }
  1264. .help-status-low { color: #1565C0; }
  1265. .help-status-abnormal { color: #C62828; }
  1266. .help-desc {
  1267. margin-top: 8rpx;
  1268. padding: 20rpx;
  1269. background: #F8FAFB;
  1270. border-radius: 12rpx;
  1271. }
  1272. .help-desc-label {
  1273. display: block;
  1274. font-size: 24rpx;
  1275. color: #94A3B8;
  1276. margin-bottom: 8rpx;
  1277. }
  1278. .help-desc-text {
  1279. display: block;
  1280. font-size: 26rpx;
  1281. color: #333;
  1282. line-height: 1.6;
  1283. }
  1284. .flora-item {
  1285. display: flex;
  1286. flex-direction: row;
  1287. align-items: center;
  1288. gap: 12rpx;
  1289. padding: 12rpx 16rpx;
  1290. background: #F8FAFB;
  1291. border-radius: 10rpx;
  1292. margin-bottom: 8rpx;
  1293. }
  1294. .flora-name {
  1295. flex: 1;
  1296. font-size: 26rpx;
  1297. color: #333;
  1298. padding: 4rpx 8rpx;
  1299. background: #fff;
  1300. border-radius: 6rpx;
  1301. }
  1302. .flora-abundance {
  1303. width: 140rpx;
  1304. font-size: 26rpx;
  1305. color: #1565C0;
  1306. text-align: right;
  1307. padding: 4rpx 8rpx;
  1308. background: #fff;
  1309. border-radius: 6rpx;
  1310. }
  1311. .taxonomy-group {
  1312. margin-bottom: 16rpx;
  1313. }
  1314. .taxonomy-group:last-child {
  1315. margin-bottom: 0;
  1316. }
  1317. .taxonomy-group-label {
  1318. display: block;
  1319. font-size: 24rpx;
  1320. font-weight: 500;
  1321. color: #666;
  1322. padding: 8rpx 4rpx 6rpx;
  1323. }
  1324. .pathogen-group {
  1325. margin-bottom: 16rpx;
  1326. }
  1327. .pathogen-group:last-child {
  1328. margin-bottom: 0;
  1329. }
  1330. .pathogen-group-label {
  1331. display: block;
  1332. font-size: 24rpx;
  1333. font-weight: 500;
  1334. color: #D32F2F;
  1335. padding: 8rpx 4rpx 6rpx;
  1336. }
  1337. .risk-item {
  1338. display: flex;
  1339. flex-direction: row;
  1340. align-items: center;
  1341. gap: 12rpx;
  1342. padding: 12rpx 16rpx;
  1343. background: #F8FAFB;
  1344. border-radius: 10rpx;
  1345. margin-bottom: 8rpx;
  1346. }
  1347. .risk-name {
  1348. flex: 1;
  1349. font-size: 26rpx;
  1350. color: #333;
  1351. padding: 4rpx 8rpx;
  1352. background: #fff;
  1353. border-radius: 6rpx;
  1354. }
  1355. .risk-level {
  1356. font-size: 22rpx;
  1357. font-weight: 500;
  1358. padding: 4rpx 12rpx;
  1359. border-radius: 8rpx;
  1360. }
  1361. .risk-low { background: #E8F5E9; color: #2E7D32; }
  1362. .risk-medium, .risk-moderate { background: #FFF3E0; color: #E65100; }
  1363. .risk-high { background: #FFEBEE; color: #C62828; }
  1364. .food-item {
  1365. display: flex;
  1366. flex-direction: row;
  1367. align-items: center;
  1368. gap: 12rpx;
  1369. padding: 12rpx 16rpx;
  1370. background: #F8FAFB;
  1371. border-radius: 10rpx;
  1372. margin-bottom: 8rpx;
  1373. }
  1374. .food-name {
  1375. flex: 1;
  1376. font-size: 26rpx;
  1377. color: #333;
  1378. padding: 4rpx 8rpx;
  1379. background: #fff;
  1380. border-radius: 6rpx;
  1381. }
  1382. .food-category {
  1383. width: 160rpx;
  1384. font-size: 24rpx;
  1385. color: #64748B;
  1386. text-align: right;
  1387. padding: 4rpx 8rpx;
  1388. background: #fff;
  1389. border-radius: 6rpx;
  1390. }
  1391. .action-row {
  1392. display: flex;
  1393. flex-direction: row;
  1394. gap: 20rpx;
  1395. margin-top: 10rpx;
  1396. margin-bottom: 20rpx;
  1397. }
  1398. .btn-discard {
  1399. flex: 1;
  1400. background: #fff;
  1401. border: 2rpx solid #EF4444;
  1402. color: #EF4444;
  1403. font-size: 28rpx;
  1404. font-weight: bold;
  1405. text-align: center;
  1406. padding: 24rpx;
  1407. border-radius: 16rpx;
  1408. }
  1409. .btn-discard:active { opacity: 0.7; }
  1410. .btn-confirm {
  1411. flex: 2;
  1412. background: linear-gradient(135deg, #5B9BD5, #3A7CC4);
  1413. color: #fff;
  1414. font-size: 28rpx;
  1415. font-weight: bold;
  1416. text-align: center;
  1417. padding: 24rpx;
  1418. border-radius: 16rpx;
  1419. }
  1420. .btn-confirm:active { opacity: 0.85; }
  1421. .btn-disabled { opacity: 0.5; }
  1422. .bottom-spacer { height: 80rpx; }
  1423. /* ===== Phase 2: 匹配可信度 ===== */
  1424. .confidence-card {
  1425. margin: 0 30rpx 20rpx;
  1426. background: #fff;
  1427. border-radius: 16rpx;
  1428. padding: 24rpx;
  1429. box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.04);
  1430. }
  1431. .confidence-header {
  1432. display: flex;
  1433. flex-direction: row;
  1434. align-items: center;
  1435. justify-content: space-between;
  1436. margin-bottom: 16rpx;
  1437. }
  1438. .confidence-label {
  1439. font-size: 26rpx;
  1440. color: #333;
  1441. font-weight: 500;
  1442. }
  1443. .confidence-badge {
  1444. font-size: 22rpx;
  1445. font-weight: bold;
  1446. padding: 4rpx 16rpx;
  1447. border-radius: 20rpx;
  1448. }
  1449. .badge-high { background: #E8F5E9; color: #2E7D32; }
  1450. .badge-medium { background: #FFF8E1; color: #F57F17; }
  1451. .badge-low { background: #FFF3E0; color: #E65100; }
  1452. .badge-none { background: #FFEBEE; color: #C62828; }
  1453. .confidence-bar-track {
  1454. height: 12rpx;
  1455. background: #E2E8F0;
  1456. border-radius: 6rpx;
  1457. overflow: hidden;
  1458. margin-bottom: 12rpx;
  1459. }
  1460. .confidence-bar-fill {
  1461. height: 100%;
  1462. border-radius: 6rpx;
  1463. transition: width 0.3s ease;
  1464. }
  1465. .fill-high { background: linear-gradient(90deg, #66BB6A, #43A047); }
  1466. .fill-medium { background: linear-gradient(90deg, #FFD54F, #FFC107); }
  1467. .fill-low { background: linear-gradient(90deg, #FF8A65, #FF5722); }
  1468. .fill-none { background: linear-gradient(90deg, #EF9A9A, #E53935); }
  1469. .confidence-desc {
  1470. font-size: 22rpx;
  1471. color: #94A3B8;
  1472. line-height: 1.4;
  1473. }
  1474. /* ===== Phase 2: 候选成员列表 ===== */
  1475. .candidate-section {
  1476. margin-bottom: 16rpx;
  1477. }
  1478. .candidate-section-hint {
  1479. display: block;
  1480. font-size: 24rpx;
  1481. color: #64748B;
  1482. margin-bottom: 12rpx;
  1483. }
  1484. .candidate-item {
  1485. display: flex;
  1486. flex-direction: row;
  1487. align-items: center;
  1488. justify-content: space-between;
  1489. padding: 16rpx;
  1490. background: #F8FAFB;
  1491. border-radius: 12rpx;
  1492. margin-bottom: 10rpx;
  1493. border: 2rpx solid transparent;
  1494. }
  1495. .candidate-item:active { opacity: 0.8; }
  1496. .candidate-selected {
  1497. background: #E3F2FD;
  1498. border-color: #5B9BD5;
  1499. }
  1500. .candidate-left {
  1501. display: flex;
  1502. flex-direction: row;
  1503. align-items: center;
  1504. flex: 1;
  1505. min-width: 0;
  1506. }
  1507. .candidate-avatar {
  1508. width: 56rpx;
  1509. height: 56rpx;
  1510. border-radius: 50%;
  1511. background: #5B9BD5;
  1512. color: #fff;
  1513. font-size: 24rpx;
  1514. font-weight: bold;
  1515. text-align: center;
  1516. line-height: 56rpx;
  1517. margin-right: 16rpx;
  1518. flex-shrink: 0;
  1519. }
  1520. .candidate-info {
  1521. flex: 1;
  1522. min-width: 0;
  1523. }
  1524. .candidate-name {
  1525. font-size: 26rpx;
  1526. color: #333;
  1527. font-weight: 500;
  1528. display: block;
  1529. }
  1530. .candidate-detail {
  1531. font-size: 22rpx;
  1532. color: #94A3B8;
  1533. display: block;
  1534. }
  1535. .candidate-fields {
  1536. font-size: 20rpx;
  1537. color: #5B9BD5;
  1538. display: block;
  1539. margin-top: 2rpx;
  1540. }
  1541. .candidate-right {
  1542. display: flex;
  1543. flex-direction: row;
  1544. align-items: center;
  1545. gap: 12rpx;
  1546. flex-shrink: 0;
  1547. margin-left: 16rpx;
  1548. }
  1549. .score-bar-track {
  1550. width: 80rpx;
  1551. height: 10rpx;
  1552. background: #E2E8F0;
  1553. border-radius: 5rpx;
  1554. overflow: hidden;
  1555. }
  1556. .score-bar-fill {
  1557. height: 100%;
  1558. background: linear-gradient(90deg, #5B9BD5, #3A7CC4);
  1559. border-radius: 5rpx;
  1560. }
  1561. .score-text {
  1562. font-size: 24rpx;
  1563. color: #1565C0;
  1564. font-weight: bold;
  1565. min-width: 48rpx;
  1566. text-align: right;
  1567. }
  1568. /* ===== Phase 2: 新建成员入口 ===== */
  1569. .create-member-entry {
  1570. display: flex;
  1571. flex-direction: row;
  1572. align-items: center;
  1573. justify-content: center;
  1574. padding: 20rpx;
  1575. border: 2rpx dashed #CBD5E1;
  1576. border-radius: 12rpx;
  1577. margin-top: 8rpx;
  1578. }
  1579. .create-member-entry:active { background: #F1F5F9; }
  1580. .create-member-icon {
  1581. font-size: 28rpx;
  1582. color: #5B9BD5;
  1583. font-weight: bold;
  1584. margin-right: 8rpx;
  1585. }
  1586. .create-member-text {
  1587. font-size: 24rpx;
  1588. color: #5B9BD5;
  1589. }
  1590. /* ===== Phase 2: 新建成员表单(面板内嵌) ===== */
  1591. .form-item {
  1592. display: flex;
  1593. flex-direction: row;
  1594. align-items: center;
  1595. margin-bottom: 20rpx;
  1596. }
  1597. .form-item-label {
  1598. font-size: 26rpx;
  1599. color: #333;
  1600. width: 100rpx;
  1601. flex-shrink: 0;
  1602. }
  1603. .form-item-input {
  1604. flex: 1;
  1605. font-size: 26rpx;
  1606. color: #333;
  1607. padding: 12rpx 16rpx;
  1608. background: #F5F7FA;
  1609. border-radius: 10rpx;
  1610. }
  1611. .gender-selector {
  1612. display: flex;
  1613. flex-direction: row;
  1614. gap: 16rpx;
  1615. }
  1616. .gender-option {
  1617. font-size: 26rpx;
  1618. color: #333;
  1619. padding: 12rpx 32rpx;
  1620. background: #F5F7FA;
  1621. border-radius: 10rpx;
  1622. border: 2rpx solid transparent;
  1623. }
  1624. .gender-option:active { opacity: 0.7; }
  1625. .gender-selected {
  1626. background: #E3F2FD;
  1627. border-color: #5B9BD5;
  1628. color: #1565C0;
  1629. }
  1630. .btn-create-submit {
  1631. background: linear-gradient(135deg, #5B9BD5, #3A7CC4);
  1632. color: #fff;
  1633. font-size: 28rpx;
  1634. font-weight: bold;
  1635. text-align: center;
  1636. padding: 22rpx;
  1637. border-radius: 14rpx;
  1638. margin-top: 10rpx;
  1639. }
  1640. .btn-create-submit:active { opacity: 0.85; }
  1641. /* ===== 舌诊指标 ===== */
  1642. .tongue-indicator-grid {
  1643. display: flex;
  1644. flex-direction: row;
  1645. flex-wrap: wrap;
  1646. gap: 12rpx;
  1647. }
  1648. .tongue-ind-item {
  1649. width: calc(50% - 6rpx);
  1650. background: #F8FAFC;
  1651. border-radius: 16rpx;
  1652. padding: 20rpx 24rpx;
  1653. box-sizing: border-box;
  1654. }
  1655. .tongue-ind-label {
  1656. display: block;
  1657. font-size: 24rpx;
  1658. color: #94A3B8;
  1659. margin-bottom: 8rpx;
  1660. }
  1661. .tongue-ind-value {
  1662. display: block;
  1663. font-size: 28rpx;
  1664. color: #1E293B;
  1665. font-weight: 500;
  1666. }
  1667. .tongue-summary {
  1668. margin-top: 20rpx;
  1669. padding: 20rpx 24rpx;
  1670. background: #FFF8E1;
  1671. border-radius: 16rpx;
  1672. }
  1673. .tongue-summary-title {
  1674. font-size: 24rpx;
  1675. color: #F59E0B;
  1676. font-weight: 600;
  1677. display: block;
  1678. margin-bottom: 8rpx;
  1679. }
  1680. .tongue-summary-text {
  1681. font-size: 26rpx;
  1682. color: #333;
  1683. line-height: 1.6;
  1684. }
  1685. </style>