115 lines
2.5 KiB
Vue
115 lines
2.5 KiB
Vue
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import { useRect } from "@vant/use"
|
|
import { goodStore } from "@/stores/goods"
|
|
import Column from "../Column/index.vue"
|
|
import ItemDetail from "@/components/itemDetail/index.vue"
|
|
|
|
const {
|
|
itemList,
|
|
pageRef,
|
|
auctionDetail,
|
|
liveRef,
|
|
artWorkDetail,
|
|
currentItem,
|
|
loading: storeLoading,
|
|
getArtworkList,
|
|
getArtworkDetail
|
|
} = goodStore()
|
|
|
|
const localState = ref({
|
|
finished: false,
|
|
refreshing: false,
|
|
showDetail: false,
|
|
showHeight: ''
|
|
})
|
|
|
|
// 计算列数据
|
|
const columns = computed(() => {
|
|
const result = [[], []]
|
|
itemList.value.forEach((item, index) => {
|
|
result[index % 2].push({ ...item, index })
|
|
})
|
|
return result
|
|
})
|
|
|
|
// 加载更多
|
|
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) => {
|
|
currentItem.value = item
|
|
await getArtworkDetail(item.uuid)
|
|
|
|
const rect = useRect(liveRef.value.$el)
|
|
localState.value.showHeight = rect.height
|
|
|
|
nextTick(() => {
|
|
localState.value.showDetail = true
|
|
})
|
|
}
|
|
</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]">
|
|
<Column
|
|
v-for="(column, colIndex) in columns"
|
|
:key="colIndex"
|
|
:colIndex="colIndex"
|
|
:items="column"
|
|
@openShow="openShow"
|
|
/>
|
|
</div>
|
|
</van-list>
|
|
</van-pull-refresh>
|
|
|
|
<van-action-sheet
|
|
teleport="#__nuxt"
|
|
:round="false"
|
|
v-model:show="localState.showDetail"
|
|
title="拍品详情"
|
|
>
|
|
<div
|
|
class="content bg-[#F0F0F0]"
|
|
:style="`height: calc(100vh - ${localState.showHeight + 85}px)`"
|
|
>
|
|
<ItemDetail />
|
|
</div>
|
|
</van-action-sheet>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.content {
|
|
overflow-y: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
</style> |