1212

.gitignore

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

app/pages/home/components/ItemList/index.vue

@@ -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">
+          <WaterfallFlow :items="itemList" :column-count="2">
-            <template #default="{ item }">
+            <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="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]"
-                        :class="{'z-10': !imageLoadingStatus[item.id]}"
                   >
-                      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>