|
|
@@ -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;
|