cfc/cfc-frontend/components/member-detail-sections/mind-section.vue

<template>
  <view class="mind-section">
    <!-- 亲密关系评分 -->
    <view class="section-card" v-if="relationScores && relationScores.scores">
      <view class="section-header">
        <text class="section-title">💕 亲密关系评分</text>
      </view>
      <view class="score-item" v-for="(score, key) in relationScores.scores" :key="key">
        <text class="score-label">{{ score.label || key }}</text>
        <view class="score-bar-bg">
          <view class="score-bar-fill" :style="'width:' + (score.value || 0) + '%'"></view>
        </view>
        <text class="score-value">{{ score.value || 0 }}</text>
      </view>
    </view>

    <!-- 联系人 -->
    <view class="section-card" v-if="contactList.length > 0">
      <view class="section-header">
        <text class="section-title">📞 重要联系人</text>
      </view>
      <view class="contact-item" v-for="contact in contactList" :key="contact.id" @click="goContactDetail(contact)">
        <text class="contact-name">{{ contact.name }}</text>
        <text class="contact-relation">{{ contact.relation || '' }}</text>
        <text class="contact-phone">{{ contact.phone || '' }}</text>
      </view>
    </view>

    <!-- 健康告警 -->
    <view class="section-card" v-if="healthAlerts && healthAlerts.length > 0">
      <view class="section-header">
        <text class="section-title">⚠️ 健康告警</text>
      </view>
      <view class="alert-item" v-for="alert in healthAlerts" :key="alert.id">
        <text class="alert-type">{{ alert.type }}</text>
        <text class="alert-desc">{{ alert.description }}</text>
      </view>
    </view>

    <!-- 里程碑 -->
    <view class="section-card" v-if="milestones && milestones.length > 0">
      <view class="section-header">
        <text class="section-title">🎯 即将到来的里程碑</text>
      </view>
      <view class="milestone-item" v-for="ms in milestones" :key="ms.id || ms.title">
        <text class="milestone-title">{{ ms.title }}</text>
        <text class="milestone-date">{{ ms.date }}</text>
      </view>
    </view>

    <!-- 加载中 -->
    <view class="loading" v-if="loading">加载中...</view>
  </view>
</template>

<script>
import { getRelationshipScores, getContactList, getHealthAlerts, getMilestones } from '../../utils/api.js'

export default {
  props: {
    memberId: { type: [Number, String], default: null },
    childId: { type: [Number, String], default: null },
    memberType: { type: String, default: '' },
    memberInfo: { type: Object, default: null },
    sandboxData: { type: Object, default: null },
    energyMap: { type: Object, default: null }
  },
  data: function() {
    return {
      loading: true,
      relationScores: null,
      contactList: [],
      healthAlerts: [],
      milestones: []
    }
  },
  mounted: function() {
    this.loadData()
  },
  methods: {
    loadData: function() {
      var self = this
      var familyId = (this.memberInfo && this.memberInfo.familyId) || ''

      if (familyId) {
        getRelationshipScores(familyId).then(function(res) {
          if (res.code === 200 && res.data) {
            self.relationScores = res.data
          }
        }).catch(function(e) { console.log('加载关系评分失败', e) })

        getContactList({ familyId: familyId }).then(function(res) {
          if (res.code === 200 && res.data) {
            self.contactList = Array.isArray(res.data) ? res.data : (res.data.records || [])
          }
        }).catch(function(e) { console.log('加载联系人失败', e) })

        getHealthAlerts(familyId).then(function(res) {
          if (res.code === 200 && res.data) {
            self.healthAlerts = Array.isArray(res.data) ? res.data : []
          }
        }).catch(function(e) { console.log('加载告警失败', e) })

        getMilestones(familyId, 30).then(function(res) {
          if (res.code === 200 && res.data) {
            self.milestones = Array.isArray(res.data) ? res.data : []
          }
        }).catch(function(e) { console.log('加载里程碑失败', e) })
      }
      this.loading = false
    },
    goContactDetail: function(contact) {
      uni.navigateTo({ url: '/pages/mind/contact-detail?id=' + contact.id })
    }
  }
}
</script>

<style scoped>
.mind-section {}
.section-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
}
.section-header {
  margin-bottom: 16rpx;
}
.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}
.score-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10rpx 0;
}
.score-label {
  font-size: 26rpx;
  color: #555;
  width: 160rpx;
}
.score-bar-bg {
  flex: 1;
  height: 20rpx;
  background: #f0f0f0;
  border-radius: 10rpx;
  overflow: hidden;
}
.score-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #FF6B9D, #FF9EC4);
  border-radius: 10rpx;
}
.score-value {
  font-size: 24rpx;
  color: #FF6B9D;
  width: 60rpx;
  text-align: right;
}
.contact-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 14rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}
.contact-name {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}
.contact-relation {
  font-size: 24rpx;
  color: #999;
}
.contact-phone {
  font-size: 24rpx;
  color: #FF6B9D;
}
.alert-item {
  display: flex;
  flex-direction: row;
  padding: 10rpx 0;
}
.alert-type {
  font-size: 24rpx;
  color: #E74C3C;
  width: 100rpx;
}
.alert-desc {
  font-size: 26rpx;
  color: #555;
  flex: 1;
}
.milestone-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 10rpx 0;
}
.milestone-title {
  font-size: 26rpx;
  color: #333;
}
.milestone-date {
  font-size: 24rpx;
  color: #999;
}
.loading {
  text-align: center;
  padding: 40rpx;
  color: #999;
}
</style>