liveh5-nuxt/app/pages/home/index.vue

<script setup>
import {useRect} from '@vant/use';
import LiveRoom from '@/pages/LiveRoom/index.client.vue';
import itemDetail from '@/components/itemDetail/index.vue';
import {homeStore} from "@/stores/goods/index.js";
import Column from './components/Column/index.vue'

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 page = ref(1);
const show = ref(false);
const showHeight = ref('');
const list = ref([{
  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/637d95b4-2ae9-4a74-bd60-a3a9d2ca2ca0.png',
  title: '张天赐 | 日出而作，日落而息1',
  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: '张天赐 | 日出而作，日落而息2',
  startingPrice: 'RMB 1,000',
  transactionPrice: '',
}, {
  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/41eceb23-d168-4049-ae8e-48c5328b192f.png',
  title: '张天赐 | 日出而作，日落而息3',
  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 loadData = async () => {
  // 加载数据逻辑...
};

const onRefresh = () => {
  finished.value = false;
  page.value = 1;
  refreshing.value = true;
  loadData();
};

const columns = computed(() => {
  const result = [[], []];
  list.value.forEach((item, index) => {
    // 为每个项目添加一个 index 属性
    result[index % 2].push({ ...item, index });
  });
  return result;
});

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]">
                    <Column v-for="(column, colIndex) in columns" :key="colIndex" :colIndex="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));
}
</style>