cfc/cfc-frontend/components/FamilyMemberStrip.vue

<template>
  <view class="member-strip" v-if="allMembers.length > 0">
    <view class="member-strip__header">
      <text class="member-strip__title">家庭成员</text>
    </view>
    <scroll-view
      v-if="allMembers.length >= 4"
      class="member-strip__scroll"
      scroll-x
      :scroll-with-animation="true"
      :enhanced="true"
      :show-scrollbar="false"
      style="height: 160rpx;"
    >
      <view class="member-strip__inner">
        <!-- "全家" 选项 -->
        <view
          class="member-strip__all-card"
          :class="{ 'member-strip__all-card--selected': selectedMemberId === 0 }"
          @click="selectAll"
        >
          <view class="member-strip__all-icon">
            <text class="member-strip__all-icon-text">🏠</text>
          </view>
          <text class="member-strip__all-label">全家</text>
        </view>
        <FamilyMemberCard
          v-for="member in allMembers"
          :key="member._key"
          :member="member"
          :is-selected="selectedMemberId === member.id && selectedMemberType === member.memberType"
          @select="onSelect"
        />
      </view>
    </scroll-view>
    <view v-else class="member-strip__row">
      <!-- "全家" 选项 -->
      <view
        class="member-strip__all-card"
        :class="{ 'member-strip__all-card--selected': selectedMemberId === 0 }"
        @click="selectAll"
      >
        <view class="member-strip__all-icon">
          <text class="member-strip__all-icon-text">🏠</text>
        </view>
        <text class="member-strip__all-label">全家</text>
      </view>
      <FamilyMemberCard
        v-for="member in allMembers"
        :key="member._key"
        :member="member"
        :is-selected="selectedMemberId === member.id && selectedMemberType === member.memberType"
        @select="onSelect"
      />
    </view>
  </view>
</template>

<script>
import FamilyMemberCard from './FamilyMemberCard.vue'

export default {
  name: 'FamilyMemberStrip',
  components: { FamilyMemberCard },
  props: {
    members: { type: Array, default: function() { return [] } },
    selectedMemberId: { type: Number, default: 0 },
    selectedMemberType: { type: String, default: 'all' }
  },
  computed: {
    allMembers: function() {
      var list = this.members || []
      return list.map(function(m) {
        m._key = m.memberType + '-' + m.id
        return m
      })
    }
  },
  methods: {
    selectAll() {
      this.$emit('select', { id: 0, memberType: 'all', nickname: '全家' })
    },
    onSelect(member) {
      this.$emit('select', member)
    }
  }
}
</script>

<style scoped>
.member-strip {
  margin: 0 24rpx 16rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  padding: 16rpx 16rpx 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.member-strip__header {
  margin-bottom: 12rpx;
  padding-left: 4rpx;
}

.member-strip__title {
  font-size: 24rpx;
  font-weight: 600;
  color: #1E293B;
}

.member-strip__scroll {
  white-space: nowrap;
  width: 100%;
}

.member-strip__inner {
  display: inline-flex;
  align-items: flex-start;
  gap: 12rpx;
  padding: 0 4rpx;
}

.member-strip__row {
  display: flex;
  align-items: flex-start;
  gap: 12rpx;
  padding: 0 4rpx;
  justify-content: center;
  flex-wrap: nowrap;
}

/* "全家" 卡片 */
.member-strip__all-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 120rpx;
  padding: 16rpx 8rpx 12rpx;
  border-radius: 16rpx;
  background: #FFFFFF;
  border: 2rpx solid transparent;
  flex-shrink: 0;
}

.member-strip__all-card--selected {
  border-color: #5B9BD5;
  background: #EBF5FF;
}

.member-strip__all-icon {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  background: #EBF5FF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8rpx;
}

.member-strip__all-icon-text {
  font-size: 36rpx;
}

.member-strip__all-label {
  font-size: 22rpx;
  color: #1E293B;
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
}

.member-strip__all-card--selected .member-strip__all-label {
  color: #5B9BD5;
  font-weight: 600;
}
</style>