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.childId">
          <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">⏱ 期限</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>

    <!-- 打卡上报入口（active 挑战 + 有 childId） -->
    <view class="checkin-section" v-if="challenge.status === 'active'">
      <template v-if="!showInput">
        <view class="checkin-btn" @click="openInput">
          <text class="checkin-btn-text">上报进度</text>
        </view>
      </template>
      <template v-else>
        <view class="checkin-form">
          <input class="checkin-input" type="number" v-model="deltaValue" placeholder="输入本次数量" />
          <view class="checkin-submit" @click="submitProgress">
            <text class="checkin-btn-text">确认</text>
          </view>
          <view class="checkin-cancel" @click="closeInput">
            <text class="checkin-cancel-text">取消</text>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>

<script>
import { updateChallengeProgress } from '@/utils/api.js'

export default {
  props: {
    challenge: { type: Object, default: null },
    childId: { type: Number, default: null }
  },
  data: function() {
    return {
      showInput: false,
      deltaValue: ''
    }
  },
  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)
    },
    openInput: function() {
      this.deltaValue = ''
      this.showInput = true
    },
    closeInput: function() {
      this.showInput = false
      this.deltaValue = ''
    },
    submitProgress: function() {
      var delta = parseInt(this.deltaValue, 10)
      if (!delta || delta <= 0) {
        uni.showToast({ title: '请输入本次数量', icon: 'none' })
        return
      }
      if (!this.childId) {
        uni.showToast({ title: '请先选择家庭成员', icon: 'none' })
        return
      }
      var self = this
      updateChallengeProgress({
        challengeId: this.challenge.id,
        childId: this.childId,
        delta: delta
      }).then(function(res) {
        if (res.code === 200) {
          uni.showToast({ title: '上报成功！', icon: 'none' })
          self.closeInput()
          self.$emit('updated')
        }
      }).catch(function() {
        // api.js 拦截器已提示
      })
    }
  }
}
</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;
}

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

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

/* 成员进度 */
.member-list {
  margin-top: 4rpx;
}
.member-row {
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-top: 8rpx;
}
.member-name {
  font-size: 22rpx;
  color: #475569;
  width: 90rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.member-bar-wrap { flex: 1; }
.member-bar-bg {
  height: 10rpx;
  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: 20rpx;
  color: #64748B;
  min-width: 90rpx;
  text-align: right;
}
.member-done {
  font-size: 24rpx;
  color: #10B981;
  font-weight: 700;
}

/* 详情行 */
.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; }

/* 打卡区 */
.checkin-section {
  margin-top: 16rpx;
  border-top: 1rpx solid #F1F5F9;
  padding-top: 16rpx;
}
.checkin-btn {
  background: linear-gradient(135deg, #10B981, #34D399);
  border-radius: 40rpx;
  padding: 16rpx 0;
  text-align: center;
}
.checkin-btn:active { opacity: 0.8; }
.checkin-btn-text { color: #fff; font-size: 26rpx; font-weight: 600; }
.checkin-form {
  display: flex;
  align-items: center;
  gap: 12rpx;
}
.checkin-input {
  flex: 1;
  height: 64rpx;
  background: #F1F5F9;
  border-radius: 12rpx;
  padding: 0 16rpx;
  font-size: 26rpx;
}
.checkin-submit {
  background: #10B981;
  border-radius: 12rpx;
  padding: 14rpx 24rpx;
}
.checkin-cancel {
  padding: 14rpx 16rpx;
}
.checkin-cancel-text { font-size: 24rpx; color: #94A3B8; }
</style>