cfc/cfc-frontend/components/FamilyChallengeCard.vue

<template>
  <view class="challenge-card" v-if="challenge" @click="onCardClick">
    <view class="card-header">
      <text class="card-title">{{ challenge.title }}</text>
      <text class="card-status" :class="statusClass">
        {{ statusText }}
      </text>
    </view>
    <text class="card-desc">{{ challenge.description || '' }}</text>

    <!-- 待同意：显示确认进度（pending 状态挑战） -->
    <view class="pending-section" v-if="challenge.status === 'pending'">
      <text class="pending-hint">等待成员确认（已同意 {{ agreedCount }}/{{ totalCount }}）{{ deadlineText }}</text>
    </view>

    <!-- 成员状态徽标：rejected 成员显示"已拒绝" -->
    <view class="member-status-row" v-if="hasRejected">
      <text class="member-status-tag member-rejected" v-for="mp in rejectedMembers" :key="getMemberKey(mp)">{{ mp.nickname }} 已拒绝</text>
    </view>

    <!-- 目标展示（两种模式） -->
    <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>

    <!-- 待同意：同意/拒绝按钮（仅我的状态=pending 时显示） -->
    <view class="card-action" v-if="challenge.status === 'pending' && challenge.myStatus === 'pending'">
      <view class="respond-btn respond-agree" @click.stop="onRespond('agree')">✅ 同意</view>
      <view class="respond-btn respond-reject" @click.stop="onRespond('reject')">✖ 拒绝</view>
    </view>

    <!-- 进行中：打卡 -->
    <view class="card-action" v-if="showCheckin && challenge.status === 'active'">
      <view class="checkin-btn" @click.stop="onCheckin">✅ 打卡</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    challenge: { type: Object, default: null },
    showCheckin: { type: Boolean, default: false }
  },
  computed: {
    statusClass: function() {
      return 'status-' + (this.challenge && this.challenge.status ? this.challenge.status : 'active')
    },
    statusText: function() {
      if (!this.challenge) return ''
      if (this.challenge.status === 'active') return '进行中'
      if (this.challenge.status === 'pending') return '待同意'
      if (this.challenge.status === 'cancelled') return '已取消'
      return '已完成'
    },
    agreedCount: function() {
      var list = this.challenge && this.challenge.memberProgress ? this.challenge.memberProgress : []
      var count = 0
      for (var i = 0; i < list.length; i++) {
        if (list[i].status === 'agreed') count++
      }
      return count
    },
    totalCount: function() {
      var list = this.challenge && this.challenge.memberProgress ? this.challenge.memberProgress : []
      return list.length
    },
    hasRejected: function() {
      return this.rejectedMembers.length > 0
    },
    rejectedMembers: function() {
      var list = this.challenge && this.challenge.memberProgress ? this.challenge.memberProgress : []
      var result = []
      for (var i = 0; i < list.length; i++) {
        if (list[i].status === 'rejected') result.push(list[i])
      }
      return result
    },
    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)
    },
    deadlineText: function() {
      if (!this.challenge || !this.challenge.respondDeadline) return ''
      var deadline = new Date(this.challenge.respondDeadline)
      var now = new Date()
      var diffDays = Math.round((deadline - now) / (1000 * 60 * 60 * 24))
      if (diffDays < 0) return '（已超时）'
      if (diffDays === 0) return '（截止今天）'
      return '（剩余 ' + diffDays + ' 天）'
    },
    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)
    },
    getMemberKey: function(mp) {
      return mp.memberId
    },
    onRespond: function(action) {
      var self = this
      var tip = action === 'agree' ? '确认同意参与该挑战吗？' : '确认拒绝该挑战吗？'
      uni.showModal({
        title: '确认操作',
        content: tip,
        success: function(res) {
          if (res.confirm) {
            self.$emit('respond', { challengeId: self.challenge.id, action: action })
          }
        }
      })
    },
    onCheckin: function() {
      var self = this
      uni.showModal({
        title: '确认打卡',
        content: '确认完成今日打卡吗？',
        success: function(res) {
          if (res.confirm) {
            self.$emit('checkin', { challengeId: self.challenge.id })
          }
        }
      })
    },
    onCardClick: function() {
      this.$emit('cardClick', { challengeId: this.challenge.id })
    }
  }
}
</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; }
.status-cancelled { background: #FEE2E2; color: #DC2626; }
.card-desc {
  font-size: 22rpx;
  color: #64748B;
  line-height: 1.4;
  margin-bottom: 8rpx;
  display: block;
}

/* 待同意提示区 */
.pending-section {
  background: #FEF3C7;
  border-radius: 10rpx;
  padding: 10rpx 12rpx;
  margin-bottom: 6rpx;
}
.pending-hint {
  font-size: 22rpx;
  color: #B45309;
  font-weight: 600;
}

/* 成员状态徽标行 */
.member-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
  margin-bottom: 6rpx;
}
.member-status-tag {
  font-size: 18rpx;
  padding: 2rpx 10rpx;
  border-radius: 999rpx;
}
.member-rejected {
  background: #FEE2E2;
  color: #DC2626;
}

/* 目标区 */
.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; }

.card-action {
  margin-top: 8rpx;
  display: flex;
  justify-content: flex-end;
}
.checkin-btn {
  padding: 10rpx 18rpx;
  border-radius: 999rpx;
  background: #10B981;
  color: #FFFFFF;
  font-size: 22rpx;
  font-weight: 600;
}
.respond-btn {
  padding: 10rpx 24rpx;
  border-radius: 999rpx;
  font-size: 22rpx;
  font-weight: 600;
  margin-left: 12rpx;
}
.respond-agree {
  background: #10B981;
  color: #FFFFFF;
}
.respond-reject {
  background: #FFFFFF;
  color: #DC2626;
  border: 2rpx solid #FCA5A5;
}
</style>