cfc/cfc-frontend/components/FamilyMemberStrip.vue

<template>
  <view class="family-member-strip">
    <!-- 有成员：滚动条 / 居中模式 + 长按菜单 -->
    <view v-if="renderedMembers && renderedMembers.length > 0">
      <scroll-view
        class="strip-scroll"
        scroll-x
        :scroll-with-animation="true"
        :enhanced="true"
        show-scrollbar="false"
        v-if="renderedMembers.length >= 4"
      >
        <view class="strip-inner scroll-mode">
          <FamilyMemberCard
            v-for="member in renderedMembers"
            :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 renderedMembers"
          :key="member.id"
          :member="member"
          :isSelected="member.id === selectedMemberId"
          :energyScore="getMemberEnergy(member)"
          @select="onSelect"
          @longpress="onLongPress"
        />
      </view>

      <!-- 长按操作菜单 -->
      <view class="action-overlay" v-if="showActionMenu" @click="closeMenu"></view>
      <view class="action-sheet" v-if="showActionMenu">
        <view class="action-header">
          <image class="action-avatar" :src="actionMember ? (actionMember.avatar || '/static/default-avatar.png') : ''" mode="aspectFill" />
          <view class="action-header-info">
            <text class="action-title">{{ actionMember ? actionMember.nickname : '' }}</text>
            <text class="action-relation">{{ actionMember ? (actionMember.relationship || actionMember.relativeLabel || actionMember.roleLabel || '') : '' }}</text>
          </view>
        </view>
        <!-- 关系现状区块 -->
        <view class="action-scores" v-if="actionMember">
          <view class="score-row">
            <text class="score-label">信任度</text>
            <view class="score-bar-track">
              <view class="score-bar-fill trust" :style="{ width: scoreWidths[0] }"></view>
            </view>
            <text class="score-value">{{ scoreValues[0] }}</text>
          </view>
          <view class="score-row">
            <text class="score-label">亲密度</text>
            <view class="score-bar-track">
              <view class="score-bar-fill intimacy" :style="{ width: scoreWidths[1] }"></view>
            </view>
            <text class="score-value">{{ scoreValues[1] }}</text>
          </view>
          <view class="score-row">
            <text class="score-label">沟通质量</text>
            <view class="score-bar-track">
              <view class="score-bar-fill communication" :style="{ width: scoreWidths[2] }"></view>
            </view>
            <text class="score-value">{{ scoreValues[2] }}</text>
          </view>
        </view>
        <view class="action-divider"></view>
        <view class="action-item" @click="addMember" v-if="actionMember && actionMember.isSelf">
          <text class="action-item-icon">➕</text>
          <text class="action-item-text">添加成员</text>
        </view>
        <view class="action-item" @click="inviteMember" v-if="actionMember && actionMember.isSelf">
          <text class="action-item-icon">📨</text>
          <text class="action-item-text">邀请成员</text>
        </view>
        <view class="action-item" @click="switchToMember" v-if="canSwitch">
          <text class="action-item-icon">🔄</text>
          <text class="action-item-text">切换到该成员视角</text>
        </view>
        <view class="action-item" @click="editMember" v-if="canEdit">
          <text class="action-item-icon">✏️</text>
          <text class="action-item-text">编辑资料</text>
        </view>
        <view class="action-item" @click="questionnaireMember">
          <text class="action-item-icon">📋</text>
          <text class="action-item-text">关系问卷</text>
          <text class="action-time" v-if="lastQuestionnaireText">  ·  上次填写 {{ lastQuestionnaireText }}</text>
        </view>
        <view class="action-item" @click="interactionMember">
          <text class="action-item-icon">💬</text>
          <text class="action-item-text">记录互动</text>
        </view>
        <view class="action-item" @click="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" @click="removeMember" v-if="canRemove">
          <text class="action-item-icon">🗑️</text>
          <text class="action-item-text">移除成员</text>
        </view>
        <view class="action-item action-cancel" @click="closeMenu">
          <text class="action-item-text">取消</text>
        </view>
      </view>
    </view>

    <!-- 未创建家庭引导 -->
    <view class="family-strip-empty" v-else>
      <view class="empty-content">
        <text class="empty-icon">🏠</text>
        <text class="empty-title">还未创建家庭</text>
        <text class="empty-desc">创建家庭，开启全家幸福之旅</text>
        <view class="empty-btn" @click="onCreateFamily">＋ 创建家庭</view>
      </view>
    </view>

    <!-- 邀请成员分享海报弹窗 -->
    <SharePoster
      :show="showPoster"
      :referralCode="inviteCode"
      :qrCodeBase64="inviteQrCode"
      :nickname="posterNickname"
      :userAvatar="posterAvatar"
      @close="showPoster = false" />
  </view>
</template>

<script>
import FamilyMemberCard from '@/components/FamilyMemberCard'
import SharePoster from '@/components/SharePoster.vue'
import { kickFamilyMemberById, createFamily, generateFamilyInviteQrCode, getPairwiseRelationships } from '@/utils/api'
import { parseDate } from '@/utils/format.js'

export default {
  components: { FamilyMemberCard, SharePoster },
  props: {
    members: { type: Array, default: function() { return [] } },
    selectedMemberId: { type: Number, default: null },
    energyMap: { type: Object, default: function() { return {} } },
    isParent: { type: Boolean, default: false },
    centerMemberId: { type: Number, default: null }
  },
  data: function() {
    return {
      showActionMenu: false,
      actionMember: null,
      renderedMembers: [],
      creatingFamily: false,
      showPoster: false,
      inviteCode: '',
      inviteQrCode: '',
      posterNickname: '',
      posterAvatar: ''
    }
  },
  watch: {
    members: {
      handler: function(val) {
        this.renderedMembers = val || []
      },
      immediate: true
    },
    centerMemberId: {
      handler: function(val) {
        if (val) {
          this.loadPairwise(val)
        }
      },
      immediate: true
    }
  },
  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'
    },
    // 关系现状三项宽度/数值（下标 0=信任度 1=亲密度 2=沟通质量）
    actionScores: function() {
      var m = this.actionMember
      if (!m) return []
      var keys = ['trustScore', 'intimacyScore', 'communicationScore']
      return keys.map(function(k) {
        var v = Number(m[k]) || 0
        return { width: Math.max(0, Math.min(100, v)) + '%', value: Math.round(v) }
      })
    },
    scoreWidths: function() {
      return this.actionScores.map(function(s) { return s.width })
    },
    scoreValues: function() {
      return this.actionScores.map(function(s) { return s.value })
    },
    // 上次填写时间（问卷提交时 updateMemberScores 已更新 lastInteractionAt）
    lastQuestionnaireText: function() {
      var m = this.actionMember
      if (!m || !m.lastInteractionAt) return ''
      var d = parseDate(m.lastInteractionAt)
      if (!d) return ''
      var now = new Date()
      var diffMs = now.getTime() - d.getTime()
      var diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
      if (diffDays === 0) return '今天'
      if (diffDays === 1) return '昨天'
      if (diffDays < 7) return diffDays + '天前'
      if (diffDays < 30) return Math.floor(diffDays / 7) + '周前'
      return Math.floor(diffDays / 30) + '个月前'
    }
  },
  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) {
        uni.navigateTo({ url: '/pages/family/add-member?memberId=' + member.id })
      }
    },
    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
    },
    onCreateFamily: function() {
      var self = this
      if (this.creatingFamily) return
      this.creatingFamily = true
      // 家庭名称使用当前用户昵称 + '的家庭'（与 user-edit.vue createFamilyAction 一致）
      var userInfo = uni.getStorageSync('userInfo')
      var nickname = uni.getStorageSync('nickname') || (userInfo && userInfo.nickname) || '我的'
      uni.showLoading({ title: '创建中...' })
      createFamily(nickname + '的家庭')
        .then(function(res) {
          uni.hideLoading()
          self.creatingFamily = false
          if (res.code === 200) {
            uni.showToast({ title: '家庭创建成功', icon: 'success' })
            self.$emit('created')
          } else {
            uni.showToast({ title: res.message || '创建失败', icon: 'none' })
          }
        })
        .catch(function(err) {
          uni.hideLoading()
          self.creatingFamily = false
          uni.showToast({ title: (err && err.message) || '创建失败', icon: 'none' })
        })
    },
    addMember: function() {
      this.closeMenu()
      uni.navigateTo({ url: '/pages/family/add-member' })
    },
    // 邀请成员：弹窗展示分享海报（与 family-members.vue onInvite 一致的模式）
    inviteMember: function() {
      var self = this
      this.closeMenu()
      var userInfo = uni.getStorageSync('userInfo')
      this.posterNickname = uni.getStorageSync('nickname') || (userInfo && userInfo.nickname) || ''
      this.posterAvatar = uni.getStorageSync('avatar') || (userInfo && userInfo.avatar) || ''
      this.inviteCode = ''
      this.inviteQrCode = ''
      uni.showLoading({ title: '生成邀请...' })
      generateFamilyInviteQrCode()
        .then(function(res) {
          uni.hideLoading()
          if (res.code === 200 && res.data) {
            self.inviteCode = res.data.inviteCode
            self.inviteQrCode = res.data.qrCodeBase64
            self.showPoster = true
          } else {
            uni.showToast({ title: res.message || '生成失败', icon: 'none' })
          }
        })
        .catch(function() {
          uni.hideLoading()
          uni.showToast({ title: '生成失败', icon: 'none' })
        })
    },
    loadPairwise: function(centerMemberId) {
      var self = this
      getPairwiseRelationships(centerMemberId).then(function(res) {
        if (res.code === 200 && res.data) {
          var arr = res.data instanceof Array ? res.data : ((res.data && res.data.list) || [])
          self.renderedMembers = arr
        }
      }).catch(function() {})
    }
  }
}
</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-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;
}
.action-time {
  font-size: 22rpx;
  color: #9CA3AF;
  margin-left: 4rpx;
}
/* 空状态 */
.family-strip-empty {
  margin: 16rpx 0;
  padding: 40rpx 30rpx;
  background: #FFFFFF;
  border-radius: 24rpx;
  display: flex;
  justify-content: center;
}
.empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.empty-icon { font-size: 56rpx; }
.empty-title { font-size: 30rpx; font-weight: 600; color: #1F2937; margin-top: 12rpx; }
.empty-desc { font-size: 24rpx; color: #9CA3AF; margin-top: 8rpx; }
.empty-btn {
  margin-top: 24rpx;
  padding: 16rpx 48rpx;
  background: #F97316;
  color: #FFFFFF;
  font-size: 28rpx;
  border-radius: 40rpx;
}
/* Action Sheet 头部（覆盖原有 column 布局） */
.action-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 24rpx 30rpx;
  border-bottom: 1rpx solid #F3F4F6;
}
.action-avatar {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
  margin-right: 20rpx;
  background: #F3F4F6;
}
.action-header-info {
  display: flex;
  flex-direction: column;
}
/* 关系现状 */
.action-scores {
  padding: 20rpx 30rpx;
}
.score-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 12rpx;
}
.score-label {
  width: 110rpx;
  font-size: 24rpx;
  color: #6B7280;
}
.score-bar-track {
  flex: 1;
  height: 14rpx;
  background: #F3F4F6;
  border-radius: 7rpx;
  overflow: hidden;
}
.score-bar-fill {
  height: 100%;
  border-radius: 7rpx;
}
.score-bar-fill.trust { background: #10B981; }
.score-bar-fill.intimacy { background: #3B82F6; }
.score-bar-fill.communication { background: #F59E0B; }
.score-value {
  width: 70rpx;
  text-align: right;
  font-size: 24rpx;
  color: #1F2937;
  font-weight: 600;
}
.action-divider {
  height: 1rpx;
  background: #F3F4F6;
  margin: 0 30rpx;
}
</style>