cfc/cfc-frontend/components/FamilyMemberStrip.vue

<template>
  <view class="family-member-strip" v-if="members && members.length > 0">
    <scroll-view
      class="strip-scroll"
      scroll-x
      :scroll-with-animation="true"
      :enhanced="true"
      show-scrollbar="false"
      v-if="members.length >= 4"
    >
      <view class="strip-inner scroll-mode">
        <FamilyMemberCard
          v-for="member in members"
          :key="member.id"
          :member="member"
          :isSelected="member.id === selectedMemberId"
          :energyScore="getMemberEnergy(member)"
          @select="onSelect"
        />
      </view>
    </scroll-view>
    <view class="strip-inner center-mode" v-else>
      <FamilyMemberCard
        v-for="member in members"
        :key="member.id"
        :member="member"
        :isSelected="member.id === selectedMemberId"
        :energyScore="getMemberEnergy(member)"
        @select="onSelect"
      />
    </view>
  </view>
</template>

<script>
import FamilyMemberCard from '@/components/FamilyMemberCard'

export default {
  components: { FamilyMemberCard },
  props: {
    members: { type: Array, default: function() { return [] } },
    selectedMemberId: { type: Number, default: null },
    energyMap: { type: Object, default: function() { return {} } }
  },
  methods: {
    onSelect: function(member) {
      this.$emit('select', member)
    },
    getMemberEnergy: function(member) {
      if (!member || !this.energyMap) return null
      return this.energyMap[member.id] || this.energyMap[member.memberId] || null
    }
  }
}
</script>

<style scoped>
.family-member-strip {
  margin: 16rpx 0;
  padding: 0 30rpx;
}
.strip-scroll {
  width: 100%;
  white-space: nowrap;
}
.strip-inner {
  display: flex;
  flex-direction: row;
}
.strip-inner.scroll-mode {
  gap: 16rpx;
}
.strip-inner.center-mode {
  justify-content: center;
  gap: 24rpx;
  flex-wrap: wrap;
}
/* scroll-view 内的 FamilyMemberCard 需要 display: inline-flex 支持横向滚动 */
.strip-scroll .strip-inner.scroll-mode {
  display: inline-flex;
}
</style>