cfc/cfc-frontend/pages/growth-main/index.vue

<template>
  <view class="container">
    <PageBanner theme="action" tagline="方案 · 执行 · 成长" quote="知行合一，每天进步一点点" />

    <!-- 家庭成员选择条（登录即自动建家庭，无需空态判断） -->
    <FamilyMemberStrip />

      <!-- 今日待办卡片 -->
      <view class="section">
        <view class="todo-card">
          <view class="todo-header">
            <text class="todo-title">今日执行概览</text>
          </view>
          <view class="todo-grid">
            <view class="todo-item">
              <text class="todo-icon">✅</text>
              <text class="todo-label">今日打卡</text>
              <text class="todo-value" :class="todayCheckedIn ? 'text-success' : 'text-muted'">{{ todayCheckedIn ? '已完成' : '未完成' }}</text>
            </view>
            <view class="todo-item">
              <text class="todo-icon">📋</text>
              <text class="todo-label">待完成任务</text>
              <text class="todo-value">{{ pendingTasks }} 项</text>
            </view>
            <view class="todo-item">
              <text class="todo-icon">🔥</text>
              <text class="todo-label">进行中挑战</text>
              <text class="todo-value">{{ activeChallenges }} 个</text>
            </view>
            <view class="todo-item">
              <text class="todo-icon">🍽️</text>
              <text class="todo-label">今日饮食</text>
              <text class="todo-value">{{ mealCount }} 餐</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 功能入口网格 -->
      <view class="section">
        <view class="grid-3col">
          <view class="grid-item" @click="goPage('/pages/health/daily-checkin')">
            <view class="grid-icon" style="background:rgba(16,185,129,0.15)"><text>✅</text></view>
            <text class="grid-label">每日打卡</text>
          </view>
          <view class="grid-item" @click="goPage('/pages/tasks/daily-tasks')">
            <view class="grid-icon" style="background:rgba(99,102,241,0.15)"><text>📋</text></view>
            <text class="grid-label">日常任务</text>
          </view>
          <view class="grid-item" @click="goPage('/pages/health/challenge-manage')">
            <view class="grid-icon" style="background:rgba(239,68,68,0.15)"><text>🔥</text></view>
            <text class="grid-label">家庭挑战</text>
          </view>
          <view class="grid-item" @click="goPage('/pages/diet/index')">
            <view class="grid-icon" style="background:rgba(245,158,11,0.15)"><text>🍽️</text></view>
            <text class="grid-label">饮食记录</text>
          </view>
          <view class="grid-item" @click="goPage('/pages/health/exercise-index')">
            <view class="grid-icon" style="background:rgba(34,197,94,0.15)"><text>🏃</text></view>
            <text class="grid-label">运动记录</text>
          </view>
          <view class="grid-item" @click="goPage('/pages/health/sleep-index')">
            <view class="grid-icon" style="background:rgba(139,92,246,0.15)"><text>😴</text></view>
            <text class="grid-label">作息记录</text>
          </view>
          <view class="grid-item" @click="goPage('/pages/growth/detail')">
            <view class="grid-icon" style="background:rgba(249,115,22,0.15)"><text>📈</text></view>
            <text class="grid-label">成长档案</text>
          </view>
          <view class="grid-item" @click="goPage('/pages/health/meditation-index')">
            <view class="grid-icon" style="background:rgba(255,107,157,0.15)"><text>🧘</text></view>
            <text class="grid-label">冥想练习</text>
          </view>
        </view>
      </view>

      <!-- 活动推荐（从首页移过来） -->
      <DimensionActivities
        :isLoggedIn="true"
        @activityClick="goActivityDetail"
        @moreActivities="goMoreActivities" />

      <!-- 成长档案（原有内容） -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">成长档案</text>
          <text class="section-more" v-if="records.length > 0" @click="viewAllRecords">查看全部 ›</text>
        </view>

        <!-- 孩子选择 -->
        <view class="children-list" v-if="!selectedChild">
          <view class="child-card" v-for="child in children" :key="child.id" @click="viewChildRecords(child)">
            <view class="child-info">
              <text class="child-name">{{ child.nickname || child.name }}</text>
              <text class="child-age" v-if="child.age">年龄：{{ child.age }}岁</text>
            </view>
            <view class="arrow">
              <text class="arrow-icon">›</text>
            </view>
          </view>
        </view>

        <!-- 档案记录 -->
        <view class="records-section" v-if="selectedChild">
          <view class="filter-tabs">
            <view class="filter-tab" :class="activeFilter === 'all' ? 'tab-active' : ''" @click="setFilter('all')">
              <text class="tab-text" :class="activeFilter === 'all' ? 'tab-active-text' : ''">全部</text>
            </view>
            <view class="filter-tab" :class="activeFilter === 'manual' ? 'tab-active' : ''" @click="setFilter('manual')">
              <text class="tab-text" :class="activeFilter === 'manual' ? 'tab-active-text' : ''">手动</text>
            </view>
            <view class="filter-tab" :class="activeFilter === 'assessment' ? 'tab-active' : ''" @click="setFilter('assessment')">
              <text class="tab-text" :class="activeFilter === 'assessment' ? 'tab-active-text' : ''">测评</text>
            </view>
            <view class="filter-tab" :class="activeFilter === 'upload' ? 'tab-active' : ''" @click="setFilter('upload')">
              <text class="tab-text" :class="activeFilter === 'upload' ? 'tab-active-text' : ''">上传</text>
            </view>
            <view class="filter-tab" :class="activeFilter === 'supplement' ? 'tab-active' : ''" @click="setFilter('supplement')">
              <text class="tab-text" :class="activeFilter === 'supplement' ? 'tab-active-text' : ''">补充</text>
            </view>
          </view>

          <view class="record-card" v-for="record in filteredRecords" :key="record.id" @click="viewDetail(record)">
            <view class="record-header">
              <text class="record-title">{{ record.recordTitle || '成长档案' }}</text>
              <view class="record-badges">
                <text class="record-source-tag" v-if="record.sourceType">{{ sourceTypeLabel(record.sourceType) }}</text>
                <text class="record-tag" :class="record.status === 'completed' ? 'tag-completed' : 'tag-pending'">
                  {{ record.status === 'completed' ? '已完成' : '待同步' }}
                </text>
              </view>
            </view>
            <view class="record-scores" v-if="record.overallScore || record.reportDate">
              <text class="score-item" v-if="record.overallScore">得分: {{ record.overallScore }}</text>
              <text class="score-item" v-if="record.reportDate">{{ record.reportDate }}</text>
              <text class="score-item" v-if="!record.reportDate && record.createdAt">{{ formatDate(record.createdAt) }}</text>
            </view>
          </view>
          <view class="empty-state" v-if="filteredRecords.length === 0 && records.length > 0">
            <text class="empty-text">该类型暂无记录</text>
          </view>
          <view class="empty-state" v-if="records.length === 0">
            <text class="empty-text">暂无成长档案记录</text>
            <text class="empty-hint">点击下方按钮创建第一个成长档案</text>
          </view>
        </view>

        <!-- 创建按钮 -->
        <view class="footer-btn" v-if="selectedChild">
          <button class="btn-create" @click="createRecord">创建成长档案</button>
        </view>
        <view class="footer-btn" v-if="!selectedChild && children.length > 0">
          <button class="btn-invite-guide" open-type="share" @click="prepareGuideInvite">邀请成长规划师</button>
        </view>
      </view>
  </view>
</template>

<script>
import PageBanner from '../../components/PageBanner.vue'
import FamilyMemberStrip from '../../components/FamilyMemberStrip.vue'
import DimensionActivities from '../../components/DimensionActivities.vue'
import { getChildren, getChildRecords } from '../../utils/api.js'

export default {
  components: {
    PageBanner,
    FamilyMemberStrip,
    DimensionActivities
  },
  data() {
    return {
      loading: false,
      children: [],
      selectedChild: null,
      selectedChildName: '',
      records: [],
      memberId: '',
      activeFilter: 'all',
      shareData: null,
      todayCheckedIn: false,
      pendingTasks: 0,
      activeChallenges: 0,
      mealCount: 0
    }
  },
  computed: {
    filteredRecords: function() {
      if (this.activeFilter === 'all') return this.records
      var filter = this.activeFilter
      return this.records.filter(function(r) { return r.sourceType === filter })
    }
  },
  onShareAppMessage() {
    if (this.shareData) {
      return {
        title: this.shareData.title,
        path: this.shareData.path,
        imageUrl: '/static/invite-card.png'
      }
    }
  },
  onLoad(options) {
    this.memberId = options.memberId || ''
    this.loadChildren()
    this.loadTodoData()
  },
  methods: {
    goPage: function(url) {
      uni.navigateTo({ url: url })
    },
    goActivityDetail: function(act) {
      uni.navigateTo({ url: '/pages/activity/activity-detail/activity-detail?id=' + act.id })
    },
    goMoreActivities: function() {
      uni.navigateTo({ url: '/pages/activity/index' })
    },
    viewAllRecords: function() {
      // 滚动到档案区域或展开全部
      if (this.selectedChild) {
        uni.navigateTo({ url: '/pages/growth/detail?memberId=' + this.selectedChild.id })
      }
    },
    sourceTypeLabel: function(type) {
      var map = { 'manual': '手动', 'assessment': '测评', 'upload': '上传', 'supplement': '补充' }
      return map[type] || type
    },
    setFilter: function(type) {
      this.activeFilter = type
    },
    loadTodoData: function() {
      var self = this
      try {
        var api = require('../../utils/api.js')
        // 检查打卡状态
        if (api.getCheckinStats) {
          api.getCheckinStats().then(function(res) {
            if (res.code === 200 && res.data) {
              self.todayCheckedIn = !!(res.data.todayCheckedIn || res.data.checkedIn || (res.data.today && res.data.today.checkedIn))
            }
          }).catch(function() {})
        }
        // 待完成任务数
        if (api.getTodayTasks && self.children && self.children.length > 0) {
          var childId = self.selectedChild ? self.selectedChild.id : self.children[0].id
          api.getTodayTasks(childId).then(function(res) {
            if (res.code === 200) {
              self.pendingTasks = (res.data && res.data.length) || 0
            }
          }).catch(function() {})
        }
        // 进行中挑战
        if (api.getChallengeList) {
          api.getChallengeList({ status: 'active' }).then(function(res) {
            if (res.code === 200) {
              self.activeChallenges = (res.data && res.data.length) || 0
            }
          }).catch(function() {})
        }
        // 饮食记录数
        if (api.getMealLogs) {
          api.getMealLogs({ date: new Date().toISOString().slice(0, 10) }).then(function(res) {
            if (res.code === 200) {
              self.mealCount = (res.data && res.data.length) || 0
            }
          }).catch(function() {})
        }
      } catch (e) {
        console.error('加载待办数据失败', e)
      }
    },
    async loadChildren() {
      this.loading = true
      try {
        var res = await getChildren()
        if (res.code === 200) {
          this.children = res.data || []
          if (this.memberId && this.children.length > 0) {
            var matched = this.children.find(function(c) { return String(c.id) === String(this.memberId) }.bind(this))
            if (matched) {
              this.viewChildRecords(matched)
            }
          }
        }
      } catch (e) {
        console.error('加载孩子列表失败', e)
      } finally {
        this.loading = false
      }
    },
    async viewChildRecords(child) {
      this.selectedChild = child
      this.selectedChildName = child.nickname || child.name
      this.loading = true
      try {
        var res = await getChildRecords(child.id)
        if (res.code === 200) {
          this.records = res.data || []
        }
      } catch (e) {
        console.error('加载成长档案失败', e)
      } finally {
        this.loading = false
      }
    },
    viewDetail: function(record) {
      uni.navigateTo({
        url: '/pages/growth/detail?recordId=' + record.id
      })
    },
    createRecord: function() {
      uni.navigateTo({
        url: '/pages/growth/create?memberId=' + this.selectedChild.id + '&childName=' + encodeURIComponent(this.selectedChildName)
      })
    },
    formatDate: function(date) {
      if (!date) return ''
      return date.substring(0, 10)
    },
    async prepareGuideInvite() {
      try {
        var ui = uni.getStorageSync('userInfo') || {}
        if (!ui.familyId) {
          uni.showToast({ title: '请先创建家庭', icon: 'none' })
          return
        }
        var userInfo = ui
        var generateInviteCard = require('../../utils/api.js').generateInviteCard
        var res = await generateInviteCard('guide')
        var code = res.data.code
        this.shareData = {
          title: (userInfo && userInfo.nickname ? userInfo.nickname : '家长') + ' 邀请你成为成长规划师',
          path: '/pages/login/login?invite_code=' + code
        }
        uni.showToast({ title: '点击右上角转发给TA', icon: 'none' })
      } catch (e) {
        uni.showToast({ title: e.message || '生成邀请失败', icon: 'none' })
      }
    }
  }
}
</script>

<style scoped>
.container {
  background: #F8F8F8;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.section {
  margin: 20rpx 24rpx;
}

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

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.section-more {
  font-size: 24rpx;
  color: #F97316;
}

/* 今日待办卡片 */
.todo-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}

.todo-header {
  margin-bottom: 16rpx;
}

.todo-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

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

.todo-item {
  width: 50%;
  display: flex;
  align-items: center;
  padding: 10rpx 0;
  flex-wrap: wrap;
}

.todo-icon {
  font-size: 28rpx;
  margin-right: 8rpx;
}

.todo-label {
  font-size: 24rpx;
  color: #999;
  margin-right: 8rpx;
}

.todo-value {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.text-success {
  color: #10B981;
}

.text-muted {
  color: #ccc;
}

/* 功能入口网格 3列 */
.grid-3col {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 20rpx;
  padding: 8rpx 0;
}

.grid-item {
  width: 33.33%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
}

.grid-icon {
  width: 72rpx;
  height: 72rpx;
  border-radius: 18rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8rpx;
}

.grid-icon text {
  font-size: 32rpx;
}

.grid-item .grid-label {
  font-size: 24rpx;
  color: #666;
}

/* 孩子选择 */
.children-list {
  margin-top: 8rpx;
}

.child-card {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.child-info {
  flex: 1;
}

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

.child-age {
  font-size: 24rpx;
  color: #999;
  margin-top: 6rpx;
  display: block;
}

.arrow {
  width: 40rpx;
}

.arrow-icon {
  font-size: 40rpx;
  color: #ccc;
}

/* 记录筛选 */
.records-section {
  margin-top: 16rpx;
}

.filter-tabs {
  display: flex;
  gap: 16rpx;
  margin-bottom: 20rpx;
}

.filter-tab {
  flex: 1;
  text-align: center;
  padding: 12rpx 0;
  border-radius: 20rpx;
  background: #fff;
  border: 1rpx solid #E0E0E0;
}

.tab-active {
  background: #667eea;
  border-color: #667eea;
}

.tab-text {
  font-size: 24rpx;
  color: #666;
}

.tab-active-text {
  color: #fff;
}

/* 记录卡片 */
.record-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 16rpx;
}

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

.record-title {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  flex: 1;
}

.record-badges {
  display: flex;
  gap: 8rpx;
  flex-shrink: 0;
}

.record-source-tag {
  font-size: 20rpx;
  padding: 4rpx 10rpx;
  border-radius: 8rpx;
  background: #f0f0ff;
  color: #667eea;
}

.record-tag {
  font-size: 22rpx;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
}

.tag-completed {
  background: #e8f5e9;
  color: #4caf50;
}

.tag-pending {
  background: #fff3e0;
  color: #ff9800;
}

.record-scores {
  display: flex;
  gap: 20rpx;
}

.score-item {
  font-size: 24rpx;
  color: #666;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60rpx 0;
}

.empty-icon {
  font-size: 80rpx;
  display: block;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  display: block;
}

.empty-hint {
  font-size: 24rpx;
  color: #ccc;
  margin-top: 10rpx;
  display: block;
}

/* 按钮 */
.footer-btn {
  padding: 30rpx 0;
}

.btn-create {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
}

.btn-invite-guide {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
}
</style>