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

<script setup>
import { ref } from 'vue'
import { goodStore } from "@/stores/goods"
import DetailPopup from '../DetailPopup/index.vue'
import WaterfallFlow from '@/components/waterfallFlow/index.vue'
const {
  itemList,
  pageRef,
  currentItem,
  loading: storeLoading,
  getArtworkList,
} = 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
}
</script>

<template>
  <div class="px-[16px] pt-[16px]">
    <van-pull-refresh
        v-model="localState.refreshing"
        :success-duration="700"
        @refresh="onRefresh"
    >
      <template #success>
        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
      </template>
      <van-list
          v-model:loading="storeLoading"
          :finished="localState.finished"
          :finished-text="$t('home.finished_text')"
          @load="loadMore"
      >
        <div class="w-full flex gap-[16px]">
          <WaterfallFlow :items="itemList"  :column-count="2">
            <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"
                  />
                  <div
                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[55px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
                  >
                    Lot{{ item.index }}
                  </div>
                </div>
                <div class="pt-[8px]">
                  <div class="text-[14px] text-[#000000] leading-[20px]">
                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
                  </div>
                  <div class="mt-[4px] text-[12px] text-[#575757]">
                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
                  </div>
                  <div
                      v-if="item.soldPrice"
                      class="mt-[4px] text-[12px] text-[#b58047]"
                  >
                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
                  </div>
                </div>
              </div>
            </template>
          </WaterfallFlow>
        </div>
      </van-list>
    </van-pull-refresh>
    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
  </div>
</template>

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