f1422cdf46
- 添加 Aliplayer 直播播放器- 实现竞拍功能和界面 - 更新项目依赖，包括 aliyun-aliplayer 和 cross-env - 调整环境变量配置方式 - 移除未使用的消息提示功能
95 lines
3.1 KiB
Vue
95 lines
3.1 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 config = useRuntimeConfig()
|
||
|
||
// 使用环境变量
|
||
console.log('API Base:', config.public.apiBase)
|
||
console.log('WebSocket URL:', config.public.wsUrl)
|
||
console.log('Player Source:', config.public.PLAYER_SOURCE)
|
||
const changeStatus = () => {
|
||
console.log('quoteStatus before:', quoteStatus.value);
|
||
quoteStatus.value = !quoteStatus.value;
|
||
console.log('quoteStatus after:', quoteStatus.value);
|
||
};
|
||
|
||
onMounted(() => {
|
||
player.value = new Aliplayer({
|
||
id: 'J_prismPlayer',
|
||
source: 'artc://live-pull-sh-01.szjixun.cn/live/live?auth_key=1736748343-0-0-feef65166e5cc62957c35b6e3eec82a1',
|
||
isLive: true,
|
||
}, function(player) {
|
||
console.log('The player is created.');
|
||
});
|
||
|
||
player.value.on('rtsTraceId', function(event) {
|
||
console.log('EVENT rtsTraceId', event.paramData);
|
||
});
|
||
player.value.on('rtsFallback', function(event) {
|
||
console.log('EVENT rtsFallback', event.paramData);
|
||
});
|
||
});
|
||
|
||
onBeforeUnmount(() => {
|
||
if (player.value) {
|
||
player.value.dispose();
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div class="relative">
|
||
<div id="J_prismPlayer" style="width: 100vw;height: 90vh"></div>
|
||
<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] bg-#D6D6D8 rounded-4px text-#7D7D7F text-14px flex justify-center items-center">
|
||
点击"开启出价"，即刻参与竞拍
|
||
</div>
|
||
</div>
|
||
</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;
|
||
}
|
||
video {
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
</style> |