cfc/cfc-frontend/pages/profile-extra/family-members.vue

<template>
  <view class="container">
    <!-- ===== 家庭信息头部 ===== -->
    <view class="family-header">
      <view class="family-header-content">
        <text class="family-header-icon">🏠</text>
        <view class="family-header-text">
          <text class="family-name">{{ familyName || '我的家庭' }}</text>
          <text class="family-member-count">{{ members.length }} 位成员</text>
        </view>
      </view>
    </view>

    <!-- ===== 成员卡片列表 ===== -->
    <view class="member-list" v-if="members.length > 0">
      <view class="member-card" v-for="m in members" :key="m.id" @click="showMemberDetail(m)">
        <image class="member-avatar" :src="m.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
        <view class="member-info">
          <text class="member-name">{{ m.nickname || '未设置' }}</text>
          <text class="member-role-tag">{{ m.relativeLabel || m.roleLabel || (m.effectiveRole === 'parent' ? '家长' : '孩子') }}</text>
        </view>
        <text class="member-arrow">›</text>
      </view>
    </view>

    <!-- ===== 空状态 ===== -->
    <view v-if="members.length === 0" class="empty-state">
      <text class="empty-icon">👨‍👩‍👧‍👦</text>
      <text class="empty-title">还没有家庭成员</text>
      <text class="empty-desc">邀请家人加入，一起记录成长</text>
      <button class="empty-invite-btn" @click="onInvite">📨 邀请家人</button>
    </view>

    <!-- ===== 分享邀请卡海报 ===== -->
    <SharePoster :show="showPoster" :referralCode="inviteCode" :qrCodeBase64="inviteQrCode" :nickname="userNickname" :userAvatar="userAvatar" @close="showPoster = false" />

    <!-- ===== 成员详情弹窗 ===== -->
    <view class="modal-mask" v-if="showMemberDetailModal" @click="showMemberDetailModal = false">
      <view class="member-detail-card" @click.stop>
        <view class="detail-header">
          <image class="detail-avatar" :src="detailMember && (detailMember.avatar || '/static/default-avatar.png')" mode="aspectFill"></image>
          <view class="detail-info">
            <text class="detail-name">{{ detailMember && detailMember.nickname || '' }}</text>
            <text class="detail-relation">{{ detailMember && (detailMember.relativeLabel || detailMember.roleLabel || '') }}</text>
          </view>
          <text class="detail-close" @click="showMemberDetailModal = false">×</text>
        </view>

        <!-- 详情:性别/年龄/手机号 -->
        <view class="detail-meta">
          <text class="detail-meta-item" v-if="detailMember && detailMember.gender">性别: {{ detailMember.gender === 'male' ? '男' : '女' }}</text>
          <text class="detail-meta-item" v-if="detailMember && detailMember.age">{{ detailMember.age }}岁</text>
          <text class="detail-meta-item" v-if="detailMember && detailMember.phone">{{ detailMember.phone }}</text>
        </view>

        <!-- 三维评分展示 -->
        <view class="detail-scores">
          <text class="detail-section-title">关系质量</text>
          <view class="detail-score-item">
            <text class="detail-score-label">信任</text>
            <view class="detail-score-bar-bg">
              <view class="detail-score-bar-fill trust" :style="{width: (detailMemberScores.trustScore || 0) + '%'}"></view>
            </view>
            <text class="detail-score-value">{{ Math.round(detailMemberScores.trustScore || 0) }}</text>
          </view>
          <view class="detail-score-item">
            <text class="detail-score-label">亲密</text>
            <view class="detail-score-bar-bg">
              <view class="detail-score-bar-fill intimacy" :style="{width: (detailMemberScores.intimacyScore || 0) + '%'}"></view>
            </view>
            <text class="detail-score-value">{{ Math.round(detailMemberScores.intimacyScore || 0) }}</text>
          </view>
          <view class="detail-score-item">
            <text class="detail-score-label">沟通</text>
            <view class="detail-score-bar-bg">
              <view class="detail-score-bar-fill communication" :style="{width: (detailMemberScores.communicationScore || 0) + '%'}"></view>
            </view>
            <text class="detail-score-value">{{ Math.round(detailMemberScores.communicationScore || 0) }}</text>
          </view>
        </view>

        <!-- 操作按钮 -->
        <view class="detail-actions">
          <button class="detail-action-btn action-switch" @click="onSwitchMember(detailMember)" v-if="!(detailMember.source === 'parent' && detailMember.userId === userId)">切换身份</button>
          <button class="detail-action-btn action-edit" @click="onEditRelation(detailMember)" v-if="canEditMember(detailMember)">编辑资料</button>
          <button class="detail-action-btn action-questionnaire" @click="doQuestionnaire(detailMember)">关系问卷</button>
          <button class="detail-action-btn action-interaction" @click="recordInteraction(detailMember)">记录互动</button>
          <button class="detail-action-btn action-kick" @click="confirmKick(detailMember)" v-if="isAdmin && detailMember.source === 'family_member'">移出家庭</button>
        </view>
      </view>
    </view>

    <!-- ===== 底部操作栏 ===== -->
    <view class="bottom-bar">
      <button class="bottom-btn btn-add" @click="onAddMember">＋ 添加成员</button>
      <button class="bottom-btn btn-invite" @click="onInvite">📨 邀请成员</button>
    </view>

    <!-- ===== 加载状态 ===== -->
    <view v-if="loading" class="loading-wrap">
      <text class="loading-text">加载中...</text>
    </view>
  </view>
</template>

<script>
import {
  listFamilyMembers,
  switchToFamilyMember,
  kickFamilyMemberById,
  generateFamilyInviteQrCode,
  getFamilyMembers,
  updateFamilyMember
} from '../../utils/api.js'
import store from '../../store/index.js'
import SharePoster from '@/components/SharePoster.vue'

export default {
  components: { SharePoster },
  data() {
    return {
      userId: 0,
      familyId: 0,
      familyName: '',
      inviteCode: '',
      inviteQrCode: '',
      creatorId: null,
      members: [],
      isAdmin: false,
      loading: false,
      showPoster: false,
      showMemberDetailModal: false,
      detailMember: null,
      memberScores: {},
      userNickname: '',
      userAvatar: ''
    }
  },
  computed: {
    filteredMembers() {
      return this.members
    },
    detailMemberScores() {
      if (!this.detailMember) return {}
      return this.memberScores[this.detailMember.id] || {}
    }
  },
  onShow() {
    var userInfo = uni.getStorageSync('userInfo')
    this.userId = (userInfo && userInfo.id) || 0
    this.userNickname = uni.getStorageSync('nickname') || (userInfo && userInfo.nickname) || ''
    this.userAvatar = uni.getStorageSync('avatar') || (userInfo && userInfo.avatar) || ''
    this.loadMembers()
  },
  methods: {
    async loadMembers() {
      this.loading = true
      try {
        var res = await listFamilyMembers()
        if (res.code === 200 && res.data) {
          this.members = res.data || []
          this.buildScoreMap(res.data)
          this.loadFamilyInfo()
        }
      } catch (e) {
        uni.showToast({ title: '加载失败', icon: 'none' })
      } finally {
        this.loading = false
      }
    },
    buildScoreMap(members) {
      var map = {}
      if (members && members.length) {
        for (var i = 0; i < members.length; i++) {
          var m = members[i]
          map[m.id] = {
            trustScore: m.trustScore || 0,
            intimacyScore: m.intimacyScore || 0,
            communicationScore: m.communicationScore || 0
          }
        }
      }
      this.memberScores = map
    },
    async loadFamilyInfo() {
      try {
        var res = await getFamilyMembers()
        if (res.code === 200 && res.data) {
          var data = res.data
          this.familyId = data.familyId
          this.familyName = data.familyName
          this.inviteCode = data.inviteCode || ''
          this.creatorId = data.creatorId
          this.isAdmin = this.creatorId === this.userId
        }
      } catch (e) {
        // 静默处理
      }
    },
    showMemberDetail(member) {
      this.detailMember = member
      this.showMemberDetailModal = true
    },
    canEditMember(member) {
      if (member.userId) return false
      return member.source === 'family_member'
    },
    onAddMember() {
      uni.navigateTo({ url: '/pages/family/add-member' })
    },
    async onSwitchMember(member) {
      this.showMemberDetailModal = false
      try {
        var res = await switchToFamilyMember(member.id, member.source)
        if (res.code === 200 && res.data) {
          store.commit('switchToMember', {
            memberId: res.data.memberId,
            effectiveRole: res.data.effectiveRole
          })
          uni.showToast({ title: '已切换到' + (member.nickname || '该成员'), icon: 'success' })
          setTimeout(function() {
            uni.reLaunch({ url: '/pages/index-home/index' })
          }, 1000)
        } else {
          uni.showToast({ title: res.message || '切换失败', icon: 'none' })
        }
      } catch (e) {
        uni.showToast({ title: '切换失败', icon: 'none' })
      }
    },
    confirmKick(member) {
      var self = this
      uni.showModal({
        title: '移除成员',
        content: '确定要将 ' + (member.nickname || '该成员') + ' 移出家庭吗？',
        success: function(res) {
          if (res.confirm) {
            self.onKickMember(member)
          }
        }
      })
    },
    async onKickMember(member) {
      this.showMemberDetailModal = false
      try {
        var res = await kickFamilyMemberById(member.id)
        if (res.code === 200) {
          uni.showToast({ title: '已移除', icon: 'success' })
          this.loadMembers()
        } else {
          uni.showToast({ title: res.message || '操作失败', icon: 'none' })
        }
      } catch (e) {
        uni.showToast({ title: '操作失败', icon: 'none' })
      }
    },
    async onInvite() {
      this.inviteQrCode = ''
      this.inviteCode = ''
      uni.showLoading({ title: '生成邀请...' })
      try {
        var res = await generateFamilyInviteQrCode()
        if (res.code === 200 && res.data) {
          this.inviteCode = res.data.inviteCode
          this.inviteQrCode = res.data.qrCodeBase64
          this.showPoster = true
        } else {
          uni.showToast({ title: res.message || '生成失败', icon: 'none' })
        }
      } catch (e) {
        uni.showToast({ title: '生成失败', icon: 'none' })
      } finally {
        uni.hideLoading()
      }
    },
    onEditRelation(member) {
      this.showMemberDetailModal = false
      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 })
    },
    doQuestionnaire(member) {
      this.showMemberDetailModal = false
      uni.navigateTo({ url: '/pages/action/relationship-questionnaire?memberId=' + member.id })
    },
    recordInteraction(member) {
      this.showMemberDetailModal = false
      uni.navigateTo({ url: '/pages/action/interaction-log?memberId=' + member.id })
    }
  }
}
</script>

<style>
.container {
  padding: 30rpx 30rpx 140rpx;
  min-height: 100vh;
  background: #F5F0EB;
}

/* ===== 家庭信息头部 ===== */
.family-header {
  background: linear-gradient(135deg, #F97316, #EA580C);
  border-radius: 20rpx;
  padding: 36rpx 30rpx;
  margin-bottom: 24rpx;
  color: #fff;
  text-align: center;
}
.family-header-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.family-header-icon {
  font-size: 48rpx;
  margin-bottom: 8rpx;
}
.family-header-text {
  text-align: center;
}
.family-name {
  font-size: 36rpx;
  font-weight: bold;
  display: block;
}
.family-member-count {
  font-size: 24rpx;
  opacity: 0.85;
  margin-top: 4rpx;
  display: block;
}

/* ===== 成员卡片 ===== */
.member-list {
  padding-bottom: 20rpx;
}
.member-card {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx 28rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}
.member-card:active {
  background: #FFFCF5;
}
.member-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
  background: #f0f0f0;
  flex-shrink: 0;
}
.member-info {
  flex: 1;
  min-width: 0;
}
.member-name {
  font-size: 30rpx;
  font-weight: 600;
  display: block;
  color: #333;
}
.member-role-tag {
  display: inline-block;
  font-size: 22rpx;
  color: #F97316;
  background: #FFF7ED;
  padding: 4rpx 14rpx;
  border-radius: 8rpx;
  margin-top: 6rpx;
}
.member-arrow {
  font-size: 36rpx;
  color: #ccc;
  margin-left: 12rpx;
  flex-shrink: 0;
}

/* ===== 空状态 ===== */
.empty-state {
  text-align: center;
  padding: 100rpx 30rpx;
}
.empty-icon {
  font-size: 100rpx;
  display: block;
  margin-bottom: 20rpx;
}
.empty-title {
  font-size: 32rpx;
  color: #666;
  display: block;
  margin-bottom: 12rpx;
}
.empty-desc {
  font-size: 26rpx;
  color: #999;
  display: block;
  margin-bottom: 40rpx;
}
.empty-invite-btn {
  background: linear-gradient(135deg, #F97316, #EA580C);
  color: #fff;
  border: none;
  border-radius: 40rpx;
  padding: 20rpx 50rpx;
  font-size: 28rpx;
  line-height: 1.4;
}
.empty-invite-btn:active {
  opacity: 0.85;
}

/* ===== 底部操作栏 ===== */
.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16rpx 30rpx calc(16rpx + constant(safe-area-inset-bottom));
  padding: 16rpx 30rpx calc(16rpx + env(safe-area-inset-bottom));
  background: #fff;
  display: flex;
  gap: 20rpx;
  box-shadow: 0 -2rpx 12rpx rgba(0,0,0,0.06);
  z-index: 50;
}
.bottom-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  text-align: center;
  border: none;
}
.bottom-btn:active {
  opacity: 0.85;
}
.btn-add {
  background: #fff;
  color: #F97316;
  border: 2rpx solid #F97316;
}
.btn-invite {
  background: linear-gradient(135deg, #F97316, #EA580C);
  color: #fff;
}

/* ===== 弹窗遮罩 ===== */
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

/* ===== 成员详情弹窗 ===== */
.member-detail-card {
  background: #fff;
  border-radius: 24rpx;
  width: 600rpx;
  max-height: 80vh;
  overflow-y: auto;
  padding: 36rpx 32rpx 32rpx;
}
.detail-header {
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 20rpx;
}
.detail-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 20rpx;
  background: #f0f0f0;
  flex-shrink: 0;
}
.detail-info {
  flex: 1;
}
.detail-name {
  font-size: 34rpx;
  font-weight: bold;
  display: block;
}
.detail-relation {
  font-size: 26rpx;
  color: #F97316;
  margin-top: 4rpx;
  display: block;
}
.detail-close {
  font-size: 44rpx;
  color: #999;
  padding: 4rpx 8rpx;
  position: absolute;
  top: -12rpx;
  right: -8rpx;
}
.detail-meta {
  display: flex;
  gap: 16rpx;
  flex-wrap: wrap;
  margin-bottom: 20rpx;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}
.detail-meta-item {
  font-size: 24rpx;
  color: #888;
}

/* 详情三维评分 */
.detail-scores {
  margin-bottom: 24rpx;
}
.detail-section-title {
  font-size: 28rpx;
  font-weight: 600;
  display: block;
  margin-bottom: 12rpx;
  padding-left: 12rpx;
  border-left: 4rpx solid #F97316;
}
.detail-score-item {
  display: flex;
  align-items: center;
  gap: 10rpx;
  margin-bottom: 8rpx;
}
.detail-score-label {
  width: 56rpx;
  font-size: 22rpx;
  color: #888;
}
.detail-score-bar-bg {
  flex: 1;
  height: 12rpx;
  background: #f0f0f0;
  border-radius: 6rpx;
  overflow: hidden;
}
.detail-score-bar-fill {
  height: 100%;
  border-radius: 6rpx;
  transition: width 0.3s ease;
}
.detail-score-bar-fill.trust { background: #10B981; }
.detail-score-bar-fill.intimacy { background: #FF6B9D; }
.detail-score-bar-fill.communication { background: #6366F1; }
.detail-score-value {
  width: 44rpx;
  font-size: 22rpx;
  font-weight: 600;
  color: #555;
  text-align: right;
}

/* ===== 操作按钮区（2列flex网格） ===== */
.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  padding-top: 8rpx;
  border-top: 1rpx solid #f0f0f0;
}
.detail-action-btn {
  width: calc(50% - 8rpx);
  border: none;
  border-radius: 12rpx;
  padding: 20rpx 0;
  font-size: 26rpx;
  text-align: center;
  line-height: 1.4;
}
.detail-action-btn:active {
  opacity: 0.8;
}
.action-switch {
  background: #f0f9ff;
  color: #0EA5E9;
}
.action-edit {
  background: #f0f9eb;
  color: #67c23a;
}
.action-questionnaire {
  background: #f3e8ff;
  color: #8b5cf6;
}
.action-interaction {
  background: #fff7ed;
  color: #F97316;
}
.action-kick {
  background: #fef0f0;
  color: #f56c6c;
}

/* ===== 加载 ===== */
.loading-wrap {
  text-align: center;
  padding: 60rpx 0;
}
.loading-text {
  font-size: 28rpx;
  color: #999;
}
</style>