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

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

    <!-- 财富数据（推广收益） -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">💰 财富数据</text>
        <text class="section-more" @click="goToPromotion">全部 ›</text>
      </view>
      <view class="wealth-card">
        <view class="wealth-item">
          <text class="wealth-value">{{ formatPriceWithSymbol(wealthData.totalEarnings) }}</text>
          <text class="wealth-label">累计收益</text>
        </view>
        <view class="wealth-divider"></view>
        <view class="wealth-item">
          <text class="wealth-value">{{ formatPriceWithSymbol(wealthData.availableAmount) }}</text>
          <text class="wealth-label">可提现</text>
        </view>
        <view class="wealth-divider"></view>
        <view class="wealth-item">
          <text class="wealth-value">{{ wealthData.referralCount }}</text>
          <text class="wealth-label">邀请人数</text>
        </view>
      </view>
      <view class="referral-code-bar" @click="copyReferralCode" v-if="wealthData.referralCode">
        <text class="referral-code-label">邀请码</text>
        <text class="referral-code-value">{{ wealthData.referralCode }}</text>
        <text class="referral-code-copy">复制</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getUserActionStats, getReferralCode, getReferralSummary, getCommissionSummary } from '../../../utils/api.js'

export default {
  name: 'ProfileStats',
  data() {
    return {
      actionData: {
        purchaseCount: 0,
        activityCount: 0,
        taskCount: 0,
        courseCount: 0
      },
      wealthData: {
        totalEarnings: '0.00',
        availableAmount: '0.00',
        referralCount: 0,
        referralCode: ''
      }
    }
  },
  onShow() {
    if (!uni.getStorageSync('token')) return
    this.loadActionData()
    this.loadWealthData()
  },
  methods: {
    formatPriceWithSymbol(val) {
      if (val === null || val === undefined) return '0.00'
      return String(val)
    },
    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)
      }
    },
    async loadWealthData() {
      try {
        const codeRes = await getReferralCode()
        if (codeRes.data) {
          this.wealthData.referralCode = codeRes.data.referralCode || codeRes.data.code || ''
        }
      } catch (e) {}
      try {
        const summaryRes = await getReferralSummary()
        if (summaryRes.data) {
          this.wealthData.totalEarnings = summaryRes.data.totalEarnings || '0.00'
          this.wealthData.referralCount = summaryRes.data.referredCount || summaryRes.data.totalCount || 0
        }
      } catch (e) {}
      try {
        const comRes = await getCommissionSummary()
        if (comRes.data) {
          this.wealthData.availableAmount = comRes.data.availableAmount || '0.00'
        }
      } catch (e) {}
    },
    goToPromotion() {
      uni.navigateTo({ url: '/pages/promotion/index' })
    },
    copyReferralCode() {
      if (!this.wealthData.referralCode) return
      uni.setClipboardData({
        data: this.wealthData.referralCode,
        success: () => { uni.showToast({ title: '邀请码已复制', icon: 'success' }) }
      })
    }
  }
}
</script>

<style scoped>
.section {
  margin: 20rpx 30rpx;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}
.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}
.section-more {
  font-size: 24rpx;
  color: #999;
}

.wealth-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx 20rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.wealth-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wealth-value {
  font-size: 40rpx;
  font-weight: bold;
  color: #F97316;
}
.wealth-label {
  font-size: 24rpx;
  color: #999;
  margin-top: 8rpx;
}
.wealth-divider {
  width: 1rpx;
  height: 60rpx;
  background: #f0f0f0;
}

.referral-code-bar {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx 24rpx;
  margin-top: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.referral-code-label {
  font-size: 26rpx;
  color: #999;
  margin-right: 16rpx;
}
.referral-code-value {
  flex: 1;
  font-size: 28rpx;
  font-weight: bold;
  color: #F97316;
  letter-spacing: 4rpx;
}
.referral-code-copy {
  font-size: 24rpx;
  color: #5B9BD5;
  padding: 4rpx 16rpx;
  border: 1rpx solid #5B9BD5;
  border-radius: 8rpx;
}
</style>