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

<script setup>
import liveBroadcast from '@/components/liveBroadcast/index.vue'
import { useRect } from '@vant/use';
import { ImagePreview } from 'vant';

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 images = [
  'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/637d95b4-2ae9-4a74-bd60-a3a9d2ca2ca0.png',
  'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/f7b65e23-ce21-41b4-8e58-9e6dc6950727.png',
  'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/41eceb23-d168-4049-ae8e-48c5328b192f.png',
];
const clickSwipe=(index)=>{
  showImagePreview({
    images: images,
    startPosition:index,
  })
}
</script>

<template>
  <liveBroadcast ref="liveRef" />
  <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"
                >
                  <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="拍卖说明">
      内容 2
    </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+39}px)`">
      <van-swipe style="height: 188px" indicator-color="#B4B4B4"   lazy-render >
        <van-swipe-item v-for="(image,index) in images" :key="image" @click="clickSwipe(index)">
          <van-image
              fit="contain"
              width="100%"
              :height="188"
              :src="image"
          />
        </van-swipe-item>
      </van-swipe>
     <div class="px-[16px] bg-[#fff] pt-[11px] mb-6px">
       <div class="text-[#000] text-[16px] mb-[12px]">日出而作，日落而息</div>
       <div class="text-#575757 text-[14px] pb-8px">
         <div class="flex mb-[4px]">
           <div class="w-[70px]">作者：</div>
           <div>张天赐</div>
         </div>
         <div class="flex mb-[4px]">
           <div class="w-[70px] flex-shrink-0">总平尺数：</div>
           <div>—</div>
         </div>
         <div class="flex mb-[4px]">
           <div class="w-[70px] flex-shrink-0">长*宽：</div>
           <div>100*200cm</div>
         </div>
         <div class="flex mb-[4px]">
           <div class="w-[70px] flex-shrink-0">画作简介：</div>
           <div>是打卡时间到卡上即可点击卡拉斯科健康就阿斯科利打卡时间到卡萨带手机的啊科技是打卡时</div>
         </div>
       </div>
     </div>
      <div class="flex px-[16px] bg-#fff h-[36px] items-center mb-6px">
        <div class="text-[#575757] text-[14px]">起拍价：</div>
        <div class="text-#575757 text-14px font-bold">RMB 1,000</div>
      </div>
      <div class="px-[16px] bg-#fff pt-12px pb-18px">
        <div class="text-[#575757] text-[14px] mb-4px">竞价表：</div>
        <div>
          <img src="@/static/images/1981736313.png" alt="">
        </div>
      </div>
    </div>
  </van-action-sheet>
</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>