From a420b0b2bc480b619fcf3748344fd789e5efafd1 Mon Sep 17 00:00:00 2001 From: ClasWen Date: Wed, 5 Jun 2024 22:37:32 +0800 Subject: [PATCH 1/2] 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"
- +
From 9ceccd9bed7afa177f1447fddcad55f196c5b721 Mon Sep 17 00:00:00 2001 From: ClasWen Date: Wed, 5 Jun 2024 22:46:02 +0800 Subject: [PATCH 2/2] organize files --- src/pages/graduation/GenerateQR.vue | 8 +++++--- .../graduation/GraduationDownloadView.vue} | 3 ++- src/pages/graduation/download.astro | 4 ++-- src/pages/graduation/graduation.ts | 20 +++++++++++++++++++ 4 files changed, 29 insertions(+), 6 deletions(-) rename src/{components/GraduationView.vue => pages/graduation/GraduationDownloadView.vue} (94%) create mode 100644 src/pages/graduation/graduation.ts diff --git a/src/pages/graduation/GenerateQR.vue b/src/pages/graduation/GenerateQR.vue index 761b713..b054f75 100644 --- a/src/pages/graduation/GenerateQR.vue +++ b/src/pages/graduation/GenerateQR.vue @@ -2,6 +2,7 @@ import QRCode from "qrcode" import { v4 as uuid } from "uuid" import { ref, onMounted, watch } from "vue" +import { useGraduationIdURL } from "./graduation" const id = ref() const idStoreKey = "graduationId" @@ -10,11 +11,12 @@ const setId = () => { localStorage.setItem(idStoreKey, id.value) } -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}`) + if (!id.value) { + return + } + svg.value = await QRCode.toString(useGraduationIdURL().constructURL(id.value)) }) onMounted(() => { diff --git a/src/components/GraduationView.vue b/src/pages/graduation/GraduationDownloadView.vue similarity index 94% rename from src/components/GraduationView.vue rename to src/pages/graduation/GraduationDownloadView.vue index 39b8f77..54c3c23 100644 --- a/src/components/GraduationView.vue +++ b/src/pages/graduation/GraduationDownloadView.vue @@ -1,5 +1,6 @@ diff --git a/src/pages/graduation/download.astro b/src/pages/graduation/download.astro index fef607f..9a8efcf 100644 --- a/src/pages/graduation/download.astro +++ b/src/pages/graduation/download.astro @@ -1,8 +1,8 @@ --- import BaseLayout from "../../layouts/BaseLayout.astro" -import GraduationView from "../../components/GraduationView.vue" +import GraduationDownloadView from "./GraduationDownloadView.vue" --- - + diff --git a/src/pages/graduation/graduation.ts b/src/pages/graduation/graduation.ts new file mode 100644 index 0000000..3719385 --- /dev/null +++ b/src/pages/graduation/graduation.ts @@ -0,0 +1,20 @@ +import { SITE_URL } from "../../consts" + +export const useGraduationIdURL = () => { + const idKey = "id" + + const getId = () => { + return new URLSearchParams(window.location.search).get(idKey) as string | undefined + } + + const constructURL = (id: string) => { + const url = new URL(`/graduation/download`, SITE_URL) + url.searchParams.append(idKey, id) + return url.toString() + } + + return { + getId, + constructURL, + } +}