禁止浏览器默认左滑
This commit is contained in:
al
parent
e4643cf358
commit
d4c45a6dd1
|
|
@ -85,7 +85,11 @@ export default function AddWeChat({
|
||||||
});
|
});
|
||||||
return;
|
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({
|
Toast.show({
|
||||||
content: "请提交可被搜索的有效微信",
|
content: "请提交可被搜索的有效微信",
|
||||||
position: "top",
|
position: "top",
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,9 @@ function ImagesMask({}, ref) {
|
||||||
const defaultIndex = useRef(null);
|
const defaultIndex = useRef(null);
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
let body = document.body;
|
||||||
if (visible) {
|
if (visible) {
|
||||||
|
body.style.touchAction = "none";
|
||||||
const root = createRoot(document?.getElementById("maskDomBox"));
|
const root = createRoot(document?.getElementById("maskDomBox"));
|
||||||
root.render(
|
root.render(
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -38,6 +40,8 @@ function ImagesMask({}, ref) {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
} else {
|
||||||
|
body.style.touchAction = "auto";
|
||||||
}
|
}
|
||||||
|
|
||||||
// root.render(<div>xxxx</div>);
|
// root.render(<div>xxxx</div>);
|
||||||
|
|
@ -193,12 +197,14 @@ const ImagesMaskContaint = forwardRef(
|
||||||
if (index < images.length - 1) {
|
if (index < images.length - 1) {
|
||||||
setCurrentIndex(index + 1);
|
setCurrentIndex(index + 1);
|
||||||
} else {
|
} else {
|
||||||
|
// setCurrentIndex(0);
|
||||||
ref.current.style.transform = `translateX(${-cxOffset * index}px)`;
|
ref.current.style.transform = `translateX(${-cxOffset * index}px)`;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
if (index > 0) {
|
if (index > 0) {
|
||||||
setCurrentIndex(index - 1);
|
setCurrentIndex(index - 1);
|
||||||
} else {
|
} else {
|
||||||
|
// setCurrentIndex(images.length - 1);
|
||||||
ref.current.style.transform = `translateX(${-cxOffset * index}px)`;
|
ref.current.style.transform = `translateX(${-cxOffset * index}px)`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -230,237 +236,238 @@ const ImagesMaskContaint = forwardRef(
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<Mask
|
||||||
<Mask
|
destroyOnClose={false}
|
||||||
visible={visible}
|
visible={visible}
|
||||||
className="z-[1002] h-screen flex justify-center items-center"
|
className="z-[1002] h-screen flex justify-center items-center"
|
||||||
onMaskClick={() => {
|
onMaskClick={() => {
|
||||||
setVisible(false), setImages([]), setCurrentIndex(null);
|
setVisible(false), setImages([]), setCurrentIndex(null);
|
||||||
root.unmount();
|
root.unmount();
|
||||||
}}
|
}}
|
||||||
color="#000000d9"
|
color="#000000d9"
|
||||||
>
|
>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
{images[currentIndex]?.type != "hid" && (
|
{images[currentIndex]?.type != "hid" && (
|
||||||
<div
|
<div
|
||||||
className="z-50 flex justify-between items-center absolute top-[12px] left-[12px]"
|
className="z-50 flex justify-between items-center absolute top-[12px] left-[12px]"
|
||||||
style={{ width: "calc(100% - 24px)" }}
|
style={{ width: "calc(100% - 24px)" }}
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
{/* <div
|
{/* <div
|
||||||
onClick={() => downloadImage(images[currentIndex]?.url)}
|
onClick={() => downloadImage(images[currentIndex]?.url)}
|
||||||
className="flex justify-center items-center w-[38px] h-[38px] bg-[#ffffff1a] text-[#fff] rounded-full"
|
className="flex justify-center items-center w-[38px] h-[38px] bg-[#ffffff1a] text-[#fff] rounded-full"
|
||||||
>
|
>
|
||||||
<FontAwesomeIcon icon={faDownload} size="xl" />
|
<FontAwesomeIcon icon={faDownload} size="xl" />
|
||||||
</div> */}
|
</div> */}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setZoomed(!zoomed);
|
setZoomed(!zoomed);
|
||||||
setActive(false);
|
setActive(false);
|
||||||
ref.current.children[currentIndex].style.transform =
|
ref.current.children[currentIndex].style.transform =
|
||||||
"matrix(" +
|
"matrix(" +
|
||||||
(zoomed ? 1 : 3) +
|
(zoomed ? 1 : 3) +
|
||||||
", 0, 0, " +
|
", 0, 0, " +
|
||||||
(zoomed ? 1 : 3) +
|
(zoomed ? 1 : 3) +
|
||||||
", 0, 0)";
|
", 0, 0)";
|
||||||
ref.current.children[currentIndex].style.left = `0px`;
|
ref.current.children[currentIndex].style.left = `0px`;
|
||||||
ref.current.children[currentIndex].style.top = `0px`;
|
ref.current.children[currentIndex].style.top = `0px`;
|
||||||
}}
|
}}
|
||||||
className="flex justify-center items-center w-[38px] h-[38px] bg-[#ffffff1a] text-[#fff] rounded-full"
|
className="flex justify-center items-center w-[38px] h-[38px] bg-[#ffffff1a] text-[#fff] rounded-full"
|
||||||
>
|
>
|
||||||
{!zoomed ? (
|
{!zoomed ? (
|
||||||
<svg
|
<svg
|
||||||
t="1723822459763"
|
t="1723822459763"
|
||||||
className="icon"
|
className="icon"
|
||||||
viewBox="0 0 1024 1024"
|
viewBox="0 0 1024 1024"
|
||||||
version="1.1"
|
version="1.1"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
p-id="4557"
|
p-id="4557"
|
||||||
width="24"
|
width="24"
|
||||||
height="24"
|
height="24"
|
||||||
>
|
>
|
||||||
<path
|
<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"
|
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"
|
p-id="4558"
|
||||||
fill="#ffffff"
|
fill="#ffffff"
|
||||||
></path>
|
></path>
|
||||||
<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"
|
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"
|
p-id="4559"
|
||||||
fill="#ffffff"
|
fill="#ffffff"
|
||||||
></path>
|
></path>
|
||||||
</svg>
|
</svg>
|
||||||
) : (
|
) : (
|
||||||
<svg
|
<svg
|
||||||
t="1723822428728"
|
t="1723822428728"
|
||||||
className="icon"
|
className="icon"
|
||||||
viewBox="0 0 1024 1024"
|
viewBox="0 0 1024 1024"
|
||||||
version="1.1"
|
version="1.1"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
p-id="4379"
|
p-id="4379"
|
||||||
width="24"
|
width="24"
|
||||||
height="24"
|
height="24"
|
||||||
>
|
>
|
||||||
<path
|
<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"
|
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"
|
p-id="4380"
|
||||||
fill="#ffffff"
|
fill="#ffffff"
|
||||||
></path>
|
></path>
|
||||||
<path
|
<path
|
||||||
d="M625.792 448H336a32 32 0 0 0 0 64h289.792a32 32 0 1 0 0-64z"
|
d="M625.792 448H336a32 32 0 0 0 0 64h289.792a32 32 0 1 0 0-64z"
|
||||||
p-id="4381"
|
p-id="4381"
|
||||||
fill="#ffffff"
|
fill="#ffffff"
|
||||||
></path>
|
></path>
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
<div className="text-center mb-2 leading-[54px]">
|
|
||||||
{currentIndex + 1}/{images.length}
|
|
||||||
</div>
|
</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
|
<div
|
||||||
className="flex justify-start items-center"
|
ref={ref}
|
||||||
style={{ height: "calc(100vh - 174px)" }}
|
id="imagesScrollBox"
|
||||||
onClick={() => {
|
className="flex justify-center items-center transition-transform duration-300 h-full relative"
|
||||||
setVisible(false), setImages([]), setCurrentIndex(null);
|
draggable={true}
|
||||||
root.unmount();
|
onTouchStart={test1}
|
||||||
}}
|
onTouchMove={test2}
|
||||||
|
onTouchEnd={() => test3(currentIndex, direction)}
|
||||||
>
|
>
|
||||||
<div
|
{images.map((item, index) => {
|
||||||
ref={ref}
|
return (
|
||||||
id="imagesScrollBox"
|
<div
|
||||||
className="flex justify-center items-center transition-transform duration-300 h-full relative"
|
draggable={true}
|
||||||
draggable={true}
|
key={index}
|
||||||
onTouchStart={test1}
|
className="flex-none w-screen relative h-full"
|
||||||
onTouchMove={test2}
|
// onDoubleClick={() => {
|
||||||
onTouchEnd={() => test3(currentIndex, direction)}
|
// setZoomed(!zoomed);
|
||||||
>
|
// ref.current.children[0].style.transform =
|
||||||
{images.map((item, index) => {
|
// "matrix(" + zoomed
|
||||||
return (
|
// ? 1
|
||||||
<div
|
// : 3 + ", 0, 0, " + zoomed
|
||||||
key={index}
|
// ? 1
|
||||||
className="flex-none w-screen relative h-full"
|
// : 3 + ", 0, 0)";
|
||||||
// onDoubleClick={() => {
|
// ref.current.style.left = `0px`;
|
||||||
// setZoomed(!zoomed);
|
// ref.current.style.top = `0px`;
|
||||||
// ref.current.children[0].style.transform =
|
// }}
|
||||||
// "matrix(" + zoomed
|
>
|
||||||
// ? 1
|
{/* <img
|
||||||
// : 3 + ", 0, 0, " + zoomed
|
|
||||||
// ? 1
|
|
||||||
// : 3 + ", 0, 0)";
|
|
||||||
// ref.current.style.left = `0px`;
|
|
||||||
// ref.current.style.top = `0px`;
|
|
||||||
// }}
|
|
||||||
>
|
|
||||||
{/* <img
|
|
||||||
src={item.url}
|
src={item.url}
|
||||||
className="h-full m-auto"
|
className="h-full m-auto"
|
||||||
style={{
|
style={{
|
||||||
filter: item.type == "hid" ? "blur(10px)" : "none",
|
filter: item.type == "hid" ? "blur(10px)" : "none",
|
||||||
}}
|
}}
|
||||||
/> */}
|
/> */}
|
||||||
<Image
|
<Image
|
||||||
className="h-full m-auto"
|
draggable={true}
|
||||||
src={item.url}
|
className="h-full m-auto"
|
||||||
style={{
|
src={item.url}
|
||||||
filter: item.type == "hid" ? "blur(10px)" : "none",
|
style={{
|
||||||
}}
|
filter: item.type == "hid" ? "blur(10px)" : "none",
|
||||||
// draggable={true}
|
}}
|
||||||
height={"100%"}
|
// draggable={true}
|
||||||
fit="contain"
|
height={"100%"}
|
||||||
placeholder={
|
fit="contain"
|
||||||
<div className="w-full h-full min-h-96 bg-[#1d1d1d] rounded"></div>
|
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]">
|
<div className="absolute top-1/2 left-1/2 -ml-[100px] -mt-[14px]">
|
||||||
{item.type == "hid" && (
|
{item.type == "hid" && (
|
||||||
<div className="flex justify-center">
|
<div className="flex justify-center">
|
||||||
<div
|
<div
|
||||||
className="rounded-full text-sm h-max w-max px-4 py-1 bg-primary"
|
className="rounded-full text-sm h-max w-max px-4 py-1 bg-primary"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
router.push(
|
router.push(
|
||||||
"/webView/" +
|
"/webView/" +
|
||||||
encodeURIComponent(
|
encodeURIComponent(
|
||||||
"/zone/pay/" +
|
"/zone/pay/" +
|
||||||
data?.zid +
|
data?.zid +
|
||||||
"/h5_zone_moment/" +
|
"/h5_zone_moment/" +
|
||||||
data?.id +
|
data?.id +
|
||||||
"?base=" +
|
"?base=" +
|
||||||
encodeURIComponent(JSON.stringify(base))
|
encodeURIComponent(JSON.stringify(base))
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
此内容暂未解锁，立即解锁
|
此内容暂未解锁，立即解锁
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
</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>
|
</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);
|
// handleShowImages(index, photos, interval);
|
||||||
|
|
||||||
// setVisible(true)
|
// setVisible(true)
|
||||||
console.log(imagesMaskRef.current, photos);
|
// console.log(imagesMaskRef.current, photos);
|
||||||
imagesMaskRef.current.show(photos, index, data);
|
imagesMaskRef.current.show(photos, index, data);
|
||||||
};
|
};
|
||||||
// const handleShowImages = (index, photos, interval) => {
|
// const handleShowImages = (index, photos, interval) => {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue