370 lines
8.5 KiB
Vue
370 lines
8.5 KiB
Vue
<template>
|
||
<view class="creation-grid">
|
||
<view
|
||
v-for="item in creationList"
|
||
:key="item.id"
|
||
:ref="(el) => setCardRef(el, item)"
|
||
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 { onShow } from "@dcloudio/uni-app";
|
||
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', 'loaded'])
|
||
|
||
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()
|
||
}
|
||
|
||
// 卡片 DOM 引用 map（key = item.id）。供父组件读取位置做 spotlight。
|
||
const cardRefsMap = new Map()
|
||
const setCardRef = (el, item) => {
|
||
if (el && item && item.id != null) {
|
||
cardRefsMap.set(item.id, el)
|
||
} else if (item && item.id != null) {
|
||
cardRefsMap.delete(item.id)
|
||
}
|
||
}
|
||
const getCardRefs = () => Array.from(cardRefsMap.values())
|
||
|
||
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
|
||
emit('loaded', creationList.value.length)
|
||
}
|
||
}
|
||
|
||
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
|
||
emit('loaded', creationList.value.length)
|
||
}
|
||
}
|
||
|
||
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];
|
||
}
|
||
});
|
||
});
|
||
|
||
onShow(()=>{
|
||
loadUsers();
|
||
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
isComponentMounted = false;
|
||
uni.$off("assetLiked");
|
||
});
|
||
|
||
defineExpose({ loadMore, getCardRefs })
|
||
</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> |