164 lines
4.5 KiB
Vue
164 lines
4.5 KiB
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";
|
||
const {auctionDetail,getAuctionDetail} = goodStore();
|
||
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)
|
||
}
|
||
}
|
||
const auctionData=ref({})
|
||
|
||
onMounted(async () => {
|
||
/* 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) {
|
||
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(--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 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> |