bad45f8d82
- 修改测试环境配置 - 重命名 homeStore为 goodStore - 优化直播房间组件导入路径 - 重构商品列表和详情功能 - 新增 ItemList 组件 -调整首页布局和功能
70 lines
2.2 KiB
Vue
70 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import Column from "~/pages/home/components/Column/index.vue";
|
|
import {goodStore} from "~/stores/goods";
|
|
import {artworkList} from "~/api/goods";
|
|
import {useRect} from "@vant/use";
|
|
const {itemList, pageRef,auctionDetail,liveRef} = goodStore();
|
|
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){
|
|
itemList.value.push(...res.data.data)
|
|
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
|
|
}
|
|
};
|
|
const columns = computed(() => {
|
|
const result = [[], []];
|
|
itemList.value.forEach((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
|
|
}
|
|
const openShow = () => {
|
|
const rect = useRect(liveRef.value.$el);
|
|
showHeight.value = rect.height;
|
|
nextTick(() => {
|
|
show.value = true;
|
|
});
|
|
};
|
|
</script>
|
|
<template>
|
|
<div class="px-[16px] pt-[16px]">
|
|
<van-pull-refresh v-model="loading1" success-text="刷新成功" @refresh="refreshData">
|
|
<van-list :immediate-check="false" 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" @click="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>
|
|
|