From 0e6938f5a4ccdb8a468fd4b13c6886fec56a2b1f Mon Sep 17 00:00:00 2001 From: al Date: Wed, 14 Aug 2024 19:59:03 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=9C=8B=E5=9B=BE?= =?UTF-8?q?=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/globals.css | 2 +- components/ImagesMask/index.jsx | 250 +++++++++++++++++++++++--------- components/Photos/index.js | 129 ++++++++-------- 3 files changed, 248 insertions(+), 133 deletions(-) diff --git a/app/globals.css b/app/globals.css index 102cd03..3afdcf4 100644 --- a/app/globals.css +++ b/app/globals.css @@ -245,7 +245,7 @@ footer{ .adm-floating-panel .adm-floating-panel-content { flex: 1; overflow-y: scroll; - background: rgb(7 5 10/ var(--tw-bg-opacity)); + background: rgb(7 5 10/ var(--tw-bg-opacity))!important; } .adm-list>div>div>div>div{ diff --git a/components/ImagesMask/index.jsx b/components/ImagesMask/index.jsx index e12354a..7c99016 100644 --- a/components/ImagesMask/index.jsx +++ b/components/ImagesMask/index.jsx @@ -11,45 +11,44 @@ import { Mask, Image } from "antd-mobile"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons"; import { createRoot } from "react-dom/client"; - +import { useRouter } from "next/navigation"; +import baseRequest from "@/utils/baseRequest"; const root = createRoot(document?.getElementById("maskDomBox")); function ImagesMask({}, ref) { - const [currentIndex, setCurrentIndex] = useState(0); const [visible, setVisible] = useState(false); const [images, setImages] = useState([]); + const [data, setData] = useState(null); const scrollRef = useRef(null); + const defaultIndex = useRef(null); + const router = useRouter(); useEffect(() => { root.render(
); // root.render(
xxxx
); }, [visible]); - useEffect(() => { - if (scrollRef.current) { - setTimeout(() => { - scrollRef.current.scrollLeft = 414 * currentIndex; - }, 200); - } - }, [currentIndex]); + useImperativeHandle(ref, () => ({ - show: (arr, index) => { - setCurrentIndex(index); + show: (arr, index, data) => { + defaultIndex.current = index; setImages(arr); - setVisible(old=>{ - console.log(arr, index,old) - return !old + setData(data); + setVisible((old) => { + console.log(arr, index, old); + return !old; }); - + // Mask.show // const maskDomBox = document.getElementById("maskDomBox"); }, @@ -60,73 +59,192 @@ function ImagesMask({}, ref) { } const ImagesMaskContaint = forwardRef( - ({ visible, images, currentIndex,setCurrentIndex,setVisible,setImages }, ref) => { + ( + { visible, images, setVisible, setImages, router, data, defaultIndex = 0 }, + ref + ) => { + const [currentIndex, setCurrentIndex] = useState(0); const [distance, setDistance] = useState(0); + const [direction, setDirection] = useState("left"); + const [initialX, setInitialX] = useState(0); + const [currentX, setCurrentX] = useState(0); + const [xOffset, setXOffset] = useState(0); + const [active, setActive] = useState(false); + const base = baseRequest(); const getDistance = (e) => { e.stopPropagation(); const distance = ref.current.scrollLeft; setDistance(distance); }; - const handleMoveImages = (e, index) => { - e.stopPropagation(); - // console.log("distance",distance) - if ( - distance > window.innerWidth * currentIndex && - distance < window.innerWidth + window.innerWidth * currentIndex - ) { - setCurrentIndex(Math.ceil(distance / 414)); - } else if (distance < window.innerWidth * currentIndex) { - setCurrentIndex(Math.ceil(distance / 414) - 1); + useEffect(() => { + setCurrentIndex(defaultIndex); + setTimeout(() => { + // console.log("ref.current", ref.current); + if (ref.current) { + ref.current.style.transform = `translateX(${ + -window.innerWidth * defaultIndex + }px)`; + } + }, 100); + }, [defaultIndex]); + useEffect(() => { + console.log("ref.current", ref.current); + if (ref.current) { + ref.current.style.transform = `translateX(${ + -window.innerWidth * currentIndex + }px)`; } + }, [currentIndex]); + const test1 = (e) => { + console.log( + e.touches[0].clientX - (!currentIndex ? 0 : xOffset), + e.touches[0].clientX, + xOffset + ); + setInitialX(e.touches[0].clientX - (!currentIndex ? 0 : xOffset)); + if (e.touches.length === 1) { + // 单点触摸 + setActive(true); + } + }; + const test2 = (e) => { + if (active) { + // e.preventDefault(); + let X = + e.touches[0].clientX - + window.innerWidth * (currentIndex ? 1 : currentIndex + 1); + console.log("-----", e.touches[0].clientX, initialX, currentIndex); + setCurrentX((old) => { + setDirection(X > old ? "right" : "left"); + return X; + }); + setXOffset(X); + ref.current.style.transform = "translateX(" + X + "px)"; + } + }; + const test3 = (index) => { + console.log("index", index); + // setInitialX(currentX); + setActive(false); + let cxOffset = window.innerWidth; + console.log(direction, index, images.length - 1); + if (direction == "left") { + if (index < images.length - 1) { + setCurrentIndex(index + 1); + console.log(index + 1); + } else { + ref.current.style.transform = `translateX(${-cxOffset * index}px)`; + } + } else { + if (index > 0) { + setCurrentIndex(index - 1); + console.log(index - 1); + } else { + ref.current.style.transform = `translateX(${-cxOffset * index}px)`; + } + } + setInitialX(currentX); + // setInitialX(-cxOffset * (index + 1)); + setXOffset(-cxOffset * (index || 1)); }; return (
-
-
- {currentIndex + 1}/{images.length} -
-
- {images.map((item, index) => { - return ( - handleMoveImages(e, index)} - onTouchMove={getDistance} - onTouchEnd={(e) => handleMoveImages(e, index)} - onClick={() => { - setVisible(false), setImages([]), setCurrentIndex(0); - }} - /> - ); - })} -
-
-
{ - setCurrentIndex((old) => (old > 0 ? old - 1 : old)); - }} - > - + visible={visible} + className="z-[1002] h-screen flex justify-center items-center" + onMaskClick={() => { + setVisible(false), setImages([]), setCurrentIndex(0); + // root.unmount(); + }} + > +
+
+ {currentIndex + 1}/{images.length}
{ - setCurrentIndex((old) => - old < images.length - 1 ? old + 1 : old - ); + setVisible(false), setImages([]), setCurrentIndex(0); + // root.unmount(); }} > - +
test3(currentIndex)} + > + {images.map((item, index) => { + return ( +
+ +
+ {item.type == "hid" && ( +
+
{ + router.push( + "/webView/" + + encodeURIComponent( + "/zone/pay/" + + data?.zid + + "/h5_zone_moment/" + + data?.id + + "?base=" + + encodeURIComponent(JSON.stringify(base)) + ) + ); + }} + > + 此内容暂未解锁，立即解锁 +
+
+ )} +
+
+ ); + })} +
+
+
+
{ + setCurrentIndex((old) => (old > 0 ? old - 1 : old)); + }} + > + +
+
{ + setCurrentIndex((old) => + old < images.length - 1 ? old + 1 : old + ); + setInitialX((currentIndex || 1) * window.innerWidth * 2); + }} + > + +
-
- +
); } diff --git a/components/Photos/index.js b/components/Photos/index.js index 9e5f922..a696323 100644 --- a/components/Photos/index.js +++ b/components/Photos/index.js @@ -8,7 +8,7 @@ import { useRouter } from "next/navigation"; import baseRequest from "@/utils/baseRequest"; import { handleShowVideo } from "@/utils/tools/handleFuns"; // import dynamic from 'next/dynamic' -// import ImagesMask from "@/components/ImagesMask"; +import ImagesMask from "@/components/ImagesMask"; // const ImagesMask = dynamic(() => // import('@/components/ImagesMask'), { ssr: false } // ) @@ -84,15 +84,15 @@ export default function Photos({ }, []); const showPhotos = (photos, index) => { currentIndex.current = index; - const interval = setInterval(() => { - const bodyBox = document.getElementsByClassName("photos-bodyBox")[0]; - if (bodyBox) { - bodyBox.firstChild.lastChild.style.transform = `translateX(-${ - currentIndex.current * (window.innerWidth + 16) - }px)`; - // console.log(bodyBox.firstChild.lastChild.style.transform); - } - }, 400); + // const interval = setInterval(() => { + // const bodyBox = document.getElementsByClassName("photos-bodyBox")[0]; + // if (bodyBox) { + // bodyBox.firstChild.lastChild.style.transform = `translateX(-${ + // currentIndex.current * (window.innerWidth + 16) + // }px)`; + // // console.log(bodyBox.firstChild.lastChild.style.transform); + // } + // }, 400); // 添加左右切换按钮 // const btns = document.createElement("div"); @@ -129,65 +129,62 @@ export default function Photos({ // }); // btns.append(btnL, btnR); // handleShowImages(index, photos, btns,interval); - handleShowImages(index, photos, interval); + // handleShowImages(index, photos, interval); // setVisible(true) - // console.log(imagesMaskRef.current); - // imagesMaskRef.current.show( - // photos.map((item) => item?.url), - // index - // ); + console.log(imagesMaskRef.current, photos); + imagesMaskRef.current.show(photos, index, data); }; - const handleShowImages = (index, photos, interval) => { - const mediaDom = document.createElement("div"); - mediaDom.style.width = "100vw"; - document.body.appendChild(mediaDom); - mediaDom.className = `${ - photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom" - }`; - // mediaDom.appendChild(btns); - document.body.style.overflow = "hidden"; - ImageViewer.clear(); - ImageViewer.Multi.show({ - images: photos.map((item) => item?.url), - defaultIndex: index, - renderFooter: (image, index) => { - return renderFooter(photos[index]?.type == "hid", mediaDom); - }, + // const handleShowImages = (index, photos, interval) => { + // const mediaDom = document.createElement("div"); + // mediaDom.style.width = "100vw"; + // document.body.appendChild(mediaDom); + // mediaDom.className = `${ + // photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom" + // }`; + // // mediaDom.appendChild(btns); + // document.body.style.overflow = "hidden"; + // ImageViewer.clear(); + // ImageViewer.Multi.show({ + // images: photos.map((item) => item?.url), + // defaultIndex: index, + // renderFooter: (image, index) => { + // return renderFooter(photos[index]?.type == "hid", mediaDom); + // }, - getContainer: mediaDom, - onIndexChange: (index) => { - currentIndex.current = index; - mediaDom.className = `${ - photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom" - }`; - const leftBtn = document.getElementsByClassName( - "imagesBtnsControllerLeft" - )[0]; - const rightBtn = document.getElementsByClassName( - "imagesBtnsControllerRight" - )[0]; - if (leftBtn && rightBtn) { - if (!index) { - leftBtn.style.opacity = 0.5; - rightBtn.style.opacity = 1; - } else if (index == currentPhotos.length - 1) { - leftBtn.style.opacity = 1; - rightBtn.style.opacity = 0.5; - } else { - leftBtn.style.opacity = 1; - rightBtn.style.opacity = 1; - } - } - }, - afterClose: () => { - mediaDom.remove(); - clearInterval(interval); - document.body.style.overflow = "auto"; - }, - classNames: { body: "photos-bodyBox" }, - }); - }; + // getContainer: mediaDom, + // onIndexChange: (index) => { + // currentIndex.current = index; + // mediaDom.className = `${ + // photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom" + // }`; + // const leftBtn = document.getElementsByClassName( + // "imagesBtnsControllerLeft" + // )[0]; + // const rightBtn = document.getElementsByClassName( + // "imagesBtnsControllerRight" + // )[0]; + // if (leftBtn && rightBtn) { + // if (!index) { + // leftBtn.style.opacity = 0.5; + // rightBtn.style.opacity = 1; + // } else if (index == currentPhotos.length - 1) { + // leftBtn.style.opacity = 1; + // rightBtn.style.opacity = 0.5; + // } else { + // leftBtn.style.opacity = 1; + // rightBtn.style.opacity = 1; + // } + // } + // }, + // afterClose: () => { + // mediaDom.remove(); + // clearInterval(interval); + // document.body.style.overflow = "auto"; + // }, + // classNames: { body: "photos-bodyBox" }, + // }); + // }; const handleSeeAllPhotos = (e) => { e.stopPropagation(); e.preventDefault(); @@ -343,7 +340,7 @@ export default function Photos({ ); })}
- {/* */} + {/* { setVisible(false); } } From 92c5f9d7f515eadcbd26cd4707c7a001b480488d Mon Sep 17 00:00:00 2001 From: al Date: Thu, 15 Aug 2024 20:29:15 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=B5=8F=E8=A7=88?= =?UTF-8?q?=E5=A4=9A=E5=9B=BE=E5=8A=9F=E8=83=BD=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/globals.css | 10 +++ app/layout.js | 32 +++++++- components/ImagesMask/index.jsx | 136 +++++++++++++++++++------------- 3 files changed, 118 insertions(+), 60 deletions(-) diff --git a/app/globals.css b/app/globals.css index 3afdcf4..4b04e80 100644 --- a/app/globals.css +++ b/app/globals.css @@ -29,6 +29,16 @@ footer{ --background-end-rgb: 0, 0, 0; } } */ +* { + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE/Edge */ + user-select: none; /* 标准语法 */ +} +img{ + pointer-events: none; +} + @media only screen and (min-device-width: 320px) and (max-device-width: 1024px) { select:focus, textarea:focus, input:focus { font-size: 16px !important; diff --git a/app/layout.js b/app/layout.js index e505cc1..57c44ed 100644 --- a/app/layout.js +++ b/app/layout.js @@ -33,7 +33,32 @@ const metadata = { // }; export default function RootLayout({ children }) { const pathname = usePathname(); - useEffect(()=>{ + useEffect(() => { + // 禁止双指放大 + window.onload = function () { + document.addEventListener("touchstart", function (event) { + if (event.touches.length > 1) { + event.preventDefault(); + } + }); + var lastTouchEnd = 0; + document.addEventListener( + "touchend", + function (event) { + var now = new Date().getTime(); + if (now - lastTouchEnd <= 300) { + event.preventDefault(); + } + lastTouchEnd = now; + }, + false + ); + document.addEventListener("gesturestart", function (event) { + event.preventDefault(); + }); + }; + }, []); + useEffect(() => { const timer = setTimeout(() => { window.scrollTo({ top: 0, @@ -42,7 +67,7 @@ export default function RootLayout({ children }) { }); clearTimeout(timer); }, 100); - },[pathname]) + }, [pathname]); return ( + {/* */} @@ -200,7 +226,7 @@ export default function RootLayout({ children }) {
-
+
{withAuth(
diff --git a/components/ImagesMask/index.jsx b/components/ImagesMask/index.jsx index 7c99016..d61120d 100644 --- a/components/ImagesMask/index.jsx +++ b/components/ImagesMask/index.jsx @@ -9,7 +9,11 @@ import React, { } from "react"; import { Mask, Image } 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"; @@ -45,7 +49,7 @@ function ImagesMask({}, ref) { setImages(arr); setData(data); setVisible((old) => { - console.log(arr, index, old); + // console.log(arr, index, old); return !old; }); @@ -64,31 +68,25 @@ const ImagesMaskContaint = forwardRef( ref ) => { const [currentIndex, setCurrentIndex] = useState(0); - const [distance, setDistance] = useState(0); const [direction, setDirection] = useState("left"); const [initialX, setInitialX] = useState(0); - const [currentX, setCurrentX] = useState(0); const [xOffset, setXOffset] = useState(0); const [active, setActive] = useState(false); const base = baseRequest(); - const getDistance = (e) => { - e.stopPropagation(); - const distance = ref.current.scrollLeft; - setDistance(distance); - }; + const directionX = useRef(0); + // const getDistance = (e) => { + // e.stopPropagation(); + // const distance = ref.current.scrollLeft; + // setDistance(distance); + // }; useEffect(() => { - setCurrentIndex(defaultIndex); - setTimeout(() => { - // console.log("ref.current", ref.current); - if (ref.current) { - ref.current.style.transform = `translateX(${ - -window.innerWidth * defaultIndex - }px)`; - } - }, 100); + // setCurrentIndex(defaultIndex); + // test3(defaultIndex - 1, "left"); + if (defaultIndex) { + test3(defaultIndex - 1, "left"); + } }, [defaultIndex]); useEffect(() => { - console.log("ref.current", ref.current); if (ref.current) { ref.current.style.transform = `translateX(${ -window.innerWidth * currentIndex @@ -96,11 +94,6 @@ const ImagesMaskContaint = forwardRef( } }, [currentIndex]); const test1 = (e) => { - console.log( - e.touches[0].clientX - (!currentIndex ? 0 : xOffset), - e.touches[0].clientX, - xOffset - ); setInitialX(e.touches[0].clientX - (!currentIndex ? 0 : xOffset)); if (e.touches.length === 1) { // 单点触摸 @@ -109,55 +102,69 @@ const ImagesMaskContaint = forwardRef( }; const test2 = (e) => { if (active) { - // e.preventDefault(); - let X = - e.touches[0].clientX - - window.innerWidth * (currentIndex ? 1 : currentIndex + 1); - console.log("-----", e.touches[0].clientX, initialX, currentIndex); - setCurrentX((old) => { - setDirection(X > old ? "right" : "left"); - return X; - }); - setXOffset(X); + let X = e.touches[0].clientX - initialX; + setDirection( + directionX.current > e.touches[0].clientX ? "left" : "right" + ); ref.current.style.transform = "translateX(" + X + "px)"; + directionX.current = e.touches[0].clientX; } }; - const test3 = (index) => { - console.log("index", index); - // setInitialX(currentX); + const test3 = (index, currentDirection) => { setActive(false); let cxOffset = window.innerWidth; - console.log(direction, index, images.length - 1); - if (direction == "left") { + if (currentDirection == "left") { if (index < images.length - 1) { setCurrentIndex(index + 1); - console.log(index + 1); } else { ref.current.style.transform = `translateX(${-cxOffset * index}px)`; } } else { if (index > 0) { setCurrentIndex(index - 1); - console.log(index - 1); } else { ref.current.style.transform = `translateX(${-cxOffset * index}px)`; } } - setInitialX(currentX); - // setInitialX(-cxOffset * (index + 1)); - setXOffset(-cxOffset * (index || 1)); + // setInitialX(currentX); + setInitialX(-cxOffset * (index + (currentDirection == "left" ? 1 : -1))); + if (currentDirection == "left" && index > images.length - 2) return; + 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) => { + var a = document.createElement("a"); + a.href = URL.createObjectURL(blob); + a.download = randomNum + ".jpg"; + a.click(); + }); + } return (
{ - setVisible(false), setImages([]), setCurrentIndex(0); + setVisible(false), setImages([]), setCurrentIndex(null); // root.unmount(); }} + color="#000000d9" >
+ {images[currentIndex]?.type != "hid" && ( +
downloadImage(images[currentIndex]?.url)} + className="z-50 flex justify-center items-center w-[38px] h-[38px] bg-[#ffffff1a] text-[#fff] rounded-full absolute top-[12px] left-[12px]" + > + +
+ )}
{currentIndex + 1}/{images.length}
@@ -165,28 +172,45 @@ const ImagesMaskContaint = forwardRef( className="flex justify-start items-center" style={{ height: "calc(100vh - 174px)" }} onClick={() => { - setVisible(false), setImages([]), setCurrentIndex(0); + setVisible(false), setImages([]), setCurrentIndex(null); // root.unmount(); }} >
test3(currentIndex)} + onTouchStart={test1} + onTouchMove={test2} + onTouchEnd={() => test3(currentIndex, direction)} > {images.map((item, index) => { return ( -
- + {/* */} +
+ } /> +
{item.type == "hid" && (
@@ -221,12 +245,13 @@ const ImagesMaskContaint = forwardRef( style={{ marginTop: "calc(-50vh + 118px)", height: "calc(100vh - 174px)", + visibility: images.length > 1 ? "visible" : "hidden", }} >
{ - setCurrentIndex((old) => (old > 0 ? old - 1 : old)); + test3(currentIndex, "right"); }} > @@ -234,10 +259,7 @@ const ImagesMaskContaint = forwardRef(
{ - setCurrentIndex((old) => - old < images.length - 1 ? old + 1 : old - ); - setInitialX((currentIndex || 1) * window.innerWidth * 2); + test3(currentIndex, "left"); }} >