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

<script setup>
import {ref, onMounted, onBeforeUnmount, computed, watch} 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 {message} from "~/components/x-message/useMessage.js"
import {artworkBuy} from "@/api/goods/index.js"
import CryptoJS from 'crypto-js'

const {auctionDetail, getAuctionDetail} = goodStore()
const player = ref(null)
const {quoteStatus, changeStatus, show, playerId, show1, auctionData, getSocketData,getLiveLink} = liveStore()
const isPlayerReady = ref(false)
const pullLink=ref('')
const props = defineProps({
  fullLive: {
    type: Boolean,
    default: true,
  },
})
const isPiPActive = ref(false)
const videoRef = ref(null)

// 检查浏览器是否支持画中画
const isPiPSupported = computed(() => {
  return document.pictureInPictureEnabled ||
      document.webkitPictureInPictureEnabled
})

// 进入画中画模式
const enterPiP = async () => {
  try {
    if (!videoRef.value) return

    if (document.pictureInPictureElement) {
      await document.exitPictureInPicture()
    }

    await videoRef.value.requestPictureInPicture()
    isPiPActive.value = true
  } catch (error) {
    console.error('进入画中画模式失败:', error)
  }
}

// 退出画中画模式
const exitPiP = async () => {
  try {
    if (document.pictureInPictureElement) {
      await document.exitPictureInPicture()
      isPiPActive.value = false
    }
  } catch (error) {
    console.error('退出画中画模式失败:', error)
  }
}

definePageMeta({
  title: '主页',
  i18n: 'login.title',
})

const config = useRuntimeConfig()


const handlePlayerError = (error) => {
  console.error('播放器错误:', error)
  if (player.value) {
    player.value?.play()
  }
}

const initializePlayer = () => {
  try {
    if (player.value) {
      player.value?.dispose()
    }
    const playerConfig = {
      id: playerId.value,
      source:pullLink.value,
      isLive: true,
      preload: true,
      autoplayPolicy: {fallbackToMute: true},
      controlBarVisibility: 'never',
    }
    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 () => {
  pullLink.value=  await getLiveLink()
  initializePlayer()
})

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) {
    getSocketData()
    setTimeout(() => {
      fullLive1.value = true
    }, 400)
  } else {
    fullLive1.value = false
  }
})

const goBuy = async () => {
  const res = await artworkBuy({
    auctionArtworkUuid: auctionData.value?.artwork?.uuid,
    buyMoney: String(auctionData.value?.nowAuctionPrice?.nextPrice ?? 0)
  })
  if (res.status === 0) {
    message.success('出价成功')
  }
}

const tipOpen = () => {
  message.warning('出价状态未开启')
}
</script>

<template>
  <div class="relative h-full ">
    <div :id="playerId" class="w-full h-full"></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">
            当前价：{{ auctionData?.nowAuctionPrice?.currency }}
            <van-rolling-text class="my-rolling-text" :start-num="0" :duration="0.5"
                              :target-num="auctionData?.nowAuctionPrice?.nowPrice??0" direction="up"/>
          </div>
          <div class="text-16px text-#fff font-600">
            下口价：{{ auctionData?.nowAuctionPrice?.currency }}
            <van-rolling-text class="my-rolling-text1" :start-num="0" :duration="0.5"
                              :target-num="auctionData?.nowAuctionPrice?.nextPrice??0" direction="up"/>
          </div>
          <div v-if="quoteStatus" class="mt-10px mb-10px">
            <van-button @click="goBuy" color="#FFB25F" class="w-344px !h-[40px]">
              <div>{{
                  `确认出价 ${auctionData?.nowAuctionPrice?.currency} ${auctionData?.nowAuctionPrice?.nextPrice ?? 0}`
                }}
              </div>
            </van-button>
          </div>
          <div v-else class="mt-10px mb-10px">
            <van-button @click="tipOpen" color="#D6D6D8" class=" w-344px !h-[40px]" v-if="!quoteStatus">
              <div class="text-#7D7D7F text-14px">点击"开启出价"，即刻参与竞拍</div>
            </van-button>
          </div>

          <broadcast></broadcast>
        </div>
        <paymentInput v-model:show="show"/>
        <div>
        </div>
        <paymentResults v-model:show="show1" type="error"/>
        <div v-if="auctionData?.wsType==='newArtwork'"
             class="w-344px h-31px rounded-4px absolute top-9px bg-[#151824]/45 backdrop-blur-[10px] backdrop-saturate-[180%] left-1/2 transform translate-x--1/2 flex text-#fff text-14px items-center px-12px line-height-none">
          <div class="mr-11px whitespace-nowrap">LOT{{ auctionData.artwork.index }}</div>
          <div class="mr-10px truncate">{{ auctionData.artwork.name }}</div>
          <div class="whitespace-nowrap">开始拍卖</div>
        </div>
      </div>
    </transition>
  </div>
</template>
<style lang="scss">
#J_prismPlayer{
width: 100%;
  height: 100%!important;
  &>video{
    width: 100%;
    height: 100%;
  }
}
</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>