cfc/cfc-frontend/pages/parent/child-detail.vue

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

    <template v-if="!loading">
      <!-- 孩子信息卡片 -->
      <view class="child-info-card">
        <view class="child-info-avatar" :class="'child-avatar-color-' + (childId % 6)">
          <text class="child-avatar-text">{{ childName ? childName[0] : '?' }}</text>
        </view>
        <view class="child-info-body">
          <text class="child-info-name">{{ childName }}</text>
          <view class="child-info-stats">
            <text class="stat-item stat-points">⭐ {{ childInfo.totalPoints || 0 }} 分</text>
            <text class="stat-item stat-streak" v-if="childInfo.streakDays > 0">🔥 连续 {{ childInfo.streakDays }} 天</text>
          </view>
          <view class="child-info-progress" v-if="todayTasks.length > 0">
            <text class="progress-label">
              今日任务 {{ completedCount }}/{{ todayTasks.length }} 完成
            </text>
            <view class="progress-bar-bg">
              <view class="progress-bar-fill" :style="{ width: taskProgressPercent + '%' }"></view>
            </view>
          </view>
        </view>
      </view>

      <!-- 操作区 -->
      <view class="action-section">
        <view class="section-title">快捷操作</view>
        <view class="action-grid">
          <view class="action-btn" @click="goToCreateTask">
            <view class="action-btn-icon create-icon">📝</view>
            <text class="action-btn-label">创建任务</text>
          </view>
          <view class="action-btn" @click="goToWishReview">
            <view class="action-btn-icon wish-icon">💝</view>
            <text class="action-btn-label">心愿审核</text>
            <text class="action-btn-badge" v-if="pendingWishCount > 0">{{ pendingWishCount }}</text>
          </view>
          <view class="action-btn" @click="goToGrowth">
            <view class="action-btn-icon growth-icon">📊</view>
            <text class="action-btn-label">成长档案</text>
          </view>
          <view class="action-btn" @click="goToCompletionStats">
            <view class="action-btn-icon stats-icon">📈</view>
            <text class="action-btn-label">完成分析</text>
          </view>
        </view>
      </view>

      <!-- 今日任务 -->
      <view class="tasks-section">
        <view class="section-title">今日任务</view>
        <view class="tasks-card" v-if="todayTasks.length > 0">
          <view
            class="task-item"
            v-for="task in todayTasks"
            :key="task.id"
          >
            <text class="task-status-icon">{{ task.status === 'completed' ? '✅' : '⏳' }}</text>
            <view class="task-info">
              <text class="task-title">{{ task.title }}</text>
              <text class="task-points" v-if="task.points">+{{ task.points }}分</text>
            </view>
          </view>
        </view>
        <view class="empty-card" v-else>
          <text class="empty-icon">🎉</text>
          <text class="empty-text">今日暂无任务</text>
        </view>
      </view>

      <!-- 待处理 -->
      <view class="pending-section">
        <view class="section-title">待处理</view>
        <view class="pending-card" v-if="pendingReviewTasks.length > 0 || pendingWishes.length > 0">
          <view
            class="pending-item"
            v-for="task in pendingReviewTasks"
            :key="task.id"
          >
            <text class="pending-icon">📋</text>
            <text class="pending-desc">{{ task.title }}</text>
            <text class="pending-tag tag-review">待审核</text>
          </view>
          <view
            class="pending-item"
            v-for="wish in pendingWishes"
            :key="wish.id"
          >
            <text class="pending-icon">💝</text>
            <text class="pending-desc">{{ wish.title }}</text>
            <text class="pending-tag tag-wish">{{ wish.status === 'draft' ? '待定价' : '待审批' }}</text>
          </view>
        </view>
        <view class="empty-card" v-else>
          <text class="empty-icon">✅</text>
          <text class="empty-text">全部已处理</text>
        </view>
      </view>
    </template>
  </view>
</template>

<script>
import { getChildren, getTodayTasks, getPendingReviewTasks, getPendingWishes } from '../../utils/api.js'

export default {
  data() {
    return {
      loading: true,
      childId: '',
      childName: '',
      childInfo: {},
      todayTasks: [],
      pendingReviewTasks: [],
      pendingWishes: []
    }
  },
  computed: {
    completedCount() {
      return this.todayTasks.filter(t => t.status === 'completed').length
    },
    taskProgressPercent() {
      if (this.todayTasks.length === 0) return 0
      return Math.round((this.completedCount / this.todayTasks.length) * 100)
    },
    pendingWishCount() {
      return this.pendingWishes.length
    }
  },
  onLoad(options) {
    this.childId = options.childId || ''
    this.childName = options.childName ? decodeURIComponent(options.childName) : '孩子'
    this.loadChildData()
  },
  methods: {
    async loadChildData() {
      this.loading = true
      try {
        // 获取孩子信息
        const childrenRes = await getChildren()
        const children = childrenRes.data || []
        const matched = children.find(c => String(c.id) === String(this.childId))
        if (matched) {
          this.childInfo = matched
          if (!this.childName || this.childName === '孩子') {
            this.childName = matched.nickname || matched.name || '孩子'
          }
        }

        // 并行加载今日任务和待处理
        const [tasksRes, reviewRes, wishRes] = await Promise.all([
          getTodayTasks(this.childId),
          getPendingReviewTasks(),
          getPendingWishes()
        ])

        this.todayTasks = tasksRes.data || []

        // 过滤属于该孩子的待审核任务
        const allReviewTasks = reviewRes.data || []
        this.pendingReviewTasks = allReviewTasks.filter(t => {
          return String(t.childId || t.assigneeId) === String(this.childId)
        }).slice(0, 5)

        // 过滤属于该孩子的待处理心愿
        const allWishes = wishRes.data || []
        this.pendingWishes = allWishes.filter(w => String(w.childId) === String(this.childId)).slice(0, 5)
      } catch (e) {
        console.error('加载孩子详情失败', e)
        uni.showToast({ title: '加载失败', icon: 'none' })
      } finally {
        this.loading = false
      }
    },
    goToCreateTask() {
      uni.navigateTo({
        url: '/pages/tasks/create-task?childId=' + this.childId
      })
    },
    goToWishReview() {
      uni.navigateTo({
        url: '/pages/parent/wishes/index?childId=' + this.childId
      })
    },
    goToGrowth() {
      uni.navigateTo({
        url: '/pages/growth/index?childId=' + this.childId
      })
    },
    goToCompletionStats() {
      uni.navigateTo({
        url: '/pages/stats/completion-rate?childId=' + this.childId
      })
    }
  }
}
</script>

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

.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 200rpx 0;
}

.loading-text {
  font-size: 28rpx;
  color: #B2BEC3;
}

/* 孩子信息卡片 */
.child-info-card {
  display: flex;
  align-items: flex-start;
  background: #FFFFFF;
  border-radius: 24rpx;
  padding: 24rpx;
  margin-bottom: 32rpx;
  box-shadow: 0 4px 20px rgba(255, 140, 66, 0.08);
}

.child-info-avatar {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 16rpx;
}

.child-avatar-text {
  font-size: 32rpx;
  font-weight: 600;
  color: #FFFFFF;
}

.child-avatar-color-0 { background: linear-gradient(135deg, #FF8C42, #FF7A2E); }
.child-avatar-color-1 { background: linear-gradient(135deg, #667eea, #764ba2); }
.child-avatar-color-2 { background: linear-gradient(135deg, #4ECDC4, #44B09E); }
.child-avatar-color-3 { background: linear-gradient(135deg, #F97316, #FB923C); }
.child-avatar-color-4 { background: linear-gradient(135deg, #A8E063, #56AB2F); }
.child-avatar-color-5 { background: linear-gradient(135deg, #F093FB, #F5576C); }

.child-info-body {
  flex: 1;
  min-width: 0;
}

.child-info-name {
  font-size: 36rpx;
  font-weight: 700;
  color: #2D3436;
  display: block;
}

.child-info-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  margin-top: 12rpx;
}

.stat-item {
  font-size: 24rpx;
  font-weight: 500;
}

.stat-points { color: #FF8C42; }
.stat-dan { color: #667eea; }
.stat-streak { color: #F97316; }

.child-info-progress {
  margin-top: 16rpx;
}

.progress-label {
  font-size: 22rpx;
  color: #636E72;
  display: block;
  margin-bottom: 8rpx;
}

.progress-bar-bg {
  height: 10rpx;
  background: #FFF5EB;
  border-radius: 9999rpx;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4ECDC4, #44B09E);
  border-radius: 9999rpx;
  transition: width 0.3s ease;
}

/* 区块标题 */
.section-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #2D3436;
  margin-bottom: 20rpx;
}

/* 操作区 */
.action-section {
  margin-bottom: 40rpx;
}

.action-grid {
  display: flex;
  flex-wrap: wrap;
}

.action-btn {
  width: 50%;
  box-sizing: border-box;
  background: #FFFFFF;
  border-radius: 20rpx;
  padding: 24rpx 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4px 20px rgba(255, 140, 66, 0.08);
  position: relative;
  border: 8rpx solid #FFF9F0;
}

.action-btn-icon {
  width: 72rpx;
  height: 72rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36rpx;
  margin-bottom: 12rpx;
}

.create-icon { background: rgba(255, 140, 66, 0.15); }
.wish-icon { background: rgba(255, 107, 107, 0.15); }
.growth-icon { background: rgba(78, 205, 196, 0.15); }
.stats-icon { background: rgba(255, 217, 61, 0.15); }

.action-btn-label {
  font-size: 24rpx;
  color: #636E72;
  font-weight: 500;
}

.action-btn-badge {
  position: absolute;
  top: 12rpx;
  right: 12rpx;
  background: #F97316;
  color: #FFFFFF;
  font-size: 20rpx;
  min-width: 32rpx;
  height: 32rpx;
  line-height: 32rpx;
  text-align: center;
  border-radius: 16rpx;
  padding: 0 8rpx;
}

/* 今日任务 */
.tasks-section {
  margin-bottom: 40rpx;
}

.tasks-card {
  background: #FFFFFF;
  border-radius: 20rpx;
  padding: 8rpx 24rpx;
  box-shadow: 0 4px 20px rgba(255, 140, 66, 0.08);
}

.task-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #F5F0EB;
}

.task-item:last-child {
  border-bottom: none;
}

.task-status-icon {
  font-size: 32rpx;
  margin-right: 16rpx;
}

.task-info {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.task-title {
  font-size: 28rpx;
  color: #2D3436;
}

.task-points {
  font-size: 24rpx;
  color: #FF8C42;
  font-weight: 600;
}

.empty-card {
  background: #FFFFFF;
  border-radius: 20rpx;
  padding: 48rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4px 20px rgba(255, 140, 66, 0.08);
}

.empty-icon {
  font-size: 48rpx;
  margin-bottom: 12rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #B2BEC3;
}

/* 待处理 */
.pending-section {
  margin-bottom: 48rpx;
}

.pending-card {
  background: #FFFFFF;
  border-radius: 20rpx;
  padding: 8rpx 24rpx;
  box-shadow: 0 4px 20px rgba(255, 140, 66, 0.08);
}

.pending-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #F5F0EB;
}

.pending-item:last-child {
  border-bottom: none;
}

.pending-icon {
  font-size: 32rpx;
  margin-right: 16rpx;
}

.pending-desc {
  flex: 1;
  font-size: 28rpx;
  color: #2D3436;
}

.pending-tag {
  font-size: 22rpx;
  padding: 4rpx 14rpx;
  border-radius: 20rpx;
  font-weight: 500;
}

.tag-review {
  background: #FFF5EB;
  color: #FF8C42;
}

.tag-wish {
  background: #FFF0F0;
  color: #F97316;
}
</style>