From a0623e8bd9a121a38959e005f5569c3d4e250e96 Mon Sep 17 00:00:00 2001
From: xingyy <64720302+Concur-max@users.noreply.github.com>
Date: Mon, 17 Feb 2025 14:29:31 +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 | 49 ++++++++++++++++++++++-------
package.json | 2 ++
pnpm-lock.yaml | 16 ++++++++++
3 files changed, 56 insertions(+), 11 deletions(-)
diff --git a/app/pages/liveRoom/index.client.vue b/app/pages/liveRoom/index.client.vue
index 743ffcd..b1b8288 100644
--- a/app/pages/liveRoom/index.client.vue
+++ b/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 = () => {
-
}
@@ -107,13 +136,11 @@ const updateShow = () => {
style="bottom:calc(var(--safe-area-inset-bottom) + 26px)">
{{ $t('live_room.now_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}
-
+
{{ $t('live_room.lower_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}
-
+
diff --git a/package.json b/package.json
index c767507..82dc11f 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ba04524..837f4f6 100644
--- a/pnpm-lock.yaml
+++ b/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