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
}

/**
 * 将数字格式化为"250XX"格式，其中XX是两位数
 * @param {number} num - 要格式化的数字
 * @return {string} - 格式化后的字符串
 */
function formatNumber(num) {
  // 确保输入是有效数字
  if (typeof num !== 'number' && isNaN(Number(num))) {
    throw new Error('输入必须是有效数字');
  }

  // 转换为数字类型(以防输入是字符串数字)
  const number = Number(num);

  // 数字部分格式化为两位数，不足补0
  const formattedNum = number.toString().padStart(2, '0');

  // 添加前缀"250"并返回结果
  return `250${formattedNum}`;
}
</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-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
                  >
                    Lot{{ formatNumber(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>