Browse Source

feat(miniapp): 菌群报告详情页增加指标变化区块(最近两次对比)

iwt 2 days ago
parent
commit
a53157eb6a
1 changed files with 97 additions and 2 deletions
  1. 97 2
      cfc-frontend/pages/health/gut-flora-detail.vue

+ 97 - 2
cfc-frontend/pages/health/gut-flora-detail.vue

@@ -353,10 +353,11 @@
 </template>
 
 <script>
-import { getReportDetail, editHealthReport, queryKnowledgeBase, queryIndicatorKnowledge, getGutFloraAnalysis, confirmReportPreview, discardReportDraft, parseReportDraft, getHealthFoods, getFoodCautionList, getFamilyMemberList, addFamilyMember } from '../../utils/api.js'
+import { getReportDetail, editHealthReport, queryKnowledgeBase, queryIndicatorKnowledge, getGutFloraAnalysis, confirmReportPreview, discardReportDraft, parseReportDraft, getHealthFoods, getFoodCautionList, getFamilyMemberList, addFamilyMember, getIndicatorChangeRanking } from '../../utils/api.js'
 import HealthKnowledgePopup from '@/pages/health/components/health-knowledge-popup.vue'
 import FeedbackPopup from '@/pages/health/components/feedback-popup.vue'
 import { parseDate } from '../../utils/format.js'
+import { resolveChangeStyle, formatDelta, colorClassFor } from '../../utils/indicator-change.js'
 
 var INDICATOR_TYPE_MAP = {
   '维生素': 'vitamin',
@@ -419,7 +420,9 @@ export default {
       candidates: [],
       extractedName: '',
       extractedGender: '',
-      extractedAge: ''
+      extractedAge: '',
+      changeItems: [],
+      _changeLoaded: false
     }
   },
   computed: {
@@ -661,6 +664,8 @@ riskGroupAbnormalCount: function() {
       })
       // 加载菌群功能分析
       this.loadAnalysis()
+      // 加载指标变化区块
+      this.loadChangeBlock()
     },
     loadAnalysis: function() {
       var self = this
@@ -1027,6 +1032,33 @@ applyDraftPayload: function(payload) {
       this.nutriGroupOpen = arr
       if (this.nutritionGroups.length === 0) uni.showToast({ title: '暂无营养指标', icon: 'none' })
     },
+    loadChangeBlock: function() {
+      var self = this
+      if (!this.report || !this.report.subjectId || this._changeLoaded) return
+      this._changeLoaded = true
+      getIndicatorChangeRanking({
+        subjectId: this.report.subjectId,
+        reportType: 'gut_flora',
+        scope: 'adjacent',
+        orderBy: 'magnitude',
+        limit: 6
+      }).then(function(res) {
+        var items = (res.data && res.data.items) || []
+        // 预计算展示字段,避免小程序 :class 中调用方法(微信模板编译器不支持带参方法调用)
+        items.forEach(function(it) {
+          var st = resolveChangeStyle(it.goodDirection, it.movement || 'flat')
+          it._cssClass = colorClassFor(st.cssClass)
+          it._arrow = st.arrow
+          it._trendLabel = st.trendLabel
+          it._deltaText = formatDelta(it.delta, it.deltaPct)
+        })
+        self.changeItems = items
+      }).catch(function() {})
+    },
+    getChangeKey: function(item, i) { return item.definitionId || i },
+    goCurve: function() {
+      uni.navigateTo({ url: '/pages/health/indicator-curve?subjectId=' + this.report.subjectId + '&reportType=gut_flora' })
+    },
     // 问答功能已屏蔽
     goAIChat: function() {}
   }
@@ -1253,6 +1285,69 @@ applyDraftPayload: function(payload) {
   display: block;
   margin-top: 4rpx;
 }
+/* ===== 指标变化(最近两次报告对比) ===== */
+.change-section {
+  margin: 20rpx 30rpx;
+}
+.change-card {
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 24rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
+}
+.change-row {
+  display: flex;
+  align-items: center;
+  padding: 12rpx 0;
+  border-bottom: 1rpx solid #f5f5f5;
+  font-size: 24rpx;
+}
+.change-row:last-child { border-bottom: none; }
+.change-name {
+  width: 240rpx;
+  color: #333;
+  font-weight: 500;
+  flex-shrink: 0;
+}
+.change-before {
+  color: #999;
+  width: 110rpx;
+  text-align: center;
+  flex-shrink: 0;
+}
+.change-arrow {
+  width: 50rpx;
+  text-align: center;
+  font-size: 28rpx;
+  flex-shrink: 0;
+}
+.change-after {
+  color: #333;
+  width: 110rpx;
+  text-align: center;
+  flex-shrink: 0;
+}
+.change-delta {
+  width: 120rpx;
+  text-align: center;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+.change-trend {
+  font-size: 22rpx;
+  color: #888;
+  margin-left: 8rpx;
+  flex: 1;
+}
+.change-more {
+  margin-top: 12rpx;
+  padding-top: 16rpx;
+  border-top: 1rpx solid #f0f0f0;
+}
+.change-more-text {
+  font-size: 24rpx;
+  color: #4A9BD7;
+}
 .analysis-card {
   background: #fff;
   border-radius: 16rpx;