index.vue 28 KB

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