1231
This commit is contained in:
xingyy
parent
fc3e833605
commit
59269a7547
@ -1,90 +1,153 @@
|
||||
<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();
|
||||
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 ()=>{
|
||||
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)
|
||||
|
||||
// 获取艺术品列表
|
||||
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;
|
||||
}
|
||||
if (!res.data.data){
|
||||
finished.value=true
|
||||
}
|
||||
if (res.data.data?.length<pageRef.value.pageSize){
|
||||
finished.value=true
|
||||
}
|
||||
pageRef.value.itemCount=res.data.count
|
||||
}
|
||||
}
|
||||
const loadData = async () => {
|
||||
pageRef.value.page++
|
||||
await getArtworkList()
|
||||
loading.value = false;
|
||||
if (pageRef.value.itemCount <= itemList.value.length) {
|
||||
finished.value = true
|
||||
} 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});
|
||||
result[index % 2].push({ ...item, index });
|
||||
});
|
||||
return result;
|
||||
});
|
||||
|
||||
// 刷新数据
|
||||
const refreshData = async () => {
|
||||
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
|
||||
}
|
||||
loading1.value = false
|
||||
}
|
||||
try {
|
||||
pageRef.value.page = 1;
|
||||
finished.value = false;
|
||||
|
||||
const getDetail=async ()=>{
|
||||
const res=await artworkDetail({uuid:currentItem.value.uuid})
|
||||
if (res.status===0){
|
||||
artWorkDetail.value
|
||||
}
|
||||
}
|
||||
watch(itemList,(newValue)=>{
|
||||
console.log('newValue',newValue)
|
||||
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 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">
|
||||
<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" />
|
||||
<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/>
|
||||
|
||||
<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>
|
||||
|
||||
</template>
|
||||
Loading…
Reference in New Issue
Block a user