index.vue 29 KB

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