Переглянути джерело

feat(frontend): 家庭成员卡片增加关系现状三色点

Sisyphus 1 місяць тому
батько
коміт
0f04261c23
1 змінених файлів з 32 додано та 0 видалено
  1. 32 0
      cfc-frontend/components/FamilyMemberCard.vue

+ 32 - 0
cfc-frontend/components/FamilyMemberCard.vue

@@ -13,6 +13,11 @@
       </view>
     </view>
 
+    <!-- 关系现状三色点:信任/亲密度/沟通 -->
+    <view class="card-relation-dots">
+      <view class="relation-dot" v-for="(color, idx) in relationDotColors" :key="idx" :style="{ background: color }"></view>
+    </view>
+
     <!-- 昵称 -->
     <text class="card-nickname">{{ member.nickname }}</text>
 
@@ -63,6 +68,20 @@ export default {
       if (role === 'child') return '#0EA5E9'
       if (role === 'teacher') return '#8B5CF6'
       return '#9CA3AF'
+    },
+    // 关系现状三色点颜色:信任/亲密度/沟通(绿≥70 / 黄40-69 / 红<40 / 灰空)
+    relationDotColors: function() {
+      var m = this.member
+      var empty = '#E5E7EB'
+      if (!m) return [empty, empty, empty]
+      var keys = ['trustScore', 'intimacyScore', 'communicationScore']
+      return keys.map(function(k) {
+        var v = Number(m[k]) || 0
+        if (v <= 0) return empty
+        if (v >= 70) return '#10B981'
+        if (v >= 40) return '#F59E0B'
+        return '#EF4444'
+      })
     }
   },
   methods: {
@@ -139,6 +158,19 @@ export default {
 .spouse-icon {
   font-size: 18rpx;
 }
+.card-relation-dots {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin-top: 4rpx;
+  height: 12rpx;
+}
+.relation-dot {
+  width: 12rpx;
+  height: 12rpx;
+  border-radius: 50%;
+  margin: 0 4rpx;
+}
 .card-nickname {
   font-size: 22rpx;
   color: #374151;