修复问题

2024-12-25 21:18:17 +08:00 · 2024-12-25 21:18:17 +08:00 · d2adcb07d1
parent 918190f559
commit d2adcb07d1
9 changed files with 206 additions and 56 deletions
--- 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;
+}
--- 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
--- 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"
        >
          保存图片
--- a/components/CheckVip/index.jsx
+++ 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>;
+}
--- 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}
--- 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,
                };
          });
      }
--- 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
--- 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"],
--- 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: "仅会员支持下载",