Răsfoiți Sursa

feat: 自检结果页新增「怎么看这个结果」引导卡

- 总分横幅后新增解读引导卡,包含:五维说明、总分等级解读(computed)、三级图例(健康/留意/紧绷含义)、三步行动指引
- 移除雷达图(canvas 卡片及相关方法)
- 让首次使用的家长一眼看懂结果代表什么、接下来做什么
iwt 4 zile în urmă
părinte
comite
a19109ef3f
1 a modificat fișierele cu 150 adăugiri și 0 ștergeri
  1. 150 0
      cfc-frontend/pages/family/self-check-result.vue

+ 150 - 0
cfc-frontend/pages/family/self-check-result.vue

@@ -21,6 +21,53 @@
         <text class="scr-hero-date" v-if="result.createdAt">自检时间:{{ formatDate(result.createdAt) }}</text>
       </view>
 
+      <!-- 结果解读引导卡(告诉用户结果代表什么、接下来怎么做) -->
+      <view class="scr-guide">
+        <view class="scr-guide-head">
+          <text class="scr-guide-title">📖 怎么看这个结果</text>
+        </view>
+        <text class="scr-guide-desc">这份自检测的是「身·智·富·行·心」五个维度的家庭幸福状态,每个维度 9 分,反映你近期在该方面的实际情况。</text>
+
+        <!-- 总分解读 -->
+        <view class="scr-guide-total">
+          <text class="scr-guide-total-label">你的总分 {{ result.totalScore }}/45:</text>
+          <text class="scr-guide-total-text">{{ overallExplain }}</text>
+        </view>
+
+        <!-- 维度等级图例 -->
+        <view class="scr-guide-legend">
+          <view class="scr-guide-legend-item">
+            <view class="scr-guide-legend-dot lg-healthy"></view>
+            <text class="scr-guide-legend-text">健康(7-9 分):保持就好,不用刻意加码</text>
+          </view>
+          <view class="scr-guide-legend-item">
+            <view class="scr-guide-legend-dot lg-attention"></view>
+            <text class="scr-guide-legend-text">留意(4-6 分):看看下方解读,找到能下手的一步</text>
+          </view>
+          <view class="scr-guide-legend-item">
+            <view class="scr-guide-legend-dot lg-tense"></view>
+            <text class="scr-guide-legend-text">紧绷(0-3 分):先别想着补短板,从最小行动开始</text>
+          </view>
+        </view>
+
+        <!-- 行动指引 -->
+        <view class="scr-guide-steps">
+          <text class="scr-guide-steps-title">接下来怎么做:</text>
+          <view class="scr-guide-step">
+            <text class="scr-guide-step-num">①</text>
+            <text class="scr-guide-step-text">往下看「AI 解读」,了解每个低分维度代表什么</text>
+          </view>
+          <view class="scr-guide-step">
+            <text class="scr-guide-step-num">②</text>
+            <text class="scr-guide-step-text">点底部「生成健康计划」,把建议变成可执行的任务</text>
+          </view>
+          <view class="scr-guide-step">
+            <text class="scr-guide-step-num">③</text>
+            <text class="scr-guide-step-text">15 天后再测一次,看看哪里进步了</text>
+          </view>
+        </view>
+      </view>
+
       <!-- 维度得分 -->
       <view class="scr-card">
         <view class="scr-card-title">
@@ -139,6 +186,16 @@ export default {
       return this.result && this.result.advices && this.result.advices.some(function(a) {
         return a.score != null && a.score <= 6
       })
+    },
+    overallExplain: function() {
+      var total = this.result ? (this.result.totalScore || 0) : 0
+      if (total >= 35) {
+        return '五维整体状态健康,继续保持平衡就好'
+      }
+      if (total >= 20) {
+        return '部分维度需要留意,看看下方 AI 解读找到第一步'
+      }
+      return '有几个维度比较紧绷,建议从下周微行动开始调整'
     }
   },
   onLoad: function(options) {
@@ -434,6 +491,99 @@ export default {
 .scr-dim-level.lvl-healthy { background: #E8F5E9; color: #2E7D32; }
 .scr-dim-level.lvl-attention { background: #FFF8E1; color: #F57F17; }
 .scr-dim-level.lvl-tense { background: #FFEBEE; color: #C62828; }
+.scr-guide {
+  background: #FFF7ED;
+  border-radius: 24rpx;
+  padding: 30rpx 26rpx;
+  margin-bottom: 24rpx;
+  box-shadow: 0 2rpx 12rpx rgba(249, 114, 22, 0.08);
+}
+.scr-guide-head {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20rpx;
+}
+.scr-guide-title {
+  font-size: 30rpx;
+  font-weight: 700;
+  color: #F97316;
+}
+.scr-guide-desc {
+  font-size: 24rpx;
+  color: #888;
+  line-height: 1.6;
+  margin-bottom: 24rpx;
+}
+.scr-guide-total {
+  display: flex;
+  align-items: baseline;
+  margin-bottom: 24rpx;
+}
+.scr-guide-total-label {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #333;
+  margin-right: 12rpx;
+}
+.scr-guide-total-text {
+  font-size: 48rpx;
+  font-weight: 700;
+  color: #F97316;
+}
+.scr-guide-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16rpx 24rpx;
+  margin-bottom: 24rpx;
+}
+.scr-guide-legend-item {
+  display: flex;
+  align-items: center;
+  flex: 1 1 120rpx;
+}
+.scr-guide-legend-dot {
+  width: 24rpx;
+  height: 24rpx;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.lg-healthy { background: #2E7D32; }
+.lg-attention { background: #F57F17; }
+.lg-tense { background: #C62828; }
+.scr-guide-legend-text {
+  font-size: 22rpx;
+  color: #555;
+  margin-left: 10rpx;
+}
+.scr-guide-steps {
+  margin-top: 16rpx;
+}
+.scr-guide-steps-title {
+  font-size: 24rpx;
+  color: #F97316;
+  margin-bottom: 12rpx;
+  display: block;
+}
+.scr-guide-step {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8rpx;
+}
+.scr-guide-step-num {
+  font-size: 28rpx;
+  color: #F97316;
+  margin-right: 12rpx;
+  min-width: 20rpx;
+}
+.scr-guide-step-text {
+  font-size: 24rpx;
+  color: #333;
+  flex: 1;
+}
+.scr-guide-step:last-child {
+  margin-bottom: 0;
+}
+
 .scr-dim-summary {
   flex: 1;
   font-size: 24rpx;