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

112 lines
3.3 KiB
Vue
Raw Normal View History

<script setup>
2025-03-06 09:03:31 +00:00
import {ref} from 'vue'
import {goodStore} from "@/stores/goods"
import DetailPopup from '../DetailPopup/index.vue'
import WaterfallFlow from '@/components/waterfallFlow/index.vue'
2025-03-06 09:03:31 +00:00
const {
itemList,
pageRef,
currentItem,
loading: storeLoading,
getArtworkList,
} = goodStore()
const localState = ref({
finished: false,
refreshing: false,
showDetail: false,
showHeight: ''
})
// 加载更多
const loadMore = async () => {
pageRef.value.page++
2025-03-06 09:03:31 +00:00
const {finished} = await getArtworkList()
localState.value.finished = finished
}
// 刷新
const onRefresh = async () => {
2025-01-22 01:44:44 +00:00
try {
localState.value.refreshing = true
localState.value.finished = false
2025-03-06 09:03:31 +00:00
const {finished} = await getArtworkList(true)
localState.value.finished = finished
2025-01-22 01:44:44 +00:00
} finally {
localState.value.refreshing = false
}
}
// 打开详情
const openShow = async (item) => {
localState.value.showDetail = true
currentItem.value = item
}
</script>
2025-01-22 01:44:44 +00:00
<template>
<div class="px-[16px] pt-[16px]">
2025-01-22 01:44:44 +00:00
<van-pull-refresh
v-model="localState.refreshing"
:success-duration="700"
@refresh="onRefresh"
2025-01-22 01:44:44 +00:00
>
<template #success>
2025-03-06 09:03:31 +00:00
<van-icon name="success"/>
<span>{{ $t('home.refresh_show') }}</span>
</template>
2025-01-22 01:44:44 +00:00
<van-list
v-model:loading="storeLoading"
:finished="localState.finished"
2025-02-12 06:34:05 +00:00
:finished-text="$t('home.finished_text')"
@load="loadMore"
2025-01-22 01:44:44 +00:00
>
<div class="w-full flex gap-[16px]">
2025-03-06 09:03:31 +00:00
<WaterfallFlow :items="itemList" :column-count="2">
<template #default="{ item, index }">
<div
@click="openShow(item)"
class="w-full"
>
<div class="relative w-full">
2025-03-06 09:03:31 +00:00
<img
:src="item.artwork?.hdPic + '?x-oss-process=image/resize,w_500,h_500/format,webp/quality,q_80'"
2025-03-06 09:03:31 +00:00
class="w-full object-cover rounded-4px"
loading="lazy"
2025-03-06 09:03:31 +00:00
/>
<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{{ item.index+25000 }}
</div>
</div>
2025-03-06 09:03:31 +00:00
<div class="pt-[8px]">
<div class="text-[14px] text-[#000000] leading-[20px]">
2025-03-06 09:03:31 +00:00
{{ item?.artwork?.name }} | {{ item?.artwork?.artistName }}
</div>
<div class="mt-[4px] text-[12px] text-[#575757]">
2025-03-06 09:03:31 +00:00
{{ $t('home.start_price') }}{{ item?.startPrice ?? 0 }}
</div>
<div
v-if="item.soldPrice"
class="mt-[4px] text-[12px] text-[#b58047]"
>
2025-03-06 09:03:31 +00:00
{{ $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>