299 lines
7.1 KiB
Vue
299 lines
7.1 KiB
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="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 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)
|
|
const likingMap = ref({})
|
|
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
|
|
// 监听点赞事件，实时更新点赞数
|
|
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 && data && typeof data.new_like_count === 'number') {
|
|
creationList.value[idx].like_count = data.new_like_count
|
|
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);
|
|
position: relative;
|
|
}
|
|
|
|
.creation-image {
|
|
width: 100%;
|
|
height: 400rpx;
|
|
}
|
|
|
|
/* 光波动画 */
|
|
.wf-like-wave {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 400rpx;
|
|
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-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> |