up qrcode set

MoonShineVFX · Nov 15, 2024 · a6be6ad · a6be6ad
1 parent 8e1f027
commit a6be6ad
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 38 deletions.
diff --git a/._node_modules b/._node_modules
diff --git a/._package.json b/._package.json
diff --git a/._yarn.lock b/._yarn.lock
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "firebase": "^10.5.2",
     "framer-motion": "^10.16.4",
     "jszip": "^3.10.1",
+    "qrcode.react": "^4.1.0",
     "react": "^18.2.0",
     "react-camera-pro": "^1.3.0",
     "react-dom": "^18.2.0",

diff --git a/src/Page/Camera/Result.js b/src/Page/Camera/Result.js
@@ -14,6 +14,8 @@ import { motion, AnimatePresence } from "framer-motion";
 import { FaExternalLinkAlt } from "react-icons/fa";
 import { FaXmark } from "react-icons/fa6";
 import { FiLoader } from "react-icons/fi";
+import { QRCodeSVG } from "qrcode.react";
+
 function Result({
   open,
   handleOpen,
@@ -25,6 +27,8 @@ function Result({
   const navigate = useNavigate();
   const [selectedImage, setSelectedImage] = useState(null);
   const [uploading, setUploading] = useState(false);
+  const [qrCodeOpen, setQrCodeOpen] = useState(false);
+
   // 新增上傳函數
   const handleUpload = async () => {
     if (!selectedImage) {
@@ -72,6 +76,41 @@ function Result({
     }
   };
 
+  // 新增處理 QR Code 顯示的函式
+  const handleShowQRCode = () => {
+    if (selectedImage) {
+      console.log("選擇的圖片 URL:", selectedImage);
+      setQrCodeOpen(true);
+    }
+  };
+
+  // QR Code 彈窗組件
+  const QRCodeDialog = () => (
+    <Dialog
+      open={qrCodeOpen}
+      handler={() => setQrCodeOpen(false)}
+      size="xs"
+      animate={{
+        mount: { scale: 1, y: 0 },
+        unmount: { scale: 0.9, y: -100 },
+      }}
+    >
+      <DialogBody className="flex flex-col items-center gap-4 p-4">
+        <h2 className="text-xl font-bold text-[#FF0050]">掃描 QR Code</h2>
+        <QRCodeSVG value={selectedImage || ""} size={200} level="H" />
+        <p className="text-sm text-gray-600 text-center mt-2">
+          掃描 QR Code 以取得圖片
+        </p>
+        <button
+          onClick={() => setQrCodeOpen(false)}
+          className="mt-4 px-6 py-2 bg-[#FF0050] text-white rounded-full hover:bg-[#d6004a] transition-colors"
+        >
+          關閉
+        </button>
+      </DialogBody>
+    </Dialog>
+  );
+
   const downloadImage = (imgurl) => {
     const imageUrl = imgurl;
     const link = document.createElement("a");
@@ -119,68 +158,43 @@ function Result({
                   <div className=" mx-auto relative mt-5 md:mt-0 grid gap-4 grid-cols-2 md:grid-cols-4 px-5">
                     {Object.keys(taskStatus).length > 0 ? (
                       taskStatus.map((item, index) => {
-                        if (item.finished === 0) {
-                          return (
-                            <div
-                              key={"not" + index}
-                              className="flex flex-col justify-center items-center  "
-                            >
-                              <div className="w-full h-full  relative  overflow-hidden rounded-xl  ">
-                                <div className="w-full h-full bg-[#fbabc4] z-0  aspect-[127/158] "></div>
-                                <div className=" z-10 absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent via-[#f57ea3] to-transparent -translate-x-full animate-[shimmer_2s_infinite]"></div>
-                              </div>
-                              <motion.div
-                                initial={{ opacity: 0, y: 10 }}
-                                animate={{ opacity: 1, y: 0 }}
-                                exit={{ opacity: 0, y: 10 }}
-                                className=" hidden"
-                              >
-                                {item.status}
-                              </motion.div>
-                            </div>
-                          );
-                        } else {
+                        if (item.finished === 1) {
                           return (
                             <div
                               key={"finish" + index}
                               className={`flex flex-col justify-center items-center relative transition-all group hover:-translate-y-2 cursor-pointer ${
                                 selectedImage === item.img
-                                  ? "ring-4 ring-[#ff437f] rounded-xl"
+                                  ? "ring-4 ring-[#FF0050] rounded-xl"
                                   : ""
                               }`}
-                              target="_blank"
-                              onClick={() => setSelectedImage(item.img)}
+                              onClick={() => {
+                                setSelectedImage(item.img);
+                                handleShowQRCode(); // 選擇圖片後直接顯示 QR Code
+                              }}
                             >
                               <motion.img
                                 initial={{ opacity: 0 }}
                                 animate={{ opacity: 1 }}
                                 exit={{ opacity: 0 }}
                                 src={item.img}
                                 alt=""
-                                className="rounded-xl "
+                                className="rounded-xl"
                               />
-                              <motion.div
-                                initial={{ opacity: 0, y: 10 }}
-                                animate={{ opacity: 1, y: 0 }}
-                                exit={{ opacity: 0, y: 10 }}
-                                className=" hidden"
-                              >
-                                {item.status}
-                              </motion.div>
                             </div>
                           );
                         }
+                        return null;
                       })
                     ) : (
-                      <div>no result or fail </div>
+                      <div>no result or fail</div>
                     )}
                   </div>
                   <div className="  flex flex-col justify-center  items-center mt-10">
                     <div>你可以選擇一張喜歡的圖片列印成卡片</div>
-                    <div className="text-[#FF0050]">
+                    {/* <div className="text-[#FF0050]">
                       {selectedImage ? "已選擇 1 張圖片" : "尚未選擇圖片"}
-                    </div>
-                    {selectedImage && (
+                    </div> */}
+                    {/* {selectedImage && (
                       <button
                         onClick={handleUpload}
                         disabled={uploading}
@@ -192,7 +206,7 @@ function Result({
                       >
                         {uploading ? "上傳中..." : "上傳"}
                       </button>
-                    )}
+                    )} */}
                   </div>
                 </Suspense>
               </div>
@@ -237,6 +251,9 @@ function Result({
           </div>
         </DialogBody>
       </Dialog>
+
+      {/* QR Code 彈窗 */}
+      <QRCodeDialog />
     </div>
   );
 }

diff --git a/yarn.lock b/yarn.lock
@@ -8466,6 +8466,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f"
   integrity sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ==
 
+qrcode.react@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-4.1.0.tgz#ff15dc9edb135f735bb303a8356938c1e8dcc4c8"
+  integrity sha512-uqXVIIVD/IPgWLYxbOczCNAQw80XCM/LulYDADF+g2xDsPj5OoRwSWtIS4jGyp295wyjKstfG1qIv/I2/rNWpQ==
+
 [email protected]:
   version "6.11.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a"