diff --git a/src/pages/freshman/_assets/qrcode_1727189194077.jpg b/src/pages/freshman/_assets/qrcode_1727189194077.jpg new file mode 100644 index 0000000..81263a0 Binary files /dev/null and b/src/pages/freshman/_assets/qrcode_1727189194077.jpg differ diff --git a/src/pages/freshman/join.astro b/src/pages/freshman/join.astro index d70b6a1..f09a958 100644 --- a/src/pages/freshman/join.astro +++ b/src/pages/freshman/join.astro @@ -6,7 +6,17 @@ import logo from "./_assets/nbtca.gif";
- - +
+ +
+
+ 加入计算机协会 +
+ +
+ 1.本页面仅作计算机协会新人信息登记使用，原则上登记即可加入。但入社后可能仍需要在学校的平台登记，后续请留意群内通知。 +
+ 2.允许多次提交表单，通常以最后一次提交为准。 +
diff --git a/src/pages/freshman/qrcode.astro b/src/pages/freshman/qrcode.astro new file mode 100644 index 0000000..9697af6 --- /dev/null +++ b/src/pages/freshman/qrcode.astro @@ -0,0 +1,11 @@ +--- +import BaseLayout from "../../layouts/BaseLayout.astro" +import ReactChild from "./react/qrcode.tsx" +import qrcode from "./_assets/qrcode_1727189194077.jpg"; +--- + + +
+ +
+ diff --git a/src/pages/freshman/react/join.tsx b/src/pages/freshman/react/join.tsx index 528ee86..63b7fed 100644 --- a/src/pages/freshman/react/join.tsx +++ b/src/pages/freshman/react/join.tsx @@ -13,12 +13,34 @@ export default function JoinForm() { email: "", memo: "", }) + function saveToLocalStorge() { + localStorage.setItem("formData", JSON.stringify(formData)) + } + function loadFromLocalStorge() { + const data = localStorage.getItem("formData") + if (data) { + setFormData(JSON.parse(data)) + } + } + const [firstRender, setFirstRender] = useState(true) + if (firstRender) { + setFirstRender(false) + loadFromLocalStorge() + } const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData(prevData => ({ ...prevData, [name]: value, })) + setTimeout(() => { + try { + saveToLocalStorge() + } + catch (error) { + console.error("Failed to save form data to local storage", error) + } + }, 100) } const handleSubmit = async () => { try { @@ -26,7 +48,7 @@ export default function JoinForm() { requestBody: formData, }) alert("提交成功！ 后续请加群获取！") - window.location.href = "/about" + window.location.href = "/freshman/qrcode" } catch (error) { console.error("Error submitting form:", error) diff --git a/src/pages/freshman/react/qrcode.tsx b/src/pages/freshman/react/qrcode.tsx new file mode 100644 index 0000000..e0e0516 --- /dev/null +++ b/src/pages/freshman/react/qrcode.tsx @@ -0,0 +1,72 @@ +import { Button, Input } from "@nextui-org/react" + +function QrCodeContent({ qrcode }: { qrcode: string }) { + return ( + <> +
+ 请扫描二维码加入计算机协会交流群（QQ） +
+
+ +
+
+
+
+ +
+
+ +
+ + ) +} + +export default QrCodeContent diff --git a/src/pages/join-us.astro b/src/pages/join-us.astro index 7ea04f0..04bbdf8 100644 --- a/src/pages/join-us.astro +++ b/src/pages/join-us.astro @@ -18,14 +18,24 @@ import mp4 from "./_assets/nbtca.mp4";

九月二十五日，百团等你！

- - 了解在 NBTCA - - > +
+ + 了解在 NBTCA + + > +
+
+ + 填写入社信息 + + > +