a43bdaf157
- 将 list 数据从组件内部移动到 home store 中 - 优化了 fullLive 的切换逻辑，改为 toggleFullLive 方法 - 更新了模板，使用新的 store 数据 - 添加了 slide-up 过渡动画，替换了原有的 fade动画
137 lines
3.5 KiB
Vue
137 lines
3.5 KiB
Vue
<script setup>
|
|
import { ref, computed, nextTick } from '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";
|
|
import Column from './components/Column/index.vue';
|
|
|
|
const { fullLive ,list} = homeStore();
|
|
const liveRef = ref(null);
|
|
const loading = ref(false);
|
|
const finished = ref(false);
|
|
const refreshing = ref(false);
|
|
const page = ref(1);
|
|
const show = ref(false);
|
|
const showHeight = ref('');
|
|
const loadData = async () => {
|
|
// 加载数据逻辑...
|
|
};
|
|
|
|
const onRefresh = () => {
|
|
finished.value = false;
|
|
page.value = 1;
|
|
refreshing.value = true;
|
|
loadData();
|
|
};
|
|
|
|
const columns = computed(() => {
|
|
const result = [[], []];
|
|
list.value.forEach((item, index) => {
|
|
result[index % 2].push(item);
|
|
});
|
|
return result;
|
|
});
|
|
|
|
const openShow = () => {
|
|
const rect = useRect(liveRef.value.$el);
|
|
showHeight.value = rect.height;
|
|
nextTick(() => {
|
|
show.value = true;
|
|
});
|
|
};
|
|
|
|
const toggleFullLive = () => {
|
|
fullLive.value = !fullLive.value; // 切换全屏状态
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex-grow-1">
|
|
<div @click="toggleFullLive" :class="['changeLive', fullLive ? 'expanded' : 'collapsed']">
|
|
<client-only>
|
|
<LiveRoom ref="liveRef" :fullLive="fullLive"/>
|
|
</client-only>
|
|
</div>
|
|
<transition name="slide-up">
|
|
<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]">
|
|
<Column v-for="(column, colIndex) in columns" :key="colIndex" :items="column" @openShow="openShow"/>
|
|
</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>
|
|
</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/>
|
|
</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 {
|
|
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 {
|
|
position: absolute;
|
|
z-index: 10;
|
|
height: calc(100vh - var(--van-nav-bar-height));
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.slide-up-enter-active, .slide-up-leave-active {
|
|
transition: transform 0.5s ease;
|
|
}
|
|
|
|
.slide-up-enter, .slide-up-leave-to {
|
|
transform: translateY(100%);
|
|
}
|
|
</style> |