cfc/cfc-frontend/components/FamilyChallengeCard.vue

<template>
  <view class="challenge-card" v-if="challenge">
    <view class="card-header">
      <text class="card-title">{{ challenge.title }}</text>
      <text class="card-status" :class="'status-' + (challenge.status || 'active')">
        {{ challenge.status === 'active' ? '进行中' : '已完成' }}
      </text>
    </view>
    <text class="card-desc">{{ challenge.description || '' }}</text>
    <view class="card-detail-row" v-if="challenge.durationDays">
      <text class="detail-label">⏱ 期限</text>
      <text class="detail-val">{{ challenge.durationDays }}天</text>
    </view>
    <view class="card-detail-row" v-if="challenge.endDate">
      <text class="detail-label">📅 截止</text>
      <text class="detail-val">{{ formatDate(challenge.endDate) }}</text>
    </view>
    <view class="card-detail-row" v-if="challenge.rewardPoints">
      <text class="detail-label">🏆 奖励</text>
      <text class="detail-val reward">+{{ challenge.rewardPoints }}分</text>
      <text class="detail-val badge" v-if="challenge.rewardBadge"> 🎖️ {{ challenge.rewardBadge }}</text>
    </view>
    <view class="card-progress" v-if="progressPercent !== undefined">
      <view class="progress-bar-bg">
        <view class="progress-bar-fill" :style="{ width: Math.min(progressPercent, 100) + '%' }"></view>
      </view>
      <text class="progress-text">{{ progressPercent }}%</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    challenge: { type: Object, default: null },
    progressPercent: { type: Number, default: undefined }
  },
  methods: {
    formatDate: function(dateStr) {
      if (!dateStr) return ''
      return String(dateStr).slice(0, 10)
    }
  }
}
</script>

<style scoped>
.challenge-card {
  background: #fff;
  border-radius: 20rpx;
  margin: 0 20rpx 20rpx 20rpx;
  padding: 24rpx;
  border-left: 6rpx solid #10B981;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}
.card-title {
  font-size: 28rpx;
  font-weight: 700;
  color: #1E293B;
}
.card-status {
  font-size: 22rpx;
  padding: 4rpx 12rpx;
  border-radius: 999rpx;
}
.status-active { background: #DCFCE7; color: #16A34A; }
.status-completed { background: #F1F5F9; color: #64748B; }
.card-desc {
  font-size: 24rpx;
  color: #64748B;
  line-height: 1.5;
  margin-bottom: 12rpx;
  display: block;
}
.card-detail-row {
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-top: 6rpx;
}
.detail-label { font-size: 24rpx; color: #94A3B8; }
.detail-val { font-size: 24rpx; color: #334155; }
.detail-val.reward { color: #F97316; font-weight: 600; }
.detail-val.badge { color: #6366F1; }
.card-progress {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-top: 12rpx;
}
.progress-bar-bg {
  flex: 1;
  height: 12rpx;
  background: #F1F5F9;
  border-radius: 999rpx;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #10B981, #34D399);
  border-radius: 999rpx;
  transition: width 0.5s ease;
}
.progress-text {
  font-size: 22rpx;
  color: #10B981;
  font-weight: 600;
  min-width: 48rpx;
  text-align: right;
}
</style>