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="like-badge">
        <view class="like-icon-wrapper">
          <image class="like-icon"
            :src="item.is_liked ? '/static/icon/heart-icon.png' : '/static/icon/heart-icon-false.png'" mode="aspectFit">
          </image>
          <text class="like-count">{{ formatCount(item.like_count) }}</text>
        </view>
      </view>
      <view class="wf-like-wave wf-like-wave-outer" :class="{ 'wf-like-wave-active': likingMap[item.id] }" />
      <view class="wf-like-wave wf-like-wave-inner" :class="{ 'wf-like-wave-active': likingMap[item.id] }" />
      <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>
      </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 likingMap = ref({});

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,
          is_liked: item.is_liked || false,
        }
      })
    } 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,
          is_liked: item.is_liked || false,
        }
      })

      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;
  // 监听点赞事件，实时更新点赞数
  uni.$on("assetLiked", ({ asset_id, data }) => {
    // 触发动画
    likingMap.value = { ...likingMap.value, [asset_id]: true };
    setTimeout(() => {
      likingMap.value = { ...likingMap.value, [asset_id]: false };
    }, 600);
    const idx = creationList.value.findIndex((c) => c.id === asset_id);
    if (idx !== -1) {
      if (data && typeof data.new_like_count === "number") {
        creationList.value[idx].like_count = data.new_like_count;
      }
      if (data && typeof data.is_liked === "boolean") {
        creationList.value[idx].is_liked = data.is_liked;
      }
      creationList.value = [...creationList.value];
    }
  });
  loadUsers();
});

onUnmounted(() => {
  isComponentMounted = false;
  uni.$off("assetLiked");
});

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;
}

.wf-like-wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
}

.wf-like-wave-outer {
  background: radial-gradient(
    circle,
    rgba(255, 107, 107, 0.8) 0%,
    transparent 70%
  );
}

.wf-like-wave-inner {
  background: radial-gradient(
    circle,
    rgba(255, 184, 0, 0.6) 0%,
    transparent 70%
  );
}

.wf-like-wave-active {
  animation: likeWave 0.6s ease-out forwards;
}

@keyframes likeWave {
  0% {
    opacity: 0.9;
    transform: scale(0.8);
  }

  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

.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-badge {
  position: absolute;
  top: 0;
  left: 0;
  width: 122rpx;
  height: 140rpx;
  opacity: 1;
  border-top-left-radius: 7px;
  border-bottom-right-radius: 21.5px;
  background: linear-gradient(177.83deg,
      rgba(83, 244, 211, 0.2) 2.52%,
      rgba(15, 9, 0, 0) 69.07%);
  backdrop-filter: blur(0px);
  z-index: 5;
}

.like-icon-wrapper {
  display: flex;
  align-items: center;
  padding: 8rpx;
}

.like-badge .like-icon {
  width: 38rpx;
  height: 38rpx;
  margin-right: 6rpx;
}

.like-badge .like-count {
  font-size: 32rpx;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: 0%;
  color: #fffabd;
  text-shadow:
    -1px 1px 4px #ce0909d6,
    0px 0px 10px #fffabd;
}


.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>