wishpal_ironfan
/
tiefen_space_h5
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改看图功能

This commit is contained in:
al 2024-08-14 19:59:03 +08:00
parent 068bfaef5d
commit 0e6938f5a4
3 changed files with 248 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/globals.css
View File

@ -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{

198
components/ImagesMask/index.jsx
View File

@ -11,43 +11,42 @@ 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
@ -60,54 +59,172 @@ 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"
onMaskClick={() => {
setVisible(false), setImages([]), setCurrentIndex(0);
// root.unmount();
}}
>
<div className="relative">
<div className="text-center mb-2">
<div className="text-center mb-2 leading-[54px]">
{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)}
<div
className="flex justify-start items-center"
style={{ height: "calc(100vh - 174px)" }}
onClick={() => {
setVisible(false), setImages([]), setCurrentIndex(0);
// root.unmount();
}}
>
<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 className="flex justify-between items-center w-screen absolute top-1/2 px-4 pointer-events-none">
</div>
<div
className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full float-left pointer-events-auto"
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));
}}
@ -115,11 +232,12 @@ const ImagesMaskContaint = forwardRef(
<FontAwesomeIcon icon={faAngleLeft} size="xl" />
</div>
<div
className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full float-left pointer-events-auto"
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" />

129
components/Photos/index.js
View File

@ -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); } }