feat(liveRoom): 实现直播间价格动画效果

- 引入 gsap 和 countup.js 库
- 实现价格滚动动画效果
- 优化价格显示逻辑

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">
+          <div class="text-16px text-#FFB25F font-600 flex">
-            {{ $t('live_room.now_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}
+            <div class="mr-5px">{{ $t('live_room.now_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
-            <span  ref="countUpRef" ></span>
+            <div ref="countUpRef" class="min-w-50px"></div>
           </div>
-          <div class="text-16px text-#fff font-600">
+          <div class="text-16px text-#fff font-600 flex">
-            {{ $t('live_room.lower_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}
+            <div class="mr-5px">{{ $t('live_room.lower_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
-            <span  ref="nextPriceRef" ></span>
+            <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{
+.fade-enter-active {
-  transition: opacity 1s ease;
+  transition: opacity 1.5s ease;
 }
 
 .fade-leave-active {
   transition: opacity 0.2s ease;
 }
+
 /* 定义进入和离开的状态 */
 .fade-enter-from,
 .fade-leave-to {