cfc/cfc-frontend/pages/promotion/leaderboard.vue

<template>
  <view class="container">
    <!-- 标题区域 -->
    <view class="header">
      <text class="header-title">推广排行榜</text>
      <text class="header-sub">本周</text>
    </view>

    <!-- 加载状态 -->
    <view class="loading-state" v-if="loading && topList.length === 0">
      <text>加载中...</text>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="!loading && topList.length === 0">
      <text class="empty-icon">🏆</text>
      <text class="empty-text">本周还没有推广达人</text>
    </view>

    <!-- Top 3 领奖台 -->
    <view class="podium-section" v-if="topList.length > 0">
      <!-- #2 左侧 -->
      <view class="podium-item podium-silver" v-if="topList.length >= 2">
        <view class="podium-rank-badge silver-badge">2</view>
        <view class="podium-avatar-wrap silver-border">
          <image v-if="topList[1] && topList[1].avatarUrl" class="podium-avatar" :src="topList[1].avatarUrl" mode="aspectFill"></image>
          <text v-else class="podium-avatar-icon">👤</text>
        </view>
        <text class="podium-name">{{ topList[1] && topList[1].nickname ? topList[1].nickname : '微信用户' }}</text>
        <text class="podium-count">{{ topList[1] && topList[1].referralCount ? topList[1].referralCount : 0 }}人</text>
      </view>

      <!-- #1 中间（最大） -->
      <view class="podium-item podium-gold">
        <view class="crown-wrap">
          <text class="crown-icon">👑</text>
        </view>
        <view class="podium-rank-badge gold-badge">1</view>
        <view class="podium-avatar-wrap gold-border gold-size">
          <image v-if="topList[0] && topList[0].avatarUrl" class="podium-avatar" :src="topList[0].avatarUrl" mode="aspectFill"></image>
          <text v-else class="podium-avatar-icon">👤</text>
        </view>
        <text class="podium-name gold-name">{{ topList[0] && topList[0].nickname ? topList[0].nickname : '微信用户' }}</text>
        <text class="podium-count gold-count">{{ topList[0] && topList[0].referralCount ? topList[0].referralCount : 0 }}人</text>
      </view>

      <!-- #3 右侧 -->
      <view class="podium-item podium-bronze" v-if="topList.length >= 3">
        <view class="podium-rank-badge bronze-badge">3</view>
        <view class="podium-avatar-wrap bronze-border">
          <image v-if="topList[2] && topList[2].avatarUrl" class="podium-avatar" :src="topList[2].avatarUrl" mode="aspectFill"></image>
          <text v-else class="podium-avatar-icon">👤</text>
        </view>
        <text class="podium-name">{{ topList[2] && topList[2].nickname ? topList[2].nickname : '微信用户' }}</text>
        <text class="podium-count">{{ topList[2] && topList[2].referralCount ? topList[2].referralCount : 0 }}人</text>
      </view>
    </view>

    <!-- 排名列表 #4-#20 -->
    <view class="rank-list" v-if="topList.length > 3">
      <view class="rank-item" v-for="item in restList" :key="item.rank">
        <view class="rank-num-wrap">
          <text class="rank-num">{{ item.rank }}</text>
        </view>
        <view class="rank-avatar-wrap">
          <image v-if="item.avatarUrl" class="rank-avatar" :src="item.avatarUrl" mode="aspectFill"></image>
          <text v-else class="rank-avatar-icon">👤</text>
        </view>
        <text class="rank-name">{{ item.nickname || '微信用户' }}</text>
        <text class="rank-count">{{ item.referralCount || 0 }}人</text>
      </view>
    </view>

    <!-- 我的排名（底部吸底） -->
    <view class="my-rank-card" v-if="!loading">
      <view class="my-rank-inner" v-if="myRank && myRank.rank">
        <view class="my-rank-left">
          <text class="my-rank-label">我的排名</text>
          <text class="my-rank-pos">#{{ myRank.rank }}</text>
        </view>
        <view class="my-rank-right">
          <text class="my-rank-count">{{ myRank.referralCount || 0 }}人</text>
        </view>
      </view>
      <view class="my-rank-inner" v-else>
        <view class="my-rank-left">
          <text class="my-rank-label">我的排名</text>
          <text class="my-rank-pos unranked">未上榜</text>
        </view>
        <view class="my-rank-right">
          <text class="my-rank-hint">继续加油推广吧</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getLeaderboardTop, getLeaderboardMyRank } from '../../utils/api.js'

export default {
  data() {
    return {
      topList: [],
      myRank: null,
      loading: false
    }
  },
  computed: {
    restList() {
      if (this.topList.length <= 3) return []
      return this.topList.slice(3)
    }
  },
  onLoad() {
    this.loadTop()
    this.loadMyRank()
  },
  onPullDownRefresh() {
    this.loadTop()
    this.loadMyRank()
    uni.stopPullDownRefresh()
  },
  methods: {
    async loadTop() {
      this.loading = true
      try {
        var res = await getLeaderboardTop()
        if (res.data) {
          this.topList = res.data || []
        }
      } catch (e) {
        console.error('获取排行榜失败', e)
        uni.showToast({ title: '获取排行榜失败', icon: 'none' })
      }
      this.loading = false
    },
    async loadMyRank() {
      try {
        var res = await getLeaderboardMyRank()
        if (res.data) {
          this.myRank = res.data
        }
      } catch (e) {
        console.error('获取我的排名失败', e)
      }
    }
  }
}
</script>

<style scoped>
.container {
  padding: 30rpx;
  min-height: 100vh;
  background: #FFF7ED;
  padding-bottom: 160rpx;
}

/* ===== 标题区域 ===== */
.header {
  text-align: center;
  padding: 20rpx 0 30rpx;
}
.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #1E293B;
  display: block;
}
.header-sub {
  font-size: 24rpx;
  color: #F97316;
  margin-top: 8rpx;
  display: block;
}

/* ===== 领奖台 Top 3 ===== */
.podium-section {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 30rpx 0 40rpx;
}
.podium-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200rpx;
  position: relative;
}
.podium-gold {
  width: 240rpx;
}
.crown-wrap {
  margin-bottom: 4rpx;
}
.crown-icon {
  font-size: 48rpx;
}
.podium-rank-badge {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 12rpx;
}
.gold-badge {
  background: #FFD700;
}
.silver-badge {
  background: #C0C0C0;
}
.bronze-badge {
  background: #CD7F32;
}
.podium-avatar-wrap {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 12rpx;
  background: #FEF3C7;
}
.gold-size {
  width: 120rpx;
  height: 120rpx;
}
.gold-border {
  border: 4rpx solid #FFD700;
  box-shadow: 0 0 20rpx rgba(255, 215, 0, 0.4);
}
.silver-border {
  border: 4rpx solid #C0C0C0;
  box-shadow: 0 0 16rpx rgba(192, 192, 192, 0.3);
}
.bronze-border {
  border: 4rpx solid #CD7F32;
  box-shadow: 0 0 16rpx rgba(205, 127, 50, 0.3);
}
.podium-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.podium-avatar-icon {
  font-size: 48rpx;
}
.podium-name {
  font-size: 24rpx;
  color: #1E293B;
  font-weight: 500;
  max-width: 180rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  display: block;
}
.gold-name {
  font-size: 28rpx;
  font-weight: bold;
  max-width: 220rpx;
}
.podium-count {
  font-size: 22rpx;
  color: #94A3B8;
  margin-top: 4rpx;
  display: block;
}
.gold-count {
  color: #F97316;
  font-weight: bold;
  font-size: 26rpx;
}

/* ===== 排名列表 #4-#20 ===== */
.rank-list {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(249, 115, 22, 0.08);
}
.rank-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #FED7AA;
}
.rank-item:last-child {
  border-bottom: none;
}
.rank-num-wrap {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  background: #FFF7ED;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  flex-shrink: 0;
}
.rank-num {
  font-size: 24rpx;
  font-weight: bold;
  color: #F97316;
}
.rank-avatar-wrap {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  background: #FEF3C7;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  overflow: hidden;
  flex-shrink: 0;
}
.rank-avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
}
.rank-avatar-icon {
  font-size: 32rpx;
}
.rank-name {
  flex: 1;
  font-size: 28rpx;
  color: #1E293B;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.rank-count {
  font-size: 28rpx;
  font-weight: bold;
  color: #F97316;
  flex-shrink: 0;
  margin-left: 16rpx;
}

/* ===== 我的排名（吸底） ===== */
.my-rank-card {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  background: rgba(255, 247, 237, 0.95);
  backdrop-filter: blur(10px);
  z-index: 100;
}
.my-rank-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx 32rpx;
  box-shadow: 0 4rpx 20rpx rgba(249, 115, 22, 0.15);
  border: 2rpx solid #FED7AA;
}
.my-rank-left {
  display: flex;
  align-items: center;
}
.my-rank-label {
  font-size: 28rpx;
  color: #64748B;
  margin-right: 16rpx;
}
.my-rank-pos {
  font-size: 32rpx;
  font-weight: bold;
  color: #F97316;
}
.my-rank-pos.unranked {
  color: #94A3B8;
  font-size: 28rpx;
  font-weight: 500;
}
.my-rank-right {
  text-align: right;
}
.my-rank-count {
  font-size: 32rpx;
  font-weight: bold;
  color: #F97316;
}
.my-rank-hint {
  font-size: 24rpx;
  color: #94A3B8;
}

/* ===== 空状态 / 加载状态 ===== */
.empty-state {
  text-align: center;
  padding: 120rpx 0;
}
.empty-icon {
  font-size: 80rpx;
  display: block;
  margin-bottom: 20rpx;
}
.empty-text {
  font-size: 28rpx;
  color: #94A3B8;
  display: block;
}
.loading-state {
  text-align: center;
  padding: 120rpx 0;
  color: #94A3B8;
  font-size: 28rpx;
}
</style>