liveh5-nuxt/app/pages/LiveRoom/index.client.vue

<script setup>
import {ref, onMounted, onBeforeUnmount} from 'vue'
import Aliplayer from 'aliyun-aliplayer'
import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css'
import lock4 from '@/static/images/lock4@2x.png'
import lockdfd from '@/static/images/lockdfd@2x.png'

const player = ref(null)
const quoteStatus = ref(false)
const isPlayerReady = ref(false)
const config = useRuntimeConfig()
const props = defineProps({
  fullLive: {
    type: Boolean,
    default: true,
  },
})
const playerConfig = {
  id: 'J_prismPlayer',
  source: 'artc://live-pull-sh-01.szjixun.cn/live/live?auth_key=1736748343-0-0-feef65166e5cc62957c35b6e3eec82a1',
  isLive: true,
  preload: true,
  autoplayPolicy: {fallbackToMute: true},
  controlBarVisibility: 'never',
}
const handlePlayerError = (error) => {
  console.error('播放器错误:', error)
  if (player.value) {
    player.value?.play()
  }
}
const initializePlayer = () => {
  try {
    if (player.value) {
      player.value?.dispose()
    }
    player.value = new Aliplayer(playerConfig, (playerInstance) => {
      isPlayerReady.value = true
      playerInstance?.play()
    })
    player.value?.on('error', handlePlayerError)
    player.value?.on('rtsTraceId', (event) => {
    })
    player.value?.on('rtsFallback', (event) => {
    })
  } catch (error) {
    console.error('播放器初始化失败:', error)
  }
}

const changeStatus = () => {
  quoteStatus.value = !quoteStatus.value
}

onMounted(() => {
  initializePlayer()
})
onBeforeUnmount(() => {
  if (player.value) {
    player.value?.dispose()
    player.value = null
  }
})
</script>

<template>
  <div class="relative h-full">
    <div id="J_prismPlayer" class="w-screen"
         :style="fullLive?'height: calc(100vh - var(--van-nav-bar-height))':'height:100%'"></div>
    <template v-if="fullLive">
      <div class="absolute bg-#fff w-60px top-196px right-0 z-999 rounded-l-4px">
        <div
            class="w-full h-60px text-#7D7D7F text-12px flex flex-col justify-center items-center border-b-1px border-b-#D3D3D3">
          <div>拍品</div>
          <div>(1/188)</div>
        </div>
        <div class="w-full h-60px flex flex-col items-center justify-center border-b-1px border-b-#D3D3D3"
             @click="changeStatus">
          <div class="mb-3px">
            <img :src="quoteStatus ? lockdfd : lock4"
                 class="w-16px h-21px"
                 alt="">
          </div>
          <div :class="quoteStatus ? 'text-#7D7D7F' : 'text-#2B53AC'"
               class="text-10px">
            {{ quoteStatus ? '关闭出价' : '开启出价' }}
          </div>
        </div>
        <div
            class="w-full h-60px text-#DD9C56  flex flex-col justify-center items-center ">
          <div class="text-10px ">RMB</div>
          <div class="text-12px">5,000</div>
          <div class="text-10px">去支付</div>
        </div>
      </div>
      <div class="absolute top-505px left-1/2 transform -translate-x-1/2 flex flex-col items-center">
        <div class="text-16px text-#FFB25F font-600">
          当前价：RMB
          <van-rolling-text class="my-rolling-text" :start-num="0" :target-num="3000" direction="up"/>
        </div>
        <div class="text-16px text-#fff font-600">
          下口价：RMB
          <van-rolling-text class="my-rolling-text1" :start-num="0" :target-num="3500" direction="up"/>
        </div>
        <div
            :class="`w-344px h-[40px] ${quoteStatus ? 'bg-#FFB25F' : 'bg-#D6D6D8'} rounded-4px ${quoteStatus ? 'text-#fff' : 'text-#7D7D7F'} text-14px flex justify-center items-center mt-10px mb-10px`">
          {{ quoteStatus ? '确认出价 RMB 3,000' : '点击"开启出价"，即刻参与竞拍 ' }}
        </div>
        <div class="w-344px h-86px bg-#fff rounded-4px text-14px text-#939393 pt-7px pb-7px flex flex-col justify-between">
          <div class="flex">
            <div class="flex-grow-1 text-center">领先</div>
            <div class="flex-grow-1 text-center">现场竞价</div>
            <div class="flex-grow-1 text-center">10:12:12</div>
            <div class="flex-grow-1 text-center">RMB5,500</div>
            <div class="flex-grow-1 text-center">我</div>
          </div>
          <div class="flex">
            <div class="flex-grow-1 text-center">领先</div>
            <div class="flex-grow-1 text-center">现场竞价</div>
            <div class="flex-grow-1 text-center">10:12:12</div>
            <div class="flex-grow-1 text-center">RMB5,500</div>
            <div class="flex-grow-1 text-center">我</div>
          </div>
          <div class="flex">
            <div class="flex-grow-1 text-center">领先</div>
            <div class="flex-grow-1 text-center">现场竞价</div>
            <div class="flex-grow-1 text-center">10:12:12</div>
            <div class="flex-grow-1 text-center">RMB5,500</div>
            <div class="flex-grow-1 text-center">我</div>
          </div>
        </div>
      </div>
    </template>

  </div>
</template>

<style scoped>
.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.grid-item {
  display: flex;
  justify-content: center;
  align-items: center;
}
.my-rolling-text {
  --van-rolling-text-item-width: 10px;
  --van-rolling-text-font-size: 16px;
  --van-rolling-text-color: #FFB25F;
}

.my-rolling-text1 {
  --van-rolling-text-item-width: 10px;
  --van-rolling-text-font-size: 16px;
  --van-rolling-text-color: #FFF;
}

:deep(.prism-license-watermark) {
  display: none !important;
}
</style>