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

<template>
  <view class="container">
    <view class="header">
      <text class="title">成长档案</text>
      <text class="subtitle">记录孩子的每一次成长</text>
    </view>

    <view class="children-list" v-if="!memberId">
      <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 class="empty-state" v-if="children.length === 0 && !loading">
        <text class="empty-icon">📋</text>
        <text class="empty-text">还没有添加孩子</text>
        <text class="empty-hint">请先在"我的"页面添加孩子</text>
      </view>
    </view>

    <view class="records-section" v-if="selectedChild">
      <view class="section-header">
        <text class="section-title">{{ selectedChildName }} 的成长档案</text>
      </view>

      <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>
      </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>

    <family-guard ref="familyGuard" />
  </view>
</template>

<script>
import { getChildren, getChildRecords } from '../../utils/api.js'
import FamilyGuard from '../../components/family-guard.vue'

export default {
  components: {
    FamilyGuard
  },
  data() {
    return {
      loading: false,
      children: [],
      selectedChild: null,
      selectedChildName: '',
      records: [],
      memberId: '',
      activeFilter: 'all',
      shareData: null
    }
  },
  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()
  },
  methods: {
    sourceTypeLabel(type) {
      var map = { 'manual': '手动', 'assessment': '测评', 'upload': '上传', 'supplement': '补充' }
      return map[type] || type
    },
    setFilter(type) {
      this.activeFilter = type
    },
    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(record) {
      uni.navigateTo({
        url: '/pages/growth/detail?recordId=' + record.id
      })
    },
    createRecord() {
      uni.navigateTo({
        url: '/pages/growth/create?memberId=' + this.selectedChild.id + '&childName=' + encodeURIComponent(this.selectedChildName)
      })
    },
    formatDate(date) {
      if (!date) return ''
      return date.substring(0, 10)
    },
    async prepareGuideInvite() {
      try {
        var ui = uni.getStorageSync('userInfo') || {};
        if (!ui.familyId) {
          this.$refs.familyGuard.show()
          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 {
  padding: 30rpx;
  background: #F8F8F8;
  min-height: 100vh;
}
.header {
  text-align: center;
  padding: 40rpx 0;
}
.title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}
.subtitle {
  font-size: 26rpx;
  color: #999;
}
.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: 20rpx;
}
.section-header {
  margin-bottom: 20rpx;
}
.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}
.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>