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>
  </view>
</template>

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

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 },
    centerMemberId: { type: Number, default: null }
  },
  data: function() {
    return {
      showActionMenu: false,
      actionMember: null,
      renderedMembers: [],
      creatingFamily: false
    }
  },
  watch: {
    members: {
      handler: function(val) {
        this.renderedMembers = val || []
      },
      immediate: true
    },
    centerMemberId: {
      handler: function(val) {
        if (val) {
          this.loadPairwise(val)
        }
      },
      immediate: true
    }
  },
  // 未显式传入 members 时（如 growth-main/health-main 无 props 用法），自动加载可见家庭成员。
  // 注意：mp-weixin 平台微信 properties 会对未传入的 props 填充默认值，
  // $options.propsData.members 恒为 []（而非 undefined），不能用它判断父组件是否传参。
  // 改为按实际数据判断：父组件传入非空 members 时不自我加载，否则调用接口兜底。
  created: function() {
    if (!this.members || this.members.length === 0) {
      this.loadVisibleMembers()
    }
  },
  computed: {
    canSwitch: function() {
      // 非自己的成员可切换视角（isSwitchable 由后端统一计算，含 family_member 与 parent 两种来源）
      return this.actionMember && this.actionMember.isSwitchable
    },
    canEdit: function() {
      return this.isParent && this.actionMember && !this.actionMember.userId && this.actionMember.source === 'family_member'
    },
    canRemove: function() {
      // 家长可移除非自己的成员（kick 接口已支持 family_member 与 parent 两种来源）
      return this.isParent && this.actionMember && !this.actionMember.isSelf
    },
    // 关系现状三项宽度/数值（下标 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.isSwitchable) {
        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
    },
    // 自我加载可见家庭成员（无 props 用法兜底，替代父组件传 members）
    loadVisibleMembers: function() {
      var self = this
      var token = uni.getStorageSync('token')
      if (!token) return
      getFamilyMemberList({ visibleOnly: true }).then(function(res) {
        if (res && res.code === 200) {
          var arr = res.data || []
          if (arr instanceof Array && arr.length > 0) {
            self.renderedMembers = arr
          }
        }
      }).catch(function() {
        // 静默失败，保持空态
      })
    },
    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' })
    },
    // 邀请成员：跳转家庭成员管理页，使用小程序原生分享（转发邀请卡片给微信好友）
    inviteMember: function() {
      this.closeMenu()
      uni.navigateTo({ url: '/pages/profile-extra/family-members' })
    },
    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>