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 Column from "../Column/index.vue"
import DetailPopup from '../DetailPopup/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>
    <DetailPopup v-model:show="localState.showDetail"></DetailPopup>
  </div>
</template>

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