禁止浏览器默认左滑
This commit is contained in:
al
parent
e4643cf358
commit
d4c45a6dd1
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
<div>
|
||||
|
|
@ -38,6 +40,8 @@ function ImagesMask({}, ref) {
|
|||
/>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
body.style.touchAction = "auto";
|
||||
}
|
||||
|
||||
// root.render(<div>xxxx</div>);
|
||||
|
|
@ -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 (
|
||||
<div>
|
||||
<Mask
|
||||
visible={visible}
|
||||
className="z-[1002] h-screen flex justify-center items-center"
|
||||
onMaskClick={() => {
|
||||
setVisible(false), setImages([]), setCurrentIndex(null);
|
||||
root.unmount();
|
||||
}}
|
||||
color="#000000d9"
|
||||
>
|
||||
<div className="relative">
|
||||
{images[currentIndex]?.type != "hid" && (
|
||||
<div
|
||||
className="z-50 flex justify-between items-center absolute top-[12px] left-[12px]"
|
||||
style={{ width: "calc(100% - 24px)" }}
|
||||
>
|
||||
<div>
|
||||
{/* <div
|
||||
<Mask
|
||||
destroyOnClose={false}
|
||||
visible={visible}
|
||||
className="z-[1002] h-screen flex justify-center items-center"
|
||||
onMaskClick={() => {
|
||||
setVisible(false), setImages([]), setCurrentIndex(null);
|
||||
root.unmount();
|
||||
}}
|
||||
color="#000000d9"
|
||||
>
|
||||
<div className="relative">
|
||||
{images[currentIndex]?.type != "hid" && (
|
||||
<div
|
||||
className="z-50 flex justify-between items-center absolute top-[12px] left-[12px]"
|
||||
style={{ width: "calc(100% - 24px)" }}
|
||||
>
|
||||
<div>
|
||||
{/* <div
|
||||
onClick={() => downloadImage(images[currentIndex]?.url)}
|
||||
className="flex justify-center items-center w-[38px] h-[38px] bg-[#ffffff1a] text-[#fff] rounded-full"
|
||||
>
|
||||
<FontAwesomeIcon icon={faDownload} size="xl" />
|
||||
</div> */}
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
onClick={() => {
|
||||
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 ? (
|
||||
<svg
|
||||
t="1723822459763"
|
||||
className="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="4557"
|
||||
width="24"
|
||||
height="24"
|
||||
>
|
||||
<path
|
||||
d="M919.264 905.984l-138.912-138.912C851.808 692.32 896 591.328 896 480c0-229.376-186.624-416-416-416S64 250.624 64 480s186.624 416 416 416c95.008 0 182.432-32.384 252.544-86.208l141.44 141.44a31.904 31.904 0 0 0 45.248 0 32 32 0 0 0 0.032-45.248zM128 480C128 285.92 285.92 128 480 128s352 157.92 352 352-157.92 352-352 352S128 674.08 128 480z"
|
||||
p-id="4558"
|
||||
fill="#ffffff"
|
||||
></path>
|
||||
<path
|
||||
d="M625.792 448H512v-112a32 32 0 0 0-64 0V448h-112a32 32 0 0 0 0 64H448v112a32 32 0 1 0 64 0V512h113.792a32 32 0 1 0 0-64z"
|
||||
p-id="4559"
|
||||
fill="#ffffff"
|
||||
></path>
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
t="1723822428728"
|
||||
className="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="4379"
|
||||
width="24"
|
||||
height="24"
|
||||
>
|
||||
<path
|
||||
d="M919.264 905.984l-138.912-138.912C851.808 692.32 896 591.328 896 480c0-229.376-186.624-416-416-416S64 250.624 64 480s186.624 416 416 416c95.008 0 182.432-32.384 252.544-86.208l141.44 141.44a31.904 31.904 0 0 0 45.248 0 32 32 0 0 0 0.032-45.248zM128 480C128 285.92 285.92 128 480 128s352 157.92 352 352-157.92 352-352 352S128 674.08 128 480z"
|
||||
p-id="4380"
|
||||
fill="#ffffff"
|
||||
></path>
|
||||
<path
|
||||
d="M625.792 448H336a32 32 0 0 0 0 64h289.792a32 32 0 1 0 0-64z"
|
||||
p-id="4381"
|
||||
fill="#ffffff"
|
||||
></path>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
onClick={() => {
|
||||
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 ? (
|
||||
<svg
|
||||
t="1723822459763"
|
||||
className="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="4557"
|
||||
width="24"
|
||||
height="24"
|
||||
>
|
||||
<path
|
||||
d="M919.264 905.984l-138.912-138.912C851.808 692.32 896 591.328 896 480c0-229.376-186.624-416-416-416S64 250.624 64 480s186.624 416 416 416c95.008 0 182.432-32.384 252.544-86.208l141.44 141.44a31.904 31.904 0 0 0 45.248 0 32 32 0 0 0 0.032-45.248zM128 480C128 285.92 285.92 128 480 128s352 157.92 352 352-157.92 352-352 352S128 674.08 128 480z"
|
||||
p-id="4558"
|
||||
fill="#ffffff"
|
||||
></path>
|
||||
<path
|
||||
d="M625.792 448H512v-112a32 32 0 0 0-64 0V448h-112a32 32 0 0 0 0 64H448v112a32 32 0 1 0 64 0V512h113.792a32 32 0 1 0 0-64z"
|
||||
p-id="4559"
|
||||
fill="#ffffff"
|
||||
></path>
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
t="1723822428728"
|
||||
className="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="4379"
|
||||
width="24"
|
||||
height="24"
|
||||
>
|
||||
<path
|
||||
d="M919.264 905.984l-138.912-138.912C851.808 692.32 896 591.328 896 480c0-229.376-186.624-416-416-416S64 250.624 64 480s186.624 416 416 416c95.008 0 182.432-32.384 252.544-86.208l141.44 141.44a31.904 31.904 0 0 0 45.248 0 32 32 0 0 0 0.032-45.248zM128 480C128 285.92 285.92 128 480 128s352 157.92 352 352-157.92 352-352 352S128 674.08 128 480z"
|
||||
p-id="4380"
|
||||
fill="#ffffff"
|
||||
></path>
|
||||
<path
|
||||
d="M625.792 448H336a32 32 0 0 0 0 64h289.792a32 32 0 1 0 0-64z"
|
||||
p-id="4381"
|
||||
fill="#ffffff"
|
||||
></path>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="text-center mb-2 leading-[54px]">
|
||||
{currentIndex + 1}/{images.length}
|
||||
</div>
|
||||
)}
|
||||
<div className="text-center mb-2 leading-[54px]">
|
||||
{currentIndex + 1}/{images.length}
|
||||
</div>
|
||||
<div
|
||||
className="flex justify-start items-center"
|
||||
style={{ height: "calc(100vh - 174px)" }}
|
||||
onClick={() => {
|
||||
setVisible(false), setImages([]), setCurrentIndex(null);
|
||||
root.unmount();
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="flex justify-start items-center"
|
||||
style={{ height: "calc(100vh - 174px)" }}
|
||||
onClick={() => {
|
||||
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)}
|
||||
>
|
||||
<div
|
||||
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)}
|
||||
>
|
||||
{images.map((item, index) => {
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="flex-none w-screen relative h-full"
|
||||
// onDoubleClick={() => {
|
||||
// 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`;
|
||||
// }}
|
||||
>
|
||||
{/* <img
|
||||
{images.map((item, index) => {
|
||||
return (
|
||||
<div
|
||||
draggable={true}
|
||||
key={index}
|
||||
className="flex-none w-screen relative h-full"
|
||||
// onDoubleClick={() => {
|
||||
// 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`;
|
||||
// }}
|
||||
>
|
||||
{/* <img
|
||||
src={item.url}
|
||||
className="h-full m-auto"
|
||||
style={{
|
||||
filter: item.type == "hid" ? "blur(10px)" : "none",
|
||||
}}
|
||||
/> */}
|
||||
<Image
|
||||
className="h-full m-auto"
|
||||
src={item.url}
|
||||
style={{
|
||||
filter: item.type == "hid" ? "blur(10px)" : "none",
|
||||
}}
|
||||
// draggable={true}
|
||||
height={"100%"}
|
||||
fit="contain"
|
||||
placeholder={
|
||||
<div className="w-full h-full min-h-96 bg-[#1d1d1d] rounded"></div>
|
||||
}
|
||||
/>
|
||||
<Image
|
||||
draggable={true}
|
||||
className="h-full m-auto"
|
||||
src={item.url}
|
||||
style={{
|
||||
filter: item.type == "hid" ? "blur(10px)" : "none",
|
||||
}}
|
||||
// draggable={true}
|
||||
height={"100%"}
|
||||
fit="contain"
|
||||
placeholder={
|
||||
<div className="w-full h-full min-h-96 bg-[#1d1d1d] rounded"></div>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="absolute top-1/2 left-1/2 -ml-[100px] -mt-[14px]">
|
||||
{item.type == "hid" && (
|
||||
<div className="flex justify-center">
|
||||
<div
|
||||
className="rounded-full text-sm h-max w-max px-4 py-1 bg-primary"
|
||||
onClick={() => {
|
||||
router.push(
|
||||
"/webView/" +
|
||||
encodeURIComponent(
|
||||
"/zone/pay/" +
|
||||
data?.zid +
|
||||
"/h5_zone_moment/" +
|
||||
data?.id +
|
||||
"?base=" +
|
||||
encodeURIComponent(JSON.stringify(base))
|
||||
)
|
||||
);
|
||||
}}
|
||||
>
|
||||
此内容暂未解锁，立即解锁
|
||||
</div>
|
||||
<div className="absolute top-1/2 left-1/2 -ml-[100px] -mt-[14px]">
|
||||
{item.type == "hid" && (
|
||||
<div className="flex justify-center">
|
||||
<div
|
||||
className="rounded-full text-sm h-max w-max px-4 py-1 bg-primary"
|
||||
onClick={() => {
|
||||
router.push(
|
||||
"/webView/" +
|
||||
encodeURIComponent(
|
||||
"/zone/pay/" +
|
||||
data?.zid +
|
||||
"/h5_zone_moment/" +
|
||||
data?.id +
|
||||
"?base=" +
|
||||
encodeURIComponent(JSON.stringify(base))
|
||||
)
|
||||
);
|
||||
}}
|
||||
>
|
||||
此内容暂未解锁，立即解锁
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="flex justify-between items-center w-screen absolute top-1/2 px-4 pointer-events-none"
|
||||
style={{
|
||||
marginTop: "calc(-50vh + 118px)",
|
||||
height: "calc(100vh - 174px)",
|
||||
visibility: images.length > 1 ? "visible" : "hidden",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="w-12 h-full flex items-center justify-center rounded-full float-left pointer-events-auto"
|
||||
onClick={() => {
|
||||
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);
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faAngleLeft}
|
||||
size="xl"
|
||||
style={{ maxWidth: "12px" }}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="w-12 h-full flex items-center justify-center rounded-full float-left pointer-events-auto"
|
||||
onClick={() => {
|
||||
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);
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faAngleRight}
|
||||
size="xl"
|
||||
style={{ maxWidth: "12px" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</Mask>
|
||||
</div>
|
||||
<div
|
||||
className="flex justify-between items-center w-screen absolute top-1/2 px-4 pointer-events-none"
|
||||
style={{
|
||||
marginTop: "calc(-50vh + 118px)",
|
||||
height: "calc(100vh - 174px)",
|
||||
visibility: images.length > 1 ? "visible" : "hidden",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="w-12 h-full flex items-center justify-center rounded-full float-left pointer-events-auto"
|
||||
onClick={() => {
|
||||
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);
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faAngleLeft}
|
||||
size="xl"
|
||||
style={{ maxWidth: "12px" }}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="w-12 h-full flex items-center justify-center rounded-full float-left pointer-events-auto"
|
||||
onClick={() => {
|
||||
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);
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faAngleRight}
|
||||
size="xl"
|
||||
style={{ maxWidth: "12px" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Mask>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue