cfc/cfc-frontend/components/OnboardingProgressBar.vue

<template>
  <view class="opb-card" v-if="visible" @click="goOnboarding">
    <view class="opb-head">
      <text class="opb-title">🎁 新手成长礼包</text>
      <text class="opb-count">{{ completed }}/{{ total }} 已完成</text>
    </view>
    <view class="opb-bar">
      <view class="opb-bar-fill" :style="{ width: percent + '%' }"></view>
    </view>
    <view class="opb-tip">完成新手任务，赢取积分与五维能量 →</view>
  </view>
</template>

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

export default {
  name: 'OnboardingProgressBar',
  data() {
    return {
      taskList: []
    }
  },
  computed: {
    total() {
      return this.taskList.length
    },
    completed() {
      var count = 0
      for (var i = 0; i < this.taskList.length; i++) {
        var st = this.taskList[i].status
        if (st === 'COMPLETED' || st === 'CLAIMED') {
          count++
        }
      }
      return count
    },
    percent() {
      if (!this.total) return 0
      return Math.round((this.completed / this.total) * 100)
    },
    visible() {
      if (!this.taskList || this.taskList.length === 0) return false
      // 全部 CLAIMED 后不再展示
      for (var i = 0; i < this.taskList.length; i++) {
        if (this.taskList[i].status !== 'CLAIMED') return true
      }
      return false
    }
  },
  created() {
    this.reload()
  },
  methods: {
    reload: function() {
      var self = this
      getOnboardingProgress().then(function(res) {
        var records = (res.data && res.data.records) || res.data || []
        if (!Array.isArray(records)) {
          records = []
        }
        self.taskList = records
      }).catch(function(e) {
        console.error('获取新手任务进度失败', e)
      })
    },
    goOnboarding: function() {
      uni.navigateTo({ url: '/pages/profile-extra/onboarding' })
    }
  }
}
</script>

<style scoped>
.opb-card {
  margin: 20rpx 24rpx;
  padding: 24rpx 28rpx;
  background: linear-gradient(135deg, #FFF7ED, #FFEDD5);
  border: 2rpx solid #FED7AA;
  border-radius: 20rpx;
}
.opb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14rpx;
}
.opb-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #9A3412;
}
.opb-count {
  font-size: 24rpx;
  color: #C2410C;
}
.opb-bar {
  height: 16rpx;
  background: #FED7AA;
  border-radius: 8rpx;
  overflow: hidden;
}
.opb-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #F97316, #FF8C42);
  border-radius: 8rpx;
}
.opb-tip {
  margin-top: 12rpx;
  font-size: 24rpx;
  color: #C2410C;
}
</style>