1231

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

@@ -1,90 +1,153 @@
 <script setup>
 import Column from "~/pages/home/components/Column/index.vue";
-import {goodStore} from "~/stores/goods";
+import { goodStore } from "~/stores/goods";
-import {artworkDetail, artworkList} from "~/api/goods";
+import { artworkDetail, artworkList } from "~/api/goods";
-import {useRect} from "@vant/use";
+import { useRect } from "@vant/use";
-const {itemList, pageRef,auctionDetail,liveRef,artWorkDetail,currentItem} = goodStore();
+
+const { itemList, pageRef, auctionDetail, liveRef, artWorkDetail, currentItem } = goodStore();
+
+// 使用独立的 ref
 const loading = ref(false);
 const showHeight = ref('');
 const show = ref(false);
 const loading1 = ref(false);
 const finished = ref(false);
-const getArtworkList=async ()=>{
+
-  const res= await artworkList({auctionUuid: auctionDetail.value.uuid,...pageRef.value})
+// 获取艺术品列表
-  if (res.status===0){
+const getArtworkList = async () => {
-    if (Array.isArray(res.data.data)&&res.data.data?.length>0){
+  try {
-      itemList.value.push(...res.data.data)
+    const res = await artworkList({
+      auctionUuid: auctionDetail.value.uuid,
+      ...pageRef.value
+    });
+
+    if (res.status === 0) {
+      if (Array.isArray(res.data.data) && res.data.data?.length > 0) {
+        itemList.value.push(...res.data.data);
       }
-    if (!res.data.data){
+
-      finished.value=true
+      finished.value = !res.data.data || res.data.data?.length < pageRef.value.pageSize;
+      pageRef.value.itemCount = res.data.count;
     }
-    if (res.data.data?.length<pageRef.value.pageSize){
+  } catch (error) {
-      finished.value=true
+    console.error('获取艺术品列表失败:', error);
-    }
-    pageRef.value.itemCount=res.data.count
-  }
-}
-const loadData = async () => {
-  pageRef.value.page++
-  await getArtworkList()
-  loading.value = false;
-  if (pageRef.value.itemCount <= itemList.value.length) {
-    finished.value = true
   }
 };
+
+// 加载更多数据
+const loadData = async () => {
+  try {
+    pageRef.value.page++;
+    await getArtworkList();
+  } catch (error) {
+    console.error('加载数据失败:', error);
+  } finally {
+    loading.value = false;
+    if (pageRef.value.itemCount <= itemList.value.length) {
+      finished.value = true;
+    }
+  }
+};
+
+// 计算列数据
 const columns = computed(() => {
   const result = [[], []];
   itemList.value.forEach((item, index) => {
-    result[index % 2].push({...item, index});
+    result[index % 2].push({ ...item, index });
   });
   return result;
 });
+
+// 刷新数据
 const refreshData = async () => {
-  pageRef.value.page = 1
+  try {
-  finished.value=false
+    pageRef.value.page = 1;
-  const res= await artworkList({auctionUuid: auctionDetail.value.uuid,...pageRef.value})
+    finished.value = false;
-  if (res.status===0){
-    itemList.value=res.data.data
-    pageRef.value.itemCount=res.data.count
-  }
-  loading1.value = false
-}
 
-const getDetail=async ()=>{
+    const res = await artworkList({
- const res=await artworkDetail({uuid:currentItem.value.uuid})
+      auctionUuid: auctionDetail.value.uuid,
-  if (res.status===0){
+      ...pageRef.value
-    artWorkDetail.value
+    });
-  }
+
-}
+    if (res.status === 0) {
-watch(itemList,(newValue)=>{
+      itemList.value = res.data.data;
-  console.log('newValue',newValue)
+      pageRef.value.itemCount = res.data.count;
+    }
+  } catch (error) {
+    console.error('刷新数据失败:', error);
+  } finally {
+    loading1.value = false;
+  }
+};
+
+// 获取详情
+const getDetail = async () => {
+  try {
+    const res = await artworkDetail({ uuid: currentItem.value.uuid });
+    if (res.status === 0) {
+      artWorkDetail.value = res.data;
+    }
+  } catch (error) {
+    console.error('获取详情失败:', error);
+  }
+};
+
+// 打开详情面板
+const openShow = (item, index) => {
+  currentItem.value = item;
+  getDetail();
 
-})
-const openShow = (item,index) => {
-  currentItem.value=item
-  getDetail()
   const rect = useRect(liveRef.value.$el);
   showHeight.value = rect.height;
+
   nextTick(() => {
     show.value = true;
   });
 };
+
+// 监听列表变化
+watch(itemList, (newValue) => {
+  console.log('newValue', newValue);
+});
 </script>
+
 <template>
   <div class="px-[16px] pt-[16px]">
-    <van-pull-refresh v-model="loading1" success-text="刷新成功" @refresh="refreshData">
+    <van-pull-refresh
-      <van-list  v-model:loading="loading" :finished="finished" finished-text="没有更多了"
+        v-model="loading1"
-                @load="loadData">
+        success-text="刷新成功"
+        @refresh="refreshData"
+    >
+      <van-list
+          v-model:loading="loading"
+          :finished="finished"
+          finished-text="没有更多了"
+          @load="loadData"
+      >
         <div class="w-full flex gap-[16px]">
-          <Column v-for="(column, colIndex) in columns" :key="colIndex" :colIndex="colIndex" :items="column" @openShow="openShow" />
+          <Column
+              v-for="(column, colIndex) in columns"
+              :key="colIndex"
+              :colIndex="colIndex"
+              :items="column"
+              @openShow="openShow"
+          />
         </div>
       </van-list>
     </van-pull-refresh>
-    <van-action-sheet teleport="#__nuxt" :round="false" v-model:show="show" title="拍品详情">
+
-      <div class="content bg-[#F0F0F0]" :style="`height: calc(100vh - ${showHeight + 85}px)`">
+    <van-action-sheet
-        <itemDetail/>
+        teleport="#__nuxt"
+        :round="false"
+        v-model:show="show"
+        title="拍品详情"
+    >
+      <div
+          class="content bg-[#F0F0F0]"
+          :style="`height: calc(100vh - ${showHeight + 85}px)`"
+      >
+        <itemDetail />
       </div>
     </van-action-sheet>
   </div>
 </template>
-