<script setup> import liveBroadcast from '@/components/liveBroadcast/index.vue' import {useRect} from '@vant/use'; import LiveRoom from '@/pages/LiveRoom/index.client.vue' import itemDetail from '@/components/itemDetail/index.vue' import { homeStore } from "@/stores/home/index.js"; const { fullLive } = homeStore() definePageMeta({ layout: 'default', i18n: 'menu.home', }) const liveRef = ref(null) const loading = ref(false) const finished = ref(false) const refreshing = ref(false) const list = ref([{ image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/637d95b4-2ae9-4a74-bd60-a3a9d2ca2ca0.png', title: '张天赐 | 日出而作,日落而息', startingPrice: 'RMB 1,000', transactionPrice: 'RMB 10,000', }, { image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/f7b65e23-ce21-41b4-8e58-9e6dc6950727.png', title: '张天赐 | 日出而作,日落而息', startingPrice: 'RMB 1,000', transactionPrice: '', }, { image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/41eceb23-d168-4049-ae8e-48c5328b192f.png', title: '张天赐 | 日出而作,日落而息', startingPrice: 'RMB 1,000', transactionPrice: '', }, { image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/25c3f03c-9e0b-456b-963f-79b3d812c89a.png', title: '张天赐 | 日出而作,日落而息', startingPrice: 'RMB 1,000', transactionPrice: '', }, { image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/25c3f03c-9e0b-456b-963f-79b3d812c89a.png', title: '张天赐 | 日出而作,日落而息', startingPrice: 'RMB 1,000', transactionPrice: '', }, { image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/25c3f03c-9e0b-456b-963f-79b3d812c89a.png', title: '张天赐 | 日出而作,日落而息', startingPrice: 'RMB 1,000', transactionPrice: '', },{ image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/637d95b4-2ae9-4a74-bd60-a3a9d2ca2ca0.png', title: '张天赐 | 日出而作,日落而息', startingPrice: 'RMB 1,000', transactionPrice: 'RMB 10,000', },{ image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/637d95b4-2ae9-4a74-bd60-a3a9d2ca2ca0.png', title: '张天赐 | 日出而作,日落而息', startingPrice: 'RMB 1,000', transactionPrice: 'RMB 10,000', }]) const page = ref(1) // 加载数据 async function loadData() { // try { // loading.value = true // // 模拟API请求 // const {data} = await fetchAuctionList({page: page.value}) // // if (refreshing.value) { // list.value = [] // refreshing.value = false // } // // list.value.push(...data) // page.value++ // // // 如果没有更多数据了 // if (data.length < 10) { // finished.value = true // } // } catch (error) { // console.error(error) // } finally { // loading.value = false // } } // 下拉刷新 function onRefresh() { finished.value = false page.value = 1 refreshing.value = true loadData() } const leftColumn = computed(() => { return list.value.filter((_, index) => index % 2 === 0) }) const rightColumn = computed(() => { return list.value.filter((_, index) => index % 2 === 1) }) const show = ref(false) const showHeight = ref('') const openShow = () => { const rect = useRect(liveRef.value.$el); showHeight.value = rect.height nextTick(() => { show.value = true }) } const changeLive=()=>{ fullLive.value=true } </script> <template> <div class="flex-grow-1"> <div @click="changeLive" :class="[ 'changeLive', fullLive ? 'expanded' : 'collapsed' ]" > <client-only> <LiveRoom ref="liveRef" :fullLive="fullLive" /> </client-only> </div> <transition name="fade"> <div v-show="!fullLive" class="bg-#fff" > <van-tabs sticky animated> <van-tab title="拍品列表"> <div class="px-[16px] pt-[16px]"> <van-pull-refresh> <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="loadData" > <div class="w-full flex gap-[16px]"> <div class="flex flex-1 flex-col gap-[16px]"> <div v-for="(item, index) in leftColumn" :key="index" class="w-full" @click="openShow" > <div class="relative w-full"> <van-image :src="item.image" :style="{ aspectRatio: item.ratio }" fit="cover" class="w-full" /> <div class="absolute left-[8px] top-[8px] h-[17px] w-[45px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"> LOT{{ index * 2 + 1 }} </div> </div> <div class="pt-[8px]"> <div class="text-[14px] text-[#000000] leading-[20px]"> {{ item.title }} </div> <div class="mt-[4px] text-[12px] text-[#575757]"> 起拍价:{{ item.startingPrice }} </div> <div v-if="item.transactionPrice" class="mt-[4px] text-[12px] text-[#b58047]" > 成交价:{{ item.transactionPrice }} </div> </div> </div> </div> <div class="flex flex-1 flex-col gap-[16px]"> <div v-for="(item, index) in rightColumn" :key="index" class="w-full" @click="openShow" > <div class="relative w-full"> <van-image :src="item.image" :style="{ aspectRatio: item.ratio }" fit="cover" class="w-full" /> <div class="absolute left-[8px] top-[8px] h-[17px] w-[45px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"> LOT{{ index * 2 + 2 }} </div> </div> <div class="pt-[8px]"> <div class="text-[14px] text-[#000000] leading-[20px]"> {{ item.title }} </div> <div class="mt-[4px] text-[12px] text-[#575757]"> 起拍价:{{ item.startingPrice }} </div> <div v-if="item.transactionPrice" class="mt-[4px] text-[12px] text-[#b58047]" > 成交价:{{ item.transactionPrice }} </div> </div> </div> </div> </div> </van-list> </van-pull-refresh> </div> </van-tab> <van-tab title="拍卖说明"> <div class="px-16px pt-14px"> <div class="text-#575757 text-14px"> 这里是后台富文本配置的说明,啊即可打开三等奖撒度老师的湿答答是快乐的阿四大皆空 </div> <div></div> </div> </van-tab> </van-tabs> <van-back-top right="15vw" bottom="10vh"/> <van-action-sheet :round="false" v-model:show="show" title="拍品详情"> <div class="content bg-[#F0F0F0]" :style="`height: calc(100vh - ${showHeight+85}px)`"> <itemDetail></itemDetail> </div> </van-action-sheet> </div> </transition> </div> </template> <style> :root:root { --van-action-sheet-header-height: 39px; } </style> <style scoped lang="scss"> :deep(.van-swipe__indicator) { width: 8px; height: 8px; } .fade-enter-active, .fade-leave-active { transition: opacity 1s; } .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ { opacity: 0; } :deep(.van-swipe__indicator:not(.van-swipe__indicator--active) ) { background: rgba(0, 0, 0, 0.8); } .changeLive { width: 100%; overflow: hidden; transition: height 0.5s ease, transform 0.5s ease; } .changeLive.collapsed { height: 188px; } .changeLive.expanded { height: calc(100vh - var(--van-nav-bar-height)); transform: translateY(0); } </style>