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

<template>
  <view class="creation-grid">
    <view v-for="(item, index) in creationList" :key="item.id" class="creation-card" @click="handleCardClick(item)">
      <image class="creation-image" :src="item.cover_image" mode="aspectFill"></image>
      <view class="creation-info">
        <view class="creation-id">
          <text class="id-text">#{{ item.certificate_id }}</text>
        </view>
        <view class="creation-meta">
          <view class="creator-info">
            <image class="creator-avatar" :src="item.creator_avatar" mode="aspectFill"></image>
            <text class="creator-name">{{ item.creator_name }}</text>
          </view>
          <view class="like-info">
            <image class="like-icon" src="/static/icon/heart-icon.png" mode="aspectFit"></image>
            <text class="like-count">{{ formatCount(item.like_count) }}</text>
          </view>
        </view>
      </view>
    </view>

    <view v-if="isLoading" class="loading-more">
      <text class="loading-text">加载中...</text>
    </view>
    <view v-if="noMore && creationList.length > 0" class="no-more">
      <text class="no-more-text">没有更多了</text>
    </view>
  </view>
</template>

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

const props = defineProps({
  screenWidth: { type: Number, default: 375 },
  screenHeight: { type: Number, default: 812 },
  bannerBottom: { type: Number, default: 200 },
  useMockData: { type: Boolean, default: false },
  category: { type: String, default: '' },
  isActive: { type: Boolean, default: true },
})

const emit = defineEmits(['cardClick', 'scroll'])

const creationList = ref([])
const cursor = ref('')
const isLoading = ref(false)
const noMore = ref(false)
let isComponentMounted = 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 handleCardClick = (item) => {
  emit('cardClick', item)
}

const loadUsers = async () => {
  if (!isComponentMounted) return Promise.resolve()

  cursor.value = ''
  isLoading.value = true
  noMore.value = false

  try {
    const res = await getInspirationFlowApi({ limit: 20, type: props.category, cursor: '' })
    if (!isComponentMounted) return

    if (res.code === 200 && res.data?.items && res.data.items.length > 0) {
      const items = res.data.items
      cursor.value = res.data.cursor || ''

      creationList.value = items.map((item) => {
        return {
          id: item.asset_id,
          certificate_id: item.asset_id,
          cover_image: item.cover_url || '',
          creator_avatar: item.owner_avatar || '',
          creator_name: item.owner_nickname || item.name || '',
          like_count: item.likes || item.like_count || 0,
        }
      })
    } else {
      noMore.value = true
    }
  } catch (e) {
    console.error('[CreationGrid] 加载数据失败', e?.message ?? e)
  } finally {
    isLoading.value = false
  }
}

const loadMore = async () => {
  if (!isComponentMounted || isLoading.value || noMore.value) return

  isLoading.value = true
  try {
    const res = await getInspirationFlowApi({ limit: 20, type: props.category, cursor: cursor.value })
    if (!isComponentMounted) return

    if (res.code === 200 && res.data?.items && res.data.items.length > 0) {
      const items = res.data.items
      cursor.value = res.data.cursor || ''

      const newItems = items.map((item) => {
        return {
          id: item.asset_id,
          certificate_id: item.asset_id,
          cover_image: item.cover_url || '',
          creator_avatar: item.owner_avatar || '',
          creator_name: item.owner_nickname || item.name || '',
          like_count: item.likes || item.like_count || 0,
        }
      })

      creationList.value = [...creationList.value, ...newItems]
    } else {
      noMore.value = true
    }
  } catch (e) {
    console.error('[CreationGrid] 加载更多失败', e?.message ?? e)
  } finally {
    isLoading.value = false
  }
}

watch(() => props.category, () => {
  loadUsers()
})

watch(() => props.isActive, (active) => {
  if (active && creationList.value.length === 0) {
    loadUsers()
  }
})

onMounted(() => {
  isComponentMounted = true
  loadUsers()
})

onUnmounted(() => {
  isComponentMounted = false
})

defineExpose({ loadMore })
</script>

<style scoped>
.creation-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* padding: 24rpx; */
  padding-bottom: 120rpx;
}

.creation-card {
  width: 48%;
  margin-bottom: 24rpx;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 20rpx;
  overflow: hidden;
  backdrop-filter: blur(10rpx);
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.creation-image {
  width: 100%;
  height: 400rpx;
}

.creation-info {
  padding: 16rpx;
}

.creation-id {
  margin-bottom: 12rpx;
}

.id-text {
  font-size: 22rpx;
  color: #FFB800;
  font-weight: 600;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.creation-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

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

.creator-name {
  font-size: 22rpx;
  color: #fff;
}

.like-info {
  display: flex;
  align-items: center;
}

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

.like-count {
  font-size: 22rpx;
  color: #fff;
}

.loading-more,
.no-more {
  width: 100%;
  text-align: center;
  padding: 32rpx 0;
}

.loading-text,
.no-more-text {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.6);
}
</style>