From a420b0b2bc480b619fcf3748344fd789e5efafd1 Mon Sep 17 00:00:00 2001 From: ClasWen Date: Wed, 5 Jun 2024 22:37:32 +0800 Subject: [PATCH] use svg QRCode --- src/pages/graduation/GenerateQR.vue | 53 +++++++++++++++++++---------- src/pages/graduation/generate.astro | 6 ++-- 2 files changed, 38 insertions(+), 21 deletions(-) diff --git a/src/pages/graduation/GenerateQR.vue b/src/pages/graduation/GenerateQR.vue index 124bd1f..761b713 100644 --- a/src/pages/graduation/GenerateQR.vue +++ b/src/pages/graduation/GenerateQR.vue @@ -11,7 +11,9 @@ const setId = () => { } const url = ref() +const svg = ref() watch(id, async () => { + svg.value = await QRCode.toString(`https://nbtca.space/graduation/download/${id.value}`, { type: "svg" }) url.value = await QRCode.toDataURL(`https://nbtca.space/graduation/download/${id.value}`) }) @@ -24,35 +26,50 @@ onMounted(() => { } }) -let clickCount: number = 0 -let startTime: number | undefined = undefined -const onClickQRCode = () => { - if (startTime === undefined) { - startTime = Date.now() +const useTimedCounter = () => { + const count = ref(0) + const startTime = ref() + + const add = () => { + if (startTime.value === undefined) { + startTime.value = Date.now() + } + + count.value++ + if (Date.now() - startTime.value > 1000) { + // If more than 1 second has passed, reset the click count and start time + count.value = 0 + startTime.value = undefined + } } - clickCount++ + const reset = () => { + count.value = 0 + startTime.value = undefined + } - if (Date.now() - startTime <= 1000 && clickCount === 3) { + return { + count, + add, + reset, + } +} +const { count, add, reset } = useTimedCounter() +const onClickQRCode = () => { + add() + if (count.value === 3) { setId() alert("ID 已经更新为 " + id.value) - - // Reset the click count and start time - clickCount = 0 - startTime = undefined - } else if (Date.now() - startTime > 1000) { - // If more than 1 second has passed, reset the click count and start time - clickCount = 0 - startTime = undefined + reset() } } diff --git a/src/pages/graduation/generate.astro b/src/pages/graduation/generate.astro index 087f58d..7cdf82c 100644 --- a/src/pages/graduation/generate.astro +++ b/src/pages/graduation/generate.astro @@ -9,7 +9,7 @@ import GenerateQR from "./GenerateQR.vue"
2024 毕业典礼拍摄
-
+
扫描右侧二维码来下载你的照片
@@ -33,7 +33,7 @@ import GenerateQR from "./GenerateQR.vue"
- +