From 5d645a8106676af4e017f829bffc423e882503b4 Mon Sep 17 00:00:00 2001
From: xingyy <64720302+Concur-max@users.noreply.github.com>
Date: Thu, 6 Feb 2025 16:29:17 +0800
Subject: [PATCH] =?UTF-8?q?refactor(home):=20=E4=BC=98=E5=8C=96=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E8=89=BA=E6=9C=AF=E5=93=81=E5=88=97=E8=A1=A8=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除了 x-image 组件中的多余属性
- 更新了 ItemList 组件中的 LOT 编号显示逻辑
-将 home 页面中的 v-show 改为 v-if
- 重构了 tangPopup 组件，添加了下拉刷新和上拉加载更多功能
---
 app/components/x-image/index.vue              |  5 --
 app/pages/home/components/ItemList/index.vue  |  4 +-
 app/pages/home/index.vue                      |  2 +-
 .../components/SideButton/tangPopup.vue       | 90 +++++++++++++------
 4 files changed, 68 insertions(+), 33 deletions(-)

diff --git a/app/components/x-image/index.vue b/app/components/x-image/index.vue
index 0ea2349..7369175 100644
--- a/app/components/x-image/index.vue
+++ b/app/components/x-image/index.vue
@@ -41,11 +41,6 @@ const showImage = () => {
       style="object-fit: cover"
       @click="showImage"
       :src="src"
-      :modifiers="{ format: 'webp' }"
-      :sizes="sizes"
-      :format="format"
-      :quality="quality"
-      placeholder
   />
 </template>
 
diff --git a/app/pages/home/components/ItemList/index.vue b/app/pages/home/components/ItemList/index.vue
index f35dd41..2d840b4 100644
--- a/app/pages/home/components/ItemList/index.vue
+++ b/app/pages/home/components/ItemList/index.vue
@@ -65,7 +65,7 @@ const openShow = async (item) => {
           finished-text="没有更多了"
           @load="loadMore"
       >
-        <div class="w-full flex gap-[16px]" v-memo="[itemList]">
+        <div class="w-full flex gap-[16px]">
           <masonry-wall :items="itemList" :ssr-columns="2" :maxColumns="2" :minColumns="2"  :gap="5">
             <template #default="{ item, index }">
             <div
@@ -81,7 +81,7 @@ const openShow = async (item) => {
                 <div
                     class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[45px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
                 >
-                  LOT{{ index+1 }}
+                  LOT{{ item.index }}
                 </div>
               </div>
               <div class="pt-[8px]">
diff --git a/app/pages/home/index.vue b/app/pages/home/index.vue
index a69b6b1..117ba2e 100644
--- a/app/pages/home/index.vue
+++ b/app/pages/home/index.vue
@@ -17,7 +17,7 @@ if (!auctionDetail.value.uuid){
       <liveRoom @click="changeLive" :class="['changeLive', fullLive ? 'expanded' : 'collapsed']"
                 :fullLive="fullLive"/>
     </client-only>
-    <div v-show="!fullLive" class="bg-#fff">
+    <div v-if="!fullLive" class="bg-#fff">
       <van-tabs sticky animated>
         <van-tab title="拍品列表">
           <ItemList></ItemList>
diff --git a/app/pages/liveRoom/components/SideButton/tangPopup.vue b/app/pages/liveRoom/components/SideButton/tangPopup.vue
index 231d312..bc218bc 100644
--- a/app/pages/liveRoom/components/SideButton/tangPopup.vue
+++ b/app/pages/liveRoom/components/SideButton/tangPopup.vue
@@ -4,9 +4,26 @@ import {goodStore} from "@/stores/goods/index.js";
 import xImage from '@/components/x-image/index.vue'
 import DetailPopup from '@/pages/home/components/DetailPopup/index.vue'
 import {liveStore} from "~/stores/live/index.js";
-const {pageRef,itemList} = goodStore();
+import {ref} from "vue";
+const {pageRef,itemList,getArtworkList,  loading: storeLoading,} = goodStore();
 const {auctionData} = liveStore()
 const showDetail=ref(false)
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
 const props = defineProps({
   show: Boolean,
   title: {
@@ -22,6 +39,11 @@ const openShow=(item)=>{
   showDetail.value=true
 
 }
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
 </script>
 
 <template>
@@ -32,33 +54,51 @@ const openShow=(item)=>{
         <div class="text-#939393 text-16px ml-14px">共{{ pageRef.itemCount }}个拍品</div>
       </template>
       <div>
-        <div
-            v-for="(item,index) of itemList"
-            :key="item.uuid"
-            class="flex mb-21px"
-            @click="openShow(item)"
+        <van-pull-refresh
+            v-model="localState.refreshing"
+            success-text="刷新成功"
+            :success-duration="700"
+            @refresh="onRefresh"
         >
-          <div
-              class="mr-10px flex-shrink-0 rounded-4px overflow-hidden cursor-pointer relative"
+          <template #success>
+            <van-icon name="success" /> <span>刷新成功</span>
+          </template>
+          <van-list
+              v-model:loading="storeLoading"
+              :finished="localState.finished"
+              finished-text="没有更多了"
+              @load="loadMore"
           >
-            <xImage
-                :preview="false"
-                class="w-80px h-80px"
-                :src="item.artwork?.hdPic"
-                :alt="item?.artworkTitle"
-                loading="lazy"
-            />
-            <div class="w-45px h-17px bg-#2B53AC text-12px line-height-none flex justify-center items-center absolute top-2px left-2px text-#fff">LOT{{item.index}}</div>
-            <div v-if="auctionData.artwork.index===item?.index" class="w-80px h-20px bg-#B58047 flex line-height-none justify-center items-center text-#fff text-12px">竞拍中</div>
-          </div>
-          <div>
-            <div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
-              {{ item.artworkTitle }}
+            <div
+                v-for="(item,index) of itemList"
+                :key="item.uuid"
+                class="flex mb-21px"
+                @click="openShow(item)"
+            >
+              <div
+                  class="mr-10px flex-shrink-0 rounded-4px overflow-hidden cursor-pointer relative"
+              >
+                <xImage
+                    :preview="false"
+                    class="w-80px h-80px"
+                    :src="item.artwork?.hdPic"
+                    :alt="item?.artworkTitle"
+                    loading="lazy"
+                />
+                <div class="w-45px h-17px bg-#2B53AC text-12px line-height-none flex justify-center items-center absolute top-2px left-2px text-#fff">LOT{{item.index}}</div>
+                <div v-if="auctionData.artwork.index===item?.index" class="w-80px h-20px bg-#B58047 flex line-height-none justify-center items-center text-#fff text-12px bottom-0 absolute">竞拍中</div>
+              </div>
+              <div>
+                <div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
+                  {{ item.artworkTitle }}
+                </div>
+                <div class="text-14px text-#575757">起拍价：RMB 1,000</div>
+                <div class="text-14px text-#B58047">成交价：等待更新</div>
+              </div>
             </div>
-            <div class="text-14px text-#575757">起拍价：RMB 1,000</div>
-            <div class="text-14px text-#B58047">成交价：等待更新</div>
-          </div>
-        </div>
+          </van-list>
+        </van-pull-refresh>
+
       </div>
     </x-popup>
     <DetailPopup v-model:show="showDetail" :detail-info="showDetailInfo"></DetailPopup>