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

<script setup>
import { ref, computed } from 'vue'
import { useRect } from "@vant/use"
import { goodStore } from "@/stores/goods"
import DetailPopup from '../DetailPopup/index.vue'
import MasonryWall from '@yeger/vue-masonry-wall'
const {
  itemList,
  pageRef,
  auctionDetail,
  liveRef,
  artWorkDetail,
  currentItem,
  loading: storeLoading,
  getArtworkList,
  getArtworkDetail
} = goodStore()

const localState = ref({
  finished: false,
  refreshing: false,
  showDetail: false,
  showHeight: ''
})
// 加载更多
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) => {
  localState.value.showDetail = true
  currentItem.value = item
   getArtworkDetail(item.uuid)
}
</script>

<template>
  <div class="px-[16px] pt-[16px]">
    <van-pull-refresh
        v-model="localState.refreshing"
        success-text="刷新成功"
        :success-duration="700"
        @refresh="onRefresh"
    >
      <template #success>
        <van-icon name="success" /> <span>刷新成功</span>
      </template>
      <van-list
          v-model:loading="storeLoading"
          :finished="localState.finished"
          finished-text="没有更多了"
          @load="loadMore"
      >
        <div class="w-full flex gap-[16px]" v-memo="[itemList]">
          <masonry-wall :items="itemList" :ssr-columns="2" :maxColumns="2" :minColumns="2"  :gap="5">
            <template #default="{ item, index }">
            <div
                @click="openShow(item)"
                class="w-full"
            >
              <div class="relative w-full">
                <img
                    :src="item.artwork?.hdPic"
                    class="w-full object-cover rounded-4px"
                    loading="lazy"
                />
                <div
                    class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[45px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
                >
                  LOT{{ index+1 }}
                </div>
              </div>
              <div class="pt-[8px]">
                <div class="text-[14px] text-[#000000] leading-[20px]">
                  {{ item.name }}
                </div>
                <div class="mt-[4px] text-[12px] text-[#575757]">
                  起拍价：{{ item?.startPrice??0 }}
                </div>
                <div
                    v-if="item.soldPrice"
                    class="mt-[4px] text-[12px] text-[#b58047]"
                >
                  成交价：{{  item?.startPrice??0  }}
                </div>
              </div>
            </div>
            </template>
          </masonry-wall>
        </div>
      </van-list>
    </van-pull-refresh>
    <DetailPopup v-model:show="localState.showDetail" :detailInfo="artWorkDetail"></DetailPopup>
  </div>
</template>

<style scoped>
.content {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
</style>