From 510b839a1b79ae5afda9aca39e666e81a210f761 Mon Sep 17 00:00:00 2001
From: xingyy <64720302+Concur-max@users.noreply.github.com>
Date: Thu, 6 Feb 2025 15:43:23 +0800
Subject: [PATCH] =?UTF-8?q?feat(liveRoom):=20=E5=AE=9E=E7=8E=B0=E7=9B=B4?=
 =?UTF-8?q?=E6=92=AD=E9=97=B4=E6=8B=8D=E5=8D=96=E6=95=B0=E6=8D=AE=E5=AE=9E?=
 =?UTF-8?q?=E6=97=B6=E6=9B=B4=E6=96=B0=E5=92=8C=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 从 liveStore 中获取 auctionData，用于展示当前拍卖信息
- 在模板中添加拍卖数据的动态显示，包括当前价、下口价等信息
- 实现拍卖状态的实时更新和对应 UI 的变化
- 优化竞拍列表的展示逻辑，根据不同的拍卖状态显示相应内容
- 在弹窗中添加当前拍卖作品的标识和状态
---
 app/pages/collectCode/mine/index.vue          |  2 +-
 app/pages/collectCode/payment/index.vue       |  2 +-
 .../liveRoom/components/Broadcast/index.vue   | 30 +++++++++++++------
 .../liveRoom/components/SideButton/index.vue  |  1 +
 .../components/SideButton/tangPopup.vue       |  6 +++-
 app/pages/liveRoom/index.client.vue           | 14 +++++----
 app/stores/live/index.js                      |  4 +--
 7 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/app/pages/collectCode/mine/index.vue b/app/pages/collectCode/mine/index.vue
index a931a91..95b0b65 100644
--- a/app/pages/collectCode/mine/index.vue
+++ b/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>
diff --git a/app/pages/collectCode/payment/index.vue b/app/pages/collectCode/payment/index.vue
index 511833a..6a37b7d 100644
--- a/app/pages/collectCode/payment/index.vue
+++ b/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>
diff --git a/app/pages/liveRoom/components/Broadcast/index.vue b/app/pages/liveRoom/components/Broadcast/index.vue
index 40abec6..0b8e46b 100644
--- a/app/pages/liveRoom/components/Broadcast/index.vue
+++ b/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>
diff --git a/app/pages/liveRoom/components/SideButton/index.vue b/app/pages/liveRoom/components/SideButton/index.vue
index 2cbfb20..a991e0e 100644
--- a/app/pages/liveRoom/components/SideButton/index.vue
+++ b/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)
diff --git a/app/pages/liveRoom/components/SideButton/tangPopup.vue b/app/pages/liveRoom/components/SideButton/tangPopup.vue
index ac49fac..231d312 100644
--- a/app/pages/liveRoom/components/SideButton/tangPopup.vue
+++ b/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">
diff --git a/app/pages/liveRoom/index.client.vue b/app/pages/liveRoom/index.client.vue
index d06d9fa..2752618 100644
--- a/app/pages/liveRoom/index.client.vue
+++ b/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>
diff --git a/app/stores/live/index.js b/app/stores/live/index.js
index 49c0884..52c3031 100644
--- a/app/stores/live/index.js
+++ b/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 = () => {