d27e6bc0c5
- 新增 fullLive 全局状态管理直播间的全屏状态 - 修改 AppHeader组件，根据 fullLive 状态控制返回按钮的显示 - 更新 default 布局，根据 fullLive 状态控制 AppFooter 的显示- 调整 LiveRoom组件，支持全屏模式下的布局变化 - 修改 home 页面，实现直播间全屏和列表之间的切换
121 lines
3.8 KiB
Vue
121 lines
3.8 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 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: false,
|
||
},
|
||
})
|
||
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" @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>
|
||
<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">
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.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> |