cfc/zxyj-frontend/pages/index/child-index.vue

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

    <!-- 空状态 - 无孩子 -->
    <view class="empty-state" v-if="!loading && !hasChildren">
      <view class="empty-illustration">🌈</view>
      <text class="empty-title">欢迎来到知行益家！</text>
      <text class="empty-desc">让爸爸妈妈帮你添加，开始快乐成长之旅</text>
      <button class="btn-add" @click="goToAddChild">添加我</button>
    </view>

    <!-- 有孩子时 -->
    <view class="main-content" v-if="!loading && hasChildren">
      <!-- 欢迎区 -->
      <view class="welcome-section">
        <view class="welcome-left">
          <text class="hello">你好呀！{{ nickname || '小朋友' }}</text>
          <text class="greeting">{{ getGreeting() }}</text>
        </view>
        <view class="streak-badge" v-if="streakDays > 0" @click="showStreakDetail">
          <text class="fire">🔥</text>
          <view class="streak-info">
            <text class="streak-days">{{ streakDays }}天</text>
            <text class="streak-label">坚持</text>
          </view>
        </view>
      </view>

      <!-- 积分卡片 -->
      <view class="points-card" @click="goToRewards">
        <view class="points-bg"></view>
        <view class="points-main">
          <view class="star-icon">⭐</view>
          <view class="points-content">
            <text class="points-label">我的星星</text>
            <text class="points-value">{{ totalPoints }}</text>
          </view>
          <view class="points-arrow">→</view>
        </view>
        <view class="points-level">
          <text class="level-name">{{ getLevelName() }}</text>
          <view class="level-bar">
            <view class="level-fill" :style="{ width: levelProgress + '%' }"></view>
          </view>
          <text class="level-next" v-if="pointsToNext > 0">还差 {{ pointsToNext }} 颗星星升级</text>
        </view>
      </view>

      <!-- 任务进度卡片 -->
      <view class="task-card">
        <view class="task-header">
          <text class="task-title">📝 今日任务</text>
          <text class="task-count">{{ completedCount }}/{{ totalTaskCount }}</text>
        </view>
        <view class="task-progress">
          <view class="progress-track">
            <view class="progress-fill" :style="{ width: taskProgress + '%' }"></view>
          </view>
        </view>
        <view class="task-status all-done" v-if="taskProgress >= 100 && totalTaskCount > 0">
          <text class="status-icon">🎉</text>
          <text class="status-text">太棒啦！任务全部完成！</text>
        </view>
        <view class="task-status pending" v-else-if="totalTaskCount > 0">
          <text class="status-icon">💪</text>
          <text class="status-text">再完成 {{ totalTaskCount - completedCount }} 项任务</text>
        </view>
        <view class="task-status empty" v-else>
          <text class="status-icon">🌸</text>
          <text class="status-text">今天没有任务，放松一下吧</text>
        </view>
      </view>

      <!-- 任务列表 -->
      <view class="tasks-section">
        <view class="section-header">
          <text class="section-title">今天要做的事</text>
          <text class="section-more" @click="goToTasks">查看全部 →</text>
        </view>
        <view class="task-list" v-if="todayTasks.length > 0">
          <view class="task-item" v-for="task in todayTasks" :key="task.id" :class="{ completed: task.status === 'completed' }">
            <view class="task-check" @click="toggleTask(task)">
              <text v-if="task.status === 'completed'">✅</text>
              <text v-else>⭕</text>
            </view>
            <view class="task-content">
              <text class="task-name">{{ task.title }}</text>
              <text class="task-reward" v-if="task.points">+{{ task.points }}⭐</text>
            </view>
          </view>
        </view>
        <view class="task-list-empty" v-else>
          <text class="empty-small-icon">🎯</text>
          <text class="empty-small-text">暂无今日任务</text>
        </view>
      </view>

      <!-- 成就徽章 -->
      <view class="badges-section">
        <view class="section-header">
          <text class="section-title">🏆 我的成就</text>
        </view>
        <view class="badges-row">
          <view class="badge-item" v-for="badge in badges" :key="badge.id" :class="{ locked: !badge.unlocked }">
            <text class="badge-icon">{{ badge.icon }}</text>
            <text class="badge-name">{{ badge.name }}</text>
          </view>
        </view>
      </view>

      <!-- 快捷操作 -->
      <view class="quick-section">
        <view class="quick-item" @click="goToRewards">
          <view class="quick-icon-wrap reward-icon-bg">
            <text class="quick-icon">🎁</text>
          </view>
          <text class="quick-label">换礼物</text>
        </view>
        <view class="quick-item" @click="goToTasks">
          <view class="quick-icon-wrap task-icon-bg">
            <text class="quick-icon">📋</text>
          </view>
          <text class="quick-label">做任务</text>
        </view>
        <view class="quick-item" @click="showAchievements">
          <view class="quick-icon-wrap badge-icon-bg">
            <text class="quick-icon">🏅</text>
          </view>
          <text class="quick-label">成就</text>
        </view>
        <view class="quick-item" @click="switchMode">
          <view class="quick-icon-wrap switch-icon-bg">
            <text class="quick-icon">👨‍👩‍👧</text>
          </view>
          <text class="quick-label">切换</text>
        </view>
      </view>
    </view>
  </view>
</template>

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

export default {
  data() {
    return {
      loading: true,
      hasChildren: false,
      nickname: '',
      childId: '',
      totalPoints: 0,
      streakDays: 0,
      completedCount: 0,
      totalTaskCount: 0,
      todayTasks: [],
      badges: [
        { id: 1, icon: '🌟', name: '早起鸟', unlocked: false },
        { id: 2, icon: '📚', name: '阅读小达人', unlocked: false },
        { id: 3, icon: '🏃', name: '运动健将', unlocked: false },
        { id: 4, icon: '🎨', name: '小艺术家', unlocked: false },
        { id: 5, icon: '🧹', name: '家务小能手', unlocked: false }
      ],
      _mounted: false
    }
  },
  computed: {
    taskProgress() {
      if (this.totalTaskCount === 0) return 0
      return Math.floor((this.completedCount / this.totalTaskCount) * 100)
    },
    levelProgress() {
      return (this.totalPoints % 200) / 200 * 100
    },
    pointsToNext() {
      return this.totalPoints > 0 ? 200 - (this.totalPoints % 200) : 200
    }
  },
  mounted() {
    this.loadData()
  },
  onShow() {
    if (this._mounted) {
      this.loadData()
    }
    this._mounted = true
  },
  methods: {
    async loadData() {
      this.loading = true
      try {
        const userInfo = uni.getStorageSync('userInfo')
        const role = uni.getStorageSync('currentRole') || 'child'
        if (role !== 'child') {
          uni.reLaunch({ url: '/pages/index/parent-index' })
          return
        }
        this.nickname = (userInfo && userInfo.nickname) ? userInfo.nickname : '小朋友'

        const childrenRes = await getChildren()
        const children = childrenRes.data || []
        if (children.length === 0) {
          this.hasChildren = false
          this.loading = false
          return
        }
        this.hasChildren = true
        const child = children[0] || {}
        this.childId = child.id || ''
        this.totalPoints = child.totalPoints || 0
        this.streakDays = child.streakDays || 0

        const tasksRes = await getTodayTasks(this.childId)
        const rawTasks = tasksRes.data || []
        this.todayTasks = rawTasks
        this.completedCount = rawTasks.filter(function(t) { return t.status === 'completed' }).length
        this.totalTaskCount = rawTasks.length

        // 解锁成就
        if (this.streakDays >= 7) {
          this.unlockBadge(1)
        }
        if (this.totalPoints >= 1000) {
          this.unlockBadge(2)
        }
      } catch (e) {
        console.error('加载数据失败', e)
        uni.showToast({ title: '加载失败', icon: 'none' })
      } finally {
        this.loading = false
      }
    },
    unlockBadge(id) {
      const badge = this.badges.find(function(b) { return b.id === id })
      if (badge) badge.unlocked = true
    },
    getGreeting() {
      const hour = new Date().getHours()
      if (hour < 9) return '新的一天要加油哦！'
      if (hour < 12) return '上午好棒棒的！'
      if (hour < 14) return '午餐时间到～'
      if (hour < 18) return '下午也要继续努力！'
      return '一天过得好快呀～'
    },
    getLevelName() {
      const level = Math.floor(this.totalPoints / 200)
      const names = ['星星宝宝', '月亮小朋友', '太阳小天使', '宇宙小英雄']
      return names[Math.min(level, names.length - 1)]
    },
    toggleTask(task) {
      if (task.status === 'completed') return
      if (!task.id) return
      task.status = 'completed'
      this.completedCount = this.todayTasks.filter(function(t) { return t.status === 'completed' }).length
      if (task.points) {
        uni.showToast({ title: '获得 ' + task.points + ' 颗星星！', icon: 'success' })
      }
    },
    goToRewards() {
      uni.switchTab({ url: '/pages/rewards/rewards' })
    },
    goToTasks() {
      uni.switchTab({ url: '/pages/tasks/tasks' })
    },
    showAchievements() {
      uni.showToast({ title: '成就页面开发中', icon: 'none' })
    },
    switchMode() {
      uni.showModal({
        title: '切换模式',
        content: '确定要切换回家长模式吗？',
        success: function(res) {
          if (res.confirm) {
            uni.switchTab({ url: '/pages/index/parent-index' })
          }
        }
      })
    },
    showStreakDetail() {
      uni.showToast({ title: '连续打卡' + this.streakDays + '天啦！太棒了！', icon: 'none' })
    },
    goToAddChild() {
      uni.navigateTo({ url: '/pages/profile/create-child' })
    }
  }
}
</script>

<style scoped>
/* ========================================
   Claymorphism Design System - 暖橙黏土
   ======================================== */
:root {
  --clay-br: 20rpx;
  --clay-br-lg: 26rpx;
  --clay-bw: 4rpx;
  --clay-shadow: inset -3rpx -3rpx 8rpx rgba(255,255,255,0.6), 6rpx 6rpx 16rpx rgba(255,140,66,0.12);
  --clay-shadow-sm: inset -2rpx -2rpx 6rpx rgba(255,255,255,0.5), 4rpx 4rpx 10rpx rgba(255,140,66,0.10);
  --clay-transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.container {
  padding: 32rpx;
  background: #FFF0E6;
  min-height: 100vh;
}

/* ========================================
   加载状态
   ======================================== */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 200rpx 0;
}

.loading-spinner {
  width: 64rpx;
  height: 64rpx;
  border: 8rpx solid #FFE0CC;
  border-top-color: #FF8C42;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  box-shadow: inset -2rpx -2rpx 6rpx rgba(255,255,255,0.4), 2rpx 2rpx 6rpx rgba(255,140,66,0.08);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-text {
  font-size: 26rpx;
  color: #B2BEC3;
  margin-top: 20rpx;
}

/* ========================================
   空状态
   ======================================== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 40rpx;
  text-align: center;
}

.empty-illustration {
  font-size: 120rpx;
  margin-bottom: 32rpx;
}

.empty-title {
  font-size: 40rpx;
  font-weight: 700;
  color: #2D3436;
  display: block;
  margin-bottom: 16rpx;
}

.empty-desc {
  font-size: 28rpx;
  color: #636E72;
  display: block;
  margin-bottom: 40rpx;
}

.btn-add {
  background: linear-gradient(135deg, #FF8C42, #FF6B6B);
  color: #FFFFFF;
  font-size: 32rpx;
  font-weight: 600;
  padding: 24rpx 64rpx;
  border-radius: 50rpx;
  border: 4rpx solid #E07A3A;
  box-shadow: inset -3rpx -3rpx 8rpx rgba(255,255,255,0.3), 6rpx 6rpx 18rpx rgba(255,107,107,0.35);
  transition: var(--clay-transition);
}

.btn-add:active {
  box-shadow: inset 2rpx 2rpx 8rpx rgba(0,0,0,0.15), 2rpx 2rpx 6rpx rgba(255,107,107,0.2);
  transform: scale(0.97);
}

/* ========================================
   欢迎区
   ======================================== */
.welcome-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28rpx;
}

.welcome-left .hello {
  font-size: 40rpx;
  font-weight: 700;
  color: #2D3436;
  display: block;
}

.welcome-left .greeting {
  font-size: 26rpx;
  color: #636E72;
  display: block;
  margin-top: 8rpx;
}

.streak-badge {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #FFF3CD, #FFE08C);
  padding: 12rpx 22rpx;
  border-radius: 30rpx;
  border: 4rpx solid #F5D97A;
  box-shadow: inset -2rpx -2rpx 6rpx rgba(255,255,255,0.5), 4rpx 4rpx 12rpx rgba(255,215,0,0.3);
  flex-shrink: 0;
}

.streak-badge .fire {
  font-size: 32rpx;
  margin-right: 8rpx;
}

.streak-info {
  display: flex;
  flex-direction: column;
}

.streak-days {
  font-size: 28rpx;
  font-weight: 700;
  color: #92400E;
}

.streak-label {
  font-size: 20rpx;
  color: #B45309;
}

/* ========================================
   积分卡片 - warm orange claymorphism
   ======================================== */
.points-card {
  background: linear-gradient(135deg, #FF8C42, #FF6B6B);
  border-radius: 30rpx;
  padding: 32rpx;
  margin-bottom: 28rpx;
  border: 4rpx solid #E07A3A;
  box-shadow: inset -4rpx -4rpx 10rpx rgba(255,255,255,0.25), 8rpx 8rpx 24rpx rgba(255,107,107,0.3);
  position: relative;
  overflow: hidden;
  transition: var(--clay-transition);
}

.points-card:active {
  box-shadow: inset 3rpx 3rpx 10rpx rgba(0,0,0,0.12), 4rpx 4rpx 12rpx rgba(255,107,107,0.2);
  transform: scale(0.98);
}

.points-bg {
  position: absolute;
  top: -50rpx;
  right: -50rpx;
  width: 200rpx;
  height: 200rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.points-main {
  display: flex;
  align-items: center;
}

.star-icon {
  font-size: 56rpx;
  margin-right: 16rpx;
}

.points-content {
  flex: 1;
}

.points-label {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.85);
  display: block;
}

.points-value {
  font-size: 56rpx;
  font-weight: 800;
  color: #FFFFFF;
}

.points-arrow {
  font-size: 36rpx;
  color: rgba(255, 255, 255, 0.6);
}

.points-level {
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 1rpx solid rgba(255, 255, 255, 0.2);
}

.level-name {
  font-size: 24rpx;
  color: #FFD700;
  font-weight: 600;
}

.level-bar {
  height: 12rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6rpx;
  margin: 12rpx 0;
  overflow: hidden;
}

.level-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFD700, #FFA500);
  border-radius: 6rpx;
  transition: width 0.5s ease;
}

.level-next {
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.7);
}

/* ========================================
   任务进度卡片 - claymorphism
   ======================================== */
.task-card {
  background: #FFFFFF;
  border-radius: 26rpx;
  padding: 28rpx;
  margin-bottom: 28rpx;
  border: 4rpx solid #FFE0CC;
  box-shadow: inset -3rpx -3rpx 8rpx rgba(255,255,255,0.6), 6rpx 6rpx 18rpx rgba(255,140,66,0.10);
  transition: var(--clay-transition);
}

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

.task-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #2D3436;
}

.task-count {
  font-size: 28rpx;
  color: #FF8C42;
  font-weight: 700;
}

.task-progress {
  margin-bottom: 16rpx;
}

.progress-track {
  height: 18rpx;
  background: #FFF0E6;
  border-radius: 9rpx;
  overflow: hidden;
  border: 2rpx solid #FFE0CC;
}

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

.task-status {
  display: flex;
  align-items: center;
  padding: 14rpx 18rpx;
  border-radius: 16rpx;
  border: 3rpx solid transparent;
}

.task-status.all-done {
  background: #ECFDF5;
  border-color: #A7F3D0;
}

.task-status.pending {
  background: #FEF3C7;
  border-color: #FDE68A;
}

.task-status.empty {
  background: #F0F7FF;
  border-color: #BFDBFE;
}

.status-icon {
  font-size: 28rpx;
  margin-right: 10rpx;
}

.status-text {
  font-size: 26rpx;
}

.task-status.all-done .status-text { color: #059669; }
.task-status.pending .status-text { color: #D97706; }
.task-status.empty .status-text { color: #3B82F6; }

/* ========================================
   任务列表
   ======================================== */
.tasks-section {
  margin-bottom: 28rpx;
}

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

.section-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #2D3436;
}

.section-more {
  font-size: 24rpx;
  color: #FF8C42;
  font-weight: 500;
}

.task-list {
  background: #FFFFFF;
  border-radius: 22rpx;
  padding: 8rpx 0;
  border: 4rpx solid #FFE0CC;
  box-shadow: inset -3rpx -3rpx 8rpx rgba(255,255,255,0.5), 6rpx 6rpx 16rpx rgba(255,140,66,0.10);
}

.task-item {
  display: flex;
  align-items: center;
  padding: 22rpx 24rpx;
  border-bottom: 1rpx solid #FFE8D0;
}

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

.task-item.completed .task-name {
  text-decoration: line-through;
  color: #B2BEC3;
}

.task-check {
  font-size: 40rpx;
  margin-right: 16rpx;
  flex-shrink: 0;
  transition: var(--clay-transition);
}

.task-check:active {
  transform: scale(1.2);
}

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

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

.task-reward {
  font-size: 24rpx;
  color: #FF8C42;
  font-weight: 600;
  flex-shrink: 0;
}

.task-list-empty {
  background: #FFFFFF;
  border-radius: 22rpx;
  padding: 48rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 4rpx solid #FFE0CC;
  box-shadow: inset -3rpx -3rpx 8rpx rgba(255,255,255,0.5), 6rpx 6rpx 16rpx rgba(255,140,66,0.10);
}

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

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

/* ========================================
   成就徽章
   ======================================== */
.badges-section {
  margin-bottom: 28rpx;
}

.badges-row {
  display: flex;
  gap: 16rpx;
  overflow-x: auto;
  padding: 8rpx 0;
}

.badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 28rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  min-width: 130rpx;
  border: 4rpx solid #FFE0CC;
  box-shadow: inset -2rpx -2rpx 6rpx rgba(255,255,255,0.5), 4rpx 4rpx 12rpx rgba(255,140,66,0.08);
  transition: var(--clay-transition);
}

.badge-item.locked {
  opacity: 0.45;
}

.badge-icon {
  font-size: 44rpx;
  margin-bottom: 8rpx;
}

.badge-name {
  font-size: 22rpx;
  color: #636E72;
  white-space: nowrap;
}

/* ========================================
   快捷操作 - claymorphism
   ======================================== */
.quick-section {
  display: flex;
  justify-content: space-around;
  background: #FFFFFF;
  border-radius: 26rpx;
  padding: 28rpx 16rpx;
  margin-bottom: 48rpx;
  border: 4rpx solid #FFE0CC;
  box-shadow: inset -3rpx -3rpx 8rpx rgba(255,255,255,0.5), 6rpx 6rpx 18rpx rgba(255,140,66,0.10);
}

.quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: var(--clay-transition);
}

.quick-item:active {
  transform: scale(0.92);
}

.quick-icon-wrap {
  width: 88rpx;
  height: 88rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10rpx;
  border: 3rpx solid transparent;
  box-shadow: inset -2rpx -2rpx 5rpx rgba(255,255,255,0.4), 3rpx 3rpx 8rpx rgba(0,0,0,0.06);
  transition: var(--clay-transition);
}

.quick-item:active .quick-icon-wrap {
  box-shadow: inset 2rpx 2rpx 6rpx rgba(0,0,0,0.08), 1rpx 1rpx 3rpx rgba(0,0,0,0.04);
}

.quick-icon {
  font-size: 40rpx;
}

.reward-icon-bg { background: rgba(255, 217, 61, 0.25); border-color: #FDE68A; }
.task-icon-bg { background: rgba(78, 205, 196, 0.2); border-color: #A7F3D0; }
.badge-icon-bg { background: rgba(255, 140, 66, 0.2); border-color: #FED7AA; }
.switch-icon-bg { background: rgba(116, 185, 255, 0.2); border-color: #BFDBFE; }

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

/* ========================================
   Soft Press 通用交互
   ======================================== */
.badge-item:active {
  transform: scale(0.95);
  box-shadow: inset 2rpx 2rpx 8rpx rgba(0,0,0,0.06), 2rpx 2rpx 6rpx rgba(255,140,66,0.06);
}

.task-item:active .task-check {
  transform: scale(1.15);
}

.section-more:active {
  opacity: 0.6;
}
</style>