From d2adcb07d15d4ccdc2e6479f7677aeaadded1149 Mon Sep 17 00:00:00 2001
From: al <al@cdhncy.com>
Date: Wed, 25 Dec 2024 21:18:17 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/globals.css                    |   6 ++
 app/space/[id]/page.js             |   2 +-
 app/space/share/[user_id]/page.jsx |   4 +-
 components/CheckVip/index.jsx      |  71 ++++++++++++++
 components/ImagesMask/index.jsx    | 144 +++++++++++++++++++----------
 components/Photos/index.js         |   2 +
 components/PostItem/index.js       |   7 +-
 next.config.js                     |   4 +
 utils/tools/handleFuns.js          |  22 ++++-
 9 files changed, 206 insertions(+), 56 deletions(-)
 create mode 100644 components/CheckVip/index.jsx

diff --git a/app/globals.css b/app/globals.css
index 959b082..9b387f9 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -3,6 +3,7 @@
 @tailwind utilities;
 body {
   color: #fff;
+  position: relative
   /* padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom); */
 }
@@ -403,3 +404,8 @@ textarea {
 .adm-form-item-label .adm-form-item-required-asterisk {
   left: auto !important;
 }
+
+.ant-modal-mask,
+.ant-modal-wrap {
+    position: absolute !important;
+}
\ No newline at end of file
diff --git a/app/space/[id]/page.js b/app/space/[id]/page.js
index 18d7c5f..cf4141d 100644
--- a/app/space/[id]/page.js
+++ b/app/space/[id]/page.js
@@ -350,7 +350,7 @@ export default function PersonSpace() {
         <FloatingPanel
           anchors={anchors}
           ref={scrollRef}
-          className="bg-deepBg pb-32"
+          className="bg-deepBg"
           style={{ height: "calc(100vh - 60px)" }}
         >
           <JumboTabs
diff --git a/app/space/share/[user_id]/page.jsx b/app/space/share/[user_id]/page.jsx
index c140718..43debf1 100644
--- a/app/space/share/[user_id]/page.jsx
+++ b/app/space/share/[user_id]/page.jsx
@@ -8,7 +8,7 @@ import { useRouter, useParams } from "next/navigation";
 import requireAPI from "@/utils/requireAPI";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
-import { saveImage } from "@/utils/tools/handleFuns";
+import { saveDivImage } from "@/utils/tools/handleFuns";
 import clipboard from "copy-to-clipboard";
 export default function Share() {
   //获取页面数据、生成二维码
@@ -114,7 +114,7 @@ export default function Share() {
           </div>
         </div>
         <button
-          onClick={() => saveImage("print")}
+          onClick={() => saveDivImage("print")}
           className="btn-md bg-gradient-to-r from-[#FF668B] to-[#FF66F0] rounded-full text-white text-base font-medium w-full mt-4"
         >
           保存图片
diff --git a/components/CheckVip/index.jsx b/components/CheckVip/index.jsx
new file mode 100644
index 0000000..8c207f5
--- /dev/null
+++ b/components/CheckVip/index.jsx
@@ -0,0 +1,71 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Dialog, Toast } from "antd-mobile";
+import { checkRole } from "@/utils/auth";
+// import { useRouter } from "next/navigation";
+import baseRequest from "@/utils/baseRequest";
+export default function CheckVip({ children, isVipToPassFun, router }) {
+  // const router = useRouter();
+  const base = baseRequest();
+  useEffect(() => {}, []);
+  const handleCheck = () => {
+    const isVip = checkRole();
+    if (!isVip) {
+      const showMobal = Dialog.show({
+        title: "是否开通会员",
+        content: (
+          <div>
+            <div>会员可无限制保存图片，查看原图，一次开通永久有效。</div>
+          </div>
+        ),
+        bodyStyle: {
+          maxHeight: "none",
+          width: "80vw",
+          position: "fixed",
+          top: "200px",
+          left: "10vw",
+          "--text-color": "#fff",
+          color: "#fff",
+        },
+        // cancelText:"确认",
+        // confirmText:"取消",
+        style: {
+          "--text-color": "#fff",
+        },
+        closeOnAction: true,
+        actions: [
+          [
+            {
+              key: "close",
+              text: "取消",
+              bold: true,
+              style: { color: "#ffffff80" },
+              onClick: () => {
+                showMobal?.close();
+              },
+            },
+            {
+              key: "submit",
+              text: "确认",
+              style: { color: "#fff" },
+              onClick: () => {
+                showMobal.close();
+                console.log("showMobal", showMobal);
+                router.push(
+                  `/webView/${encodeURIComponent(
+                    `/vip?base=${encodeURIComponent(JSON.stringify(base))}`
+                  )}`
+                );
+              },
+            },
+          ],
+        ],
+      });
+      return;
+    } else {
+      isVipToPassFun();
+    }
+  };
+  return <div onClick={handleCheck}>{children}</div>;
+}
diff --git a/components/ImagesMask/index.jsx b/components/ImagesMask/index.jsx
index 602437e..201b340 100644
--- a/components/ImagesMask/index.jsx
+++ b/components/ImagesMask/index.jsx
@@ -6,14 +6,22 @@ import React, {
   useRef,
   forwardRef,
   useImperativeHandle,
+  useMemo,
 } from "react";
-import { Mask } from "antd-mobile";
+import { Mask, Dialog, Toast } from "antd-mobile";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";
+import {
+  faAngleLeft,
+  faAngleRight,
+  faDownload,
+} from "@fortawesome/free-solid-svg-icons";
 import { createRoot } from "react-dom/client";
 import { useRouter } from "next/navigation";
 import baseRequest from "@/utils/baseRequest";
 import OwnImage from "../OwnImage";
+import { saveImage } from "@/utils/tools/handleFuns";
+import requireAPI from "@/utils/requireAPI";
+import CheckVip from "@/components/CheckVip";
 function ImagesMask({}, ref) {
   const [visible, setVisible] = useState(false);
   const [images, setImages] = useState([]);
@@ -21,33 +29,34 @@ function ImagesMask({}, ref) {
   const scrollRef = useRef(null);
   const defaultIndex = useRef(null);
   const router = useRouter();
-  useEffect(() => {
-    let body = document.body;
-    if (visible) {
-      body.style.touchAction = "none";
-      const root = createRoot(document?.getElementById("maskDomBox"));
-      root.render(
-        <div>
-          <ImagesMaskContaint
-            images={images}
-            visible={visible}
-            ref={scrollRef}
-            setVisible={setVisible}
-            setImages={setImages}
-            router={router}
-            data={data}
-            defaultIndex={defaultIndex.current}
-            root={root}
-          />
-        </div>
-      );
-    } else {
-      body.style.touchAction = "auto";
-    }
-
-    // root.render(<div>xxxx</div>);
-  }, [visible]);
+  const imagesMaskContaintMemo = useMemo(() => {
+    console.log(images);
+    return (
+      <ImagesMaskContaint
+        images={images}
+        visible={visible}
+        ref={scrollRef}
+        setVisible={setVisible}
+        setImages={setImages}
+        router={router}
+        data={data}
+        defaultIndex={defaultIndex.current}
+        // root={root}
+      />
+    );
+  }, [images]);
+  // useEffect(() => {
+  //   let body = document.body;
+  //   if (visible) {
+  //     body.style.touchAction = "none";
+  //     const root = createRoot(document?.getElementById("maskDomBox"));
+  //     root.render(<div>{imagesMaskContaintMemo}</div>);
+  //   } else {
+  //     body.style.touchAction = "auto";
+  //   }
 
+  //   // root.render(<div>xxxx</div>);
+  // }, [visible]);
   useImperativeHandle(ref, () => ({
     show: (arr, index, data) => {
       defaultIndex.current = index;
@@ -64,7 +73,7 @@ function ImagesMask({}, ref) {
     close: () => setVisible(false),
   }));
 
-  return <></>;
+  return <div>{visible ? imagesMaskContaintMemo : null}</div>;
 }
 
 const ImagesMaskContaint = forwardRef(
@@ -77,7 +86,7 @@ const ImagesMaskContaint = forwardRef(
       router,
       data,
       defaultIndex = 0,
-      root,
+      // root,
     },
     ref
   ) => {
@@ -95,6 +104,7 @@ const ImagesMaskContaint = forwardRef(
     const base = baseRequest();
     const directionX = useRef(0);
     const currentDistance = useRef(0);
+    console.log("======", images);
     useEffect(() => {
       if (defaultIndex) {
         setIsNotFirstImg(true);
@@ -217,33 +227,44 @@ const ImagesMaskContaint = forwardRef(
         setXOffset(-cxOffset * (index + (currentDirection == "left" ? 1 : -1)));
       }
     };
-    // };
-    // };
-    // };
-    function downloadImage(url) {
-      let randomNum = "";
-      for (let i = 0; i < 10; i++) {
-        randomNum += Math.floor(Math.random() * 10);
-      }
-      fetch(url)
-        .then((res) => res.blob())
-        .then((blob) => {
-          if (typeof window == "undefined") return;
-          var a = document.createElement("a");
-          a.href = URL.createObjectURL(blob);
-          a.download = randomNum + ".jpg";
-          a.click();
+    const getOriginImg = async (id) => {
+      const _data = await requireAPI("POST", `/api/previews/original_image`, {
+        body: {
+          image_id: id,
+        },
+      });
+      if (_data.ret === -1) {
+        Toast.show({
+          icon: "fail",
+          content: _data.msg,
+          position: "top",
         });
-    }
+        return;
+      }
+      setImages((old) => {
+        console.log(old);
+        const { urls, id, w, h } = _data.data;
+        const newImages = [...old];
+        newImages[currentIndex] = {
+          url: urls[0],
+          id,
+          w,
+          h,
+        };
+
+        return newImages;
+      });
+    };
 
     return (
       <Mask
+        getContainer={() => document.getElementById("maskDomBox")}
         destroyOnClose={false}
         visible={visible}
         className="z-[1002] h-screen flex justify-center items-center"
         onMaskClick={() => {
           setVisible(false), setImages([]), setCurrentIndex(null);
-          root.unmount();
+          // root.unmount();
         }}
         color="#000000d9"
       >
@@ -261,7 +282,29 @@ const ImagesMaskContaint = forwardRef(
                     <FontAwesomeIcon icon={faDownload} size="xl" />
                   </div> */}
               </div>
-              <div>
+              <div className="flex gap-2">
+                <CheckVip
+                  isVipToPassFun={() => getOriginImg(images[currentIndex]?.id)}
+                  router={router}
+                >
+                  <div className="flex justify-center items-center w-[38px] h-[38px] bg-[#ffffff1a] text-[#fff] font-medium rounded-full">
+                    原图
+                  </div>
+                </CheckVip>
+
+                <CheckVip
+                  isVipToPassFun={() => saveImage(images[currentIndex]?.url)}
+                  router={router}
+                >
+                  <div className="flex justify-center items-center w-[38px] h-[38px] bg-[#ffffff1a] text-[#fff] rounded-full">
+                    <FontAwesomeIcon
+                      icon={faDownload}
+                      size="xl"
+                      // className="h-[14px]"
+                    />
+                  </div>
+                </CheckVip>
+
                 <div
                   onClick={() => {
                     setZoomed(!zoomed);
@@ -334,7 +377,7 @@ const ImagesMaskContaint = forwardRef(
             style={{ height: "calc(100vh - 174px)" }}
             onClick={() => {
               setVisible(false), setImages([]), setCurrentIndex(null);
-              root.unmount();
+              // root.unmount();
             }}
           >
             <div
@@ -352,6 +395,7 @@ const ImagesMaskContaint = forwardRef(
               onTouchEnd={() => handleEnd(currentIndex, direction)}
             >
               {images.map((item, index) => {
+                console.log("------------", item);
                 return (
                   <div
                     draggable={true}
diff --git a/components/Photos/index.js b/components/Photos/index.js
index 9f81eb1..755d5b4 100644
--- a/components/Photos/index.js
+++ b/components/Photos/index.js
@@ -40,6 +40,7 @@ export default function Photos({
         // fullwidth:item.w>item.h，
         w: item.w,
         h: item.h,
+        id: item.id,
       }));
       let videoArr = media.videos.map((item) => ({
         type: "video",
@@ -64,6 +65,7 @@ export default function Photos({
                   type: "hid",
                   w: newPhotos[0]?.w,
                   h: newPhotos[0]?.h,
+                  id: newPhotos[0]?.id,
                 };
           });
       }
diff --git a/components/PostItem/index.js b/components/PostItem/index.js
index 3083ebe..7463e91 100644
--- a/components/PostItem/index.js
+++ b/components/PostItem/index.js
@@ -146,7 +146,12 @@ export default function PostItem({
   return (
     <div>
       {type == "space" && data?.is_headed === 1 && (
-        <OwnIcon src="/images/top_post.png" width={76} outClassName="mb-2" />
+        <OwnIcon
+          src="/images/top_post.png"
+          className="w-[76px] h-max"
+          outClassName="w-[76px] h-max mb-2"
+          fit="cover"
+        />
       )}
       <div className="flex">
         <div
diff --git a/next.config.js b/next.config.js
index f95b8eb..f35bbd1 100644
--- a/next.config.js
+++ b/next.config.js
@@ -7,6 +7,10 @@ const nextConfig = {
         destination: "https://h5api.tiefen.fun/api/:path*",
         // destination: "https://testapi.tiefen.fun/api/:path*",
       },
+      {
+        source: "/imgprod/:path*",
+        destination: "https://levianderwinv01.tiefen.space/imgprod/:path*",
+      },
     ];
   },
   transpilePackages: ["crypto-js"],
diff --git a/utils/tools/handleFuns.js b/utils/tools/handleFuns.js
index 8f1a849..4ef6eb7 100644
--- a/utils/tools/handleFuns.js
+++ b/utils/tools/handleFuns.js
@@ -148,7 +148,7 @@ export const handleShowVideo = (video) => {
   });
 };
 //保存div内容为图片
-export const saveImage = async (divId) => {
+export const saveDivImage = async (divId) => {
   if (typeof window == "undefined") return;
   const div = document.getElementById(divId);
   html2canvas(div, { useCORS: true }).then(function (canvas) {
@@ -164,10 +164,28 @@ export const saveImage = async (divId) => {
   });
 };
 //保存图片
+export const saveImage = async (url) => {
+  if (typeof window == "undefined") return;
+  fetch(url)
+    .then((res) => res.blob())
+    .then((blob) => {
+      const url = URL.createObjectURL(blob);
+      // 创建一个链接元素
+      var link = document.createElement("a");
+      link.href = url;
+      // 设置下载的文件名
+      link.download = "SAVE_IMAGE.jpg";
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    })
+    .catch((error) => console.log(error));
+};
 export const saveFile = async (href) => {
   const isVip = checkRole();
   if (!isVip) {
-    setIsVipModalVisible(true);
+    // setIsVipModalVisible(true);
     Toast.show({
       icon: "fail",
       content: "仅会员支持下载",