From d4c45a6dd1a0e4170a2efcf02f6ee7b536f9d5b6 Mon Sep 17 00:00:00 2001 From: al Date: Wed, 21 Aug 2024 16:15:35 +0800 Subject: [PATCH] =?UTF-8?q?=E7=A6=81=E6=AD=A2=E6=B5=8F=E8=A7=88=E5=99=A8?= =?UTF-8?q?=E9=BB=98=E8=AE=A4=E5=B7=A6=E6=BB=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/AddWeChat/index.js | 6 +- components/ImagesMask/index.jsx | 427 ++++++++++++++++---------------- components/Photos/index.js | 2 +- 3 files changed, 223 insertions(+), 212 deletions(-) diff --git a/components/AddWeChat/index.js b/components/AddWeChat/index.js index 10c2c45..69a11ff 100644 --- a/components/AddWeChat/index.js +++ b/components/AddWeChat/index.js @@ -85,7 +85,11 @@ export default function AddWeChat({ }); return; } - if (userWechat.match(/wxid_|[\u4e00-\u9fa5]/g)) { + if ( + userWechat.match( + /wxid_|[\u4e00-\u9fa5]|[\u3002|\uff1f|\uff01|\uff0c|\u3001|\uff1b|\uff1a|\u201c|\u201d|\u2018|\u2019|\uff08|\uff09|\u300a|\u300b|\u3010|\u3011|\u007e]/g + ) + ) { Toast.show({ content: "请提交可被搜索的有效微信", position: "top", diff --git a/components/ImagesMask/index.jsx b/components/ImagesMask/index.jsx index 7108612..ea5532d 100644 --- a/components/ImagesMask/index.jsx +++ b/components/ImagesMask/index.jsx @@ -21,7 +21,9 @@ function ImagesMask({}, ref) { 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(
@@ -38,6 +40,8 @@ function ImagesMask({}, ref) { />
); + } else { + body.style.touchAction = "auto"; } // root.render(
xxxx
); @@ -193,12 +197,14 @@ const ImagesMaskContaint = forwardRef( if (index < images.length - 1) { setCurrentIndex(index + 1); } else { + // setCurrentIndex(0); ref.current.style.transform = `translateX(${-cxOffset * index}px)`; } } else { if (index > 0) { setCurrentIndex(index - 1); } else { + // setCurrentIndex(images.length - 1); ref.current.style.transform = `translateX(${-cxOffset * index}px)`; } } @@ -230,237 +236,238 @@ const ImagesMaskContaint = forwardRef( } return ( -
- { - setVisible(false), setImages([]), setCurrentIndex(null); - root.unmount(); - }} - color="#000000d9" - > -
- {images[currentIndex]?.type != "hid" && ( -
-
- {/*
{ + setVisible(false), setImages([]), setCurrentIndex(null); + root.unmount(); + }} + color="#000000d9" + > +
+ {images[currentIndex]?.type != "hid" && ( +
+
+ {/*
downloadImage(images[currentIndex]?.url)} className="flex justify-center items-center w-[38px] h-[38px] bg-[#ffffff1a] text-[#fff] rounded-full" >
*/} -
-
-
{ - setZoomed(!zoomed); - setActive(false); - ref.current.children[currentIndex].style.transform = - "matrix(" + - (zoomed ? 1 : 3) + - ", 0, 0, " + - (zoomed ? 1 : 3) + - ", 0, 0)"; - ref.current.children[currentIndex].style.left = `0px`; - ref.current.children[currentIndex].style.top = `0px`; - }} - className="flex justify-center items-center w-[38px] h-[38px] bg-[#ffffff1a] text-[#fff] rounded-full" - > - {!zoomed ? ( - - - - - ) : ( - - - - - )} -
+
+
+
{ + setZoomed(!zoomed); + setActive(false); + ref.current.children[currentIndex].style.transform = + "matrix(" + + (zoomed ? 1 : 3) + + ", 0, 0, " + + (zoomed ? 1 : 3) + + ", 0, 0)"; + ref.current.children[currentIndex].style.left = `0px`; + ref.current.children[currentIndex].style.top = `0px`; + }} + className="flex justify-center items-center w-[38px] h-[38px] bg-[#ffffff1a] text-[#fff] rounded-full" + > + {!zoomed ? ( + + + + + ) : ( + + + + + )}
- )} -
- {currentIndex + 1}/{images.length}
+ )} +
+ {currentIndex + 1}/{images.length} +
+
{ + setVisible(false), setImages([]), setCurrentIndex(null); + root.unmount(); + }} + >
{ - setVisible(false), setImages([]), setCurrentIndex(null); - root.unmount(); - }} + ref={ref} + id="imagesScrollBox" + className="flex justify-center items-center transition-transform duration-300 h-full relative" + draggable={true} + onTouchStart={test1} + onTouchMove={test2} + onTouchEnd={() => test3(currentIndex, direction)} > -
test3(currentIndex, direction)} - > - {images.map((item, index) => { - return ( -
{ - // setZoomed(!zoomed); - // ref.current.children[0].style.transform = - // "matrix(" + zoomed - // ? 1 - // : 3 + ", 0, 0, " + zoomed - // ? 1 - // : 3 + ", 0, 0)"; - // ref.current.style.left = `0px`; - // ref.current.style.top = `0px`; - // }} - > - {/* { + return ( +
{ + // setZoomed(!zoomed); + // ref.current.children[0].style.transform = + // "matrix(" + zoomed + // ? 1 + // : 3 + ", 0, 0, " + zoomed + // ? 1 + // : 3 + ", 0, 0)"; + // ref.current.style.left = `0px`; + // ref.current.style.top = `0px`; + // }} + > + {/* */} -
- } - /> +
+ } + /> -
- {item.type == "hid" && ( -
-
{ - router.push( - "/webView/" + - encodeURIComponent( - "/zone/pay/" + - data?.zid + - "/h5_zone_moment/" + - data?.id + - "?base=" + - encodeURIComponent(JSON.stringify(base)) - ) - ); - }} - > - 此内容暂未解锁，立即解锁 -
+
+ {item.type == "hid" && ( +
+
{ + router.push( + "/webView/" + + encodeURIComponent( + "/zone/pay/" + + data?.zid + + "/h5_zone_moment/" + + data?.id + + "?base=" + + encodeURIComponent(JSON.stringify(base)) + ) + ); + }} + > + 此内容暂未解锁，立即解锁
- )} -
+
+ )}
- ); - })} -
-
-
1 ? "visible" : "hidden", - }} - > -
{ - setActive(true); - setZoomed(false); - setInitialMoveX(0); - setInitialMoveY(0); - setXOffsetMove(0); - setYOffsetMove(0); - ref.current.children[currentIndex].style.transform = - "matrix(1, 0, 0, 1, 0, 0)"; - ref.current.children[currentIndex].style.left = `0px`; - ref.current.children[currentIndex].style.top = `0px`; - test3(currentIndex, "right", true); - }} - > - -
-
{ - setZoomed(false); - setInitialMoveX(0); - setInitialMoveY(0); - setXOffsetMove(0); - setYOffsetMove(0); - ref.current.children[currentIndex].style.transform = - "matrix(1, 0, 0, 1, 0, 0)"; - ref.current.children[currentIndex].style.left = `0px`; - ref.current.children[currentIndex].style.top = `0px`; - test3(currentIndex, "left", true); - }} - > - -
+
+ ); + })}
- -
+
1 ? "visible" : "hidden", + }} + > +
{ + setActive(true); + setZoomed(false); + setInitialMoveX(0); + setInitialMoveY(0); + setXOffsetMove(0); + setYOffsetMove(0); + ref.current.children[currentIndex].style.transform = + "matrix(1, 0, 0, 1, 0, 0)"; + ref.current.children[currentIndex].style.left = `0px`; + ref.current.children[currentIndex].style.top = `0px`; + test3(currentIndex, "right", true); + }} + > + +
+
{ + setZoomed(false); + setInitialMoveX(0); + setInitialMoveY(0); + setXOffsetMove(0); + setYOffsetMove(0); + ref.current.children[currentIndex].style.transform = + "matrix(1, 0, 0, 1, 0, 0)"; + ref.current.children[currentIndex].style.left = `0px`; + ref.current.children[currentIndex].style.top = `0px`; + test3(currentIndex, "left", true); + }} + > + +
+
+
+ ); } ); diff --git a/components/Photos/index.js b/components/Photos/index.js index 3a3da7b..b6979f9 100644 --- a/components/Photos/index.js +++ b/components/Photos/index.js @@ -132,7 +132,7 @@ export default function Photos({ // handleShowImages(index, photos, interval); // setVisible(true) - console.log(imagesMaskRef.current, photos); + // console.log(imagesMaskRef.current, photos); imagesMaskRef.current.show(photos, index, data); }; // const handleShowImages = (index, photos, interval) => {