index.vue 31 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055
  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. <view class="section" v-if="dimensionData">
  37. <view class="section-header" v-if="dimensionData.isAverage">
  38. <text class="section-title">七维健康图</text>
  39. <text class="avg-badge">同龄同性平均值 · 上传报告后显示个人数据</text>
  40. </view>
  41. <view class="section-header" v-else>
  42. <text class="section-title">七维健康图</text>
  43. </view>
  44. <RadarChart
  45. v-if="dimensionData && dimensionData.dimensions"
  46. :dimensions="dimensionData.dimensions.map(function(d) { return { label: d.label, key: d.dimension } })"
  47. :scores="dimensionData.dimensions.map(function(d) { return d.score })"
  48. :avg-scores="radarAvgScores"
  49. fillColor="#FF8C42"
  50. gridColor="#FED7AA"
  51. labelColor="#9A3412"
  52. :width="580"
  53. :height="580"
  54. @dimensionClick="goDimensionDetail" />
  55. </view>
  56. <!-- 七维健康全景(嵌入卡片) -->
  57. <HealthDimensionsSection
  58. v-if="isLoggedIn && dimensionData && dimensionData.dimensions"
  59. :healthData="dimensionData"
  60. :activeChildId="activeChildId" />
  61. <!-- 功能入口 -->
  62. <view class="func-section" v-if="sectionVisible('func_entries')">
  63. <view class="func-grid">
  64. <view class="func-item" v-for="item in funcList" :key="item.label" @click="onFuncClick(item)">
  65. <view class="func-icon-wrap">
  66. <text class="func-icon">{{ item.icon }}</text>
  67. </view>
  68. <text class="func-label">{{ item.label }}</text>
  69. </view>
  70. </view>
  71. </view>
  72. <!-- 健康报告摘要(登录后可见) -->
  73. <view class="section" v-if="sectionVisible('health_report') && isLoggedIn">
  74. <view class="section-header">
  75. <text class="section-title">健康报告</text>
  76. <text class="section-more" @click="goToHealthReport">查看详情 ›</text>
  77. </view>
  78. <view class="report-card" v-if="latestReport">
  79. <view class="report-type-tag">{{ reportTypeLabel }}</view>
  80. <view class="report-score-row">
  81. <view class="score-circle">
  82. <text class="score-value">{{ latestReport.overallScore || '--' }}</text>
  83. <text class="score-label">综合评分</text>
  84. </view>
  85. <view class="report-meta">
  86. <view class="meta-item" v-if="latestReport.gutHealthScore">
  87. <text class="meta-label">肠道健康</text>
  88. <text class="meta-value">{{ latestReport.gutHealthScore }}</text>
  89. </view>
  90. <view class="meta-item" v-if="latestReport.nutritionScore">
  91. <text class="meta-label">营养状况</text>
  92. <text class="meta-value">{{ latestReport.nutritionScore }}</text>
  93. </view>
  94. <view class="meta-item" v-if="latestReport.gutAge">
  95. <text class="meta-label">肠道年龄</text>
  96. <text class="meta-value">{{ latestReport.gutAge }}</text>
  97. </view>
  98. </view>
  99. </view>
  100. <text class="report-date">报告日期:{{ formatDate(latestReport.reportDate) }}</text>
  101. </view>
  102. <view class="report-empty" v-else>
  103. <text class="empty-tip">暂无健康报告</text>
  104. <text class="empty-sub">规划师录入后将自动显示</text>
  105. </view>
  106. </view>
  107. <!-- ===== 精准营养(上传报告+产品+文章) ===== -->
  108. <view class="section nutrition-section" v-if="isLoggedIn">
  109. <view class="section-header">
  110. <text class="section-title">🥗 精准营养</text>
  111. </view>
  112. <!-- 上传报告入口 -->
  113. <view class="nutrition-report-card" @click="goToUploadReport">
  114. <view class="nutrition-report-left">
  115. <text class="nutrition-icon-large">📋</text>
  116. </view>
  117. <view class="nutrition-report-right">
  118. <text class="nutrition-title">上传健康报告</text>
  119. <text class="nutrition-desc">上传体检报告或肠道检测报告,AI智能解读分析,获取个性化营养方案</text>
  120. <view class="nutrition-report-tags">
  121. <text class="tag">体检报告</text>
  122. <text class="tag">肠道检测</text>
  123. <text class="tag">AI解读</text>
  124. </view>
  125. </view>
  126. <text class="nutrition-arrow">›</text>
  127. </view>
  128. </view>
  129. <!-- 维度任务 -->
  130. <DimensionTasks
  131. v-if="isLoggedIn"
  132. dimensionCode="body"
  133. :tasks="dimensionTasks"
  134. @taskClick="onTaskClick"
  135. @moreTasks="goTasks" />
  136. <!-- 维度活动 -->
  137. <DimensionActivities
  138. dimensionCode="body"
  139. :activities="dimensionActivities"
  140. :isLoggedIn="isLoggedIn"
  141. @activityClick="goActivityDetail"
  142. @moreActivities="goMoreActivities" />
  143. <!-- 维度商品 -->
  144. <DimensionProducts
  145. dimensionCode="body"
  146. :products="dimensionProducts"
  147. @productClick="goProductDetail"
  148. @moreProducts="goMoreProducts" />
  149. <!-- 推荐阅读 -->
  150. <DimensionArticles
  151. dimensionCode="body"
  152. :articles="bodyArticles"
  153. :isLoggedIn="isLoggedIn"
  154. @articleClick="goArticleDetail"
  155. @moreArticles="goMoreArticles" />
  156. <!-- 快捷操作按钮 -->
  157. <view class="section quick-actions" v-if="isLoggedIn">
  158. <view class="action-btn" @click="goToHealthReport">
  159. <text class="action-icon">📋</text>
  160. <text class="action-text">报告详情</text>
  161. </view>
  162. <view class="action-btn" @click="goToCheckin">
  163. <text class="action-icon">🏃</text>
  164. <text class="action-text">健康打卡</text>
  165. </view>
  166. <view class="action-btn" @click="goToNutritionProfile">
  167. <text class="action-icon">🥗</text>
  168. <text class="action-text">营养档案</text>
  169. </view>
  170. </view>
  171. <!-- ===== 重要关系维护 + 关系健康概览 ===== -->
  172. <FamilyRelationshipSection
  173. :contactList="contactList"
  174. :healthAlerts="healthAlerts"
  175. :milestones="milestones"
  176. :isLoggedIn="isLoggedIn"
  177. @manage="goFamilyMembers" />
  178. <!-- 底部占位 -->
  179. <view class="bottom-spacer"></view>
  180. <AIFloatingAvatar />
  181. </view>
  182. </template>
  183. <script>
  184. import TabTransition from '../../components/tab-transition.vue'
  185. import PageBanner from '../../components/PageBanner.vue'
  186. import LoginGuideCard from '../../components/LoginGuideCard.vue'
  187. import FamilyEnergyBar from '../../components/FamilyEnergyBar.vue'
  188. import DimensionTasks from '../../components/DimensionTasks.vue'
  189. import DimensionActivities from '../../components/DimensionActivities.vue'
  190. import DimensionProducts from '../../components/DimensionProducts.vue'
  191. import DimensionArticles from '../../components/DimensionArticles.vue'
  192. import FamilyRelationGraph from '../../components/FamilyRelationGraph.vue'
  193. import RadarChart from '../../components/RadarChart.vue'
  194. import HealthDimensionsSection from '../../components/HealthDimensionsSection.vue'
  195. import AIFloatingAvatar from '../../components/AIFloatingAvatar.vue'
  196. import FamilyRelationshipSection from '../../components/FamilyRelationshipSection.vue'
  197. import { getVisibleSections, getEnergyOverview, getChildren, getTodayTasksByCategory, getActivityList, getProductsByDomain, getFamilyEnergySandbox, getVisibleFamilyMembers, getDimensionOverview, getFeaturedArticles, getContactList, getHealthAlerts, getMilestones } from '../../utils/api.js'
  198. import config from '../../config.js'
  199. var BASE_URL = config.api('')
  200. const healthRequest = function(url, data) {
  201. var token = uni.getStorageSync('token')
  202. return new Promise(function(resolve, reject) {
  203. uni.request({
  204. url: BASE_URL + url,
  205. method: 'POST',
  206. data: data,
  207. header: {
  208. 'Content-Type': 'application/json',
  209. 'Authorization': token ? 'Bearer ' + token : ''
  210. },
  211. success: function(res) {
  212. if (res.data.code === 200) {
  213. resolve(res.data)
  214. } else {
  215. reject(res.data)
  216. }
  217. },
  218. fail: function(err) {
  219. reject(err)
  220. }
  221. })
  222. })
  223. }
  224. export default {
  225. components: { TabTransition, PageBanner, LoginGuideCard, FamilyEnergyBar, DimensionTasks, DimensionActivities, DimensionProducts, DimensionArticles, FamilyRelationGraph, RadarChart, HealthDimensionsSection, AIFloatingAvatar, FamilyRelationshipSection },
  226. data() {
  227. return {
  228. isLoggedIn: false,
  229. role: null,
  230. showTabTransition: true,
  231. activeChildId: null,
  232. activeChildName: '',
  233. userName: '',
  234. children: [],
  235. familyMembersVisible: [],
  236. sandboxData: null,
  237. dualDimension: null,
  238. visibleSections: [],
  239. latestReport: null,
  240. dimensionTasks: [],
  241. dimensionActivities: [],
  242. dimensionProducts: [],
  243. bodyArticles: [],
  244. dimensionData: null,
  245. /** Mock 平均值(7维):生长发育/睡眠质量/视力健康/免疫力/营养均衡/肠胃健康/运动活力 */
  246. radarAvgScores: [72, 68, 75, 70, 73, 69, 71],
  247. funcList: [
  248. { icon: '\u{1F3C3}', label: '运动', needLogin: true, page: '/pages/body/exercise-record' },
  249. { icon: '\u{1F957}', label: '饮食', needLogin: true, page: '/pages/body/meal-record' },
  250. { icon: '\u{1F634}', label: '作息', needLogin: true, page: '/pages/body/sleep-record' },
  251. { icon: '\u{1F9D8}', label: '冥想', needLogin: true, page: '/pages/health/meditation-index' }
  252. ],
  253. contactList: [],
  254. healthAlerts: [],
  255. milestones: []
  256. }
  257. },
  258. computed: {
  259. reportTypeLabel: function() {
  260. if (!this.latestReport) return ''
  261. return this.latestReport.reportType === 'gut_flora' ? '肠道检测报告' : '体检报告'
  262. },
  263. energyMapForGraph: function() {
  264. var map = {}
  265. if (this.sandboxData && this.sandboxData.members) {
  266. for (var i = 0; i < this.sandboxData.members.length; i++) {
  267. var m = this.sandboxData.members[i]
  268. map[m.memberId || m.id] = {
  269. bodyScore: m.bodyScore || 0,
  270. mindScore: m.mindScore || 0,
  271. actionScore: m.actionScore || 0
  272. }
  273. }
  274. }
  275. return map
  276. },
  277. intimacyMapForGraph: function() {
  278. return {}
  279. }
  280. },
  281. onShow() {
  282. this.showTabTransition = true
  283. var token = uni.getStorageSync('token')
  284. this.isLoggedIn = !!token
  285. if (this.isLoggedIn) {
  286. this.role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || null
  287. this.userName = uni.getStorageSync('nickname') || uni.getStorageSync('userName') || '家长'
  288. }
  289. this.loadSectionConfig()
  290. if (this.isLoggedIn) {
  291. this.loadChildren()
  292. this.loadFamilyMembersVisible()
  293. this.loadRelationshipHealth()
  294. }
  295. // 游客也能浏览活动和商品
  296. this.loadDimensionActivities()
  297. this.loadDimensionProducts()
  298. // 游客也能浏览文章
  299. this.loadFeaturedArticles()
  300. this._watchPageReady()
  301. },
  302. methods: {
  303. loadSectionConfig: function() {
  304. var baseSections = ['func_entries']
  305. if (!uni.getStorageSync('token')) {
  306. this.visibleSections = baseSections
  307. return
  308. }
  309. var role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || null
  310. var self = this
  311. getVisibleSections({ pageKey: 'body', role: role }).then(function(res) {
  312. if (res.code === 200 && res.data) {
  313. var keys = res.data.map(function(s) { return s.sectionKey })
  314. var merged = baseSections.slice()
  315. keys.forEach(function(k) { if (merged.indexOf(k) === -1) merged.push(k) })
  316. self.visibleSections = merged
  317. }
  318. }).catch(function(e) {
  319. self.visibleSections = ['func_entries']
  320. })
  321. },
  322. loadChildren: function() {
  323. var self = this
  324. getChildren().then(function(res) {
  325. if (res.code === 200 && res.data) {
  326. self.children = res.data
  327. var savedChildId = uni.getStorageSync('currentChildId')
  328. var found = false
  329. for (var i = 0; i < self.children.length; i++) {
  330. if (self.children[i].childId === savedChildId) {
  331. self.activeChildId = savedChildId
  332. self.activeChildName = self.children[i].name || self.children[i].nickname || '孩子'
  333. found = true
  334. break
  335. }
  336. }
  337. if (!found && self.children.length > 0) {
  338. self.activeChildId = self.children[0].childId
  339. self.activeChildName = self.children[0].name || self.children[0].nickname || '孩子'
  340. uni.setStorageSync('currentChildId', self.activeChildId)
  341. }
  342. if (self.activeChildId) {
  343. self.loadDashboardData()
  344. }
  345. self.loadContacts()
  346. }
  347. }).catch(function(e) {
  348. console.log('获取孩子列表失败', e)
  349. })
  350. },
  351. loadDashboardData: function() {
  352. if (!this.activeChildId) return
  353. this.loadHealthReport()
  354. this.loadEnergyData()
  355. this.loadDimensionTasks()
  356. this.loadDimensionActivities()
  357. this.loadDimensionProducts()
  358. this.loadSandboxData()
  359. this.loadHealthDimensions()
  360. },
  361. loadHealthDimensions: function() {
  362. if (!this.activeChildId) {
  363. console.log('[body] loadHealthDimensions skipped: no activeChildId')
  364. return
  365. }
  366. var self = this
  367. getDimensionOverview({ memberId: this.activeChildId }).then(function(res) {
  368. if (res && res.data) {
  369. self.dimensionData = res.data
  370. console.log('[body] dimensionData loaded:', res.data.dimensions ? res.data.dimensions.length : 0, 'dimensions')
  371. } else if (res) {
  372. console.warn('[body] dimension API error:', res.message || res.code)
  373. }
  374. }).catch(function(e) {
  375. console.error('[body] loadHealthDimensions failed', e)
  376. })
  377. },
  378. loadSandboxData: function() {
  379. var self = this
  380. getFamilyEnergySandbox().then(function(res) {
  381. if (res && res.data) {
  382. self.sandboxData = res.data
  383. }
  384. }).catch(function(e) {
  385. console.log('获取沙盘数据失败', e)
  386. })
  387. },
  388. loadHealthReport: function() {
  389. var self = this
  390. healthRequest('/api/health/report/latest', { childId: this.activeChildId }).then(function(res) {
  391. if (res.data) {
  392. self.latestReport = res.data
  393. }
  394. }).catch(function(e) {
  395. console.log('获取健康报告失败', e)
  396. })
  397. },
  398. loadEnergyData: function() {
  399. var self = this
  400. getEnergyOverview(this.activeChildId).then(function(res) {
  401. if (res && res.data) {
  402. var dims = res.data.dimensions
  403. if (dims && dims.length > 0) {
  404. for (var i = 0; i < dims.length; i++) {
  405. if (dims[i].code === 'body') {
  406. self.dualDimension = dims[i]
  407. break
  408. }
  409. }
  410. }
  411. }
  412. }).catch(function(e) {
  413. console.log('获取能量概览失败', e)
  414. })
  415. },
  416. loadDimensionTasks: function() {
  417. var self = this
  418. if (!this.activeChildId) return
  419. getTodayTasksByCategory(this.activeChildId, 'body').then(function(res) {
  420. if (res && res.data) {
  421. self.dimensionTasks = Array.isArray(res.data) ? res.data.slice(0, 5) : []
  422. }
  423. }).catch(function() { self.dimensionTasks = [] })
  424. },
  425. loadDimensionActivities: function() {
  426. var self = this
  427. getActivityList({ dimensionCode: 'body', page: 1, size: 3 }).then(function(res) {
  428. if (res && res.data) {
  429. var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
  430. self.dimensionActivities = list.slice(0, 3)
  431. }
  432. }).catch(function() { self.dimensionActivities = [] })
  433. },
  434. loadDimensionProducts: function() {
  435. var self = this
  436. getProductsByDomain('body', 1, 4).then(function(res) {
  437. if (res && res.data) {
  438. var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
  439. self.dimensionProducts = list.slice(0, 4)
  440. }
  441. }).catch(function() { self.dimensionProducts = [] })
  442. },
  443. loadFeaturedArticles: function() {
  444. var self = this
  445. getFeaturedArticles({ size: 5, dimensionCode: 'body' }).then(function(res) {
  446. if (res.code === 200 && res.data) {
  447. var gradientColors = [
  448. 'linear-gradient(135deg, #FF8C42, #FFB074)',
  449. 'linear-gradient(135deg, #FF6B9D, #FF9DBD)',
  450. 'linear-gradient(135deg, #6366F1, #818CF8)',
  451. 'linear-gradient(135deg, #10B981, #34D399)',
  452. 'linear-gradient(135deg, #F59E0B, #FBBF24)'
  453. ]
  454. var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
  455. self.bodyArticles = list.map(function(item, index) {
  456. return {
  457. id: item.id,
  458. category: item.categoryName || '身体健康',
  459. categoryColor: gradientColors[index % gradientColors.length],
  460. title: item.title || '',
  461. summary: item.summary || '',
  462. views: item.viewCount ? String(item.viewCount) : '0',
  463. date: item.publishedAt ? item.publishedAt.slice(0, 10) : ''
  464. }
  465. })
  466. }
  467. }.bind(this)).catch(function() {})
  468. },
  469. onChildChanged: function(child) {
  470. this.activeChildId = child.childId
  471. this.activeChildName = child.name || child.nickname || '孩子'
  472. this.loadDashboardData()
  473. },
  474. loadFamilyMembersVisible: function() {
  475. var self = this
  476. getVisibleFamilyMembers().then(function(res) {
  477. self.familyMembersVisible = res.data || []
  478. }).catch(function(e) {
  479. console.log('获取可见家庭成员失败', e)
  480. self.familyMembersVisible = []
  481. })
  482. },
  483. scrollToSection: function(section) {
  484. uni.pageScrollTo({ selector: '#' + section, duration: 300 })
  485. },
  486. onTaskClick: function(task) {
  487. uni.navigateTo({ url: '/pages/tasks/tasks' })
  488. },
  489. goActivityDetail: function(act) {
  490. if (!act || !act.id) return
  491. uni.navigateTo({ url: '/pages/discover-detail/activity-detail/activity-detail?id=' + act.id })
  492. },
  493. goMoreActivities: function() {
  494. uni.navigateTo({ url: '/pages/activity/index' })
  495. },
  496. goProductDetail: function(prod) {
  497. uni.navigateTo({ url: '/pages/discover-detail/product-detail/product-detail?id=' + prod.id })
  498. },
  499. goMoreProducts: function() {
  500. uni.navigateTo({ url: '/pages/shop/index' })
  501. },
  502. goArticleDetail: function(article) {
  503. var id = article.id || article
  504. uni.navigateTo({ url: '/pages/mind-detail/article-detail?id=' + id })
  505. },
  506. goMoreArticles: function() {
  507. uni.navigateTo({ url: '/pages/article-center/index?dimension=body' })
  508. },
  509. goTasks: function() { uni.switchTab({ url: '/pages/tasks/tasks' }) },
  510. goMemberDetail: function(member) {
  511. if (!member || !member.memberId) return
  512. uni.navigateTo({
  513. url: '/pages/member-detail/member-detail?memberId=' + member.memberId + '&memberType=' + (member.memberType || 'child') + '&entrySource=relation-graph&dimensionCode=body'
  514. })
  515. },
  516. goFamilyMembers: function() {
  517. uni.navigateTo({ url: '/pages/profile/family-members' })
  518. },
  519. sectionVisible: function(key) {
  520. return this.visibleSections.length === 0 || this.visibleSections.indexOf(key) !== -1
  521. },
  522. onFuncClick: function(item) {
  523. if (item.needLogin && !this.isLoggedIn) {
  524. uni.showModal({
  525. title: '提示',
  526. content: '请先登录后使用此功能',
  527. success: function(res) {
  528. if (res.confirm) uni.navigateTo({ url: '/pages/login/login' })
  529. }
  530. })
  531. return
  532. }
  533. if (item.page === 'health-dimensions') {
  534. if (!this.activeChildId) {
  535. uni.showToast({ title: '请先选择孩子', icon: 'none' })
  536. return
  537. }
  538. uni.navigateTo({ url: '/pages/body-detail/health-dimensions?childId=' + this.activeChildId })
  539. return
  540. }
  541. if (item.page) uni.navigateTo({ url: item.page })
  542. },
  543. goToHealthReport: function() {
  544. var id = this.activeChildId || uni.getStorageSync('currentChildId')
  545. if (!id) {
  546. uni.showToast({ title: '请先选择成员', icon: 'none' })
  547. return
  548. }
  549. uni.navigateTo({ url: '/pages/body-detail/health-report?childId=' + id })
  550. },
  551. goDimensionDetail: function(dimKey) {
  552. uni.navigateTo({ url: '/pages/body/dimension-detail?dimension=' + dimKey + '&childId=' + this.activeChildId })
  553. },
  554. goToCheckin: function() {
  555. var id = this.activeChildId || uni.getStorageSync('currentChildId')
  556. if (!id) {
  557. uni.showToast({ title: '请先选择成员', icon: 'none' })
  558. return
  559. }
  560. uni.navigateTo({ url: '/pages/body-detail/checkin?childId=' + id })
  561. },
  562. goToNutritionProfile: function() {
  563. var id = this.activeChildId || uni.getStorageSync('currentChildId')
  564. if (!id) {
  565. uni.showToast({ title: '请先选择成员', icon: 'none' })
  566. return
  567. }
  568. uni.navigateTo({ url: '/pages/health/nutrition-profile?childId=' + id })
  569. },
  570. goToUploadReport: function() {
  571. var id = this.activeChildId || uni.getStorageSync('currentChildId') || ''
  572. uni.navigateTo({ url: '/pages/health/report-upload?childId=' + id + '&from=body' })
  573. },
  574. // ===== 重要关系 =====
  575. loadContacts: function() {
  576. var self = this
  577. getContactList({}).then(function(res) {
  578. if (res.code === 200 && res.data) {
  579. self.contactList = Array.isArray(res.data) ? res.data : []
  580. }
  581. }).catch(function(e) {
  582. console.log('获取联系人失败', e)
  583. })
  584. },
  585. loadRelationshipHealth: function() {
  586. var self = this
  587. getHealthAlerts({}).then(function(res) {
  588. if (res.code === 200 && res.data) {
  589. self.healthAlerts = Array.isArray(res.data) ? res.data : []
  590. }
  591. }).catch(function() {
  592. self.healthAlerts = []
  593. })
  594. getMilestones({}, 30).then(function(res) {
  595. if (res.code === 200 && res.data) {
  596. self.milestones = Array.isArray(res.data) ? res.data : []
  597. }
  598. }).catch(function() {
  599. self.milestones = []
  600. })
  601. },
  602. onContactClick: function(item) {
  603. uni.navigateTo({ url: '/pages/body-detail/contact-detail?id=' + item.id })
  604. },
  605. onShowImport: function() {
  606. uni.showToast({ title: '导入通讯录', icon: 'none' })
  607. },
  608. goInteractionLog: function(memberId) {
  609. if (memberId) {
  610. uni.navigateTo({ url: '/pages/body-detail/interaction-log?memberId=' + memberId })
  611. } else {
  612. uni.navigateTo({ url: '/pages/body-detail/interaction-log' })
  613. }
  614. },
  615. goRelationshipQuestionnaire: function() {
  616. uni.navigateTo({ url: '/pages/body-detail/relationship-questionnaire' })
  617. },
  618. formatDate: function(dateStr) {
  619. if (!dateStr) return '--'
  620. try {
  621. var d = new Date(dateStr)
  622. var y = d.getFullYear()
  623. var m = ('' + (d.getMonth() + 1)).padStart(2, '0')
  624. var day = ('' + d.getDate()).padStart(2, '0')
  625. return y + '-' + m + '-' + day
  626. } catch (e) {
  627. return dateStr
  628. }
  629. },
  630. _watchPageReady() {
  631. var self = this
  632. var unwatch = this.$watch(function() {
  633. if (self.isLoggedIn) {
  634. return !!(self.dualDimension || self.sandboxData || (self.dimensionTasks && self.dimensionTasks.length > 0))
  635. }
  636. return !!(self.dimensionActivities && self.dimensionActivities.length > 0) ||
  637. !!(self.dimensionProducts && self.dimensionProducts.length > 0)
  638. }, function(val) {
  639. if (val) {
  640. if (unwatch) unwatch()
  641. self.showTabTransition = false
  642. }
  643. })
  644. setTimeout(function() {
  645. if (unwatch) unwatch()
  646. self.showTabTransition = false
  647. }, 5000)
  648. }
  649. }
  650. }
  651. </script>
  652. <style scoped>
  653. .body-container {
  654. min-height: 100vh;
  655. background: #f5f7fa;
  656. padding-bottom: 120rpx;
  657. }
  658. /* ===== 功能入口 ===== */
  659. .func-section {
  660. margin: 20rpx 30rpx;
  661. }
  662. .func-grid {
  663. display: flex;
  664. flex-direction: row;
  665. justify-content: space-between;
  666. background: #fff;
  667. border-radius: 20rpx;
  668. padding: 24rpx 16rpx;
  669. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  670. }
  671. .func-item {
  672. display: flex;
  673. flex-direction: column;
  674. align-items: center;
  675. flex: 1;
  676. }
  677. .func-icon-wrap {
  678. width: 80rpx;
  679. height: 80rpx;
  680. border-radius: 40rpx;
  681. background: linear-gradient(135deg, #D6EAF8, #EBF2FA);
  682. display: flex;
  683. align-items: center;
  684. justify-content: center;
  685. margin-bottom: 10rpx;
  686. }
  687. .func-icon {
  688. font-size: 40rpx;
  689. }
  690. .func-label {
  691. font-size: 22rpx;
  692. color: #666;
  693. font-weight: 500;
  694. }
  695. /* ===== 通用区块 ===== */
  696. .section {
  697. margin: 20rpx 30rpx;
  698. }
  699. .section-header {
  700. display: flex;
  701. flex-direction: row;
  702. align-items: center;
  703. justify-content: space-between;
  704. margin-bottom: 16rpx;
  705. }
  706. .section-title {
  707. font-size: 30rpx;
  708. font-weight: bold;
  709. color: #333;
  710. }
  711. .avg-badge {
  712. font-size: 20rpx;
  713. color: #F97316;
  714. background: #FFF7ED;
  715. padding: 4rpx 12rpx;
  716. border-radius: 20rpx;
  717. margin-left: 12rpx;
  718. }
  719. .section-more {
  720. font-size: 24rpx;
  721. color: #5B9BD5;
  722. }
  723. /* ===== 健康报告 ===== */
  724. .report-card {
  725. background: #fff;
  726. border-radius: 20rpx;
  727. padding: 24rpx;
  728. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  729. }
  730. .report-type-tag {
  731. display: inline-block;
  732. background: #E8F5E9;
  733. color: #2E7D32;
  734. font-size: 22rpx;
  735. padding: 4rpx 16rpx;
  736. border-radius: 20rpx;
  737. margin-bottom: 16rpx;
  738. }
  739. .report-score-row {
  740. display: flex;
  741. flex-direction: row;
  742. align-items: center;
  743. }
  744. .score-circle {
  745. width: 140rpx;
  746. height: 140rpx;
  747. border-radius: 70rpx;
  748. background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
  749. display: flex;
  750. flex-direction: column;
  751. align-items: center;
  752. justify-content: center;
  753. margin-right: 24rpx;
  754. }
  755. .score-value {
  756. font-size: 48rpx;
  757. font-weight: bold;
  758. color: #1565C0;
  759. }
  760. .score-label {
  761. font-size: 20rpx;
  762. color: #64B5F6;
  763. }
  764. .report-meta {
  765. flex: 1;
  766. }
  767. .meta-item {
  768. display: flex;
  769. flex-direction: row;
  770. align-items: center;
  771. margin-bottom: 12rpx;
  772. }
  773. .meta-label {
  774. font-size: 24rpx;
  775. color: #666;
  776. width: 140rpx;
  777. }
  778. .meta-value {
  779. font-size: 26rpx;
  780. color: #333;
  781. font-weight: 500;
  782. }
  783. .report-date {
  784. font-size: 22rpx;
  785. color: #bbb;
  786. margin-top: 16rpx;
  787. }
  788. .report-empty {
  789. background: #fff;
  790. border-radius: 20rpx;
  791. padding: 40rpx;
  792. text-align: center;
  793. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  794. }
  795. .empty-tip {
  796. font-size: 28rpx;
  797. color: #999;
  798. display: block;
  799. }
  800. .empty-sub {
  801. font-size: 24rpx;
  802. color: #ccc;
  803. display: block;
  804. margin-top: 8rpx;
  805. }
  806. /* ===== 快捷操作 ===== */
  807. .quick-actions {
  808. display: flex;
  809. flex-direction: row;
  810. margin-top: 30rpx;
  811. }
  812. .action-btn {
  813. flex: 1;
  814. background: #fff;
  815. border-radius: 16rpx;
  816. padding: 24rpx;
  817. display: flex;
  818. flex-direction: column;
  819. align-items: center;
  820. margin-right: 20rpx;
  821. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  822. }
  823. .action-btn:last-child {
  824. margin-right: 0;
  825. }
  826. .action-icon {
  827. font-size: 48rpx;
  828. margin-bottom: 8rpx;
  829. }
  830. .action-text {
  831. font-size: 26rpx;
  832. color: #666;
  833. }
  834. /* ===== 底部 ===== */
  835. .bottom-spacer {
  836. height: 120rpx;
  837. }
  838. .func-item:active, .action-btn:active {
  839. opacity: 0.7;
  840. }
  841. /* ===== 精准营养 ===== */
  842. .nutrition-section {
  843. margin-top: 20rpx;
  844. }
  845. .nutrition-report-card {
  846. display: flex;
  847. flex-direction: row;
  848. align-items: center;
  849. background: linear-gradient(135deg, #E8F5E9, #F1F8E9);
  850. border-radius: 20rpx;
  851. padding: 28rpx 24rpx;
  852. margin-bottom: 20rpx;
  853. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  854. }
  855. .nutrition-report-left {
  856. width: 100rpx;
  857. height: 100rpx;
  858. background: rgba(255,255,255,0.7);
  859. border-radius: 20rpx;
  860. display: flex;
  861. align-items: center;
  862. justify-content: center;
  863. margin-right: 20rpx;
  864. flex-shrink: 0;
  865. }
  866. .nutrition-icon-large {
  867. font-size: 52rpx;
  868. }
  869. .nutrition-report-right {
  870. flex: 1;
  871. }
  872. .nutrition-title {
  873. font-size: 30rpx;
  874. font-weight: bold;
  875. color: #2E7D32;
  876. display: block;
  877. margin-bottom: 6rpx;
  878. }
  879. .nutrition-desc {
  880. font-size: 22rpx;
  881. color: #558B2F;
  882. line-height: 1.5;
  883. display: block;
  884. margin-bottom: 10rpx;
  885. }
  886. .nutrition-report-tags {
  887. display: flex;
  888. flex-direction: row;
  889. gap: 10rpx;
  890. }
  891. .nutrition-report-tags .tag {
  892. font-size: 20rpx;
  893. color: #33691E;
  894. background: rgba(255,255,255,0.6);
  895. padding: 4rpx 14rpx;
  896. border-radius: 20rpx;
  897. }
  898. .nutrition-arrow {
  899. font-size: 40rpx;
  900. color: #A5D6A7;
  901. margin-left: 12rpx;
  902. }
  903. .nutrition-links {
  904. margin-bottom: 20rpx;
  905. }
  906. .links-label {
  907. font-size: 26rpx;
  908. font-weight: bold;
  909. color: #333;
  910. display: block;
  911. margin-bottom: 12rpx;
  912. }
  913. .links-row {
  914. display: flex;
  915. flex-direction: row;
  916. gap: 16rpx;
  917. }
  918. .link-item {
  919. flex: 1;
  920. display: flex;
  921. flex-direction: row;
  922. align-items: center;
  923. background: #fff;
  924. border-radius: 16rpx;
  925. padding: 20rpx 18rpx;
  926. box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
  927. gap: 12rpx;
  928. }
  929. .link-item:active {
  930. opacity: 0.7;
  931. }
  932. .link-icon {
  933. font-size: 36rpx;
  934. flex-shrink: 0;
  935. }
  936. .link-texts {
  937. flex: 1;
  938. }
  939. .link-name {
  940. font-size: 24rpx;
  941. font-weight: 500;
  942. color: #333;
  943. display: block;
  944. margin-bottom: 4rpx;
  945. }
  946. .link-desc {
  947. font-size: 20rpx;
  948. color: #999;
  949. display: block;
  950. }
  951. .link-arrow {
  952. font-size: 32rpx;
  953. color: #CCC;
  954. flex-shrink: 0;
  955. }
  956. /* ===== 推荐阅读 ===== */
  957. .article-list {
  958. display: flex;
  959. flex-direction: column;
  960. gap: 16rpx;
  961. }
  962. .article-card {
  963. background: #fff;
  964. border-radius: 16rpx;
  965. padding: 24rpx;
  966. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  967. }
  968. .article-card:active {
  969. opacity: 0.8;
  970. }
  971. .article-category {
  972. display: inline-block;
  973. padding: 4rpx 14rpx;
  974. border-radius: 8rpx;
  975. margin-bottom: 10rpx;
  976. }
  977. .article-category-text {
  978. font-size: 20rpx;
  979. color: #fff;
  980. }
  981. .article-title {
  982. display: block;
  983. font-size: 28rpx;
  984. font-weight: bold;
  985. color: #333;
  986. margin-bottom: 8rpx;
  987. line-height: 1.4;
  988. }
  989. .article-summary {
  990. display: block;
  991. font-size: 24rpx;
  992. color: #888;
  993. line-height: 1.5;
  994. margin-bottom: 12rpx;
  995. overflow: hidden;
  996. text-overflow: ellipsis;
  997. display: -webkit-box;
  998. -webkit-line-clamp: 2;
  999. -webkit-box-orient: vertical;
  1000. }
  1001. .article-meta {
  1002. display: flex;
  1003. align-items: center;
  1004. gap: 16rpx;
  1005. }
  1006. .meta-item {
  1007. display: flex;
  1008. align-items: center;
  1009. gap: 4rpx;
  1010. }
  1011. .meta-icon {
  1012. font-size: 24rpx;
  1013. }
  1014. .meta-text {
  1015. font-size: 22rpx;
  1016. color: #999;
  1017. }
  1018. .article-date {
  1019. font-size: 22rpx;
  1020. color: #bbb;
  1021. }
  1022. </style>