a423a7f801
- 移除 Column 组件，使用 vue-masonry-wall 实现瀑布流布局- 更新 ItemList 组件，集成瀑布流布局和新的详情弹窗 - 修改 DetailPopup 组件，使用新的详情信息结构 - 更新 itemDetail 组件，适配新的详情信息数据 - 在项目中添加 vue-masonry-wall 依赖
112 lines
3.1 KiB
Vue
112 lines
3.1 KiB
Vue
<script setup>
|
||
import { ref, computed } from 'vue'
|
||
import { useRect } from "@vant/use"
|
||
import { goodStore } from "@/stores/goods"
|
||
import DetailPopup from '../DetailPopup/index.vue'
|
||
import MasonryWall from '@yeger/vue-masonry-wall'
|
||
const {
|
||
itemList,
|
||
pageRef,
|
||
auctionDetail,
|
||
liveRef,
|
||
artWorkDetail,
|
||
currentItem,
|
||
loading: storeLoading,
|
||
getArtworkList,
|
||
getArtworkDetail
|
||
} = 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
|
||
getArtworkDetail(item.uuid)
|
||
}
|
||
</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]">
|
||
<masonry-wall :items="itemList" :ssr-columns="2" :maxColumns="2" :minColumns="2" :gap="5">
|
||
<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"
|
||
loading="lazy"
|
||
/>
|
||
<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{{ index+1 }}
|
||
</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]">
|
||
起拍价：{{ item?.startPrice??0 }}
|
||
</div>
|
||
<div
|
||
v-if="item.soldPrice"
|
||
class="mt-[4px] text-[12px] text-[#b58047]"
|
||
>
|
||
成交价：{{ item?.startPrice??0 }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</masonry-wall>
|
||
</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> |