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

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

app/pages/liveRoom/index.client.vue

@@ -12,12 +12,15 @@ import {message} from "~/components/x-message/useMessage.js"
 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'
+const countUpRef = ref(null)
+const nextPriceRef = ref(null)
 
 const player = ref(null)
 const {quoteStatus, show, playerId, show1, auctionData, getSocketData, getLiveLink, fullLive} = liveStore()
 const pullLink = ref('')
 
-
 definePageMeta({
   i18n: 'login.title',
 })
@@ -67,16 +70,45 @@ const initializePlayer = async () => {
 onMounted(async () => {
   pullLink.value = await getLiveLink()
   initializePlayer()
+
+
 })
 
 onBeforeUnmount(() => {
   player.value?.dispose()
   player.value = null
 })
-watch(() => fullLive.value, (newVal) => {
-  if (newVal) {
-    getSocketData()
+const createCountUp = (element, value, options = {}) => {
+  const defaultOptions = {
+    duration: 1.5,
+    separator: ',',
+    decimal: '.',
+    decimalPlaces: 0,
+    enableScrollSpy: true,
   }
+
+  const countUp = new CountUp(element, Number(value), { ...defaultOptions, ...options })
+
+  if (!countUp.error) {
+    countUp.start()
+  } else {
+    console.error(countUp.error)
+  }
+
+  return countUp
+}
+
+watch(() => fullLive.value, async (newVal) => {
+  if (!newVal) return
+
+  await getSocketData()
+
+  nextTick(() => {
+    const { nowAuctionPrice } = auctionData.value
+
+    createCountUp(countUpRef.value, nowAuctionPrice.nowPrice)
+    createCountUp(nextPriceRef.value, nowAuctionPrice.nextPrice)
+  })
 })
 
 const goBuy = async () => {
@@ -91,9 +123,6 @@ const goBuy = async () => {
 
 const tipOpen = () => {
   message.warning(useI18n().t('live_room.warn_mess'))
-}
-const updateShow = () => {
-
 }
 </script>
 
@@ -107,13 +136,11 @@ const updateShow = () => {
              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 }}
-            <van-rolling-text class="my-rolling-text" :start-num="0" :duration="0.5"
-                              :target-num="auctionData?.nowAuctionPrice?.nowPrice??0" direction="up"/>
+            <span  ref="countUpRef" ></span>
           </div>
           <div class="text-16px text-#fff font-600">
             {{ $t('live_room.lower_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}
-            <van-rolling-text class="my-rolling-text1" :start-num="0" :duration="0.5"
-                              :target-num="auctionData?.nowAuctionPrice?.nextPrice??0" direction="up"/>
+            <span  ref="nextPriceRef" ></span>
           </div>
           <div v-if="quoteStatus" class="mt-10px mb-10px">
             <van-button @click="goBuy" color="#FFB25F" class="w-344px !h-[40px]">

package.json

@@ -24,9 +24,11 @@
     "@vueuse/core": "^12.4.0",
     "aliyun-aliplayer": "^2.28.5",
     "axios": "^1.7.9",
+    "countup.js": "^2.8.0",
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.13",
     "dotenv": "^16.4.7",
+    "gsap": "^3.12.7",
     "nuxt": "^3.15.0",
     "pinyin": "4.0.0-alpha.2",
     "qrcode": "^1.5.4",

pnpm-lock.yaml

@@ -26,6 +26,9 @@ importers:
       axios:
         specifier: ^1.7.9
         version: 1.7.9
+      countup.js:
+        specifier: ^2.8.0
+        version: 2.8.0
       crypto-js:
         specifier: ^4.2.0
         version: 4.2.0
@@ -35,6 +38,9 @@ importers:
       dotenv:
         specifier: ^16.4.7
         version: 16.4.7
+      gsap:
+        specifier: ^3.12.7
+        version: 3.12.7
       nuxt:
         specifier: ^3.15.0
         version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.4)(db0@0.2.4)(eslint@9.20.1(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.6)(sass@1.85.0)(terser@5.39.0)(tsx@4.19.2)(typescript@5.7.3)(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)(tsx@4.19.2)(yaml@2.7.0))(yaml@2.7.0)
@@ -1992,6 +1998,9 @@ packages:
       typescript:
         optional: true
 
+  countup.js@2.8.0:
+    resolution: {integrity: sha512-f7xEhX0awl4NOElHulrl4XRfKoNH3rB+qfNSZZyjSZhaAoUk6elvhH+MNxMmlmuUJ2/QNTWPSA7U4mNtIAKljQ==}
+
   crc-32@1.2.2:
     resolution: {integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==}
     engines: {node: '>=0.8'}
@@ -2596,6 +2605,9 @@ packages:
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
+  gsap@3.12.7:
+    resolution: {integrity: sha512-V4GsyVamhmKefvcAKaoy0h6si0xX7ogwBoBSs2CTJwt7luW0oZzC0LhdkyuKV8PJAXr7Yaj8pMjCKD4GJ+eEMg==}
+
   gzip-size@6.0.0:
     resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==}
     engines: {node: '>=10'}
@@ -6776,6 +6788,8 @@ snapshots:
       typescript: 5.7.3
     optional: true
 
+  countup.js@2.8.0: {}
+
   crc-32@1.2.2: {}
 
   crc32-stream@6.0.0:
@@ -7420,6 +7434,8 @@ snapshots:
 
   graceful-fs@4.2.11: {}
 
+  gsap@3.12.7: {}
+
   gzip-size@6.0.0:
     dependencies:
       duplexer: 0.1.2