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>
|