From 0e6938f5a4ccdb8a468fd4b13c6886fec56a2b1f Mon Sep 17 00:00:00 2001 From: al Date: Wed, 14 Aug 2024 19:59:03 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=9C=8B=E5=9B=BE=E5=8A=9F?= =?UTF-8?q?=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); } }