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

Merge pull request #7 from nbtca/feature-graduation

Browse source 
Organize files
This commit is contained in:
clas 2024-06-05 22:47:21 +08:00 committed by GitHub
commit 32d66d584b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 66 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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<string>()
const idStoreKey = "graduationId"
@ -10,9 +11,12 @@ const setId = () => {
localStorage.setItem(idStoreKey, id.value)
}
const url = ref<string>()
const svg = ref()
watch(id, async () => {
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(() => {
@ -24,35 +28,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>

3
src/components/GraduationView.vue → src/pages/graduation/GraduationDownloadView.vue
View file

@ -1,5 +1,6 @@
<script setup lang="ts">
import { onMounted, ref } from "vue"
import { useGraduationIdURL } from "./graduation"
const id = ref<string>()
@ -22,7 +23,7 @@ const setStatus = async () => {
}
onMounted(() => {
id.value = new URLSearchParams(window.location.search).get("id")
id.value = useGraduationIdURL().getId()
setStatus()
})
</script>

4
src/pages/graduation/download.astro
View file

@ -1,8 +1,8 @@
---
import BaseLayout from "../../layouts/BaseLayout.astro"
import GraduationView from "../../components/GraduationView.vue"
import GraduationDownloadView from "./GraduationDownloadView.vue"
---
<BaseLayout>
<GraduationView client:load></GraduationView>
<GraduationDownloadView client:load></GraduationDownloadView>
</BaseLayout>

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>

20
src/pages/graduation/graduation.ts Normal file
View file

@ -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,
}
}