<script setup> import {ref, onMounted, onBeforeUnmount, 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 {goodStore} from "@/stores/goods/index.js" import {message} from "~/components/x-message/useMessage.js" import {artworkBuy} from "@/api/goods/index.js" const player = ref(null) const {quoteStatus, show, playerId, show1, auctionData, getSocketData, getLiveLink,fullLive} = liveStore() const isPlayerReady = ref(false) const pullLink = ref('') definePageMeta({ title: '主页', i18n: 'login.title', }) const handlePlayerError = (error) => { console.error('播放器错误:', error) player.value?.play() } const initializePlayer = async () => { 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) } catch (error) { console.error('播放器初始化失败:', error) } } onMounted(async () => { pullLink.value = await getLiveLink() initializePlayer() }) onBeforeUnmount(() => { player.value?.dispose() player.value = null }) watch(()=>fullLive.value, (newVal) => { if (newVal) { getSocketData() } }) 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('出价状态未开启') } const updateShow=()=>{ } </script> <template> <div class="relative h-full"> <div :id="playerId" class="w-full h-full"></div> <transition> <div v-if="fullLive"> <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" @update:show="updateShow"/> <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>