m1ngsama/FUJI
1
0
Fork 0
mirror of https://github.com/m1ngsama/FUJI.git synced 2025-12-24 10:51:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

use svg QRCode

Browse source
This commit is contained in:
ClasWen 2024-06-05 22:37:32 +08:00
parent 6472bf375d
commit a420b0b2bc
2 changed files with 38 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
src/pages/graduation/GenerateQR.vue
View file

@ -11,7 +11,9 @@ const setId = () => {
}
const url = ref<string>()
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<number>()
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()
}
}
</script>
<template>
<div class="flex flex-col items-center min-w-[40vw]">
<div class="flex flex-col items-center" @click="onClickQRCode">
<div class="min-h-64 h-[40vh] aspect-square">
<img :src="url" class="h-full" alt="" @click="onClickQRCode" />
<div class="h-full" v-if="svg" v-html="svg"></div>
</div>
<div class="md:text-xl mt-4 font-bold">{{ id }}</div>
<div class="text-base sm:text-lg md:text-2xl mt-4 font-bold">{{ id }}</div>
</div>
</template>

6
src/pages/graduation/generate.astro
View file

@ -9,7 +9,7 @@ import GenerateQR from "./GenerateQR.vue"
<body>
<div class="bg-[#f5f5f7] flex flex-col sm:flex-row items-center h-screen justify-center gap-8 p-8">
<div
class="w-[40vh] w-auto"
class=" sm:w-auto"
>
<div class="flex items-center gap-2">
<img
@ -24,7 +24,7 @@ import GenerateQR from "./GenerateQR.vue"
<div class="text-3xl md:text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-500 to-blue-500 mt-3">
2024 毕业典礼拍摄
</div>
<div class="w-4/5 sm:w-[40vw] mt-6 text-gray-600 lg:text-lg">
<div class="sm:w-[40vw] mt-6 text-gray-600 lg:text-lg">
<div>
扫描右侧二维码来下载你的照片
</div>
@ -33,7 +33,7 @@ import GenerateQR from "./GenerateQR.vue"
</div>
</div>
</div>
<GenerateQR client:load></GenerateQR>
<GenerateQR client:load class="min-w-[50%]"></GenerateQR>
</div>
</body>
</html>