refactor(goods): 重构艺术品列表和详情功能

- 优化艺术品列表加载和刷新逻辑
- 添加艺术品详情获取功能
-修复滚动文本组件属性
-优化代码结构和命名

app/pages/LiveRoom/index.client.vue

@@ -110,11 +110,11 @@ watch(()=>{
         <div class="absolute left-1/2 transform -translate-x-1/2 flex flex-col items-center" style="bottom:calc(var(--safe-area-inset-bottom) + 26px)">
           <div class="text-16px text-#FFB25F font-600">
             当前价：RMB
-            <van-rolling-text class="my-rolling-text" :start-num="0" :target-num="3000" direction="up"/>
+            <van-rolling-text class="my-rolling-text" :start-num="0" :duration="0.5" :target-num="3000" direction="up"/>
           </div>
           <div class="text-16px text-#fff font-600">
             下口价：RMB
-            <van-rolling-text class="my-rolling-text1" :start-num="0" :target-num="3500" direction="up"/>
+            <van-rolling-text class="my-rolling-text1" :start-num="0" :duration="0.5" :target-num="3500" direction="up"/>
           </div>
           <PressableButton>
             <div

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

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

app/stores/goods/index.js

@@ -1,40 +1,118 @@
-import {createGlobalState} from '@vueuse/core'
+import { createGlobalState } from '@vueuse/core'
-import {artworkList, defaultDetail} from "~/api/goods/index.js";
+import { ref } from 'vue'
+import { artworkList, defaultDetail, artworkDetail } from "~/api/goods/index.js"
 
 export const goodStore = createGlobalState(() => {
+    // 状态定义
     const actionDetails = ref({})
     const fullLive = ref(false)
-    const liveRef = ref(null);
+    const liveRef = ref(null)
-    const currentItem=ref({})
+    const currentItem = ref({})
-    const myArtWorks=ref([])
+    const myArtWorks = ref([])
     const pageRef = ref({
         page: 0,
         pageSize: 5,
         itemCount: 0
     })
-    const artWorkDetail=ref(null)
+    const artWorkDetail = ref(null)
     const itemList = ref([])
     const auctionDetail = ref({})
+    const loading = ref(false)
+    const error = ref(null)
+
+    // 重置分页
+    const resetPage = () => {
+        pageRef.value.page = 1
+        pageRef.value.pageSize=5
+        pageRef.value.itemCount = 0
+        itemList.value = []
+    }
+
+    // 获取拍卖详情
     const getAuctionDetail = async () => {
-        const res = await defaultDetail({})
+        try {
-        if (res.status === 0) {
+            loading.value = true
-            auctionDetail.value = res.data
+            const res = await defaultDetail({})
+            if (res.status === 0) {
+                auctionDetail.value = res.data
+            }
+        } catch (err) {
+            console.error('获取拍卖详情错误:', err)
+        } finally {
+            loading.value = false
         }
     }
-    const getArtworkList = async (page = pageRef.value) => {
+
-        return artworkList({auctionUuid: auctionDetail.value.uuid, ...page})
+    // 获取艺术品列表
+    const getArtworkList = async (isRefresh = false) => {
+        if (isRefresh) {
+            resetPage()
+        }
+
+        try {
+            loading.value = true
+            const res = await artworkList({
+                auctionUuid: auctionDetail.value.uuid,
+                page: pageRef.value.page,
+                pageSize: pageRef.value.pageSize
+            })
+
+            if (res.status === 0) {
+                const newItems = res.data.data || []
+
+                if (isRefresh) {
+                    itemList.value = newItems
+                } else {
+                    itemList.value = [...itemList.value, ...newItems]
+                }
+
+                pageRef.value.itemCount = res.data.count || 0
+                return {
+                    finished: !newItems.length || newItems.length < pageRef.value.pageSize,
+                    items: newItems
+                }
+            }
+            return { finished: true, items: [] }
+        } catch (err) {
+            console.error('获取艺术品列表错误:', err)
+            return { finished: true, items: [] }
+        } finally {
+            loading.value = false
+        }
     }
+
+    // 获取艺术品详情
+    const getArtworkDetail = async (uuid) => {
+        try {
+            loading.value = true
+            const res = await artworkDetail({ uuid })
+            if (res.status === 0) {
+                artWorkDetail.value = res.data
+            }
+        } catch (err) {
+            console.error('获取艺术品详情错误:', err)
+        } finally {
+            loading.value = false
+        }
+    }
+
     return {
-        myArtWorks,
+        // 状态
-        currentItem,
-        artWorkDetail,
-        liveRef,
-        pageRef,
-        getArtworkList,
-        auctionDetail,
-        getAuctionDetail,
         actionDetails,
+        fullLive,
+        liveRef,
+        currentItem,
+        myArtWorks,
+        pageRef,
+        artWorkDetail,
         itemList,
-        fullLive
+        auctionDetail,
+        loading,
+        error,
+        // 方法
+        getAuctionDetail,
+        getArtworkList,
+        getArtworkDetail,
+        resetPage
     }
 })