feat(liveRoom): 实现直播间拍卖数据实时更新和显示

- 从 liveStore 中获取 auctionData，用于展示当前拍卖信息
- 在模板中添加拍卖数据的动态显示，包括当前价、下口价等信息
- 实现拍卖状态的实时更新和对应 UI 的变化
- 优化竞拍列表的展示逻辑，根据不同的拍卖状态显示相应内容
- 在弹窗中添加当前拍卖作品的标识和状态

app/pages/collectCode/mine/index.vue

@@ -144,7 +144,7 @@ initData()
             <div class="text-#939393 text-12px">RMB</div>
           </div>
           <div>
-            <input v-model="createForm.price"     @keypress="validateInput"
+            <input v-model="createForm.price"     @keydown="validateInput"
                    class="w-214px h-48px bg-#F3F3F3 rounded-4px px-11px text-16px" placeholder="请输入金额">
           </div>
         </div>

app/pages/collectCode/payment/index.vue

@@ -32,7 +32,7 @@ const validateInput = (e) => {
     <div class="text-#1A1A1A text-16px mb-25px font-bold">{{payStatus===0?'支付全部':'支付部分'}}</div>
     <div class="text-#999999 text-16px mb-24px font-bold" v-if="payStatus===0">RMB 5000</div>
     <div class="mb-12px">
-      <input class="w-272px h-48px bg-#F3F3F3 px-11px text-16px" type="text" placeholder="最多RMB5,000" @keypress="validateInput">
+      <input class="w-272px h-48px bg-#F3F3F3 px-11px text-16px" type="text" placeholder="最多RMB5,000" @keydown="validateInput">
     </div>
     <div class="text-#2B53AC text-14px" @click="changePayStatus">{{payStatus===1?'支付全部':'支付部分'}}</div>
 </div>

app/pages/liveRoom/components/Broadcast/index.vue

@@ -1,6 +1,9 @@
 <script setup>
 import { ref, onMounted, onUnmounted, nextTick } from 'vue';
-
+import {liveStore} from "@/stores/live/index.js";
+import {authStore} from "~/stores/auth/index.js";
+const {auctionData} = liveStore()
+const {userInfo}= authStore()
 const list = ref([
   {
     a: '领先',
@@ -53,16 +56,25 @@ onUnmounted(() => {
 <template>
   <div
       id="list-container"
-      class="w-344px h-86px overflow-y-auto bg-#fff rounded-4px text-14px text-#939393 pt-7px pb-7px flex flex-col justify-between"
+      class="w-344px h-86px overflow-y-auto bg-#fff rounded-4px text-14px text-#939393 pt-7px pb-7px px-11px flex flex-col justify-between"
   >
     <transition-group name="list" tag="div">
-      <div v-for="(item, index) in list" :key="index" class="flex flex-shrink-0 h-25px">
-        <div class="flex-grow-1 text-center">{{ item.a }}</div>
-        <div class="flex-grow-1 text-center">{{ item.b }}</div>
-        <div class="flex-grow-1 text-center">{{ item.c }}</div>
-        <div class="flex-grow-1 text-center">{{ item.d }}</div>
-        <div class="flex-grow-1 text-center">{{ item.e }}</div>
-      </div>
+      <template v-if="auctionData.wsType==='stopArtwork'">
+          <div class="text-#939393 text-14px">即将开始下一个拍品</div>
+      </template>
+      <template v-else-if="auctionData.auctionPriceList?.buys?.length>0">
+        <div v-for="(item, index) in auctionData.auctionPriceList?.buys" :key="index" class="flex flex-shrink-0 h-25px">
+          <div class="flex-grow-1 text-start" :style="`color: ${item.statusCode==='head'?'#D03050':'#939393'}`" >{{ item.statusCode==='head'?'领先':'出局' }}</div>
+          <div class="flex-grow-1 text-start">{{ item.auctionType==='local'?'现场竞价':'网络竞价' }}</div>
+          <div class="flex-grow-1 text-start">{{ item.createdAt }}</div>
+          <div class="flex-grow-1 text-start">{{ item.baseMoney }}</div>
+          <div class="flex-grow-1 text-start text-#2B53AC">{{ item.userId===userInfo.ID?'我':'' }}</div>
+        </div>
+      </template>
+      <template v-if="auctionData.wsType==='newArtwork'">
+        <div class="text-#939393 text-14px">开始拍卖</div>
+      </template>
+
     </transition-group>
   </div>
 </template>

app/pages/liveRoom/components/SideButton/index.vue

@@ -6,6 +6,7 @@ import { liveStore } from "@/stores/live/index.js";
 import xButton from '@/components/x-button/index.vue'
 import tangPopup from './tangPopup.vue'
 import {goodStore} from "@/stores/goods/index.js";
+
 const { quoteStatus, changeStatus,show,auctionData ,getSocketData} = liveStore();
 const {pageRef} = goodStore();
 const showTang=ref(false)

app/pages/liveRoom/components/SideButton/tangPopup.vue

@@ -3,7 +3,9 @@ import xPopup from '@/components/x-popup/index.vue'
 import {goodStore} from "@/stores/goods/index.js";
 import xImage from '@/components/x-image/index.vue'
 import DetailPopup from '@/pages/home/components/DetailPopup/index.vue'
+import {liveStore} from "~/stores/live/index.js";
 const {pageRef,itemList} = goodStore();
+const {auctionData} = liveStore()
 const showDetail=ref(false)
 const props = defineProps({
   show: Boolean,
@@ -37,7 +39,7 @@ const openShow=(item)=>{
             @click="openShow(item)"
         >
           <div
-              class="mr-10px flex-shrink-0 rounded-4px overflow-hidden cursor-pointer"
+              class="mr-10px flex-shrink-0 rounded-4px overflow-hidden cursor-pointer relative"
           >
             <xImage
                 :preview="false"
@@ -46,6 +48,8 @@ const openShow=(item)=>{
                 :alt="item?.artworkTitle"
                 loading="lazy"
             />
+            <div class="w-45px h-17px bg-#2B53AC text-12px line-height-none flex justify-center items-center absolute top-2px left-2px text-#fff">LOT{{item.index}}</div>
+            <div v-if="auctionData.artwork.index===item?.index" class="w-80px h-20px bg-#B58047 flex line-height-none justify-center items-center text-#fff text-12px">竞拍中</div>
           </div>
           <div>
             <div class="ellipsis line-height-20px text-16px font-600 min-h-40px">

app/pages/liveRoom/index.client.vue

@@ -11,7 +11,7 @@ import xButton from '@/components/x-button/index.vue'
 import {goodStore} from "@/stores/goods/index.js";
 const {auctionDetail,getAuctionDetail} = goodStore();
 const player = ref(null)
-const {quoteStatus, changeStatus, show, playerId, show1} = liveStore()
+const {quoteStatus, changeStatus, show, playerId, show1,auctionData} = liveStore()
 const isPlayerReady = ref(false)
 const props = defineProps({
   fullLive: {
@@ -56,7 +56,6 @@ const initializePlayer = () => {
     console.error('播放器初始化失败:', error)
   }
 }
-const auctionData=ref({})
 
 onMounted(async () => {
   /*  initializePlayer()*/
@@ -86,7 +85,7 @@ watch(()=>{
 </script>
 
 <template>
-  <div class="relative h-full">
+  <div class="relative h-full ">
     <div class="w-full h-full">
       <video
           class="h-full w-full"
@@ -110,11 +109,11 @@ watch(()=>{
         <div class="absolute left-1/2 transform -translate-x-1/2 flex flex-col items-center" style="bottom:calc(var(--safe-area-inset-bottom) + 26px)">
           <div class="text-16px text-#FFB25F font-600">
             当前价：RMB
-            <van-rolling-text class="my-rolling-text" :start-num="0" :duration="0.5" :target-num="3000" direction="up"/>
+            <van-rolling-text class="my-rolling-text" :start-num="0" :duration="0.5" :target-num="auctionData?.nowAuctionPrice?.nowPrice??0" direction="up"/>
           </div>
           <div class="text-16px text-#fff font-600">
             下口价：RMB
-            <van-rolling-text class="my-rolling-text1" :start-num="0" :duration="0.5" :target-num="3500" direction="up"/>
+            <van-rolling-text class="my-rolling-text1" :start-num="0" :duration="0.5" :target-num="auctionData?.nowAuctionPrice?.nextPrice??0" direction="up"/>
           </div>
           <x-button>
             <div
@@ -128,6 +127,11 @@ watch(()=>{
         <div>
         </div>
         <paymentResults v-model:show="show1" type="error"/>
+        <div v-if="auctionData?.wsType==='newArtwork'" class="w-344px h-31px rounded-4px absolute top-9px bg-[#151824]/45 backdrop-blur-[10px] backdrop-saturate-[180%] left-1/2 transform translate-x--1/2 flex text-#fff text-14px items-center px-12px line-height-none">
+          <div class="mr-11px whitespace-nowrap">LOT{{auctionData.artwork.index}}</div>
+          <div class="mr-10px truncate">{{auctionData.artwork.name}}</div>
+          <div class="whitespace-nowrap">开始拍卖</div>
+        </div>
       </div>
 
     </transition>

app/stores/live/index.js

@@ -24,8 +24,8 @@ export const liveStore = createGlobalState(() => {
           ws.send({ type: 'chat', content: 'Hello!' })*/
 // 监听消息
         onMessage((data) => {
-            console.log('收到消息:', data)
-            auctionData.value = data
+            auctionData.value = data.data
+            console.log('auctionData.value',auctionData.value)
         })
     }
     const changeStatus = () => {