sync

src/pages/freshman/join.astro

@@ -12,7 +12,7 @@ import logo from "./_assets/nbtca.gif";
     <div style="display:flex; justify-content: center;font-size: large;">
       加入计算机协会
     </div>
-    <ReactChild client:load />
+    <ReactChild client:only="react" />
     <div style="display:flex; justify-content: center;margin-left: 20px;margin-right: 20px;">
       1.本页面仅作计算机协会新人信息登记使用，原则上登记即可加入。但入社后可能仍需要在学校的平台登记，后续请留意群内通知。
       <br />

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";
+---
+
+<BaseLayout title="QRCode">
+  <main>
+    <ReactChild client:only="react" qrcode={qrcode.src} />
+  </main>
+</BaseLayout>

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<HTMLInputElement>) => {
     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)

src/pages/freshman/react/qrcode.tsx

@@ -0,0 +1,72 @@
+import { Button, Input } from "@nextui-org/react"
+
+function QrCodeContent({ qrcode }: { qrcode: string }) {
+  return (
+    <>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          marginTop: "20px",
+        }}
+      >
+        请扫描二维码加入计算机协会交流群（QQ）
+      </div>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+        }}
+      >
+        <img
+          src={qrcode}
+          style={{
+            maxWidth: "320px",
+            padding: "20px",
+          }}
+        />
+      </div>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          flexDirection: "column",
+          textAlign: "center",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+          }}
+        >
+          <div
+            style={{
+              textAlign: "center",
+              width: "90px",
+              display: "flex",
+              justifyContent: "center",
+            }}
+          >
+            <Input readOnly={true} value="906370401" />
+          </div>
+        </div>
+        <Button
+          onClick={() => {
+            const inputElement = document.querySelector(
+              "input[value=\"906370401\"]",
+            ) as HTMLInputElement
+            if (inputElement) {
+              inputElement.select()
+              navigator.clipboard.writeText(inputElement.value)
+            }
+          }}
+        >
+          复制到剪切板
+        </Button>
+      </div>
+    </>
+  )
+}
+
+export default QrCodeContent