topfans/frontend/pages/square/components/HotCategoryBlock.vue

<template>
  <view class="hot-category-block">
    <!-- 标题 -->
    <view class="block-title">{{ title }}</view>

    <!-- 骨架屏 -->
    <view v-if="loading" class="ranking-skeleton">
      <view v-for="i in 3" :key="i" class="skeleton-item">
        <view class="skeleton-rank"></view>
        <view class="skeleton-cover"></view>
        <view class="skeleton-info">
          <view class="skeleton-name"></view>
        </view>
      </view>
    </view>

    <!-- 榜单列表 -->
    <view v-else class="ranking-list">
      <view
        v-for="(item, index) in items"
        :key="item.id || index"
        class="ranking-item"
      >
        <view class="rank-number" :class="'rank-' + (index + 1)">{{ index + 1 }}</view>
        <image class="rank-cover" :src="item.cover_url || item.cover_image || ''" mode="aspectFill"></image>
        <view class="rank-info">
          <text class="rank-name">{{ item.name || '' }}</text>
          <view class="rank-creator">
            <image class="creator-avatar" :src="item.owner_avatar || ''" mode="aspectFill"></image>
            <text class="creator-name">{{ item.owner_nickname || '' }}</text>
          </view>
        </view>
        <view class="rank-likes">
          <image class="rank-like-icon" src="/static/icon/heart-icon.png" mode="aspectFit"></image>
          <text class="rank-like-count">{{ formatCount(item.likes || 0) }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getHotRankingApi } from '@/utils/api.js'

const props = defineProps({
  title: {
    type: String,
    default: '在线榜单'
  }
})

const items = ref([])
const loading = ref(false)

// 格式化数量
const formatCount = (count) => {
  if (!count) return '0'
  if (count >= 10000) return (count / 10000).toFixed(1) + 'w'
  if (count >= 1000) return (count / 1000).toFixed(1) + 'k'
  return count.toString()
}

// 加载数据
const loadData = async () => {
  loading.value = true
  try {
    const res = await getHotRankingApi('displaying', null, 1, 12)
    if (res.code === 200 && res.data?.items) {
      items.value = res.data.items
    }
  } catch (e) {
    console.error('[HotCategoryBlock] 加载数据失败', e?.message ?? e)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadData()
})
</script>

<style scoped>
.hot-category-block {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10rpx);
  border-radius: 24rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
}

.block-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #fff;
  margin-bottom: 24rpx;
}

/* 骨架屏 */
.ranking-skeleton {
  display: flex;
  flex-direction: column;
}

.skeleton-item {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.skeleton-rank {
  width: 48rpx;
  height: 48rpx;
  background: #3a3a4a;
  border-radius: 8rpx;
  margin-right: 16rpx;
}

.skeleton-cover {
  width: 120rpx;
  height: 120rpx;
  background: linear-gradient(90deg, #3a3a4a 25%, #4a4a5a 50%, #3a3a4a 75%);
  background-size: 200% 100%;
  border-radius: 12rpx;
  margin-right: 16rpx;
  animation: shimmer 1.5s infinite;
}

.skeleton-info {
  flex: 1;
}

.skeleton-name {
  width: 200rpx;
  height: 32rpx;
  background: #3a3a4a;
  border-radius: 8rpx;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 榜单列表 */
.ranking-list {
  display: flex;
  flex-direction: column;
}

.ranking-item {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12rpx;
  padding: 16rpx;
}

.rank-number {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: 600;
  color: #fff;
  border-radius: 8rpx;
  margin-right: 16rpx;
}

.rank-number.rank-1 {
  background: linear-gradient(135deg, #ff6b6b 0%, #ffa502 100%);
}

.rank-number.rank-2 {
  background: linear-gradient(135deg, #a0a0a0 0%, #c0c0c0 100%);
}

.rank-number.rank-3 {
  background: linear-gradient(135deg, #cd7f32 0%, #e6a86e 100%);
}

.rank-cover {
  width: 120rpx;
  height: 120rpx;
  border-radius: 12rpx;
  margin-right: 16rpx;
}

.rank-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rank-name {
  font-size: 28rpx;
  color: #fff;
  margin-bottom: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-creator {
  display: flex;
  align-items: center;
}

.creator-avatar {
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  margin-right: 8rpx;
}

.creator-name {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.7);
}

.rank-likes {
  display: flex;
  align-items: center;
}

.rank-like-icon {
  width: 24rpx;
  height: 24rpx;
  margin-right: 4rpx;
}

.rank-like-count {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
}
</style>