scout666/liveh5-nuxt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1212

Browse Source
This commit is contained in:
xingyy 2025-03-06 17:03:31 +08:00
parent 4e771fde21
commit c3852e1fb8
2 changed files with 44 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -17,3 +17,6 @@ logs
.DS_Store
.fleet
.idea
.history/
.history/**
**/.history/**

138
app/pages/home/components/ItemList/index.vue
View File

@ -1,8 +1,9 @@
<script setup>
import { ref, computed } from 'vue'
import {ref} from 'vue'
import {goodStore} from "@/stores/goods"
import DetailPopup from '../DetailPopup/index.vue'
import WaterfallFlow from '@/components/waterfallFlow/index.vue'
const {
itemList,
pageRef,
@ -17,37 +18,6 @@ const localState = ref({
showDetail: false,
showHeight: ''
})
// 记录每个图片的加载状态
const imageLoadingStatus = ref({})
// 生成骨架屏列表数据
const skeletonList = computed(() => {
// 如果有实际数据，返回空数组
if (itemList.value && itemList.value.length > 0) return []
// 否则返回6个骨架屏项目
return Array(6).fill().map((_, index) => ({
id: `skeleton-${index}`,
isSkeletonItem: true
}))
})
// 合并实际列表和骨架屏列表
const displayList = computed(() => {
if (itemList.value && itemList.value.length > 0) return itemList.value
return skeletonList.value
})
// 图片加载完成处理函数
const handleImageLoad = (itemId) => {
imageLoadingStatus.value[itemId] = true
}
// 图片加载错误处理函数
const handleImageError = (itemId) => {
imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
}
// 加载更多
const loadMore = async () => {
pageRef.value.page++
@ -60,8 +30,6 @@ const onRefresh = async () => {
try {
localState.value.refreshing = true
localState.value.finished = false
// 重置图片加载状态
imageLoadingStatus.value = {}
const {finished} = await getArtworkList(true)
localState.value.finished = finished
} finally {
@ -70,10 +38,30 @@ const onRefresh = async () => {
}
// 打开详情
const openShow = async (item) => {
if (item.isSkeletonItem) return
localState.value.showDetail = true
currentItem.value = item
}
/**
* 将数字格式化为"250XX"格式，其中XX是两位数
* @param {number} num - 要格式化的数字
* @return {string} - 格式化后的字符串
*/
function formatNumber(num) {
// 确保输入是有效数字
if (typeof num !== 'number' && isNaN(Number(num))) {
throw new Error('输入必须是有效数字');
}
// 转换为数字类型(以防输入是字符串数字)
const number = Number(num);
// 数字部分格式化为两位数，不足补0
const formattedNum = number.toString().padStart(2, '0');
// 添加前缀"250"并返回结果
return `250${formattedNum}`;
}
</script>
<template>
@ -84,7 +72,8 @@ const openShow = async (item) => {
@refresh="onRefresh"
>
<template #success>
<van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
<van-icon name="success"/>
<span>{{ $t('home.refresh_show') }}</span>
</template>
<van-list
v-model:loading="storeLoading"
@ -93,43 +82,24 @@ const openShow = async (item) => {
@load="loadMore"
>
<div class="w-full flex gap-[16px]">
<WaterfallFlow :items="displayList" :column-count="2">
<template #default="{ item }">
<WaterfallFlow :items="itemList" :column-count="2">
<template #default="{ item, index }">
<div
@click="openShow(item)"
class="w-full"
>
<div class="relative w-full">
<!-- 自定义骨架屏 -->
<div
v-if="item.isSkeletonItem || !imageLoadingStatus[item.id]"
class="custom-skeleton rounded-4px overflow-hidden"
>
<div class="skeleton-image"></div>
<div class="skeleton-content">
<div class="skeleton-title"></div>
<div class="skeleton-text"></div>
<div class="skeleton-text"></div>
</div>
</div>
<template v-if="!item.isSkeletonItem">
<img
:src="item.artwork?.hdPic"
class="w-full object-cover rounded-4px"
:class="{'hidden': !imageLoadingStatus[item.id]}"
@load="handleImageLoad(item.id)"
@error="handleImageError(item.id)"
/>
<div
class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
:class="{'z-10': !imageLoadingStatus[item.id]}"
class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[55px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
>
Lot{{item.index+25000 }}
Lot{{ formatNumber(item.index) }}
</div>
</template>
</div>
<div v-if="!item.isSkeletonItem" class="pt-[8px]" :class="{'hidden': !imageLoadingStatus[item.id]}">
<div class="pt-[8px]">
<div class="text-[14px] text-[#000000] leading-[20px]">
{{ item?.artwork?.name }} | {{ item?.artwork?.artistName }}
</div>
@ -158,52 +128,4 @@ const openShow = async (item) => {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* 自定义骨架屏样式 */
.custom-skeleton {
width: 100%;
display: flex;
flex-direction: column;
background-color: #fff;
}
.skeleton-image {
width: 100%;
padding-bottom: 100%; /* 保持1:1的宽高比 */
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
background-size: 400% 100%;
animation: skeleton-loading 1.4s ease infinite;
}
.skeleton-content {
padding: 8px 0;
}
.skeleton-title {
height: 16px;
margin-bottom: 8px;
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
background-size: 400% 100%;
animation: skeleton-loading 1.4s ease infinite;
border-radius: 2px;
}
.skeleton-text {
height: 12px;
margin-top: 4px;
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
background-size: 400% 100%;
animation: skeleton-loading 1.4s ease infinite;
border-radius: 2px;
width: 60%;
}
@keyframes skeleton-loading {
0% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
</style>