cfc/cfc-frontend/components/FamilyMemberStrip.vue

<template>
  <view class="member-strip">
    <!-- 浮标头像 -->
    <view class="fab-wrap">
      <view class="fab-avatar" :class="{ active: fanOpen }" @tap="toggleFan">
        <image class="fab-img" :src="currentMember.avatar || defaultAvatar" mode="aspectFill" />
        <view class="fab-badge" v-if="pendingCount > 0 && isAdmin" @tap.stop="openRequests">
          <text class="badge-count">{{ pendingCount }}</text>
        </view>
      </view>
      <view class="fab-pulse" v-if="fanOpen"></view>
    </view>

    <!-- 扇形展开成员 -->
    <view class="fan-wrap" :class="{ show: fanOpen }">
      <view class="fan-overlay" @tap="closeFan"></view>
      <view class="fan-container">
        <view
          class="fan-card"
          v-for="(member, index) in members"
          :key="member.id"
          :style="getFanPosition(member, index)"
          :class="{ selected: member.id === selectedMemberId }"
          @tap="selectMember(member)"
          @longpress="onFanLongPress(member)"
        >
          <view class="fan-avatar-wrap">
            <image class="fan-avatar" :src="member.avatar || defaultAvatar" mode="aspectFill" />
            <view class="fan-relation-badge" :style="{ background: getRelationColor(member) }">
              <text class="fan-relation-text">{{ member.relationship || member.relativeLabel || member.roleLabel || '成员' }}</text>
            </view>
            <view class="fan-spouse-mark" v-if="member.isSpouse">
              <text class="spouse-icon">💍</text>
            </view>
          </view>
          <text class="fan-nickname">{{ member.nickname }}</text>
          <view class="fan-score" v-if="getMemberEnergy(member) !== null">
            <text class="score-value">{{ getMemberEnergy(member) }}</text>
            <text class="score-unit">分</text>
          </view>
          <view class="fan-selected-mark" v-if="member.id === selectedMemberId">
            <text class="mark-icon">✓</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 长按/点击浮标弹出的个人菜单 -->
    <view class="action-overlay" v-if="showActionMenu" @tap="closeMenu"></view>
    <view class="action-sheet" v-if="showActionMenu">
      <view class="action-header">
        <view class="action-avatar-wrap">
          <image class="action-avatar" :src="actionMember ? (actionMember.avatar || defaultAvatar) : (currentMember.avatar || defaultAvatar)" mode="aspectFill" />
        </view>
        <view class="action-info">
          <text class="action-title">{{ actionMember ? actionMember.nickname : (currentMember.nickname || '我') }}</text>
          <text class="action-relation">{{ actionMember ? (actionMember.relationship || actionMember.relativeLabel || '') : '' }}</text>
        </view>
      </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 { kickFamilyMemberById, getPendingFamilyRequests, approveFamilyJoinRequest, rejectFamilyJoinRequest } from '@/utils/api'

export default {
  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 {
      fanOpen: false,
      showActionMenu: false,
      actionMember: null,
      pendingCount: 0,
      pendingRequests: [],
      showRequests: false
    }
  },
  mounted: function() {
    this.loadPendingRequests()
  },
   computed: {
    defaultAvatar: function() {
      return '/static/default-avatar.png'
    },
    currentMember: function() {
      if (!this.members || this.members.length === 0) return {}
      for (var i = 0; i < this.members.length; i++) {
        if (this.members[i].id === this.selectedMemberId) return this.members[i]
      }
      return this.members[0]
    },
    canSwitch: function() {
      var target = this.actionMember || this.currentMember
      return target && target.userId && target.source === 'family_member'
    },
    canEdit: function() {
      var target = this.actionMember || this.currentMember
      return this.isParent && target && !target.userId && target.source === 'family_member'
    },
    canRemove: function() {
      var target = this.actionMember || this.currentMember
      return this.isParent && target && !target.isSelf && target.source === 'family_member'
    }
  },
  methods: {
    // ===== 扇形展开 =====
    toggleFan: function(e) {
      if (this.fanOpen) {
        this.closeFan()
      } else {
        this.fanOpen = true
      }
    },
    closeFan: function() {
      this.fanOpen = false
    },
    // 计算扇形位置: 头像在左边，成员向右扇形排列
    // 用固定的偏移量数组，避免用 transform-origin 的兼容问题
    getFanPosition: function(member, index) {
      if (!this.fanOpen) return 'transform: translate(0rpx, 0rpx) rotate(0deg);'
      var total = this.members.length
      var angleRange = 50
      var steps = Math.max(total - 1, 1)
      var angle = -angleRange + (index / steps) * angleRange * 2
      var rad = angle * Math.PI / 180
      var radius = 280
      var dx = Math.cos(rad) * radius
      var dy = Math.sin(rad) * radius
      var rotation = angle * 0.3
      return 'transform: translate(' + dx + 'rpx,' + dy + 'rpx) rotate(' + rotation + 'deg);'
    },
    getMemberEnergy: function(member) {
      if (!member || !this.energyMap) return null
      return this.energyMap[member.id] || this.energyMap[member.memberId] || null
    },
    getRelationColor: function(member) {
      var rel = member && member.relationship
      if (rel === '爸爸' || rel === '妈妈' || rel === '父亲' || rel === '母亲') return '#F97316'
      if (rel === '儿子' || rel === '女儿') return '#0EA5E9'
      if (rel === '爷爷' || rel === '奶奶' || rel === '外公' || rel === '外婆') return '#6B7280'
      if (rel === '哥哥' || rel === '姐姐' || rel === '弟弟' || rel === '妹妹') return '#10B981'
      if (member && member.isSpouse) return '#EC4899'
      var role = member && member.effectiveRole
      if (role === 'parent') return '#F97316'
      if (role === 'child') return '#0EA5E9'
      if (role === 'teacher') return '#8B5CF6'
      return '#9CA3AF'
    },

    // ===== 成员选择 =====
    selectMember: function(member) {
      this.$emit('select', member)
      // 关闭扇形
      this.fanOpen = false
    },

    // ===== 个人菜单 =====
    onFanLongPress: function(member) {
      this.actionMember = member
      this.showActionMenu = true
    },
    onLongPress: function(member) {
      this.actionMember = member
      this.showActionMenu = true
    },
    closeMenu: function() {
      this.showActionMenu = false
      this.actionMember = null
    },
    switchToMember: function() {
      var member = this.actionMember || this.currentMember
      this.closeMenu()
      if (member && member.userId) {
        this.$emit('switch', member)
      }
    },
    editMember: function() {
      var member = this.actionMember || this.currentMember
      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.currentMember
      this.closeMenu()
      if (member) {
        uni.navigateTo({ url: '/pages/action-detail/relationship-questionnaire?memberId=' + member.id })
      }
    },
    interactionMember: function() {
      var member = this.actionMember || this.currentMember
      this.closeMenu()
      if (member) {
        uni.navigateTo({ url: '/pages/action-detail/interaction-log?memberId=' + member.id })
      }
    },
    callMember: function() {
      var member = this.actionMember || this.currentMember
      this.closeMenu()
      if (member && member.phone) {
        uni.makePhoneCall({ phoneNumber: member.phone })
      }
    },
    removeMember: function() {
      var self = this
      var member = this.actionMember || this.currentMember
      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' })
                  self.$emit('removed', member)
                })
                .catch(function(err) {
                  uni.hideLoading()
                  uni.showToast({ title: (err && err.message) || '移除失败', icon: 'none' })
                })
            }
          }
        })
      }
    },

    // ===== 待审批请求 =====
    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>
.member-strip {
  /* FAB 悬浮在左侧边缘中部；禁用 transform（transform 会创建 containing block，
     使后代 .fan-overlay (position: fixed) 退化为相对本容器定位，全屏遮罩失效） */
  position: fixed;
  top: 50%;
  left: 16rpx;
  margin-top: -34rpx;
  z-index: 100;
}

/* ===== 浮标 ===== */
.fab-wrap {
  position: relative;
  display: inline-block;
  margin: 4rpx 0;
  z-index: 1001;
}
.fab-avatar {
  width: 68rpx;
  height: 68rpx;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 4rpx 16rpx rgba(249, 115, 22, 0.25);
  border: 3rpx solid #F97316;
  position: relative;
  transition: transform 0.3s ease;
}
.fab-avatar:active {
  transform: scale(0.92);
}
.fab-avatar.active {
  transform: rotate(180deg);
}
.fab-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.fab-badge {
  position: absolute;
  top: -4rpx;
  right: -8rpx;
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  background: #EF4444;
  border: 2rpx solid #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.badge-count {
  font-size: 16rpx;
  color: #FFFFFF;
  font-weight: bold;
}
.fab-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68rpx;
  height: 68rpx;
  margin-top: -34rpx;
  margin-left: -34rpx;
  border-radius: 50%;
  border: 2rpx solid #F97316;
  animation: fab-pulse-anim 2s ease-out infinite;
}
@keyframes fab-pulse-anim {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2); opacity: 0; }
}

/* ===== 扇形展开 ===== */
.fan-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 999;
  pointer-events: none;
}
.fan-wrap.show {
  pointer-events: auto;
}
.fan-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 999;
}
.fan-wrap.show .fan-overlay {
  opacity: 1;
}
.fan-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0;
}

.fan-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100rpx;
  transform: translate(0, 0) rotate(0deg);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  opacity: 0;
}
.fan-wrap.show .fan-card {
  opacity: 1;
}
.fan-card.selected {
  filter: brightness(0.95);
}
.fan-avatar-wrap {
  position: relative;
  width: 64rpx;
  height: 64rpx;
  margin: 0 auto;
}
.fan-avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2rpx solid #FFFFFF;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
}
.fan-relation-badge {
  position: absolute;
  bottom: -4rpx;
  left: 50%;
  transform: translateX(-50%);
  padding: 1rpx 8rpx;
  border-radius: 10rpx;
  white-space: nowrap;
  max-width: 76rpx;
}
.fan-relation-text {
  font-size: 15rpx;
  color: #FFFFFF;
  font-weight: 500;
  line-height: 1.4;
}
.fan-spouse-mark {
  position: absolute;
  top: -2rpx;
  right: -2rpx;
  width: 22rpx;
  height: 22rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.spouse-icon {
  font-size: 16rpx;
}
.fan-nickname {
  display: block;
  margin-top: 4rpx;
  text-align: center;
  font-size: 20rpx;
  color: #FFFFFF;
  font-weight: 600;
  text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.4);
  line-height: 1.2;
  max-width: 90rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fan-score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-top: 2rpx;
}
.score-value {
  font-size: 18rpx;
  color: #FBBF24;
  font-weight: bold;
  text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.4);
}
.score-unit {
  font-size: 15rpx;
  color: rgba(255, 255, 255, 0.8);
  margin-left: 2rpx;
  text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.4);
}
.fan-selected-mark {
  position: absolute;
  top: 0;
  right: 0;
  width: 22rpx;
  height: 22rpx;
  border-radius: 50%;
  background: #F97316;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mark-icon {
  font-size: 14rpx;
  color: #FFFFFF;
  font-weight: bold;
}

/* ===== 操作菜单 ===== */
.action-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1001;
}
.action-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #FFFFFF;
  border-radius: 24rpx 24rpx 0 0;
  z-index: 1002;
  padding: 20rpx 0;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  animation: sheet-up 0.3s ease;
}
@keyframes sheet-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.action-header {
  display: flex;
  align-items: center;
  padding: 16rpx 30rpx 20rpx;
  border-bottom: 1rpx solid #F3F4F6;
  gap: 16rpx;
}
.action-avatar-wrap {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.action-avatar {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
}
.action-info {
  display: flex;
  flex-direction: column;
  gap: 2rpx;
}
.action-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #1F2937;
}
.action-relation {
  font-size: 22rpx;
  color: #9CA3AF;
}
.action-item {
  display: flex;
  align-items: center;
  padding: 22rpx 30rpx;
  border-bottom: 1rpx solid #F9FAFB;
}
.action-item:active {
  background: #F3F4F6;
}
.action-item-icon {
  font-size: 30rpx;
  margin-right: 16rpx;
}
.action-item-text {
  font-size: 26rpx;
  color: #374151;
}
.action-danger .action-item-text {
  color: #EF4444;
}
.action-cancel {
  justify-content: center;
  margin-top: 8rpx;
  border-bottom: none;
}
.action-cancel .action-item-text {
  color: #6B7280;
}

/* ===== 待审批请求 ===== */
.request-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1003;
}
.request-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #FFFFFF;
  border-radius: 24rpx 24rpx 0 0;
  z-index: 1004;
  padding: 24rpx 0;
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
  animation: sheet-up 0.3s ease;
  max-height: 60vh;
  overflow-y: auto;
}
.sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30rpx 16rpx;
  border-bottom: 1rpx solid #F3F4F6;
}
.sheet-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #1F2937;
}
.sheet-close {
  font-size: 32rpx;
  color: #999;
}
.empty-requests {
  padding: 60rpx 0;
  text-align: center;
  font-size: 24rpx;
  color: #999;
}
.request-item {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  gap: 16rpx;
}
.req-avatar {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  flex-shrink: 0;
}
.req-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2rpx;
}
.req-name {
  font-size: 26rpx;
  color: #333;
}
.req-time {
  font-size: 20rpx;
  color: #999;
}
.req-actions {
  display: flex;
  gap: 12rpx;
}
.req-btn {
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  font-weight: 500;
}
.btn-approve {
  background: #10B981;
  color: #FFFFFF;
}
.btn-reject {
  background: #F3F4F6;
  color: #666;
}
</style>

.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>