From 824ffca63b995b60f17c7185092a061da887aad0 Mon Sep 17 00:00:00 2001
From: xingyy <64720302+Concur-max@users.noreply.github.com>
Date: Wed, 15 Jan 2025 11:45:46 +0800
Subject: [PATCH] =?UTF-8?q?feat(LiveRoom):=20=E4=BC=98=E5=8C=96=E7=9B=B4?=
 =?UTF-8?q?=E6=92=AD=E9=97=B4=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80=E5=92=8C?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

-调整了直播间的布局结构，增加了出价和支付相关功能- 添加了竞拍记录的显示，包括领先者、竞价时间等信息
- 优化了开启出价按钮的样式和提示文字- 调整了播放器的初始化配置，提高了稳定性
---
 app/pages/LiveRoom/index.client.vue | 63 ++++++++++++++++++++++++-----
 1 file changed, 53 insertions(+), 10 deletions(-)

diff --git a/app/pages/LiveRoom/index.client.vue b/app/pages/LiveRoom/index.client.vue
index 06e7dbc..c81293f 100644
--- a/app/pages/LiveRoom/index.client.vue
+++ b/app/pages/LiveRoom/index.client.vue
@@ -1,9 +1,10 @@
 <script setup>
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+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)
@@ -11,7 +12,7 @@ const config = useRuntimeConfig()
 const props = defineProps({
   fullLive: {
     type: Boolean,
-    default: false,
+    default: true,
   },
 })
 const playerConfig = {
@@ -38,8 +39,10 @@ const initializePlayer = () => {
       playerInstance?.play()
     })
     player.value?.on('error', handlePlayerError)
-    player.value?.on('rtsTraceId', (event) => {})
-    player.value?.on('rtsFallback', (event) => {})
+    player.value?.on('rtsTraceId', (event) => {
+    })
+    player.value?.on('rtsFallback', (event) => {
+    })
   } catch (error) {
     console.error('播放器初始化失败:', error)
   }
@@ -61,8 +64,9 @@ onBeforeUnmount(() => {
 </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>
+  <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
@@ -70,7 +74,8 @@ onBeforeUnmount(() => {
           <div>拍品</div>
           <div>(1/188)</div>
         </div>
-        <div class="w-full h-60px flex flex-col items-center justify-center" @click="changeStatus">
+        <div class="w-full h-60px flex flex-col items-center justify-center border-b-1px border-b-#D3D3D3"
+             @click="changeStatus">
           <div class="mb-3px">
             <img :src="quoteStatus ? lockdfd : lock4"
                  class="w-16px h-21px"
@@ -81,6 +86,12 @@ onBeforeUnmount(() => {
             {{ quoteStatus ? '关闭出价' : '开启出价' }}
           </div>
         </div>
+        <div
+            class="w-full h-60px text-#DD9C56  flex flex-col justify-center items-center ">
+          <div class="text-10px ">RMB</div>
+          <div class="text-12px">5,000</div>
+          <div class="text-10px">去支付</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">
@@ -95,7 +106,28 @@ onBeforeUnmount(() => {
             :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 class="w-344px h-86px bg-#fff rounded-4px text-14px text-#939393 pt-7px pb-7px flex flex-col justify-between">
+          <div class="flex">
+            <div class="flex-grow-1 text-center">领先</div>
+            <div class="flex-grow-1 text-center">现场竞价</div>
+            <div class="flex-grow-1 text-center">10:12:12</div>
+            <div class="flex-grow-1 text-center">RMB5,500</div>
+            <div class="flex-grow-1 text-center">我</div>
+          </div>
+          <div class="flex">
+            <div class="flex-grow-1 text-center">领先</div>
+            <div class="flex-grow-1 text-center">现场竞价</div>
+            <div class="flex-grow-1 text-center">10:12:12</div>
+            <div class="flex-grow-1 text-center">RMB5,500</div>
+            <div class="flex-grow-1 text-center">我</div>
+          </div>
+          <div class="flex">
+            <div class="flex-grow-1 text-center">领先</div>
+            <div class="flex-grow-1 text-center">现场竞价</div>
+            <div class="flex-grow-1 text-center">10:12:12</div>
+            <div class="flex-grow-1 text-center">RMB5,500</div>
+            <div class="flex-grow-1 text-center">我</div>
+          </div>
         </div>
       </div>
     </template>
@@ -104,6 +136,16 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+}
+.grid-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 .my-rolling-text {
   --van-rolling-text-item-width: 10px;
   --van-rolling-text-font-size: 16px;
@@ -115,7 +157,8 @@ onBeforeUnmount(() => {
   --van-rolling-text-font-size: 16px;
   --van-rolling-text-color: #FFF;
 }
-:deep(.prism-license-watermark){
-  display: none!important;
+
+:deep(.prism-license-watermark) {
+  display: none !important;
 }
 </style>
\ No newline at end of file