caremate/train-frontend/pages/share/stats.vue

<template>
  <view class="stats-page">
    <view class="stat-card">
      <view class="stat-row">
        <view class="stat-item">
          <text class="stat-num">{{ stats.invited }}</text>
          <text class="stat-label">邀请人数</text>
        </view>
        <view class="stat-item">
          <text class="stat-num">{{ stats.paid }}</text>
          <text class="stat-label">成功付费</text>
        </view>
        <view class="stat-item">
          <text class="stat-num">{{ stats.rewards }}</text>
          <text class="stat-label">已获奖励</text>
        </view>
      </view>
    </view>

    <view class="tip-card">
      <text class="tip-title">如何获得奖励？</text>
      <text class="tip-desc">1. 在我的海报页复制专属邀请码</text>
      <text class="tip-desc">2. 把海报/邀请码分享给朋友</text>
      <text class="tip-desc">3. 朋友报名时填写邀请码并完成付费</text>
      <text class="tip-desc">4. 你将自动获得一张训练营积分</text>
    </view>

    <view class="poster-link" @click="goPoster">
      <text>去生成我的专属海报</text>
      <text class="arrow">›</text>
    </view>
  </view>
</template>

<script>
import { getInviteStats } from '@/utils/api.js'
import { guardPage } from '@/utils/guard.js'

export default {
  data() {
    return {
      stats: { invited: 0, paid: 0, rewards: 0 }
    }
  },
  onShow() {
    if (!guardPage()) return
    this.loadStats()
  },
  methods: {
    loadStats() {
      var self = this
      getInviteStats().then(function(resp) {
        var data = resp.data || {}
        self.stats = {
          invited: data.invited || 0,
          paid: data.paid || 0,
          rewards: data.rewards || 0
        }
      }).catch(function() {})
    },
    goPoster() {
      uni.navigateBack({})
    }
  }
}
</script>

<style scoped>
.stats-page { min-height: 100vh; background: #F5F5F5; padding: 24rpx 32rpx; }
.stat-card { background: #FFF; border-radius: 16rpx; padding: 40rpx 24rpx; margin-bottom: 24rpx; }
.stat-row { display: flex; justify-content: space-around; }
.stat-item { display: flex; flex-direction: column; align-items: center; flex: 1; }
.stat-num { font-size: 56rpx; font-weight: 700; color: #F97316; }
.stat-label { font-size: 26rpx; color: #64748B; margin-top: 12rpx; }
.tip-card { background: #FFF; border-radius: 16rpx; padding: 32rpx; margin-bottom: 24rpx; }
.tip-title { display: block; font-size: 30rpx; font-weight: 700; color: #1E293B; margin-bottom: 16rpx; border-left: 8rpx solid #F97316; padding-left: 16rpx; }
.tip-desc { display: block; font-size: 26rpx; color: #475569; line-height: 48rpx; }
.poster-link { display: flex; align-items: center; justify-content: center; padding: 32rpx 0; color: #64748B; font-size: 28rpx; }
.poster-link .arrow { color: #94A3B8; font-size: 32rpx; margin-left: 8rpx; }
</style>