<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-[55px] 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>