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

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

    <!-- 操作按钮组 -->
    <view class="action-bar">
      <view class="action-btn add-btn" @click="onAddMember">
        <text class="action-icon">＋</text>
        <text class="action-text">添加成员</text>
      </view>
      <view class="action-btn invite-btn" @click="onInvite">
        <text class="action-icon">📨</text>
        <text class="action-text">邀请成员</text>
      </view>
    </view>

    <!-- 家长组 -->
    <view class="section-title">家长 ({{ parentMembers.length }})</view>
    <view class="member-list">
      <view class="member-item" v-for="m in parentMembers" :key="m.id">
        <image class="member-avatar" :src="m.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
        <view class="member-detail">
          <text class="member-name">{{ m.nickname || '未设置' }}</text>
          <view class="member-tags">
            <text class="member-role-tag">{{ m.roleLabel || '家长' }}</text>
            <text class="member-source-tag" v-if="m.source === 'family_member'">手动添加</text>
          </view>
          <!-- 三维评分进度条 -->
          <view class="member-quality-scores" v-if="qualityScores[m.id]">
            <view class="score-item">
              <text class="score-label">信任</text>
              <view class="score-bar-bg">
                <view class="score-bar-fill trust" :style="{width: (qualityScores[m.id].trustScore || 0) + '%'}"></view>
              </view>
              <text class="score-value">{{ Math.round(qualityScores[m.id].trustScore || 0) }}</text>
            </view>
            <view class="score-item">
              <text class="score-label">亲密</text>
              <view class="score-bar-bg">
                <view class="score-bar-fill intimacy" :style="{width: (qualityScores[m.id].intimacyScore || 0) + '%'}"></view>
              </view>
              <text class="score-value">{{ Math.round(qualityScores[m.id].intimacyScore || 0) }}</text>
            </view>
            <view class="score-item">
              <text class="score-label">沟通</text>
              <view class="score-bar-bg">
                <view class="score-bar-fill communication" :style="{width: (qualityScores[m.id].communicationScore || 0) + '%'}"></view>
              </view>
              <text class="score-value">{{ Math.round(qualityScores[m.id].communicationScore || 0) }}</text>
            </view>
          </view>
        </view>
        <button class="btn-switch" v-if="m.source !== 'parent' || m.id !== userId" @click="onSwitchMember(m)">切换</button>
        <button class="btn-edit" v-if="m.source === 'family_member'" @click="onEditRelation(m)">编辑</button>
        <button class="btn-kick" v-if="isAdmin && m.source === 'family_member'" @click="confirmKick(m)">移除</button>
      </view>
      <view v-if="parentMembers.length === 0" class="empty-row">
        <text class="empty-text">暂无家长成员</text>
      </view>
    </view>

    <!-- 孩子组 -->
    <view class="section-title">
      孩子 ({{ childMembers.length }})
    </view>
    <view class="member-list">
      <view class="member-item" v-for="m in childMembers" :key="m.id">
        <view class="member-avatar child-avatar">👶</view>
        <view class="member-detail">
          <text class="member-name">{{ m.nickname || '未设置' }}</text>
          <view class="member-tags">
            <text class="member-role-tag">{{ m.roleLabel || '孩子' }}</text>
            <text class="member-source-tag" v-if="m.source === 'family_member'">手动添加</text>
            <text class="member-extra" v-if="m.age"> {{ m.age }}岁</text>
            <text class="member-extra" v-if="m.gender"> · {{ m.gender === 'male' ? '男' : '女' }}</text>
          </view>
        </view>
        <button class="btn-switch" @click="onSwitchMember(m)">切换</button>
        <button class="btn-edit" v-if="m.source === 'family_member'" @click="onEditRelation(m)">编辑</button>
        <button class="btn-kick" v-if="isAdmin && m.source === 'family_member'" @click="confirmKick(m)">移除</button>
      </view>
      <view v-if="childMembers.length === 0" class="empty-row">
        <text class="empty-text">暂无孩子成员</text>
      </view>
    </view>

    <!-- 邀请卡片弹窗 -->
    <view class="modal-mask" v-if="showInviteCard" @click="showInviteCard = false">
      <view class="invite-card" @click.stop>
        <text class="invite-card-title">邀请家庭成员</text>
        <text class="invite-card-family">{{ familyName }}</text>

        <!-- 二维码 -->
        <view class="invite-qr-wrap" v-if="inviteQrCode">
          <image class="invite-qr" :src="inviteQrCode" mode="widthFix" />
        </view>
        <view class="invite-qr-wrap loading-qr" v-else>
          <text class="loading-text">生成二维码中...</text>
        </view>

        <!-- 邀请码 -->
        <view class="invite-code-section">
          <text class="invite-code-label">邀请码</text>
          <view class="invite-code-row">
            <text class="invite-code">{{ inviteCode }}</text>
            <button class="copy-btn" @click="onCopyCode">复制</button>
          </view>
        </view>

        <text class="invite-tip">让好友在「我的」页面输入邀请码加入家庭</text>
        <button class="close-btn" @click="showInviteCard = false">关闭</button>
      </view>
    </view>

    <!-- 编辑关系弹窗 -->
    <view class="modal-mask" v-if="showEditRelation" @click="showEditRelation = false">
      <view class="edit-relation-card" @click.stop>
        <text class="edit-relation-title">编辑成员关系</text>
        <view class="edit-relation-member">
          <text class="edit-relation-name">{{ editTargetMember && editTargetMember.nickname || '' }}</text>
        </view>
        <relationship-picker v-model="editRelationType" />
        <view class="edit-relation-actions">
          <button class="btn-cancel" @click="showEditRelation = false">取消</button>
          <button class="btn-save" @click="onSaveRelation">保存</button>
        </view>
      </view>
    </view>

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

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

export default {
  components: { RelationshipPicker },
  data() {
    return {
      userId: 0,
      familyId: 0,
      familyName: '',
      inviteCode: '',
      inviteQrCode: '',
      creatorId: null,
      members: [],
      isAdmin: false,
      loading: false,
      showInviteCard: false,
      showEditRelation: false,
      editTargetMember: null,
      editRelationType: '',
      qualityScores: {}
    }
  },
  computed: {
    parentMembers() {
      return this.members.filter(function(m) { return m.effectiveRole === 'parent' })
    },
    childMembers() {
      return this.members.filter(function(m) { return m.effectiveRole === 'child' })
    },
    editableMembers() {
      return this.members.filter(function(m) { return m.source === 'family_member' })
    }
  },
  onShow() {
    var userInfo = uni.getStorageSync('userInfo')
    this.userId = (userInfo && userInfo.id) || 0
    this.loadMembers()
  },
  methods: {
    async loadMembers() {
      this.loading = true
      try {
        var res = await listFamilyMembers()
        if (res.code === 200 && res.data) {
          this.members = res.data || []
          // 从members中提取家庭信息（取第一个parent的familyId等）
          // 仍需调用旧接口获取家庭名/邀请码/creatorId
          this.loadFamilyInfo()
        }
      } catch (e) {
        uni.showToast({ title: '加载失败', icon: 'none' })
      } finally {
        this.loading = false
      }
    },
    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) {
        // 静默处理
      }
    },
    onAddMember() {
      uni.navigateTo({ url: '/pages/family/add-member' })
    },
    
    async onSwitchMember(member) {
      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/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) {
      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.showInviteCard = true
      this.inviteQrCode = ''
      try {
        var res = await generateFamilyInviteQrCode()
        if (res.code === 200 && res.data) {
          this.inviteCode = res.data.inviteCode
          this.inviteQrCode = res.data.qrCodeBase64
        } else {
          uni.showToast({ title: res.message || '生成失败', icon: 'none' })
        }
      } catch (e) {
        uni.showToast({ title: '生成失败', icon: 'none' })
      }
    },
    onCopyCode() {
      uni.setClipboardData({
        data: this.inviteCode,
        success: function() {
          uni.showToast({ title: '已复制邀请码', icon: 'success' })
        }
      })
    },
    onEditRelation(member) {
      this.editTargetMember = member
      this.editRelationType = member.relationshipType || ''
      this.showEditRelation = true
    },
    doQuestionnaire(member) {
      uni.navigateTo({ url: '/pages/action/relationship-questionnaire?memberId=' + member.id })
    },
    recordInteraction(member) {
      uni.navigateTo({ url: '/pages/action/interaction-log?memberId=' + member.id })
    },
    async onSaveRelation() {
      if (!this.editTargetMember || !this.editRelationType) {
        uni.showToast({ title: '请选择关系类型', icon: 'none' })
        return
      }
      try {
        var res = await updateFamilyMember({
          memberId: this.editTargetMember.id,
          relationshipType: this.editRelationType
        })
        if (res.code === 200) {
          uni.showToast({ title: '修改成功', icon: 'success' })
          this.showEditRelation = false
          this.loadMembers()
        } else {
          uni.showToast({ title: res.message || '修改失败', icon: 'none' })
        }
      } catch (e) {
        uni.showToast({ title: '修改失败', icon: 'none' })
      }
    }
  }
}
</script>

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

/* 家庭信息头部 */
.family-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  margin-bottom: 24rpx;
  text-align: center;
  color: #fff;
}
.family-header-icon {
  font-size: 56rpx;
  margin-bottom: 12rpx;
}
.family-name {
  font-size: 36rpx;
  font-weight: bold;
  display: block;
}
.family-member-count {
  font-size: 26rpx;
  opacity: 0.85;
  margin-top: 8rpx;
  display: block;
}

/* 操作按钮栏 */
.action-bar {
  display: flex;
  gap: 20rpx;
  margin-bottom: 24rpx;
}
.action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx 0;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
}
.action-btn:active {
  opacity: 0.8;
}
.action-icon {
  font-size: 32rpx;
  margin-right: 8rpx;
}
.action-text {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
}

/* 分区标题 */
.section-title {
  font-size: 30rpx;
  font-weight: bold;
  margin: 20rpx 0 16rpx;
  padding-left: 10rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 成员列表 */
.member-list {
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}
.member-item {
  display: flex;
  align-items: center;
  padding: 24rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}
.member-item:last-child {
  border-bottom: none;
}
.member-avatar {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  margin-right: 20rpx;
  background: #f0f0f0;
  flex-shrink: 0;
}
.child-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
}
.member-detail {
  flex: 1;
  min-width: 0;
}
.member-name {
  font-size: 30rpx;
  font-weight: 500;
  display: block;
}
.member-tags {
  display: flex;
  align-items: center;
  margin-top: 6rpx;
  gap: 8rpx;
  flex-wrap: wrap;
}
.member-role-tag {
  font-size: 22rpx;
  color: #667eea;
  background: #eef0ff;
  padding: 2rpx 12rpx;
  border-radius: 6rpx;
}
.member-source-tag {
  font-size: 22rpx;
  color: #F97316;
  background: #fff7ed;
  padding: 2rpx 12rpx;
  border-radius: 6rpx;
}
.member-extra {
  font-size: 24rpx;
  color: #999;
  margin-top: 4rpx;
  display: inline;
}
.btn-switch {
  font-size: 24rpx;
  color: #0EA5E9;
  background: #f0f9ff;
  border: none;
  padding: 8rpx 20rpx;
  border-radius: 8rpx;
  line-height: 1.5;
  margin-left: 12rpx;
  flex-shrink: 0;
}
.btn-kick {
  font-size: 24rpx;
  color: #f56c6c;
  background: #fef0f0;
  border: none;
  padding: 8rpx 20rpx;
  border-radius: 8rpx;
  line-height: 1.5;
  margin-left: 12rpx;
  flex-shrink: 0;
}
.empty-row {
  padding: 40rpx 0;
  text-align: center;
}
.empty-text {
  font-size: 26rpx;
  color: #bbb;
}

/* 弹窗遮罩 */
.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;
}

/* 邀请卡片 */
.invite-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 40rpx;
  width: 580rpx;
  text-align: center;
}
.invite-card-title {
  font-size: 32rpx;
  font-weight: bold;
  display: block;
}
.invite-card-family {
  font-size: 28rpx;
  color: #667eea;
  display: block;
  margin-top: 8rpx;
}
.invite-qr-wrap {
  margin: 30rpx auto;
  width: 320rpx;
  height: 320rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.invite-qr {
  width: 320rpx;
  height: 320rpx;
}
.loading-qr {
  background: #f5f5f5;
  border-radius: 16rpx;
}
.invite-code-section {
  margin: 20rpx 0;
}
.invite-code-label {
  font-size: 24rpx;
  color: #999;
  display: block;
  margin-bottom: 8rpx;
}
.invite-code-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
}
.invite-code {
  font-size: 48rpx;
  font-weight: bold;
  letter-spacing: 6rpx;
  color: #333;
}
.copy-btn {
  font-size: 24rpx;
  color: #667eea;
  background: #eef0ff;
  border: none;
  padding: 8rpx 20rpx;
  border-radius: 8rpx;
  line-height: 1.5;
}
.invite-tip {
  font-size: 24rpx;
  color: #bbb;
  display: block;
  margin: 20rpx 0;
}
.close-btn {
  width: 100%;
  background: #f5f5f5;
  border: none;
  border-radius: 12rpx;
  padding: 18rpx 0;
  font-size: 28rpx;
  color: #666;
}

/* 加载 */
.loading-wrap {
  text-align: center;
  padding: 60rpx 0;
}
.loading-text {
  font-size: 28rpx;
  color: #999;
}
.btn-edit {
  font-size: 24rpx;
  color: #67c23a;
  background: #f0f9eb;
  border: none;
  padding: 8rpx 20rpx;
  border-radius: 8rpx;
  line-height: 1.5;
  margin-left: 12rpx;
  flex-shrink: 0;
}
.edit-relation-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 40rpx;
  width: 580rpx;
}
.edit-relation-title {
  font-size: 32rpx;
  font-weight: bold;
  display: block;
  text-align: center;
  margin-bottom: 20rpx;
}
.edit-relation-member {
  text-align: center;
  margin-bottom: 24rpx;
}
.edit-relation-name {
  font-size: 28rpx;
  color: #333;
}
.edit-relation-actions {
  display: flex;
  gap: 20rpx;
  margin-top: 30rpx;
}
.btn-cancel {
  flex: 1;
  background: #f5f5f5;
  border: none;
  border-radius: 12rpx;
  padding: 18rpx 0;
  font-size: 28rpx;
  color: #666;
}
.btn-save {
  flex: 1;
  background: #F97316;
  border: none;
  border-radius: 12rpx;
  padding: 18rpx 0;
  font-size: 28rpx;
  color: #fff;
}
/* 三维评分进度条 */
.member-quality-scores {
  display: flex;
  flex-direction: column;
  gap: 6rpx;
  padding: 8rpx 0;
}
.score-item {
  display: flex;
  align-items: center;
  gap: 8rpx;
}
.score-label {
  width: 56rpx;
  font-size: 20rpx;
  color: #999;
}
.score-bar-bg {
  flex: 1;
  height: 10rpx;
  background: #f0f0f0;
  border-radius: 5rpx;
  overflow: hidden;
}
.score-bar-fill {
  height: 100%;
  border-radius: 5rpx;
}
.score-bar-fill.trust { background: #10B981; }
.score-bar-fill.intimacy { background: #FF6B9D; }
.score-bar-fill.communication { background: #6366F1; }
.score-value {
  width: 44rpx;
  font-size: 18rpx;
  color: #999;
  text-align: right;
}
</style>