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="statusClass">
        {{ challenge.status === 'active' ? '进行中' : '已完成' }}
      </text>
    </view>
    <text class="card-desc">{{ challenge.description || '' }}</text>

    <!-- 目标展示（两种模式） -->
    <view class="target-section" v-if="challenge.targetMode">
      <view class="target-header">
        <text class="target-label">{{ targetModeLabel }}</text>
        <text class="target-value">{{ formatTargetValue }}</text>
      </view>

      <!-- aggregate 模式：家庭总进度条 -->
      <view class="card-progress" v-if="challenge.targetMode === 'aggregate'">
        <view class="progress-bar-bg">
          <view class="progress-bar-fill" :style="{ width: totalPercent + '%' }"></view>
        </view>
        <text class="progress-text">{{ challenge.totalProgress || 0 }}/{{ challenge.targetValue }}</text>
      </view>

      <!-- all_members 模式：成员进度列表 -->
      <view class="member-list" v-if="challenge.targetMode === 'all_members' && challenge.memberProgress && challenge.memberProgress.length > 0">
        <view class="member-row" v-for="mp in challenge.memberProgress" :key="mp.memberId">
          <text class="member-name">{{ mp.nickname }}</text>
          <view class="member-bar-wrap">
            <view class="member-bar-bg">
              <view class="member-bar-fill" :style="{ width: memberPercent(mp.progressValue) + '%' }"></view>
            </view>
          </view>
          <text class="member-val">{{ mp.progressValue }}/{{ challenge.targetValue }}</text>
          <text class="member-done" v-if="mp.completed">✓</text>
        </view>
      </view>
    </view>

    <view class="card-detail-row" v-if="challenge.durationDays">
      <text class="detail-label">⏱ {{ challenge.durationDays }}天</text>
      <text class="detail-label" v-if="challenge.endDate">· 截止 {{ formatDate(challenge.endDate) }}</text>
      <text class="detail-label reward" v-if="challenge.rewardPoints">· 🏆 +{{ challenge.rewardPoints }}分</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    challenge: { type: Object, default: null }
  },
  computed: {
    statusClass: function() {
      return 'status-' + (this.challenge && this.challenge.status ? this.challenge.status : 'active')
    },
    targetModeLabel: function() {
      if (!this.challenge) return ''
      if (this.challenge.targetMode === 'aggregate') return '🎯 全家目标'
      return '🎯 每人目标'
    },
    formatTargetValue: function() {
      if (!this.challenge) return ''
      return this.challenge.targetValue
    },
    totalPercent: function() {
      var total = this.challenge && this.challenge.totalProgress ? this.challenge.totalProgress : 0
      var target = this.challenge && this.challenge.targetValue ? this.challenge.targetValue : 1
      if (target <= 0) return 0
      var p = Math.round(total / target * 100)
      return Math.min(p, 100)
    }
  },
  methods: {
    formatDate: function(dateStr) {
      if (!dateStr) return ''
      return String(dateStr).slice(0, 10)
    },
    memberPercent: function(value) {
      var target = this.challenge && this.challenge.targetValue ? this.challenge.targetValue : 1
      if (target <= 0) return 0
      var p = Math.round((value || 0) / target * 100)
      return Math.min(p, 100)
    }
  }
}
</script>

<style scoped>
.challenge-card {
  background: #fff;
  border-radius: 16rpx;
  margin: 0 20rpx 12rpx 20rpx;
  padding: 14rpx 16rpx;
  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: 4rpx;
}
.card-title {
  font-size: 26rpx;
  font-weight: 700;
  color: #1E293B;
}
.card-status {
  font-size: 20rpx;
  padding: 2rpx 10rpx;
  border-radius: 999rpx;
}
.status-active { background: #DCFCE7; color: #16A34A; }
.status-completed { background: #F1F5F9; color: #64748B; }
.card-desc {
  font-size: 22rpx;
  color: #64748B;
  line-height: 1.4;
  margin-bottom: 8rpx;
  display: block;
}

/* 目标区 */
.target-section {
  background: #F8FAFC;
  border-radius: 10rpx;
  padding: 10rpx 12rpx;
  margin-bottom: 6rpx;
}
.target-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6rpx;
}
.target-label { font-size: 22rpx; color: #475569; font-weight: 600; }
.target-value { font-size: 26rpx; color: #10B981; font-weight: 700; }

.card-progress {
  display: flex;
  align-items: center;
  gap: 10rpx;
  margin-top: 2rpx;
}
.progress-bar-bg {
  flex: 1;
  height: 10rpx;
  background: #E2E8F0;
  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: 20rpx;
  color: #10B981;
  font-weight: 600;
  min-width: 90rpx;
  text-align: right;
}

/* 成员进度 */
.member-list {
  margin-top: 2rpx;
}
.member-row {
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-top: 6rpx;
}
.member-name {
  font-size: 20rpx;
  color: #475569;
  width: 90rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.member-bar-wrap { flex: 1; }
.member-bar-bg {
  height: 8rpx;
  background: #E2E8F0;
  border-radius: 999rpx;
  overflow: hidden;
}
.member-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366F1, #8B5CF6);
  border-radius: 999rpx;
}
.member-val {
  font-size: 18rpx;
  color: #64748B;
  min-width: 80rpx;
  text-align: right;
}
.member-done {
  font-size: 22rpx;
  color: #10B981;
  font-weight: 700;
}

/* 详情行（合并为单行） */
.card-detail-row {
  display: flex;
  align-items: center;
  gap: 6rpx;
  margin-top: 6rpx;
  flex-wrap: wrap;
}
.detail-label { font-size: 20rpx; color: #94A3B8; }
.detail-val { font-size: 20rpx; color: #334155; }
.detail-val.reward { color: #F97316; font-weight: 600; }
.detail-val.badge { color: #6366F1; }
</style>