cfc/cfc-frontend/pages/teacher/families.vue

<template>
  <view class="container">
    <view class="filter-bar">
      <view class="filter-item" :class="{ active: filterType === 'all' }" @click="changeFilter('all')">全部</view>
      <view class="filter-item" :class="{ active: filterType === 'active' }" @click="changeFilter('active')">活跃</view>
      <view class="filter-item" :class="{ active: filterType === 'pending' }" @click="changeFilter('pending')">待审核</view>
    </view>

    <view class="family-list">
      <view class="family-card" v-for="family in families" :key="family.id" @click="viewFamily(family)">
        <view class="family-header">
          <text class="family-name">{{ family.familyName || '家庭' + family.familyId }}</text>
          <text class="family-status">{{ family.status === 'active' ? '服务中' : '已暂停' }}</text>
        </view>
        <view class="family-info">
          <text class="info-item">👶 {{ family.childrenCount || 0 }}个孩子</text>
          <text class="info-item">📍 {{ family.address || '未设置地址' }}</text>
        </view>
        <view class="family-tasks">
          <text class="task-info">今日任务: {{ family.todayTaskCount || 0 }}/{{ family.totalTaskCount || 0 }}</text>
        </view>
        <view class="family-actions">
          <button class="btn-action" size="mini" @click.stop="viewDetail(family)">查看详情</button>
          <button class="btn-action primary" size="mini" @click.stop="sendMessage(family)">发消息</button>
        </view>
      </view>
      <view class="empty-tip" v-if="families.length === 0">
        <text>暂无服务家庭</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getBoundFamilies } from '../../utils/api.js'

export default {
  data() {
    return {
      filterType: 'all',
      families: []
    }
  },
  onLoad() {
    this.loadFamilies()
  },
  methods: {
    async loadFamilies() {
      try {
        const res = await getBoundFamilies()
        if (res.data) {
          this.families = res.data
        }
      } catch (e) {
        console.error(e)
      }
    },
    changeFilter(type) {
      this.filterType = type
    },
    viewFamily(family) {
      uni.navigateTo({
        url: `/pages/family/detail?id=${family.familyId}`
      })
    },
    viewDetail(family) {
      this.viewFamily(family)
    },
    sendMessage(family) {
      uni.navigateTo({
        url: `/pages/teacher/messages?familyId=${family.familyId}`
      })
    }
  }
}
</script>

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

.filter-bar {
  display: flex;
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;
}

.filter-item {
  flex: 1;
  text-align: center;
  padding: 16rpx 0;
  font-size: 28rpx;
  color: #666;
  border-radius: 8rpx;
}

.filter-item.active {
  background: #667eea;
  color: #fff;
}

.family-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.family-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.family-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.family-status {
  font-size: 24rpx;
  color: #67C23A;
  background: #f0f9eb;
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
}

.family-info {
  margin-bottom: 16rpx;
}

.info-item {
  font-size: 26rpx;
  color: #666;
  display: block;
  margin-bottom: 8rpx;
}

.family-tasks {
  padding: 16rpx 0;
  border-top: 1rpx solid #f0f0f0;
  border-bottom: 1rpx solid #f0f0f0;
  margin-bottom: 20rpx;
}

.task-info {
  font-size: 26rpx;
  color: #666;
}

.family-actions {
  display: flex;
  justify-content: flex-end;
}

.btn-action {
  margin-left: 20rpx;
  font-size: 24rpx;
}

.btn-action.primary {
  background: #667eea;
  color: #fff;
}

.empty-tip {
  text-align: center;
  color: #999;
  padding: 60rpx 0;
}
</style>