From 3893938ac1c35d1530f44bc0815c24fe1eb079fb Mon Sep 17 00:00:00 2001
From: xingyy <64720302+Concur-max@users.noreply.github.com>
Date: Mon, 17 Feb 2025 14:50:28 +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=E4=BB=B7=E6=A0=BC=E5=8A=A8=E7=94=BB=E6=95=88?=
 =?UTF-8?q?=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 引入 gsap 和 countup.js 库
- 实现价格滚动动画效果
- 优化价格显示逻辑
---
 app/pages/liveRoom/index.client.vue | 38 +++++++++++++++--------------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/app/pages/liveRoom/index.client.vue b/app/pages/liveRoom/index.client.vue
index b1b8288..8a8ce89 100644
--- a/app/pages/liveRoom/index.client.vue
+++ b/app/pages/liveRoom/index.client.vue
@@ -13,7 +13,8 @@ import {showConfirmDialog} from 'vant';
 import {artworkBuy} from "@/api/goods/index.js"
 import {useI18n} from 'vue-i18n'
 import gsap from 'gsap'
-import { CountUp } from 'countup.js'
+import {CountUp} from 'countup.js'
+
 const countUpRef = ref(null)
 const nextPriceRef = ref(null)
 
@@ -79,6 +80,8 @@ onBeforeUnmount(() => {
   player.value = null
 })
 const createCountUp = (element, value, options = {}) => {
+  console.log('element', element)
+  console.log('value', value)
   const defaultOptions = {
     duration: 1.5,
     separator: ',',
@@ -86,8 +89,7 @@ const createCountUp = (element, value, options = {}) => {
     decimalPlaces: 0,
     enableScrollSpy: true,
   }
-
-  const countUp = new CountUp(element, Number(value), { ...defaultOptions, ...options })
+  const countUp = new CountUp(element, Number(value), {...defaultOptions, ...options})
 
   if (!countUp.error) {
     countUp.start()
@@ -103,14 +105,13 @@ watch(() => fullLive.value, async (newVal) => {
 
   await getSocketData()
 
-  nextTick(() => {
-    const { nowAuctionPrice } = auctionData.value
-
-    createCountUp(countUpRef.value, nowAuctionPrice.nowPrice)
-    createCountUp(nextPriceRef.value, nowAuctionPrice.nextPrice)
-  })
 })
-
+watchEffect(() => {
+  createCountUp(countUpRef.value, auctionData.value?.nowAuctionPrice?.nowPrice)
+})
+watchEffect(() => {
+  createCountUp(nextPriceRef.value, auctionData.value?.nowAuctionPrice?.nextPrice)
+})
 const goBuy = async () => {
   const res = await artworkBuy({
     auctionArtworkUuid: auctionData.value?.artwork?.uuid,
@@ -134,13 +135,13 @@ const tipOpen = () => {
         <sideButton class="absolute top-196px right-0 z-999"></sideButton>
         <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">
-            {{ $t('live_room.now_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}
-            <span  ref="countUpRef" ></span>
+          <div class="text-16px text-#FFB25F font-600 flex">
+            <div class="mr-5px">{{ $t('live_room.now_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
+            <div ref="countUpRef" class="min-w-50px"></div>
           </div>
-          <div class="text-16px text-#fff font-600">
-            {{ $t('live_room.lower_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}
-            <span  ref="nextPriceRef" ></span>
+          <div class="text-16px text-#fff font-600 flex">
+            <div class="mr-5px">{{ $t('live_room.lower_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
+            <div ref="nextPriceRef" class="min-w-50px"></div>
           </div>
           <div v-if="quoteStatus" class="mt-10px mb-10px">
             <van-button @click="goBuy" color="#FFB25F" class="w-344px !h-[40px]">
@@ -188,13 +189,14 @@ const tipOpen = () => {
 <style scoped>
 
 /* 定义过渡动画 */
-.fade-enter-active{
-  transition: opacity 1s ease;
+.fade-enter-active {
+  transition: opacity 1.5s ease;
 }
 
 .fade-leave-active {
   transition: opacity 0.2s ease;
 }
+
 /* 定义进入和离开的状态 */
 .fade-enter-from,
 .fade-leave-to {