index.vue 30 KB

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