修改看图功能
This commit is contained in:
al
parent
068bfaef5d
commit
0e6938f5a4
|
|
@ -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{
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
<div>
|
||||
<ImagesMaskContaint
|
||||
images={images}
|
||||
visible={visible}
|
||||
currentIndex={currentIndex}
|
||||
ref={scrollRef}
|
||||
setCurrentIndex={setCurrentIndex}
|
||||
setVisible={setVisible}
|
||||
setImages={setImages}
|
||||
router={router}
|
||||
data={data}
|
||||
defaultIndex={defaultIndex.current}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
// root.render(<div>xxxx</div>);
|
||||
}, [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 (
|
||||
<div>
|
||||
<Mask
|
||||
visible={visible}
|
||||
className="z-[1002] h-screen flex justify-center items-center"
|
||||
>
|
||||
<div className="relative">
|
||||
<div className="text-center mb-2">
|
||||
{currentIndex + 1}/{images.length}
|
||||
</div>
|
||||
<div ref={ref} id="imagesScrollBox" className="flex overflow-auto scrollbarBoxX">
|
||||
{images.map((item, index) => {
|
||||
return (
|
||||
<img
|
||||
key={index}
|
||||
src={item}
|
||||
// onTouchMove={(e) => handleMoveImages(e, index)}
|
||||
onTouchMove={getDistance}
|
||||
onTouchEnd={(e) => handleMoveImages(e, index)}
|
||||
onClick={() => {
|
||||
setVisible(false), setImages([]), setCurrentIndex(0);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="flex justify-between items-center w-screen absolute top-1/2 px-4 pointer-events-none">
|
||||
<div
|
||||
className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full float-left pointer-events-auto"
|
||||
onClick={() => {
|
||||
setCurrentIndex((old) => (old > 0 ? old - 1 : old));
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon icon={faAngleLeft} size="xl" />
|
||||
visible={visible}
|
||||
className="z-[1002] h-screen flex justify-center items-center"
|
||||
onMaskClick={() => {
|
||||
setVisible(false), setImages([]), setCurrentIndex(0);
|
||||
// root.unmount();
|
||||
}}
|
||||
>
|
||||
<div className="relative">
|
||||
<div className="text-center mb-2 leading-[54px]">
|
||||
{currentIndex + 1}/{images.length}
|
||||
</div>
|
||||
<div
|
||||
className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full float-left pointer-events-auto"
|
||||
className="flex justify-start items-center"
|
||||
style={{ height: "calc(100vh - 174px)" }}
|
||||
onClick={() => {
|
||||
setCurrentIndex((old) =>
|
||||
old < images.length - 1 ? old + 1 : old
|
||||
);
|
||||
setVisible(false), setImages([]), setCurrentIndex(0);
|
||||
// root.unmount();
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon icon={faAngleRight} size="xl" />
|
||||
<div
|
||||
ref={ref}
|
||||
id="imagesScrollBox"
|
||||
className="flex justify-center items-center"
|
||||
draggable={true}
|
||||
// onTouchStart={test1}
|
||||
// onTouchMove={test2}
|
||||
// onTouchEnd={() => test3(currentIndex)}
|
||||
>
|
||||
{images.map((item, index) => {
|
||||
return (
|
||||
<div key={index} className="flex-none w-screen relative">
|
||||
<img
|
||||
src={item.url}
|
||||
style={{
|
||||
filter: item.type == "hid" ? "blur(10px)" : "none",
|
||||
}}
|
||||
/>
|
||||
<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)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="w-12 h-full flex items-center justify-center rounded-full float-left pointer-events-auto"
|
||||
onClick={() => {
|
||||
setCurrentIndex((old) => (old > 0 ? old - 1 : old));
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon icon={faAngleLeft} size="xl" />
|
||||
</div>
|
||||
<div
|
||||
className="w-12 h-full flex items-center justify-center rounded-full float-left pointer-events-auto"
|
||||
onClick={() => {
|
||||
setCurrentIndex((old) =>
|
||||
old < images.length - 1 ? old + 1 : old
|
||||
);
|
||||
setInitialX((currentIndex || 1) * window.innerWidth * 2);
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon icon={faAngleRight} size="xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Mask>
|
||||
</Mask>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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({
|
|||
);
|
||||
})}
|
||||
</div>
|
||||
{/* <ImagesMask ref={imagesMaskRef} /> */}
|
||||
<ImagesMask ref={imagesMaskRef} />
|
||||
{/* <Viewer
|
||||
visible={visible}
|
||||
onClose={() => { setVisible(false); } }
|
||||
|
|
|
|||
Loading…
Reference in New Issue