<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){ itemList.value.push(...res.data.data) 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.artworkUuid}) if (res.status===0){ artWorkDetail.value } } 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 :immediate-check="false" 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>