d27e6bc0c5
- 新增 fullLive 全局状态管理直播间的全屏状态 - 修改 AppHeader组件，根据 fullLive 状态控制返回按钮的显示 - 更新 default 布局，根据 fullLive 状态控制 AppFooter 的显示- 调整 LiveRoom组件，支持全屏模式下的布局变化 - 修改 home 页面，实现直播间全屏和列表之间的切换
245 lines
8.2 KiB
Vue
245 lines
8.2 KiB
Vue
<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: '',
|
|
}])
|
|
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="bg-#fff flex-grow-1">
|
|
<div
|
|
ref="liveRef"
|
|
@click="changeLive"
|
|
:class="[
|
|
'transform transition-all duration-500 origin-top ease-out ease-in',
|
|
fullLive ? 'scale-100 h-[calc(100vh-var(--van-nav-bar-height))]' : 'scale-100 h-188px'
|
|
]"
|
|
>
|
|
<client-only>
|
|
<LiveRoom :fullLive="fullLive" />
|
|
</client-only>
|
|
</div>
|
|
<div v-show="!fullLive" :class="[
|
|
'bg-white transform transition-all duration-500 ease-out',
|
|
fullLive ? 'translate-y-full' : 'translate-y-0'
|
|
]">
|
|
<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>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
:root:root {
|
|
--van-action-sheet-header-height: 39px;
|
|
}
|
|
</style>
|
|
|
|
<style scoped lang="scss">
|
|
:deep(.van-swipe__indicator) {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
:deep(.van-swipe__indicator:not(.van-swipe__indicator--active) ) {
|
|
background: rgba(0, 0, 0, 0.8);
|
|
}
|
|
</style>
|
|
|
|
<style scoped>
|
|
</style> |