liveh5-nuxt/app/pages/home/components/ItemList/index.vue

<script setup>
import Column from "~/pages/home/components/Column/index.vue";
import { goodStore } from "~/stores/goods";
import { artworkDetail, artworkList } from "~/api/goods";
import { useRect } from "@vant/use";

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 () => {
  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 = [[], []];
  itemList.value.forEach((item, index) => {
    result[index % 2].push({ ...item, index });
  });
  return result;
});

// 刷新数据
const refreshData = async () => {
  try {
    pageRef.value.page = 1;
    finished.value = false;

    const res = await artworkList({
      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;
  }
};

// 获取详情
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 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-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"
          />
        </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)`"
      >
        <itemDetail />
      </div>
    </van-action-sheet>
  </div>
</template>