feat(LiveRoom): 优化直播室页面并添加新功能

- 重构了 LiveRoom 页面的代码结构，提高了可维护性
- 添加了新的竞拍功能，包括开启出价和确认出价按钮
- 优化了播放器配置，增加了预加载、自动播放等设置
- 增加了播放器错误处理机制，提高了用户体验
- 调整了页面布局，使其更加适应不同屏幕尺寸

app/pages/LiveRoom/index.client.vue

@@ -1,47 +1,66 @@
 <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);
+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()
-console.log('config',config)
-const changeStatus = () => {
+console.log('config', config)
+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)
+  }
+}
 
-  quoteStatus.value = !quoteStatus.value;
-};
+const changeStatus = () => {
+  quoteStatus.value = !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);
-  });
-});
-
+  initializePlayer()
+})
 onBeforeUnmount(() => {
   if (player.value) {
-    player.value.dispose();
+    player.value?.dispose()
+    player.value = null
   }
-});
+})
 </script>
 
 <template>
-  <div class="relative flex-grow-1">
-    <div id="J_prismPlayer" style="width: 100vw;height: 90vh"></div>
+  <div class="relative">
+    <div id="J_prismPlayer" class="w-screen" style="height: calc(100vh - var(--van-nav-bar-height))"></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
+          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>
@@ -57,37 +76,36 @@ onBeforeUnmount(() => {
         </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" />
+        当前价：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" />
+        下口价：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
+          :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>
   </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;
-}
-:deep(.prism-controlbar){
-  display: none!important;
-}
 </style>

app/pages/home/index.vue

@@ -6,7 +6,6 @@ import itemDetail from '@/components/itemDetail/index.vue'
 
 definePageMeta({
   layout: 'default',
-  title: '主页',
   i18n: 'menu.home',
 })
 const liveRef = ref(null)