109 lines
3.2 KiB
Vue
109 lines
3.2 KiB
Vue
<script setup>
|
||
import { ref } from 'vue'
|
||
import { goodStore } from "@/stores/goods"
|
||
import DetailPopup from '../DetailPopup/index.vue'
|
||
import MasonryWall from '@yeger/vue-masonry-wall'
|
||
import WaterfallFlow from '@/components/WaterfallFlow.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-[45px] 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.name }}
|
||
</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?.startPrice??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> |