153 lines
3.5 KiB
Vue
153 lines
3.5 KiB
Vue
<script setup>
|
|
import Column from "~/pages/home/components/Column/index.vue";
|
|
import { goodStore } from "~/stores/goods";
|
|
import { artworkDetail, artworkList } from "~/api/goods";
|
|
import { useRect } from "@vant/use";
|
|
|
|
const { itemList, pageRef, auctionDetail, liveRef, artWorkDetail, currentItem } = goodStore();
|
|
|
|
// 使用独立的 ref
|
|
const loading = ref(false);
|
|
const showHeight = ref('');
|
|
const show = ref(false);
|
|
const loading1 = ref(false);
|
|
const finished = ref(false);
|
|
|
|
// 获取艺术品列表
|
|
const getArtworkList = async () => {
|
|
try {
|
|
const res = await artworkList({
|
|
auctionUuid: auctionDetail.value.uuid,
|
|
...pageRef.value
|
|
});
|
|
|
|
if (res.status === 0) {
|
|
if (Array.isArray(res.data.data) && res.data.data?.length > 0) {
|
|
itemList.value.push(...res.data.data);
|
|
}
|
|
|
|
finished.value = !res.data.data || res.data.data?.length < pageRef.value.pageSize;
|
|
pageRef.value.itemCount = res.data.count;
|
|
}
|
|
} catch (error) {
|
|
console.error('获取艺术品列表失败:', error);
|
|
}
|
|
};
|
|
|
|
// 加载更多数据
|
|
const loadData = async () => {
|
|
try {
|
|
pageRef.value.page++;
|
|
await getArtworkList();
|
|
} catch (error) {
|
|
console.error('加载数据失败:', error);
|
|
} finally {
|
|
loading.value = false;
|
|
if (pageRef.value.itemCount <= itemList.value.length) {
|
|
finished.value = true;
|
|
}
|
|
}
|
|
};
|
|
|
|
// 计算列数据
|
|
const columns = computed(() => {
|
|
const result = [[], []];
|
|
itemList.value.forEach((item, index) => {
|
|
result[index % 2].push({ ...item, index });
|
|
});
|
|
return result;
|
|
});
|
|
|
|
// 刷新数据
|
|
const refreshData = async () => {
|
|
try {
|
|
pageRef.value.page = 1;
|
|
finished.value = false;
|
|
|
|
const res = await artworkList({
|
|
auctionUuid: auctionDetail.value.uuid,
|
|
...pageRef.value
|
|
});
|
|
|
|
if (res.status === 0) {
|
|
itemList.value = res.data.data;
|
|
pageRef.value.itemCount = res.data.count;
|
|
}
|
|
} catch (error) {
|
|
console.error('刷新数据失败:', error);
|
|
} finally {
|
|
loading1.value = false;
|
|
}
|
|
};
|
|
|
|
// 获取详情
|
|
const getDetail = async () => {
|
|
try {
|
|
const res = await artworkDetail({ uuid: currentItem.value.uuid });
|
|
if (res.status === 0) {
|
|
artWorkDetail.value = res.data;
|
|
}
|
|
} catch (error) {
|
|
console.error('获取详情失败:', error);
|
|
}
|
|
};
|
|
|
|
// 打开详情面板
|
|
const openShow = (item, index) => {
|
|
currentItem.value = item;
|
|
getDetail();
|
|
|
|
const rect = useRect(liveRef.value.$el);
|
|
showHeight.value = rect.height;
|
|
|
|
nextTick(() => {
|
|
show.value = true;
|
|
});
|
|
};
|
|
|
|
// 监听列表变化
|
|
watch(itemList, (newValue) => {
|
|
console.log('newValue', newValue);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="px-[16px] pt-[16px]">
|
|
<van-pull-refresh
|
|
v-model="loading1"
|
|
success-text="刷新成功"
|
|
@refresh="refreshData"
|
|
>
|
|
<van-list
|
|
v-model:loading="loading"
|
|
:finished="finished"
|
|
finished-text="没有更多了"
|
|
@load="loadData"
|
|
>
|
|
<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="show"
|
|
title="拍品详情"
|
|
>
|
|
<div
|
|
class="content bg-[#F0F0F0]"
|
|
:style="`height: calc(100vh - ${showHeight + 85}px)`"
|
|
>
|
|
<itemDetail />
|
|
</div>
|
|
</van-action-sheet>
|
|
</div>
|
|
</template> |