cfc/cfc-frontend/components/member-detail-sections/action-section.vue

<template>
<view class="action-section">
  <!-- 今日任务 -->
  <view class="section-card" v-if="todayTasks.length > 0">
    <view class="section-header">
      <text class="section-title">✅ 今日任务</text>
    </view>
    <view class="task-item" v-for="task in todayTasks" :key="task.id" @click="goTaskDetail(task)">
      <view class="task-status" :class="task.status === 'completed' ? 'task-done' : 'task-pending'"></view>
      <text class="task-name">{{ task.title || task.name }}</text>
      <text class="task-points">{{ task.points || task.coin || 0 }}分</text>
    </view>
  </view>
  <view class="section-card" v-else-if="!loading && childId">
    <view class="empty-state">
      <text class="empty-text">今日暂无任务</text>
      <text class="empty-sub">去「行」维度页布置新任务吧</text>
    </view>
  </view>

  <!-- 打卡统计 -->
  <view class="section-card" v-if="checkinStats">
    <view class="section-header">
      <text class="section-title">📊 打卡统计</text>
    </view>
    <view class="stats-row">
      <view class="stat-item">
        <text class="stat-value">{{ checkinStats.totalDays || 0 }}</text>
        <text class="stat-label">累计天数</text>
      </view>
      <view class="stat-item">
        <text class="stat-value">{{ checkinStats.currentStreak || 0 }}</text>
        <text class="stat-label">连续打卡</text>
      </view>
      <view class="stat-item">
        <text class="stat-value">{{ checkinStats.thisMonth || 0 }}</text>
        <text class="stat-label">本月次数</text>
      </view>
    </view>
  </view>

  <!-- 近期活动 -->
  <view class="section-card" v-if="activityList.length > 0">
    <view class="section-header">
      <text class="section-title">🎪 近期活动</text>
    </view>
    <view class="activity-item" v-for="act in activityList" :key="act.id" @click="goActivityDetail(act)">
      <text class="activity-name">{{ act.title || act.name }}</text>
      <text class="activity-date">{{ formatDate(act.startTime || act.activityDate) }}</text>
    </view>
  </view>

  <!-- 非孩子成员提示 -->
  <view class="section-card" v-if="!childId && !loading">
    <view class="empty-state">
      <text class="empty-text">该成员暂无行动数据</text>
    </view>
  </view>

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

<script>
import { getTodayTasksByCategory, getCheckinStats, getActivityList } from '../../utils/api.js'

export default {
  props: {
    memberId: {
      type: [Number, String],
      default: null
    },
    childId: {
      type: [Number, String],
      default: null
    },
    memberType: {
      type: String,
      default: ''
    },
    memberInfo: {
      type: Object,
      default: null
    },
    sandboxData: {
      type: Object,
      default: null
    },
    energyMap: {
      type: Object,
      default: null
    }
  },
  data: function() {
    return {
      loading: true,
      todayTasks: [],
      checkinStats: null,
      activityList: []
    }
  },
  mounted: function() {
    if (this.childId) {
      this.loadData()
    } else {
      this.loading = false
    }
  },
  methods: {
    loadData: function() {
      var self = this
      getTodayTasksByCategory(this.childId, 'action').then(function(res) {
        if (res.code === 200 && res.data) {
          self.todayTasks = Array.isArray(res.data) ? res.data : (res.data.records || [])
        }
      }).catch(function(e) {
        console.log('加载今日任务失败', e)
      })
      
      getCheckinStats({ childId: this.childId }).then(function(res) {
        if (res.code === 200 && res.data) {
          self.checkinStats = res.data
        }
      }).catch(function(e) {
        console.log('加载打卡统计失败', e)
      })
      
      getActivityList({ page: 1, size: 3 }).then(function(res) {
        if (res.code === 200 && res.data) {
          self.activityList = Array.isArray(res.data) ? res.data : (res.data.records || [])
        }
      }).catch(function(e) {
        console.log('加载活动列表失败', e)
      })
      
      this.loading = false
    },
    formatDate: function(dateStr) {
      if (!dateStr) return ''
      var d = new Date(dateStr)
      return d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
    },
    goTaskDetail: function(task) {
      uni.navigateTo({
        url: '/pages/action/task-detail?id=' + task.id
      })
    },
    goActivityDetail: function(act) {
      uni.navigateTo({
        url: '/pages/action/activity-detail?id=' + act.id
      })
    }
  }
}
</script>

<style scoped>
.action-section {}
.section-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
}
.section-header {
  margin-bottom: 16rpx;
}
.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}
.task-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 14rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}
.task-status {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  margin-right: 16rpx;
}
.task-done {
  background: #10B981;
}
.task-pending {
  background: #F59E0B;
}
.task-name {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}
.task-points {
  font-size: 24rpx;
  color: #10B981;
}
.stats-row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 16rpx 0;
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stat-value {
  font-size: 40rpx;
  font-weight: bold;
  color: #10B981;
}
.stat-label {
  font-size: 24rpx;
  color: #999;
  margin-top: 4rpx;
}
.activity-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 12rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}
.activity-name {
  font-size: 26rpx;
  color: #333;
  flex: 1;
}
.activity-date {
  font-size: 22rpx;
  color: #999;
}
.empty-state {
  padding: 30rpx 0;
  text-align: center;
}
.empty-text {
  font-size: 28rpx;
  color: #999;
}
.empty-sub {
  font-size: 24rpx;
  color: #ccc;
  margin-top: 8rpx;
}
.loading {
  text-align: center;
  padding: 40rpx;
  color: #999;
}
</style>