cfc/cfc-frontend/pages/growth/challenge-progress.vue

<template>
  <view class="page">
    <view class="nav-bar">
      <view class="nav-back" @tap="goBack">
        <text class="back-text">‹ 返回</text>
      </view>
      <text class="nav-title">闯关进度</text>
    </view>

    <scroll-view class="content" scroll-y>
      <!-- 进度概览 -->
      <view class="progress-overview">
        <view class="progress-circle" :style="{ background: 'conic-gradient(#F97316 ' + progressPercent + '%, #f0f0f0 ' + progressPercent + '%)' }">
          <text class="progress-percent">{{ progressPercent }}%</text>
        </view>
        <text class="progress-label">已完成 {{ completedCount }}/{{ totalCount }} 项任务</text>
        <text class="progress-cf">已获得 {{ completedReward }} CF值</text>
      </view>

      <!-- 各周任务 -->
      <view class="card" v-for="(tasks, week) in tasksByWeek" :key="week">
        <view class="card-header">
          <text class="card-title">第{{ week }}周</text>
          <text class="card-reward">+{{ weekReward(week) }} CF</text>
        </view>
        <view class="task-list">
          <view class="task-item" v-for="task in tasks" :key="task.taskKey">
            <view class="task-left">
              <text class="task-icon" :class="{ 'completed': task.status === 'completed' }">{{ task.status === 'completed' ? '✓' : '○' }}</text>
              <view class="task-info">
                <text class="task-title">{{ task.taskTitle }}</text>
                <text class="task-progress">{{ task.currentValue }}/{{ task.targetValue }}</text>
              </view>
            </view>
            <text class="task-reward">+{{ task.rewardCf }} CF</text>
          </view>
        </view>
      </view>

      <!-- 连续打卡 -->
      <view class="card">
        <view class="card-header">
          <text class="card-title">连续打卡</text>
          <text class="card-streak">{{ streakDays }} 天</text>
        </view>
        <view class="streak-grid">
          <view class="streak-day" v-for="n in 21" :key="n" :class="{ 'done': n <= streakDays }">
            <text>{{ n }}</text>
          </view>
        </view>
        <text class="streak-hint">连续打卡可得额外CF加成</text>
      </view>
    </scroll-view>
  </view>
</template>

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

export default {
  data() {
    return {
      loading: true,
      tasksByWeek: {},
      totalReward: 0,
      completedReward: 0,
      completedCount: 0,
      totalCount: 0,
      streakDays: 0
    }
  },
  computed: {
    progressPercent() {
      return this.totalCount > 0 ? Math.round(this.completedCount / this.totalCount * 100) : 0
    }
  },
  onLoad() {
    this.loadProgress()
  },
  methods: {
    goBack() { uni.navigateBack() },
    async loadProgress() {
      this.loading = true
      try {
        var res = await getChallengeProgress(uni.getStorageSync('currentMemberId') || uni.getStorageSync('userId'))
        if (res.data && res.data.success) {
          this.tasksByWeek = res.data.byWeek || {}
          this.totalReward = res.data.totalReward || 0
          this.completedReward = res.data.completedReward || 0
          this.completedCount = res.data.completedCount || 0
          this.totalCount = res.data.totalCount || 0
          this.streakDays = res.data.streakDays || 0
        }
      } catch (e) {
        console.log('加载进度失败', e)
      } finally {
        this.loading = false
      }
    },
    weekReward(week) {
      var tasks = this.tasksByWeek[week] || []
      return tasks.reduce(function(sum, t) { return sum + (t.rewardCf || 0); }, 0)
    }
  }
}
</script>

<style scoped>
.page { min-height: 100vh; background: #FFF7ED; }
.nav-bar { display: flex; align-items: center; height: 88rpx; padding-top: env(safe-area-inset-top); background: #fff; border-bottom: 1rpx solid #f0f0f0; position: relative; }
.nav-back { position: absolute; left: 24rpx; top: 0; bottom: 0; display: flex; align-items: center; }
.back-text { font-size: 28rpx; color: #F97316; }
.nav-title { flex: 1; text-align: center; font-size: 32rpx; font-weight: bold; color: #333; }
.content { height: calc(100vh - 88rpx); }

.progress-overview { background: linear-gradient(135deg, #FF8C42, #F97316); padding: 40rpx 32rpx; text-align: center; }
.progress-circle { width: 160rpx; height: 160rpx; border-radius: 50%; margin: 0 auto 16rpx; display: flex; align-items: center; justify-content: center; box-shadow: 0 4rpx 20rpx rgba(249,115,22,0.3); }
.progress-percent { font-size: 36rpx; font-weight: bold; color: #fff; }
.progress-label { font-size: 24rpx; color: rgba(255,255,255,0.9); display: block; }
.progress-cf { font-size: 28rpx; color: #FFD700; font-weight: bold; margin-top: 8rpx; display: block; }

.card { margin: 16rpx 24rpx; background: #fff; border-radius: 20rpx; overflow: hidden; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
.card-header { display: flex; justify-content: space-between; align-items: center; padding: 20rpx 24rpx; border-bottom: 1rpx solid #f5f5f5; }
.card-title { font-size: 28rpx; font-weight: bold; color: #333; }
.card-reward { font-size: 22rpx; color: #F97316; }
.card-streak { font-size: 28rpx; font-weight: bold; color: #F97316; }

.task-list { padding: 16rpx 24rpx; }
.task-item { display: flex; justify-content: space-between; align-items: center; padding: 16rpx 0; border-bottom: 1rpx solid #f5f5f5; }
.task-item:last-child { border-bottom: none; }
.task-left { display: flex; align-items: center; gap: 16rpx; flex: 1; min-width: 0; }
.task-icon { font-size: 32rpx; color: #ccc; width: 40rpx; text-align: center; }
.task-icon.completed { color: #4CAF50; }
.task-info { flex: 1; min-width: 0; }
.task-title { font-size: 26rpx; color: #333; display: block; }
.task-progress { font-size: 22rpx; color: #999; margin-top: 4rpx; display: block; }
.task-reward { font-size: 22rpx; color: #F97316; flex-shrink: 0; margin-left: 16rpx; }

.streak-grid { display: flex; flex-wrap: wrap; gap: 8rpx; padding: 16rpx 24rpx; }
.streak-day { width: 48rpx; height: 48rpx; border-radius: 50%; background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 20rpx; color: #999; }
.streak-day.done { background: #F97316; color: #fff; }
.streak-hint { font-size: 22rpx; color: #999; text-align: center; padding: 0 24rpx 16rpx; display: block; }
</style>