cfc/cfc-frontend/components/FamilyMemberStrip.vue

<template>
  <view class="family-member-strip" v-if="(members && members.length > 0) || isAdmin">
    <!-- 待审批加入请求徽章 -->
    <view class="strip-toolbar" v-if="isAdmin">
      <view class="pending-badge" v-if="pendingCount > 0" @tap="openRequests">
        <text class="badge-icon">🔔</text>
        <text class="badge-count">{{ pendingCount }}</text>
      </view>
    </view>
    <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"
          @longpress="onLongPress"
        />
      </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"
        @longpress="onLongPress"
      />
    </view>

    <!-- 长按操作菜单 -->
    <view class="action-overlay" v-if="showActionMenu" @tap="closeMenu"></view>
    <view class="action-sheet" v-if="showActionMenu">
      <view class="action-header">
        <text class="action-title">{{ actionMember ? actionMember.nickname : '' }}</text>
        <text class="action-relation">{{ actionMember ? (actionMember.relationship || actionMember.relativeLabel || '') : '' }}</text>
      </view>
      <view class="action-item" @tap="switchToMember" v-if="canSwitch">
        <text class="action-item-icon">🔄</text>
        <text class="action-item-text">切换到该成员视角</text>
      </view>
      <view class="action-item" @tap="editMember" v-if="canEdit">
        <text class="action-item-icon">✏️</text>
        <text class="action-item-text">编辑资料</text>
      </view>
      <view class="action-item" @tap="questionnaireMember">
        <text class="action-item-icon">📋</text>
        <text class="action-item-text">关系问卷</text>
      </view>
      <view class="action-item" @tap="interactionMember">
        <text class="action-item-icon">💬</text>
        <text class="action-item-text">记录互动</text>
      </view>
      <view class="action-item" @tap="callMember" v-if="actionMember && actionMember.phone">
        <text class="action-item-icon">📞</text>
        <text class="action-item-text">拨打电话</text>
      </view>
      <view class="action-item action-danger" @tap="removeMember" v-if="canRemove">
        <text class="action-item-icon">🗑️</text>
        <text class="action-item-text">移除成员</text>
      </view>
      <view class="action-item action-cancel" @tap="closeMenu">
        <text class="action-item-text">取消</text>
      </view>
    </view>

    <!-- 待审批请求弹窗 -->
    <view class="request-overlay" v-if="showRequests" @tap="closeRequests"></view>
    <view class="request-sheet" v-if="showRequests">
      <view class="sheet-header">
        <text class="sheet-title">待处理加入申请（{{ pendingRequests.length }}）</text>
        <text class="sheet-close" @tap="closeRequests">×</text>
      </view>
      <view v-if="pendingRequests.length === 0" class="empty-requests">
        <text>暂无待处理的请求</text>
      </view>
      <view class="request-item" v-for="req in pendingRequests" :key="req.id">
        <image class="req-avatar" src="/static/default-avatar.png" mode="aspectFill"></image>
        <view class="req-info">
          <text class="req-name">{{ req.requesterNickname }}</text>
          <text class="req-time">{{ req.createdAt }}</text>
        </view>
        <view class="req-actions">
          <button class="req-btn btn-approve" @tap="approveRequest(req.id)">通过</button>
          <button class="req-btn btn-reject" @tap="rejectRequest(req.id)">拒绝</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import FamilyMemberCard from '@/components/FamilyMemberCard'
import { kickFamilyMemberById, getPendingFamilyRequests, approveFamilyJoinRequest, rejectFamilyJoinRequest } from '@/utils/api'

export default {
  components: { FamilyMemberCard },
  props: {
    members: { type: Array, default: function() { return [] } },
    selectedMemberId: { type: Number, default: null },
    energyMap: { type: Object, default: function() { return {} } },
    isParent: { type: Boolean, default: false },
    isAdmin: { type: Boolean, default: false }
  },
  data: function() {
    return {
      showActionMenu: false,
      actionMember: null,
      pendingCount: 0,
      pendingRequests: [],
      showRequests: false
    }
  },
  mounted: function() {
    this.loadPendingRequests()
  },
  computed: {
    canSwitch: function() {
      // 仅家庭成员记录（source=family_member）且已关联账号时才能切换视角；
      // 家长卡片（source=parent）是 users 表记录，switch 接口只查 family_members 表，切换会失败
      return this.actionMember && this.actionMember.userId && this.actionMember.source === 'family_member'
    },
    canEdit: function() {
      return this.isParent && this.actionMember && !this.actionMember.userId && this.actionMember.source === 'family_member'
    },
    canRemove: function() {
      // 仅家庭成员记录可移除（kick 接口只查 family_members 表），且不能移除自己
      return this.isParent && this.actionMember && !this.actionMember.isSelf && this.actionMember.source === 'family_member'
    }
  },
  methods: {
    onSelect: function(member) {
      this.$emit('select', member)
    },
    onLongPress: function(member) {
      this.actionMember = member
      this.showActionMenu = true
    },
    closeMenu: function() {
      this.showActionMenu = false
      this.actionMember = null
    },
    switchToMember: function() {
      var member = this.actionMember
      this.closeMenu()
      if (member && member.userId) {
        this.$emit('switch', member)
      }
    },
    editMember: function() {
      var member = this.actionMember
      this.closeMenu()
      if (member) {
        var params = 'memberId=' + member.id + '&nickname=' + encodeURIComponent(member.nickname || '')
        if (member.gender) params += '&gender=' + member.gender
        if (member.phone) params += '&phone=' + member.phone
        if (member.birthday) params += '&birthday=' + member.birthday
        uni.navigateTo({ url: '/pages/family/add-member?' + params })
      }
    },
    questionnaireMember: function() {
      var member = this.actionMember
      this.closeMenu()
      if (member) {
        uni.navigateTo({ url: '/pages/action-detail/relationship-questionnaire?memberId=' + member.id })
      }
    },
    interactionMember: function() {
      var member = this.actionMember
      this.closeMenu()
      if (member) {
        uni.navigateTo({ url: '/pages/action-detail/interaction-log?memberId=' + member.id })
      }
    },
    callMember: function() {
      var member = this.actionMember
      this.closeMenu()
      if (member && member.phone) {
        uni.makePhoneCall({ phoneNumber: member.phone })
      }
    },
    removeMember: function() {
      var self = this
      var member = this.actionMember
      this.closeMenu()
      if (member) {
        uni.showModal({
          title: '确认移除',
          content: '确定要移除 ' + member.nickname + ' 吗？',
          success: function(res) {
            if (res.confirm) {
              uni.showLoading({ title: '移除中...' })
              kickFamilyMemberById(member.id)
                .then(function() {
                  uni.hideLoading()
                  uni.showToast({ title: '已移除', icon: 'success' })
                  // 通知父组件刷新成员列表（替代无效的 globalData 标志）
                  self.$emit('removed', member)
                })
                .catch(function(err) {
                  uni.hideLoading()
                  uni.showToast({ title: (err && err.message) || '移除失败', icon: 'none' })
                })
            }
          }
        })
      }
    },
    getMemberEnergy: function(member) {
      if (!member || !this.energyMap) return null
      return this.energyMap[member.id] || this.energyMap[member.memberId] || null
    },
    loadPendingRequests: function() {
      var self = this
      if (!this.isAdmin) return
      getPendingFamilyRequests()
        .then(function(res) {
          if (res.code === 200) {
            var data = res.data || []
            self.pendingCount = data.length
            self.pendingRequests = data
          }
        })
        .catch(function() {
          // 静默失败
        })
    },
    openRequests: function() {
      this.showRequests = true
    },
    closeRequests: function() {
      this.showRequests = false
    },
    approveRequest: function(requestId) {
      var self = this
      uni.showModal({
        title: '确认通过',
        content: '确认通过该成员的加入申请？',
        success: function(modalRes) {
          if (modalRes.confirm) {
            approveFamilyJoinRequest(requestId)
              .then(function() {
                uni.showToast({ title: '已通过', icon: 'success' })
                self.loadPendingRequests()
                self.closeRequests()
              })
              .catch(function(err) {
                uni.showToast({ title: err.message || '操作失败', icon: 'none' })
              })
          }
        }
      })
    },
    rejectRequest: function(requestId) {
      var self = this
      uni.showModal({
        title: '确认拒绝',
        content: '确认拒绝该成员的加入申请？',
        success: function(modalRes) {
          if (modalRes.confirm) {
            rejectFamilyJoinRequest(requestId)
              .then(function() {
                uni.showToast({ title: '已拒绝', icon: 'success' })
                self.loadPendingRequests()
                self.closeRequests()
              })
              .catch(function(err) {
                uni.showToast({ title: err.message || '操作失败', icon: 'none' })
              })
          }
        }
      })
    }
  }
}
</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;
}
.strip-scroll .strip-inner.scroll-mode {
  display: inline-flex;
}
/* 操作菜单 */
.action-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 999;
}
.action-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #FFFFFF;
  border-radius: 24rpx 24rpx 0 0;
  z-index: 1000;
  padding: 20rpx 0;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}
.action-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16rpx 30rpx 20rpx;
  border-bottom: 1rpx solid #F3F4F6;
}
.action-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #1F2937;
}
.action-relation {
  font-size: 24rpx;
  color: #9CA3AF;
  margin-top: 4rpx;
}
.action-item {
  display: flex;
  align-items: center;
  padding: 24rpx 30rpx;
  border-bottom: 1rpx solid #F9FAFB;
}
.action-item:active {
  background: #F3F4F6;
}
.action-item-icon {
  font-size: 32rpx;
  margin-right: 16rpx;
}
.action-item-text {
  font-size: 28rpx;
  color: #374151;
}
.action-danger .action-item-text {
  color: #EF4444;
}
.action-cancel {
  justify-content: center;
  margin-top: 10rpx;
  border-bottom: none;
}
.action-cancel .action-item-text {
  color: #6B7280;
}

/* 待审批徽章 */
.strip-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 8rpx 30rpx 4rpx;
}

.pending-badge {
  display: flex;
  align-items: center;
  padding: 8rpx 16rpx;
  background: #FFFFFF;
  border: 2rpx solid #EF4444;
  border-radius: 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(239, 68, 68, 0.15);
}

.badge-icon {
  font-size: 28rpx;
  margin-right: 6rpx;
}

.badge-count {
  font-size: 26rpx;
  font-weight: 700;
  color: #EF4444;
}

/* 待审批请求弹窗 */
.request-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1500;
}

.request-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #FFFFFF;
  border-radius: 24rpx 24rpx 0 0;
  z-index: 1501;
  max-height: 70vh;
  overflow-y: auto;
  padding: 20rpx 0;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}

.sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 30rpx 16rpx;
  border-bottom: 1rpx solid #F3F4F6;
}

.sheet-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #1F2937;
}

.sheet-close {
  font-size: 40rpx;
  color: #9CA3AF;
  padding: 8rpx;
  line-height: 1;
}

.empty-requests {
  text-align: center;
  padding: 60rpx 0;
  font-size: 28rpx;
  color: #9CA3AF;
}

.request-item {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #F9FAFB;
}

.req-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 16rpx;
  flex-shrink: 0;
}

.req-info {
  flex: 1;
  min-width: 0;
}

.req-name {
  font-size: 30rpx;
  font-weight: 600;
  color: #1F2937;
  display: block;
}

.req-time {
  font-size: 24rpx;
  color: #9CA3AF;
  display: block;
  margin-top: 4rpx;
}

.req-actions {
  display: flex;
  gap: 12rpx;
}

.req-btn {
  padding: 12rpx 24rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  font-weight: 600;
  border: none;
}

.btn-approve {
  background: #16A34A;
  color: #FFFFFF;
}

.btn-reject {
  background: #EF4444;
  color: #FFFFFF;
}
</style>