<script setup> import { ref, computed } from 'vue' import { useRect } from "@vant/use" import { goodStore } from "@/stores/goods" import Column from "../Column/index.vue" import ItemDetail from "@/components/itemDetail/index.vue" const { itemList, pageRef, auctionDetail, liveRef, artWorkDetail, currentItem, loading: storeLoading, getArtworkList, getArtworkDetail } = goodStore() const localState = ref({ finished: false, refreshing: false, showDetail: false, showHeight: '' }) // 计算列数据 const columns = computed(() => { const result = [[], []] itemList.value.forEach((item, index) => { result[index % 2].push({ ...item, index }) }) return result }) // 加载更多 const loadMore = async () => { pageRef.value.page++ const { finished } = await getArtworkList() localState.value.finished = finished } // 刷新 const onRefresh = async () => { try { localState.value.refreshing = true localState.value.finished = false const { finished } = await getArtworkList(true) localState.value.finished = finished } finally { localState.value.refreshing = false } } // 打开详情 const openShow = async (item) => { currentItem.value = item await getArtworkDetail(item.uuid) const rect = useRect(liveRef.value.$el) localState.value.showHeight = rect.height nextTick(() => { localState.value.showDetail = true }) } </script> <template> <div class="px-[16px] pt-[16px]"> <van-pull-refresh v-model="localState.refreshing" success-text="刷新成功" @refresh="onRefresh" > <van-list v-model:loading="storeLoading" :finished="localState.finished" finished-text="没有更多了" @load="loadMore" > <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="localState.showDetail" title="拍品详情" > <div class="content bg-[#F0F0F0]" :style="`height: calc(100vh - ${localState.showHeight + 85}px)`" > <ItemDetail /> </div> </van-action-sheet> </div> </template> <style scoped> .content { overflow-y: auto; -webkit-overflow-scrolling: touch; } </style>