cfc/cfc-frontend/components/MemberChipPicker.vue

<template>
  <view class="member-picker">
    <text class="member-load-hint">成员数：{{ memberCount }}</text>
    <scroll-view class="member-scroll" scroll-x="true" :show-scrollbar="false" v-if="memberCount > 0">
      <view class="member-chips">
        <view
          v-for="item in members"
          :key="item.id"
          class="member-chip"
          :class="{ 'member-chip-on': item.selected }"
          @click="toggleMember(item.id)">
          <text class="member-chip-text">{{ item.nickname }}</text>
        </view>
      </view>
    </scroll-view>
    <view v-if="memberCount === 0 && !loading" class="empty-state">
      <text class="empty-text">暂无家庭成员，请先添加后再制定方案</text>
      <view class="empty-action" @click="goAddMember">去添加成员</view>
      <view class="empty-action reload-btn" @click="reload">重新加载</view>
    </view>
    <view v-if="loading" class="empty-state">
      <text class="empty-text">成员加载中...</text>
    </view>
  </view>
</template>

<script>
import { getFamilyMemberList } from '../utils/api.js'

export default {
  name: 'MemberChipPicker',
  props: {
    selectedIds: {
      type: Array,
      default: function() { return [] }
    }
  },
  data: function() {
    return {
      members: [],
      memberCount: 0,
      loading: false
    }
  },
  mounted: function() {
    this.loadMembers()
  },
  methods: {
    reload: function() {
      this.loadMembers()
    },
    goAddMember: function() {
      this.$emit('add-member')
      uni.navigateTo({ url: '/pages/profile-extra/family-members' })
    },
    toggleMember: function(id) {
      var strId = String(id)
      var ids = []
      var i
      for (i = 0; i < this.members.length; i++) {
        if (this.members[i].selected) ids.push(String(this.members[i].id))
      }
      var idx = ids.indexOf(strId)
      if (idx >= 0) ids.splice(idx, 1)
      else ids.push(strId)
      this.applySelected(ids)
      this.emitChange()
    },
    applySelected: function(ids) {
      var selected = {}
      var i
      for (i = 0; i < ids.length; i++) {
        selected[String(ids[i])] = true
      }
      var list = []
      for (i = 0; i < this.members.length; i++) {
        var m = this.members[i]
        list.push({
          id: m.id,
          memberId: m.memberId,
          name: m.name,
          nickname: m.nickname,
          selected: !!selected[String(m.id)]
        })
      }
      this.members = list
      this.memberCount = list.length
    },
    emitChange: function() {
      var ids = []
      var i
      for (i = 0; i < this.members.length; i++) {
        if (this.members[i].selected) ids.push(String(this.members[i].id))
      }
      this.$emit('change', { selectedIds: ids, members: this.members })
    },
    normalizeMemberList: function(data) {
      if (!data) return []
      var asList = function(v) {
        return v && typeof v === 'object' && typeof v.length === 'number' ? v : null
      }
      if (asList(data)) return data
      var sources = [data.children, data.members, data.list, data.records]
      var merged = []
      var seen = {}
      var s, i, m, mid, key
      for (s = 0; s < sources.length; s++) {
        var arr = asList(sources[s])
        if (!arr || arr.length === 0) continue
        for (i = 0; i < arr.length; i++) {
          m = arr[i]
          if (!m) continue
          mid = m.id != null ? m.id : (m.memberId != null ? m.memberId : m.userId)
          if (mid == null) continue
          key = String(mid)
          if (seen[key]) continue
          seen[key] = true
          merged.push(m)
        }
      }
      return merged
    },
    applyList: function(rawList) {
      var list = rawList || []
      var mapped = []
      var i, m, mid, nm
      for (i = 0; i < list.length; i++) {
        m = list[i]
        if (!m) continue
        mid = m.id != null ? m.id : (m.memberId != null ? m.memberId : m.userId)
        if (mid == null) continue
        nm = m.nickname || m.name || m.roleLabel || '成员'
        mapped.push({
          id: mid,
          memberId: String(mid),
          name: String(nm),
          nickname: String(nm),
          selected: false
        })
      }
      var selectedIds = (this.selectedIds || []).map(function(id) { return String(id) })
      var idSet = {}
      for (i = 0; i < mapped.length; i++) idSet[String(mapped[i].id)] = true
      selectedIds = selectedIds.filter(function(id) { return !!idSet[String(id)] })
      if (selectedIds.length === 0 && mapped.length > 0) {
        selectedIds = [String(mapped[0].id)]
      }
      for (i = 0; i < mapped.length; i++) {
        mapped[i].selected = selectedIds.indexOf(String(mapped[i].id)) >= 0
      }
      this.members = mapped
      this.memberCount = mapped.length
      this.emitChange()
      this.$emit('loaded', { members: mapped, selectedIds: selectedIds })
      return mapped.length
    },
    loadMembers: function() {
      if (this.loading) return
      this.loading = true
      var self = this
      getFamilyMemberList({ visibleOnly: true }).then(function(res) {
        var list = self.normalizeMemberList(res && res.data)
        if (list.length > 0) return list
        return getFamilyMemberList({ includeFamily: true }).then(function(res2) {
          var list2 = self.normalizeMemberList(res2 && res2.data)
          if (list2.length > 0) return list2
          return getFamilyMemberList({}).then(function(res3) {
            return self.normalizeMemberList(res3 && res3.data)
          })
        })
      }).then(function(list) {
        var count = self.applyList(list || [])
        if (count === 0) {
          uni.showToast({ title: '成员列表为空', icon: 'none' })
        }
      }).catch(function(err) {
        console.warn('[MemberChipPicker] loadMembers failed', err)
        self.members = []
        self.memberCount = 0
        uni.showToast({ title: '成员加载失败', icon: 'none' })
      }).then(function() {
        self.loading = false
      })
    }
  }
}
</script>

<style scoped>
.member-scroll {
  width: 100%;
  white-space: nowrap;
  margin-bottom: 16rpx;
}
.member-chips {
  display: inline-flex;
  flex-direction: row;
  padding: 4rpx 0;
}
.member-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12rpx 28rpx;
  margin-right: 16rpx;
  border-radius: 32rpx;
  background: #F1F5F9;
  border: 2rpx solid transparent;
}
.member-chip-on {
  background: #FFF7ED;
  border-color: #F97316;
}
.member-chip-text {
  font-size: 26rpx;
  color: #334155;
  font-weight: 600;
}
.member-chip-on .member-chip-text {
  color: #F97316;
}
.member-load-hint {
  font-size: 22rpx;
  color: #F97316;
  margin-bottom: 12rpx;
}
.empty-state {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 0 24rpx;
  box-sizing: border-box;
}
.empty-text {
  font-size: 26rpx;
  color: #999;
}
.empty-action {
  margin-top: 20rpx;
  padding: 12rpx 32rpx;
  font-size: 26rpx;
  color: #F97316;
  border: 2rpx solid #F97316;
  border-radius: 32rpx;
}
.reload-btn {
  margin-top: 16rpx;
  border-color: #999;
  color: #666;
}
</style>