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();
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){
    if (Array.isArray(res.data.data)&&res.data.data?.length>0){
      itemList.value.push(...res.data.data)
    }
    if (!res.data.data){
      finished.value=true
    }
    if (res.data.data?.length<pageRef.value.pageSize){
      finished.value=true
    }
    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 columns = computed(() => {
  const result = [[], []];
  itemList.value.forEach((item, index) => {
    result[index % 2].push({...item, index});
  });
  return result;
});
const refreshData = async () => {
  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
  }
  loading1.value = false
}

const getDetail=async ()=>{
 const res=await artworkDetail({uuid:currentItem.value.uuid})
  if (res.status===0){
    artWorkDetail.value
  }
}
watch(itemList,(newValue)=>{
  console.log('newValue',newValue)

})
const openShow = (item,index) => {
  currentItem.value=item
  getDetail()
  const rect = useRect(liveRef.value.$el);
  showHeight.value = rect.height;
  nextTick(() => {
    show.value = true;
  });
};
</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>