4e771fde21
- 添加了 itemDetail 组件，用于展示商品详细信息 - 在 home 页面中集成了瀑布流列表组件 - 实现了商品列表的加载更多和下拉刷新功能 - 添加了商品详情弹窗组件
109 lines
3.4 KiB
Vue
109 lines
3.4 KiB
Vue
<script setup>
|
|
import liveRoom from '@/pages/liveRoom/index.client.vue';
|
|
import {goodStore} from "@/stores/goods/index.js";
|
|
import ItemList from './components/ItemList/index.vue'
|
|
import Cescribe from './components/Cescribe/index.vue'
|
|
import FloatingBubble from '~/components/floating2/index.vue'
|
|
|
|
import {liveStore} from "~/stores/live/index.js";
|
|
const {auctionDetail,getArtworkList,getAuctionDetail} = goodStore();
|
|
const {fullLive} = liveStore()
|
|
const changeLive = () => {
|
|
if (!fullLive.value){
|
|
if (auctionDetail.value.isLiving===1){
|
|
fullLive.value = true;
|
|
getArtworkList(true)
|
|
}
|
|
}
|
|
}
|
|
await getAuctionDetail()
|
|
|
|
</script>
|
|
<template>
|
|
<div class="grow-1 flex flex-col">
|
|
<client-only>
|
|
<div class="relative" @click="changeLive">
|
|
<liveRoom :class="['changeLive', fullLive ? 'expanded' : 'collapsed']"/>
|
|
<div v-if="auctionDetail.isLiving===1" class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center">
|
|
<div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
|
|
<div class="text-12px mb-54px">{{ $t('home.text1') }}<van-icon name="arrow" /></div>
|
|
<div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
|
|
<div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
|
|
</div>
|
|
<div v-else class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center bg-[url('@/static/images/z6022@2x.png')]">
|
|
<div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
|
|
<div class="text-12px mb-54px">{{$t('home.text3')}}{{auctionDetail.isLiving===2?$t('home.text4'):$t('home.text5')}}</div>
|
|
<div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
|
|
<div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
|
|
</div>
|
|
</div>
|
|
</client-only>
|
|
<div v-if="!fullLive" class="bg-#fff grow-1 flex flex-col">
|
|
<van-tabs sticky animated>
|
|
<van-tab :title="$t('home.tab1')">
|
|
<div class="bg-red min-h-500px">
|
|
<ItemList></ItemList>
|
|
</div>
|
|
|
|
</van-tab>
|
|
<van-tab :title="$t('home.tab2')">
|
|
<Cescribe></Cescribe>
|
|
</van-tab>
|
|
</van-tabs>
|
|
<van-back-top right="15vw" bottom="10vh"/>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
<style scoped lang="scss">
|
|
// :deep(.van-tabs.van-tabs--line){
|
|
// flex-grow: 1;
|
|
// display: flex;
|
|
// flex-direction: column;
|
|
// }
|
|
// :deep(.van-tabs__content.van-tabs__content--animated){
|
|
// flex-grow: 1;
|
|
// display: flex;
|
|
// flex-direction: column;
|
|
// }
|
|
.ellipsis {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
:deep(.van-swipe__indicator) {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.fade-enter-active, .fade-leave-active {
|
|
transition: opacity 1s;
|
|
}
|
|
|
|
.fade-enter, .fade-leave-to {
|
|
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.4s ease, transform 0.4s ease;
|
|
}
|
|
|
|
.changeLive.collapsed {
|
|
height: 188px;
|
|
}
|
|
|
|
.changeLive.expanded {
|
|
position: absolute;
|
|
z-index: 10;
|
|
height: calc(100vh - var(--van-nav-bar-height));
|
|
}
|
|
</style> |