m1ngsama/FUJI
1
0
Fork 0
mirror of https://github.com/m1ngsama/FUJI.git synced 2025-12-25 02:56:38 +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 url = ref<string>()
const svg = ref()
watch(id, async () => { 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}`) url.value = await QRCode.toDataURL(`https://nbtca.space/graduation/download/${id.value}`)
}) })
@ -24,35 +26,50 @@ onMounted(() => {
} }
}) })
let clickCount: number = 0 const useTimedCounter = () => {
let startTime: number | undefined = undefined const count = ref(0)
const onClickQRCode = () => { const startTime = ref<number>()
if (startTime === undefined) {
startTime = Date.now() 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() setId()
alert("ID 已经更新为 " + id.value) alert("ID 已经更新为 " + id.value)
reset()
// 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
} }
} }
</script> </script>
<template> <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"> <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>
<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> </div>
</template> </template>

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

@ -9,7 +9,7 @@ import GenerateQR from "./GenerateQR.vue"
<body> <body>
<div class="bg-[#f5f5f7] flex flex-col sm:flex-row items-center h-screen justify-center gap-8 p-8"> <div class="bg-[#f5f5f7] flex flex-col sm:flex-row items-center h-screen justify-center gap-8 p-8">
<div <div
class="w-[40vh] w-auto" class=" sm:w-auto"
> >
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<img <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"> <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 毕业典礼拍摄 2024 毕业典礼拍摄
</div> </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>
扫描右侧二维码来下载你的照片 扫描右侧二维码来下载你的照片
</div> </div>
@ -33,7 +33,7 @@ import GenerateQR from "./GenerateQR.vue"
</div> </div>
</div> </div>
</div> </div>
<GenerateQR client:load></GenerateQR> <GenerateQR client:load class="min-w-[50%]"></GenerateQR>
</div> </div>
</body> </body>
</html> </html>