diff --git a/app/pages/LiveRoom/index.client.vue b/app/pages/LiveRoom/index.client.vue index d358f79..726a09f 100644 --- a/app/pages/LiveRoom/index.client.vue +++ b/app/pages/LiveRoom/index.client.vue @@ -110,11 +110,11 @@ watch(()=>{
当前价:RMB - +
下口价:RMB - +
-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"; +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 } = goodStore(); +const { + itemList, + pageRef, + auctionDetail, + liveRef, + artWorkDetail, + currentItem, + loading: storeLoading, + getArtworkList, + getArtworkDetail +} = 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 localState = ref({ + finished: false, + refreshing: false, + showDetail: false, + showHeight: '' +}) // 计算列数据 const columns = computed(() => { - const result = [[], []]; + const result = [[], []] itemList.value.forEach((item, index) => { - result[index % 2].push({ ...item, index }); - }); - return result; -}); + result[index % 2].push({ ...item, index }) + }) + return result +}) -// 刷新数据 -const refreshData = async () => { +// 加载更多 +const loadMore = async () => { + pageRef.value.page++ + const { finished } = await getArtworkList() + localState.value.finished = finished +} + +// 刷新 +const onRefresh = 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); + localState.value.refreshing = true + localState.value.finished = false + const { finished } = await getArtworkList(true) + localState.value.finished = finished } finally { - loading1.value = false; + localState.value.refreshing = 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 = async (item) => { + currentItem.value = item + await getArtworkDetail(item.uuid) -// 打开详情面板 -const openShow = (item, index) => { - currentItem.value = item; - getDetail(); - - const rect = useRect(liveRef.value.$el); - showHeight.value = rect.height; + const rect = useRect(liveRef.value.$el) + localState.value.showHeight = rect.height nextTick(() => { - show.value = true; - }); -}; - -// 监听列表变化 -watch(itemList, (newValue) => { - console.log('newValue', newValue); -}); + localState.value.showDetail = true + }) +} \ No newline at end of file + + + \ No newline at end of file diff --git a/app/stores/goods/index.js b/app/stores/goods/index.js index f52a6e8..1db4e31 100644 --- a/app/stores/goods/index.js +++ b/app/stores/goods/index.js @@ -1,40 +1,118 @@ -import {createGlobalState} from '@vueuse/core' -import {artworkList, defaultDetail} from "~/api/goods/index.js"; +import { createGlobalState } from '@vueuse/core' +import { ref } from 'vue' +import { artworkList, defaultDetail, artworkDetail } from "~/api/goods/index.js" export const goodStore = createGlobalState(() => { + // 状态定义 const actionDetails = ref({}) const fullLive = ref(false) - const liveRef = ref(null); - const currentItem=ref({}) - const myArtWorks=ref([]) + const liveRef = ref(null) + const currentItem = ref({}) + const myArtWorks = ref([]) const pageRef = ref({ page: 0, pageSize: 5, itemCount: 0 }) - const artWorkDetail=ref(null) + const artWorkDetail = ref(null) const itemList = ref([]) const auctionDetail = ref({}) + const loading = ref(false) + const error = ref(null) + + // 重置分页 + const resetPage = () => { + pageRef.value.page = 1 + pageRef.value.pageSize=5 + pageRef.value.itemCount = 0 + itemList.value = [] + } + + // 获取拍卖详情 const getAuctionDetail = async () => { - const res = await defaultDetail({}) - if (res.status === 0) { - auctionDetail.value = res.data + try { + loading.value = true + const res = await defaultDetail({}) + if (res.status === 0) { + auctionDetail.value = res.data + } + } catch (err) { + console.error('获取拍卖详情错误:', err) + } finally { + loading.value = false } } - const getArtworkList = async (page = pageRef.value) => { - return artworkList({auctionUuid: auctionDetail.value.uuid, ...page}) + + // 获取艺术品列表 + const getArtworkList = async (isRefresh = false) => { + if (isRefresh) { + resetPage() + } + + try { + loading.value = true + const res = await artworkList({ + auctionUuid: auctionDetail.value.uuid, + page: pageRef.value.page, + pageSize: pageRef.value.pageSize + }) + + if (res.status === 0) { + const newItems = res.data.data || [] + + if (isRefresh) { + itemList.value = newItems + } else { + itemList.value = [...itemList.value, ...newItems] + } + + pageRef.value.itemCount = res.data.count || 0 + return { + finished: !newItems.length || newItems.length < pageRef.value.pageSize, + items: newItems + } + } + return { finished: true, items: [] } + } catch (err) { + console.error('获取艺术品列表错误:', err) + return { finished: true, items: [] } + } finally { + loading.value = false + } } + + // 获取艺术品详情 + const getArtworkDetail = async (uuid) => { + try { + loading.value = true + const res = await artworkDetail({ uuid }) + if (res.status === 0) { + artWorkDetail.value = res.data + } + } catch (err) { + console.error('获取艺术品详情错误:', err) + } finally { + loading.value = false + } + } + return { - myArtWorks, - currentItem, - artWorkDetail, - liveRef, - pageRef, - getArtworkList, - auctionDetail, - getAuctionDetail, + // 状态 actionDetails, + fullLive, + liveRef, + currentItem, + myArtWorks, + pageRef, + artWorkDetail, itemList, - fullLive + auctionDetail, + loading, + error, + // 方法 + getAuctionDetail, + getArtworkList, + getArtworkDetail, + resetPage } }) \ No newline at end of file