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 sideButton from '~/pages/liveRoom/components/SideButton/index.vue'
import broadcast from '~/pages/liveRoom/components/Broadcast/index.vue'
import {liveStore} from "~/stores/live/index.js";
import paymentResults from '~/pages/liveRoom/components/PaymentResults/index.vue'
import paymentInput from '~/pages/liveRoom/components/PaymentInput/index.vue'
import xButton from '@/components/x-button/index.vue'
import {goodStore} from "~/stores/goods/index.js";
import {authStore} from "~/stores/auth/index.js";
const {auctionDetail,getAuctionDetail} = goodStore();
const { token } = authStore()
const player = ref(null)
const {quoteStatus, changeStatus, show, playerId, show1} = liveStore()
const isPlayerReady = ref(false)
const props = defineProps({
  fullLive: {
    type: Boolean,
    default: true,
  },
})

definePageMeta({
  title: '主页',
  i18n: 'login.title',
})
const config = useRuntimeConfig()
const playerConfig = {
  id: playerId.value,
  source: config.public.NUXT_PUBLIC_PLAYER_SOURCE,
  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)
  }
}


onMounted(async () => {
  if (!auctionDetail.value.uuid){
    await getAuctionDetail()
  }
/*  initializePlayer()*/
  const { ws, messages, onMessage } = useWebSocket()

// 连接
  ws.connect('/api/v1/m/auction/live',{auctionUuid: auctionDetail.value.uuid,token:token.value})

/*// 发送消息
  ws.send({ type: 'chat', content: 'Hello!' })*/

// 监听消息
  onMessage((data) => {
    console.log('收到消息:', data)
  })
})
onBeforeUnmount(() => {
  if (player.value) {
    player.value?.dispose()
    player.value = null
  }
})
const goPay = () => {
  show.value = true
}
const fullLive1 = ref(false)

watch(()=>{
  return props.fullLive
}, (newVal) => {
  if (newVal) {
    setTimeout(() => {
      fullLive1.value = true
    }, 400)
  }else {
    fullLive1.value = false
  }
})
</script>

<template>
  <div class="relative h-full">
    <div class="w-full h-full">
      <video
          class="h-full w-full"
          autoplay
          loop
          muted
          playsinline
          style="  object-fit: cover"
      >
        <source src="@/static/video/example.mp4" type="video/mp4" />
        您的浏览器不支持 HTML5 视频。
      </video>
    </div>
<!--    <div :id="playerId" class="w-screen"
         :style="fullLive?'height: calc(100vh - var(&#45;&#45;van-nav-bar-height))':'height:100%'"></div>-->

    <transition>
      <div v-if="fullLive1">

        <sideButton class="absolute  top-196px right-0 z-999"></sideButton>
        <div class="absolute left-1/2 transform -translate-x-1/2 flex flex-col items-center" style="bottom:calc(var(--safe-area-inset-bottom) + 26px)">
          <div class="text-16px text-#FFB25F font-600">
            当前价：RMB
            <van-rolling-text class="my-rolling-text" :start-num="0" :duration="0.5" :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" :duration="0.5" :target-num="3500" direction="up"/>
          </div>
          <x-button>
            <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>
          </x-button>
          <broadcast></broadcast>
        </div>
        <paymentInput v-model:show="show"/>
        <div>
        </div>
        <paymentResults v-model:show="show1" type="error"/>
      </div>

    </transition>


  </div>
</template>
<style>
:root:root {
  --van-dialog-radius: 8px
}
</style>
<style scoped>
.v-enter-active,
.v-leave-active {
  transition: opacity 0.3s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
.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>