index.vue 27 KB

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