diff --git a/app/globals.css b/app/globals.css index 102cd03..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; @@ -245,7 +255,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/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 e12354a..d61120d 100644 --- a/components/ImagesMask/index.jsx +++ b/components/ImagesMask/index.jsx @@ -9,47 +9,50 @@ 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"; 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 +63,210 @@ function ImagesMask({}, ref) { } const ImagesMaskContaint = forwardRef( - ({ visible, images, currentIndex,setCurrentIndex,setVisible,setImages }, ref) => { - const [distance, setDistance] = useState(0); - 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); + ( + { visible, images, setVisible, setImages, router, data, defaultIndex = 0 }, + ref + ) => { + const [currentIndex, setCurrentIndex] = useState(0); + const [direction, setDirection] = useState("left"); + const [initialX, setInitialX] = useState(0); + const [xOffset, setXOffset] = useState(0); + const [active, setActive] = useState(false); + const base = baseRequest(); + const directionX = useRef(0); + // const getDistance = (e) => { + // e.stopPropagation(); + // const distance = ref.current.scrollLeft; + // setDistance(distance); + // }; + useEffect(() => { + // setCurrentIndex(defaultIndex); + // test3(defaultIndex - 1, "left"); + if (defaultIndex) { + test3(defaultIndex - 1, "left"); + } + }, [defaultIndex]); + useEffect(() => { + if (ref.current) { + ref.current.style.transform = `translateX(${ + -window.innerWidth * currentIndex + }px)`; + } + }, [currentIndex]); + const test1 = (e) => { + setInitialX(e.touches[0].clientX - (!currentIndex ? 0 : xOffset)); + if (e.touches.length === 1) { + // 单点触摸 + setActive(true); } }; + const test2 = (e) => { + if (active) { + 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, currentDirection) => { + setActive(false); + let cxOffset = window.innerWidth; + if (currentDirection == "left") { + if (index < images.length - 1) { + setCurrentIndex(index + 1); + } else { + ref.current.style.transform = `translateX(${-cxOffset * index}px)`; + } + } else { + if (index > 0) { + setCurrentIndex(index - 1); + } else { + ref.current.style.transform = `translateX(${-cxOffset * index}px)`; + } + } + // 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 (
-
-
- {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(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}
{ - setCurrentIndex((old) => - old < images.length - 1 ? old + 1 : old - ); + setVisible(false), setImages([]), setCurrentIndex(null); + // root.unmount(); }} > - +
test3(currentIndex, direction)} + > + {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)) + ) + ); + }} + > + 此内容暂未解锁，立即解锁 +
+
+ )} +
+
+ ); + })} +
+
+
1 ? "visible" : "hidden", + }} + > +
{ + test3(currentIndex, "right"); + }} + > + +
+
{ + test3(currentIndex, "left"); + }} + > + +
-
- +
); } 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); } }