report-confirm.vue 45 KB

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