index.vue 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947
  1. <template>
  2. <view class="body-container">
  3. <!-- Tabbar 切换过渡页 -->
  4. <tab-transition v-if="showTabTransition" dimCode="body" />
  5. <!-- 品牌头部 -->
  6. <PageBanner theme="body"
  7. tagline="科学管理全家健康"
  8. quote="身体健康是幸福的基础" />
  9. <!-- 游客专属区块 -->
  10. <template v-if="!isLoggedIn">
  11. <LoginGuideCard
  12. title="登录后查看全家健康数据"
  13. :items="[
  14. '查看全家身体能量数据和健康报告',
  15. '记录每日健康打卡,获取身体能量',
  16. '查看专属健康商品和活动价格'
  17. ]" />
  18. <HealthTips dimension="body" />
  19. </template>
  20. <!-- 登录后:五维能量条 -->
  21. <FamilyEnergyBar
  22. v-if="isLoggedIn"
  23. dimensionCode="body"
  24. :sandboxData="sandboxData"
  25. :dualDimension="dualDimension" />
  26. <!-- 关系图谱(登录后可见) -->
  27. <FamilyRelationGraph
  28. v-if="isLoggedIn && familyMembersVisible.length > 0"
  29. dimensionCode="body"
  30. :selfId="activeChildId"
  31. :members="familyMembersVisible"
  32. :energyMap="energyMapForGraph"
  33. :intimacyMap="intimacyMapForGraph"
  34. @memberTap="goMemberDetail" />
  35. <!-- 登录后:用户快捷入口 -->
  36. <UserQuickEntry
  37. v-if="isLoggedIn"
  38. :userName="userName"
  39. roleName="家长"
  40. :currentChildName="activeChildName"
  41. :children="children"
  42. @childChanged="onChildChanged"
  43. @scrollTo="scrollToSection" />
  44. <!-- 雷达图 -->
  45. <view class="section" v-if="dimensionData">
  46. <RadarChart
  47. v-if="dimensionData && dimensionData.dimensions"
  48. :dimensions="dimensionData.dimensions.map(function(d) { return { label: d.label, key: d.dimension } })"
  49. :scores="dimensionData.dimensions.map(function(d) { return d.score })"
  50. fillColor="#FF8C42"
  51. gridColor="#FED7AA"
  52. labelColor="#9A3412"
  53. :width="580"
  54. :height="580"
  55. @dimensionClick="goDimensionDetail" />
  56. </view>
  57. <!-- 功能入口 -->
  58. <view class="func-section" v-if="sectionVisible('func_entries')">
  59. <view class="func-grid">
  60. <view class="func-item" v-for="item in funcList" :key="item.label" @click="onFuncClick(item)">
  61. <view class="func-icon-wrap">
  62. <text class="func-icon">{{ item.icon }}</text>
  63. </view>
  64. <text class="func-label">{{ item.label }}</text>
  65. </view>
  66. </view>
  67. </view>
  68. <!-- 健康报告摘要(登录后可见) -->
  69. <view class="section" v-if="sectionVisible('health_report') && isLoggedIn">
  70. <view class="section-header">
  71. <text class="section-title">健康报告</text>
  72. <text class="section-more" @click="goToHealthReport">查看详情 ›</text>
  73. </view>
  74. <view class="report-card" v-if="latestReport">
  75. <view class="report-type-tag">{{ reportTypeLabel }}</view>
  76. <view class="report-score-row">
  77. <view class="score-circle">
  78. <text class="score-value">{{ latestReport.overallScore || '--' }}</text>
  79. <text class="score-label">综合评分</text>
  80. </view>
  81. <view class="report-meta">
  82. <view class="meta-item" v-if="latestReport.gutHealthScore">
  83. <text class="meta-label">肠道健康</text>
  84. <text class="meta-value">{{ latestReport.gutHealthScore }}</text>
  85. </view>
  86. <view class="meta-item" v-if="latestReport.nutritionScore">
  87. <text class="meta-label">营养状况</text>
  88. <text class="meta-value">{{ latestReport.nutritionScore }}</text>
  89. </view>
  90. <view class="meta-item" v-if="latestReport.gutAge">
  91. <text class="meta-label">肠道年龄</text>
  92. <text class="meta-value">{{ latestReport.gutAge }}</text>
  93. </view>
  94. </view>
  95. </view>
  96. <text class="report-date">报告日期:{{ formatDate(latestReport.reportDate) }}</text>
  97. </view>
  98. <view class="report-empty" v-else>
  99. <text class="empty-tip">暂无健康报告</text>
  100. <text class="empty-sub">规划师录入后将自动显示</text>
  101. </view>
  102. </view>
  103. <!-- ===== 精准营养(上传报告+产品+文章) ===== -->
  104. <view class="section nutrition-section" v-if="isLoggedIn">
  105. <view class="section-header">
  106. <text class="section-title">🥗 精准营养</text>
  107. </view>
  108. <!-- 上传报告入口 -->
  109. <view class="nutrition-report-card" @click="goToUploadReport">
  110. <view class="nutrition-report-left">
  111. <text class="nutrition-icon-large">📋</text>
  112. </view>
  113. <view class="nutrition-report-right">
  114. <text class="nutrition-title">上传健康报告</text>
  115. <text class="nutrition-desc">上传体检报告或肠道检测报告,AI智能解读分析,获取个性化营养方案</text>
  116. <view class="nutrition-report-tags">
  117. <text class="tag">体检报告</text>
  118. <text class="tag">肠道检测</text>
  119. <text class="tag">AI解读</text>
  120. </view>
  121. </view>
  122. <text class="nutrition-arrow">›</text>
  123. </view>
  124. <!-- 菌群检测产品链接 -->
  125. <view class="nutrition-links">
  126. <text class="links-label">🔥 相关产品</text>
  127. <view class="links-row">
  128. <view class="link-item" @click="goToShopProduct('gut_flora')">
  129. <text class="link-icon">🧪</text>
  130. <view class="link-texts">
  131. <text class="link-name">肠道菌群检测</text>
  132. <text class="link-desc">了解孩子的肠道健康状况</text>
  133. </view>
  134. <text class="link-arrow">›</text>
  135. </view>
  136. <view class="link-item" @click="goToShopProduct('probiotic')">
  137. <text class="link-icon">🦠</text>
  138. <view class="link-texts">
  139. <text class="link-name">益生菌补充</text>
  140. <text class="link-desc">平衡肠道菌群,增强免疫力</text>
  141. </view>
  142. <text class="link-arrow">›</text>
  143. </view>
  144. </view>
  145. </view>
  146. <!-- 相关文章链接 -->
  147. <view class="nutrition-links">
  148. <text class="links-label">📖 相关文章</text>
  149. <view class="links-row">
  150. <view class="link-item" @click="goToArticle('gut_health')">
  151. <text class="link-icon">📝</text>
  152. <view class="link-texts">
  153. <text class="link-name">肠道菌群与儿童健康</text>
  154. <text class="link-desc">肠道菌群如何影响孩子的免疫力</text>
  155. </view>
  156. <text class="link-arrow">›</text>
  157. </view>
  158. <view class="link-item" @click="goToArticle('nutrition_guide')">
  159. <text class="link-icon">📝</text>
  160. <view class="link-texts">
  161. <text class="link-name">儿童精准营养指南</text>
  162. <text class="link-desc">科学搭配饮食,促进健康成长</text>
  163. </view>
  164. <text class="link-arrow">›</text>
  165. </view>
  166. </view>
  167. </view>
  168. </view>
  169. <!-- 维度任务 -->
  170. <DimensionTasks
  171. v-if="isLoggedIn"
  172. dimensionCode="body"
  173. :tasks="dimensionTasks"
  174. @taskClick="onTaskClick"
  175. @moreTasks="goTasks" />
  176. <!-- 维度活动 -->
  177. <DimensionActivities
  178. dimensionCode="body"
  179. :activities="dimensionActivities"
  180. @activityClick="goActivityDetail"
  181. @moreActivities="goMoreActivities" />
  182. <!-- 维度商品 -->
  183. <DimensionProducts
  184. dimensionCode="body"
  185. :products="dimensionProducts"
  186. @productClick="goProductDetail"
  187. @moreProducts="goMoreProducts" />
  188. <!-- 健康小贴士 -->
  189. <view class="section" v-if="sectionVisible('health_tips')">
  190. <view class="section-header">
  191. <text class="section-title">健康小贴士</text>
  192. </view>
  193. <view class="tips-list">
  194. <view class="tip-card" v-for="item in healthTips" :key="item.id">
  195. <text class="tip-title">{{ item.title }}</text>
  196. <text class="tip-summary">{{ item.summary }}</text>
  197. </view>
  198. </view>
  199. </view>
  200. <!-- 快捷操作按钮 -->
  201. <view class="section quick-actions" v-if="isLoggedIn">
  202. <view class="action-btn" @click="goToHealthReport">
  203. <text class="action-icon">📋</text>
  204. <text class="action-text">报告详情</text>
  205. </view>
  206. <view class="action-btn" @click="goToCheckin">
  207. <text class="action-icon">🏃</text>
  208. <text class="action-text">健康打卡</text>
  209. </view>
  210. <view class="action-btn" @click="goToNutritionProfile">
  211. <text class="action-icon">🥗</text>
  212. <text class="action-text">营养档案</text>
  213. </view>
  214. </view>
  215. <!-- 底部占位 -->
  216. <view class="bottom-spacer"></view>
  217. </view>
  218. </template>
  219. <script>
  220. import TabTransition from '../../components/tab-transition.vue'
  221. import PageBanner from '../../components/PageBanner.vue'
  222. import LoginGuideCard from '../../components/LoginGuideCard.vue'
  223. import HealthTips from '../../components/HealthTips.vue'
  224. import FamilyEnergyBar from '../../components/FamilyEnergyBar.vue'
  225. import UserQuickEntry from '../../components/UserQuickEntry.vue'
  226. import DimensionTasks from '../../components/DimensionTasks.vue'
  227. import DimensionActivities from '../../components/DimensionActivities.vue'
  228. import DimensionProducts from '../../components/DimensionProducts.vue'
  229. import FamilyRelationGraph from '../../components/FamilyRelationGraph.vue'
  230. import RadarChart from '../../components/RadarChart.vue'
  231. import { getVisibleSections, getEnergyOverview, getChildren, getTodayTasksByCategory, getActivityList, getProductsByDomain, getFamilyEnergySandbox, getVisibleFamilyMembers, getDimensionOverview } from '../../utils/api.js'
  232. import config from '../../config.js'
  233. var BASE_URL = config.api('')
  234. const healthRequest = function(url, data) {
  235. var token = uni.getStorageSync('token')
  236. return new Promise(function(resolve, reject) {
  237. uni.request({
  238. url: BASE_URL + url,
  239. method: 'POST',
  240. data: data,
  241. header: {
  242. 'Content-Type': 'application/json',
  243. 'Authorization': token ? 'Bearer ' + token : ''
  244. },
  245. success: function(res) {
  246. if (res.data.code === 200) {
  247. resolve(res.data)
  248. } else {
  249. reject(res.data)
  250. }
  251. },
  252. fail: function(err) {
  253. reject(err)
  254. }
  255. })
  256. })
  257. }
  258. export default {
  259. components: { TabTransition, PageBanner, LoginGuideCard, HealthTips, FamilyEnergyBar, UserQuickEntry, DimensionTasks, DimensionActivities, DimensionProducts, FamilyRelationGraph, RadarChart },
  260. data() {
  261. return {
  262. isLoggedIn: false,
  263. role: null,
  264. showTabTransition: false,
  265. activeChildId: null,
  266. activeChildName: '',
  267. userName: '',
  268. children: [],
  269. familyMembersVisible: [],
  270. sandboxData: null,
  271. dualDimension: null,
  272. visibleSections: [],
  273. latestReport: null,
  274. dimensionTasks: [],
  275. dimensionActivities: [],
  276. dimensionProducts: [],
  277. dimensionData: null,
  278. funcList: [
  279. { icon: '\u{1F3C3}', label: '运动', needLogin: true, page: '' },
  280. { icon: '\u{1F957}', label: '饮食', needLogin: true, page: '' },
  281. { icon: '\u{1F634}', label: '作息', needLogin: true, page: '' },
  282. { icon: '\u{1F9A0}', label: '菌群', needLogin: true, page: '' },
  283. { icon: '\u{1F9D8}', label: '冥想', needLogin: true, page: '' },
  284. { icon: '\u{1F4CA}', label: '舌诊', needLogin: true, page: 'tongue-index' }
  285. ],
  286. healthTips: [
  287. { id: 1, title: '儿童每日运动指南', summary: '不同年龄段儿童每天需要多少运动量?科学运动助力健康成长。' },
  288. { id: 2, title: '五行饮食搭配法则', summary: '根据五行理论合理搭配膳食,均衡营养从每一餐开始。' },
  289. { id: 3, title: '优质睡眠从小养成', summary: '帮助孩子建立规律的作息习惯,提升睡眠质量。' },
  290. { id: 4, title: '肠道菌群与免疫力', summary: '了解益生菌对儿童健康的重要作用,从内部提升抵抗力。' }
  291. ]
  292. }
  293. },
  294. computed: {
  295. reportTypeLabel: function() {
  296. if (!this.latestReport) return ''
  297. return this.latestReport.reportType === 'gut_flora' ? '肠道检测报告' : '体检报告'
  298. },
  299. energyMapForGraph: function() {
  300. var map = {}
  301. if (this.sandboxData && this.sandboxData.members) {
  302. for (var i = 0; i < this.sandboxData.members.length; i++) {
  303. var m = this.sandboxData.members[i]
  304. map[m.memberId || m.id] = {
  305. bodyScore: m.bodyScore || 0,
  306. mindScore: m.mindScore || 0,
  307. actionScore: m.actionScore || 0
  308. }
  309. }
  310. }
  311. return map
  312. },
  313. intimacyMapForGraph: function() {
  314. return {}
  315. }
  316. },
  317. onShow() {
  318. // Tabbar 切换过渡动画(最少停留 1 秒)
  319. this.showTabTransition = true
  320. var self = this
  321. setTimeout(function() {
  322. self.showTabTransition = false
  323. }, 1100)
  324. var token = uni.getStorageSync('token')
  325. this.isLoggedIn = !!token
  326. if (this.isLoggedIn) {
  327. this.role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || null
  328. this.userName = uni.getStorageSync('nickname') || uni.getStorageSync('userName') || '家长'
  329. }
  330. this.loadSectionConfig()
  331. if (this.isLoggedIn) {
  332. this.loadChildren()
  333. this.loadFamilyMembersVisible()
  334. }
  335. // 游客也能浏览活动和商品
  336. this.loadDimensionActivities()
  337. this.loadDimensionProducts()
  338. },
  339. methods: {
  340. loadSectionConfig: function() {
  341. var baseSections = ['func_entries']
  342. if (!uni.getStorageSync('token')) {
  343. this.visibleSections = baseSections
  344. return
  345. }
  346. var role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || null
  347. var self = this
  348. getVisibleSections({ pageKey: 'body', role: role }).then(function(res) {
  349. if (res.code === 200 && res.data) {
  350. var keys = res.data.map(function(s) { return s.sectionKey })
  351. var merged = baseSections.slice()
  352. keys.forEach(function(k) { if (merged.indexOf(k) === -1) merged.push(k) })
  353. self.visibleSections = merged
  354. }
  355. }).catch(function(e) {
  356. self.visibleSections = ['func_entries']
  357. })
  358. },
  359. loadChildren: function() {
  360. var self = this
  361. getChildren().then(function(res) {
  362. if (res.code === 200 && res.data) {
  363. self.children = res.data
  364. var savedChildId = uni.getStorageSync('currentChildId')
  365. var found = false
  366. for (var i = 0; i < self.children.length; i++) {
  367. if (self.children[i].childId === savedChildId) {
  368. self.activeChildId = savedChildId
  369. self.activeChildName = self.children[i].name || self.children[i].nickname || '孩子'
  370. found = true
  371. break
  372. }
  373. }
  374. if (!found && self.children.length > 0) {
  375. self.activeChildId = self.children[0].childId
  376. self.activeChildName = self.children[0].name || self.children[0].nickname || '孩子'
  377. uni.setStorageSync('currentChildId', self.activeChildId)
  378. }
  379. if (self.activeChildId) {
  380. self.loadDashboardData()
  381. }
  382. }
  383. }).catch(function(e) {
  384. console.log('获取孩子列表失败', e)
  385. })
  386. },
  387. loadDashboardData: function() {
  388. if (!this.activeChildId) return
  389. this.loadHealthReport()
  390. this.loadEnergyData()
  391. this.loadDimensionTasks()
  392. this.loadDimensionActivities()
  393. this.loadDimensionProducts()
  394. this.loadSandboxData()
  395. this.loadHealthDimensions()
  396. },
  397. loadHealthDimensions: function() {
  398. var self = this
  399. getDimensionOverview({ memberId: this.activeChildId }).then(function(res) {
  400. if (res && res.data) {
  401. self.dimensionData = res.data
  402. }
  403. }).catch(function(e) {
  404. console.log('获取维度概览失败', e)
  405. })
  406. },
  407. loadSandboxData: function() {
  408. var self = this
  409. getFamilyEnergySandbox().then(function(res) {
  410. if (res && res.data) {
  411. self.sandboxData = res.data
  412. }
  413. }).catch(function(e) {
  414. console.log('获取沙盘数据失败', e)
  415. })
  416. },
  417. loadHealthReport: function() {
  418. var self = this
  419. healthRequest('/api/health/report/latest', { childId: this.activeChildId }).then(function(res) {
  420. if (res.data) {
  421. self.latestReport = res.data
  422. }
  423. }).catch(function(e) {
  424. console.log('获取健康报告失败', e)
  425. })
  426. },
  427. loadEnergyData: function() {
  428. var self = this
  429. getEnergyOverview(this.activeChildId).then(function(res) {
  430. if (res && res.data) {
  431. var dims = res.data.dimensions
  432. if (dims && dims.length > 0) {
  433. for (var i = 0; i < dims.length; i++) {
  434. if (dims[i].code === 'body') {
  435. self.dualDimension = dims[i]
  436. break
  437. }
  438. }
  439. }
  440. }
  441. }).catch(function(e) {
  442. console.log('获取能量概览失败', e)
  443. })
  444. },
  445. loadDimensionTasks: function() {
  446. var self = this
  447. if (!this.activeChildId) return
  448. getTodayTasksByCategory(this.activeChildId, 'body').then(function(res) {
  449. if (res && res.data) {
  450. self.dimensionTasks = Array.isArray(res.data) ? res.data.slice(0, 5) : []
  451. }
  452. }).catch(function() { self.dimensionTasks = [] })
  453. },
  454. loadDimensionActivities: function() {
  455. var self = this
  456. getActivityList({ dimensionCode: 'body', page: 1, size: 3 }).then(function(res) {
  457. if (res && res.data) {
  458. var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
  459. self.dimensionActivities = list.slice(0, 3)
  460. }
  461. }).catch(function() { self.dimensionActivities = [] })
  462. },
  463. loadDimensionProducts: function() {
  464. var self = this
  465. getProductsByDomain('body', 1, 4).then(function(res) {
  466. if (res && res.data) {
  467. var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
  468. self.dimensionProducts = list.slice(0, 4)
  469. }
  470. }).catch(function() { self.dimensionProducts = [] })
  471. },
  472. onChildChanged: function(child) {
  473. this.activeChildId = child.childId
  474. this.activeChildName = child.name || child.nickname || '孩子'
  475. this.loadDashboardData()
  476. },
  477. loadFamilyMembersVisible: function() {
  478. var self = this
  479. getVisibleFamilyMembers().then(function(res) {
  480. self.familyMembersVisible = res.data || []
  481. }).catch(function(e) {
  482. console.log('获取可见家庭成员失败', e)
  483. self.familyMembersVisible = []
  484. })
  485. },
  486. scrollToSection: function(section) {
  487. uni.pageScrollTo({ selector: '#' + section, duration: 300 })
  488. },
  489. onTaskClick: function(task) {
  490. uni.navigateTo({ url: '/pages/tasks/tasks' })
  491. },
  492. goActivityDetail: function(act) {
  493. uni.navigateTo({ url: '/pages/discover-detail/activity-detail/activity-detail?id=' + act.id })
  494. },
  495. goMoreActivities: function() {
  496. uni.navigateTo({ url: '/pages/discover/index?type=activity&dimension=body' })
  497. },
  498. goProductDetail: function(prod) {
  499. uni.navigateTo({ url: '/pages/discover-detail/product-detail/product-detail?id=' + prod.id })
  500. },
  501. goMoreProducts: function() {
  502. uni.navigateTo({ url: '/pages/discover/index?type=product&domain=body' })
  503. },
  504. goTasks: function() { uni.switchTab({ url: '/pages/tasks/tasks' }) },
  505. goMemberDetail: function(member) {
  506. if (!member || !member.memberId) return
  507. uni.navigateTo({
  508. url: '/pages/body-detail/member-body-detail?childId=' + member.memberId
  509. })
  510. },
  511. sectionVisible: function(key) {
  512. return this.visibleSections.length === 0 || this.visibleSections.indexOf(key) !== -1
  513. },
  514. onFuncClick: function(item) {
  515. if (item.needLogin && !this.isLoggedIn) {
  516. uni.showModal({
  517. title: '提示',
  518. content: '请先登录后使用此功能',
  519. success: function(res) {
  520. if (res.confirm) uni.navigateTo({ url: '/pages/login/login' })
  521. }
  522. })
  523. return
  524. }
  525. if (item.page === 'health-dimensions') {
  526. if (!this.activeChildId) {
  527. uni.showToast({ title: '请先选择孩子', icon: 'none' })
  528. return
  529. }
  530. uni.navigateTo({ url: '/pages/body-detail/health-dimensions?childId=' + this.activeChildId })
  531. return
  532. }
  533. if (item.page) uni.navigateTo({ url: item.page })
  534. },
  535. goToHealthReport: function() {
  536. if (!this.activeChildId) {
  537. uni.showToast({ title: '请先选择孩子', icon: 'none' })
  538. return
  539. }
  540. uni.navigateTo({ url: '/pages/body-detail/health-report?childId=' + this.activeChildId })
  541. },
  542. goDimensionDetail: function(dimKey) {
  543. uni.navigateTo({ url: '/pages/body/dimension-detail?dimension=' + dimKey + '&childId=' + this.activeChildId })
  544. },
  545. goToCheckin: function() {
  546. if (!this.activeChildId) {
  547. uni.showToast({ title: '请先选择孩子', icon: 'none' })
  548. return
  549. }
  550. uni.navigateTo({ url: '/pages/body-detail/checkin?childId=' + this.activeChildId })
  551. },
  552. goToNutritionProfile: function() {
  553. if (!this.activeChildId) {
  554. uni.showToast({ title: '请先选择孩子', icon: 'none' })
  555. return
  556. }
  557. uni.navigateTo({ url: '/pages/health/nutrition-profile?childId=' + this.activeChildId })
  558. },
  559. goToUploadReport: function() {
  560. // 使用当前选中孩子;如果 loadChildren 异步未完成则尝试从 storage 读取
  561. var id = this.activeChildId || uni.getStorageSync('currentChildId') || ''
  562. uni.navigateTo({ url: '/pages/health/report-upload?childId=' + id + '&from=body' })
  563. },
  564. goToShopProduct: function(type) {
  565. if (type === 'gut_flora') {
  566. uni.navigateTo({ url: '/pages/discover/index?type=product&domain=body&keyword=' + encodeURIComponent('肠道菌群检测') })
  567. } else if (type === 'probiotic') {
  568. uni.navigateTo({ url: '/pages/discover/index?type=product&domain=body&keyword=' + encodeURIComponent('益生菌') })
  569. }
  570. },
  571. goToArticle: function(topic) {
  572. if (topic === 'gut_health') {
  573. uni.navigateTo({ url: '/pages/mind/articles?tag=' + encodeURIComponent('肠道健康') })
  574. } else if (topic === 'nutrition_guide') {
  575. uni.navigateTo({ url: '/pages/mind/articles?tag=' + encodeURIComponent('精准营养') })
  576. }
  577. },
  578. formatDate: function(dateStr) {
  579. if (!dateStr) return '--'
  580. try {
  581. var d = new Date(dateStr)
  582. var y = d.getFullYear()
  583. var m = ('' + (d.getMonth() + 1)).padStart(2, '0')
  584. var day = ('' + d.getDate()).padStart(2, '0')
  585. return y + '-' + m + '-' + day
  586. } catch (e) {
  587. return dateStr
  588. }
  589. }
  590. }
  591. }
  592. </script>
  593. <style scoped>
  594. .body-container {
  595. min-height: 100vh;
  596. background: #f5f7fa;
  597. padding-bottom: 120rpx;
  598. }
  599. /* ===== 功能入口 ===== */
  600. .func-section {
  601. margin: 20rpx 30rpx;
  602. }
  603. .func-grid {
  604. display: flex;
  605. flex-direction: row;
  606. justify-content: space-between;
  607. background: #fff;
  608. border-radius: 20rpx;
  609. padding: 24rpx 16rpx;
  610. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  611. }
  612. .func-item {
  613. display: flex;
  614. flex-direction: column;
  615. align-items: center;
  616. flex: 1;
  617. }
  618. .func-icon-wrap {
  619. width: 80rpx;
  620. height: 80rpx;
  621. border-radius: 40rpx;
  622. background: linear-gradient(135deg, #D6EAF8, #EBF2FA);
  623. display: flex;
  624. align-items: center;
  625. justify-content: center;
  626. margin-bottom: 10rpx;
  627. }
  628. .func-icon {
  629. font-size: 40rpx;
  630. }
  631. .func-label {
  632. font-size: 22rpx;
  633. color: #666;
  634. font-weight: 500;
  635. }
  636. /* ===== 通用区块 ===== */
  637. .section {
  638. margin: 20rpx 30rpx;
  639. }
  640. .section-header {
  641. display: flex;
  642. flex-direction: row;
  643. align-items: center;
  644. justify-content: space-between;
  645. margin-bottom: 16rpx;
  646. }
  647. .section-title {
  648. font-size: 30rpx;
  649. font-weight: bold;
  650. color: #333;
  651. }
  652. .section-more {
  653. font-size: 24rpx;
  654. color: #5B9BD5;
  655. }
  656. /* ===== 健康报告 ===== */
  657. .report-card {
  658. background: #fff;
  659. border-radius: 20rpx;
  660. padding: 24rpx;
  661. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  662. }
  663. .report-type-tag {
  664. display: inline-block;
  665. background: #E8F5E9;
  666. color: #2E7D32;
  667. font-size: 22rpx;
  668. padding: 4rpx 16rpx;
  669. border-radius: 20rpx;
  670. margin-bottom: 16rpx;
  671. }
  672. .report-score-row {
  673. display: flex;
  674. flex-direction: row;
  675. align-items: center;
  676. }
  677. .score-circle {
  678. width: 140rpx;
  679. height: 140rpx;
  680. border-radius: 70rpx;
  681. background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
  682. display: flex;
  683. flex-direction: column;
  684. align-items: center;
  685. justify-content: center;
  686. margin-right: 24rpx;
  687. }
  688. .score-value {
  689. font-size: 48rpx;
  690. font-weight: bold;
  691. color: #1565C0;
  692. }
  693. .score-label {
  694. font-size: 20rpx;
  695. color: #64B5F6;
  696. }
  697. .report-meta {
  698. flex: 1;
  699. }
  700. .meta-item {
  701. display: flex;
  702. flex-direction: row;
  703. align-items: center;
  704. margin-bottom: 12rpx;
  705. }
  706. .meta-label {
  707. font-size: 24rpx;
  708. color: #666;
  709. width: 140rpx;
  710. }
  711. .meta-value {
  712. font-size: 26rpx;
  713. color: #333;
  714. font-weight: 500;
  715. }
  716. .report-date {
  717. font-size: 22rpx;
  718. color: #bbb;
  719. margin-top: 16rpx;
  720. }
  721. .report-empty {
  722. background: #fff;
  723. border-radius: 20rpx;
  724. padding: 40rpx;
  725. text-align: center;
  726. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  727. }
  728. .empty-tip {
  729. font-size: 28rpx;
  730. color: #999;
  731. display: block;
  732. }
  733. .empty-sub {
  734. font-size: 24rpx;
  735. color: #ccc;
  736. display: block;
  737. margin-top: 8rpx;
  738. }
  739. /* ===== 健康小贴士 ===== */
  740. .tips-list {
  741. display: flex;
  742. flex-direction: column;
  743. }
  744. .tip-card {
  745. background: #fff;
  746. border-radius: 20rpx;
  747. padding: 24rpx;
  748. margin-bottom: 16rpx;
  749. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  750. }
  751. .tip-title {
  752. font-size: 28rpx;
  753. font-weight: bold;
  754. color: #333;
  755. display: block;
  756. margin-bottom: 10rpx;
  757. }
  758. .tip-summary {
  759. font-size: 24rpx;
  760. color: #888;
  761. line-height: 1.5;
  762. display: block;
  763. }
  764. /* ===== 快捷操作 ===== */
  765. .quick-actions {
  766. display: flex;
  767. flex-direction: row;
  768. margin-top: 30rpx;
  769. }
  770. .action-btn {
  771. flex: 1;
  772. background: #fff;
  773. border-radius: 16rpx;
  774. padding: 24rpx;
  775. display: flex;
  776. flex-direction: column;
  777. align-items: center;
  778. margin-right: 20rpx;
  779. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  780. }
  781. .action-btn:last-child {
  782. margin-right: 0;
  783. }
  784. .action-icon {
  785. font-size: 48rpx;
  786. margin-bottom: 8rpx;
  787. }
  788. .action-text {
  789. font-size: 26rpx;
  790. color: #666;
  791. }
  792. /* ===== 底部 ===== */
  793. .bottom-spacer {
  794. height: 120rpx;
  795. }
  796. .func-item:active, .action-btn:active {
  797. opacity: 0.7;
  798. }
  799. /* ===== 精准营养 ===== */
  800. .nutrition-section {
  801. margin-top: 20rpx;
  802. }
  803. .nutrition-report-card {
  804. display: flex;
  805. flex-direction: row;
  806. align-items: center;
  807. background: linear-gradient(135deg, #E8F5E9, #F1F8E9);
  808. border-radius: 20rpx;
  809. padding: 28rpx 24rpx;
  810. margin-bottom: 20rpx;
  811. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  812. }
  813. .nutrition-report-left {
  814. width: 100rpx;
  815. height: 100rpx;
  816. background: rgba(255,255,255,0.7);
  817. border-radius: 20rpx;
  818. display: flex;
  819. align-items: center;
  820. justify-content: center;
  821. margin-right: 20rpx;
  822. flex-shrink: 0;
  823. }
  824. .nutrition-icon-large {
  825. font-size: 52rpx;
  826. }
  827. .nutrition-report-right {
  828. flex: 1;
  829. }
  830. .nutrition-title {
  831. font-size: 30rpx;
  832. font-weight: bold;
  833. color: #2E7D32;
  834. display: block;
  835. margin-bottom: 6rpx;
  836. }
  837. .nutrition-desc {
  838. font-size: 22rpx;
  839. color: #558B2F;
  840. line-height: 1.5;
  841. display: block;
  842. margin-bottom: 10rpx;
  843. }
  844. .nutrition-report-tags {
  845. display: flex;
  846. flex-direction: row;
  847. gap: 10rpx;
  848. }
  849. .nutrition-report-tags .tag {
  850. font-size: 20rpx;
  851. color: #33691E;
  852. background: rgba(255,255,255,0.6);
  853. padding: 4rpx 14rpx;
  854. border-radius: 20rpx;
  855. }
  856. .nutrition-arrow {
  857. font-size: 40rpx;
  858. color: #A5D6A7;
  859. margin-left: 12rpx;
  860. }
  861. .nutrition-links {
  862. margin-bottom: 20rpx;
  863. }
  864. .links-label {
  865. font-size: 26rpx;
  866. font-weight: bold;
  867. color: #333;
  868. display: block;
  869. margin-bottom: 12rpx;
  870. }
  871. .links-row {
  872. display: flex;
  873. flex-direction: row;
  874. gap: 16rpx;
  875. }
  876. .link-item {
  877. flex: 1;
  878. display: flex;
  879. flex-direction: row;
  880. align-items: center;
  881. background: #fff;
  882. border-radius: 16rpx;
  883. padding: 20rpx 18rpx;
  884. box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
  885. gap: 12rpx;
  886. }
  887. .link-item:active {
  888. opacity: 0.7;
  889. }
  890. .link-icon {
  891. font-size: 36rpx;
  892. flex-shrink: 0;
  893. }
  894. .link-texts {
  895. flex: 1;
  896. }
  897. .link-name {
  898. font-size: 24rpx;
  899. font-weight: 500;
  900. color: #333;
  901. display: block;
  902. margin-bottom: 4rpx;
  903. }
  904. .link-desc {
  905. font-size: 20rpx;
  906. color: #999;
  907. display: block;
  908. }
  909. .link-arrow {
  910. font-size: 32rpx;
  911. color: #CCC;
  912. flex-shrink: 0;
  913. }
  914. </style>