cfc/cfc-frontend/pages/profile/components/ProfileStats.vue

<template>
  <view :style="{ '--font-scale': fontScale }">
    <!-- 行动数据 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">🎯 行动数据</text>
      </view>
      <view class="action-card">
        <view class="action-item">
          <text class="action-value">{{ actionData.taskCount }}</text>
          <text class="action-label">完成任务</text>
        </view>
        <view class="action-divider"></view>
        <view class="action-item">
          <text class="action-value">{{ actionData.purchaseCount }}</text>
          <text class="action-label">购买商品</text>
        </view>
        <view class="action-divider"></view>
        <view class="action-item">
          <text class="action-value">{{ actionData.activityCount }}</text>
          <text class="action-label">参加活动</text>
        </view>
        <view class="action-divider"></view>
        <view class="action-item">
          <text class="action-value">{{ actionData.courseCount }}</text>
          <text class="action-label">学习课程</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getUserActionStats } from '../../../utils/api.js'
import fontScaleMixin from '@/mixins/font-scale.js'

export default {
  mixins: [fontScaleMixin],
  name: 'ProfileStats',
  data() {
    return {
      actionData: {
        purchaseCount: 0,
        activityCount: 0,
        taskCount: 0,
        courseCount: 0
      }
    }
  },
  onShow() {
    if (!uni.getStorageSync('token')) return
    this.loadActionData()
  },
  methods: {
    async loadActionData() {
      try {
        const res = await getUserActionStats()
        if (res.code === 200 && res.data) {
          this.actionData.purchaseCount = res.data.purchaseCount || 0
          this.actionData.activityCount = res.data.activityCount || 0
          this.actionData.taskCount = res.data.taskCount || 0
          this.actionData.courseCount = res.data.courseCount || 0
        }
      } catch (e) {
        this.actionData.taskCount = parseInt(uni.getStorageSync('completedTasks') || 0)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.section {
  margin: 20rpx $uni-space-lg;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}
.section-title {
  font-size: calc(30rpx * var(--font-scale, 1));
  font-weight: bold;
  color: $facade-text-strong;
}
.section-more {
  font-size: calc(24rpx * var(--font-scale, 1));
  color: $facade-text-muted;
}

.action-card {
  background: $app-surface;
  border-radius: 24rpx;
  padding: $uni-space-lg 20rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.action-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.action-value {
  font-size: calc(40rpx * var(--font-scale, 1));
  font-weight: bold;
  color: $brand-primary;
}
.action-label {
  font-size: calc(24rpx * var(--font-scale, 1));
  color: $facade-text-muted;
  margin-top: 8rpx;
}
.action-divider {
  width: 1rpx;
  height: 60rpx;
  background: $facade-fill;
}
</style>