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

Merge branch 'laboratory' into anln

This commit is contained in:
al 2024-08-15 20:29:49 +08:00
parent ba8b67720d 92c5f9d7f5
commit 4f6c890380
4 changed files with 316 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/globals.css
View File

@ -29,6 +29,16 @@ footer{
--background-end-rgb: 0, 0, 0; --background-end-rgb: 0, 0, 0;
} }
} */ } */
* {
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none; /* 标准语法 */
}
img{
pointer-events: none;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 1024px) { @media only screen and (min-device-width: 320px) and (max-device-width: 1024px) {
select:focus, textarea:focus, input:focus { select:focus, textarea:focus, input:focus {
font-size: 16px !important; font-size: 16px !important;
@ -245,7 +255,7 @@ footer{
.adm-floating-panel .adm-floating-panel-content { .adm-floating-panel .adm-floating-panel-content {
flex: 1; flex: 1;
overflow-y: scroll; 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{ .adm-list>div>div>div>div{

32
app/layout.js
View File

@ -33,7 +33,32 @@ const metadata = {
// }; // };
export default function RootLayout({ children }) { export default function RootLayout({ children }) {
const pathname = usePathname(); const pathname = usePathname();
useEffect(()=>{ useEffect(() => {
// 禁止双指放大
window.onload = function () {
document.addEventListener("touchstart", function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
});
var lastTouchEnd = 0;
document.addEventListener(
"touchend",
function (event) {
var now = new Date().getTime();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
},
false
);
document.addEventListener("gesturestart", function (event) {
event.preventDefault();
});
};
}, []);
useEffect(() => {
const timer = setTimeout(() => { const timer = setTimeout(() => {
window.scrollTo({ window.scrollTo({
top: 0, top: 0,
@ -42,7 +67,7 @@ export default function RootLayout({ children }) {
}); });
clearTimeout(timer); clearTimeout(timer);
}, 100); }, 100);
},[pathname]) }, [pathname]);
return ( return (
<html <html
lang="zh-CN" lang="zh-CN"
@ -79,6 +104,7 @@ export default function RootLayout({ children }) {
name="viewport" name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui,viewport-fit=cover" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui,viewport-fit=cover"
/> />
<meta name="apple-touch-fullscreen" content="yes" /> <meta name="apple-touch-fullscreen" content="yes" />
{/* <!-- 网站开启对 web app 程序的支持 具体表现为去除浏览器地址栏和底部导航栏 ：先保存为桌面书签，然后通过书签打开即可生效--> */} {/* <!-- 网站开启对 web app 程序的支持 具体表现为去除浏览器地址栏和底部导航栏 ：先保存为桌面书签，然后通过书签打开即可生效--> */}
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
@ -200,7 +226,7 @@ export default function RootLayout({ children }) {
</head> </head>
<body className={`${inter.className} h-full`}> <body className={`${inter.className} h-full`}>
<main className={`w-full bg-deepBg h-full`}> <main className={`w-full bg-deepBg h-full`}>
<div id="maskDomBox"></div> <div id="maskDomBox"></div>
{withAuth( {withAuth(
<Provider store={store}> <Provider store={store}>
<div> <div>

284
components/ImagesMask/index.jsx
View File

@ -9,45 +9,48 @@ import React, {
} from "react"; } from "react";
import { Mask, Image } from "antd-mobile"; import { Mask, Image } from "antd-mobile";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons"; import {
faAngleLeft,
faAngleRight,
faDownload,
} from "@fortawesome/free-solid-svg-icons";
import { createRoot } from "react-dom/client"; import { createRoot } from "react-dom/client";
import { useRouter } from "next/navigation";
import baseRequest from "@/utils/baseRequest";
const root = createRoot(document?.getElementById("maskDomBox")); const root = createRoot(document?.getElementById("maskDomBox"));
function ImagesMask({}, ref) { function ImagesMask({}, ref) {
const [currentIndex, setCurrentIndex] = useState(0);
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const [images, setImages] = useState([]); const [images, setImages] = useState([]);
const [data, setData] = useState(null);
const scrollRef = useRef(null); const scrollRef = useRef(null);
const defaultIndex = useRef(null);
const router = useRouter();
useEffect(() => { useEffect(() => {
root.render( root.render(
<div> <div>
<ImagesMaskContaint <ImagesMaskContaint
images={images} images={images}
visible={visible} visible={visible}
currentIndex={currentIndex}
ref={scrollRef} ref={scrollRef}
setCurrentIndex={setCurrentIndex}
setVisible={setVisible} setVisible={setVisible}
setImages={setImages} setImages={setImages}
router={router}
data={data}
defaultIndex={defaultIndex.current}
/> />
</div> </div>
); );
// root.render(<div>xxxx</div>); // root.render(<div>xxxx</div>);
}, [visible]); }, [visible]);
useEffect(() => {
if (scrollRef.current) {
setTimeout(() => {
scrollRef.current.scrollLeft = 414 * currentIndex;
}, 200);
}
}, [currentIndex]);
useImperativeHandle(ref, () => ({ useImperativeHandle(ref, () => ({
show: (arr, index) => { show: (arr, index, data) => {
setCurrentIndex(index); defaultIndex.current = index;
setImages(arr); setImages(arr);
setVisible(old=>{ setData(data);
console.log(arr, index,old) setVisible((old) => {
return !old // console.log(arr, index, old);
return !old;
}); });
// Mask.show // Mask.show
@ -60,73 +63,210 @@ function ImagesMask({}, ref) {
} }
const ImagesMaskContaint = forwardRef( const ImagesMaskContaint = forwardRef(
({ visible, images, currentIndex,setCurrentIndex,setVisible,setImages }, ref) => { (
const [distance, setDistance] = useState(0); { visible, images, setVisible, setImages, router, data, defaultIndex = 0 },
const getDistance = (e) => { ref
e.stopPropagation(); ) => {
const distance = ref.current.scrollLeft; const [currentIndex, setCurrentIndex] = useState(0);
setDistance(distance); const [direction, setDirection] = useState("left");
}; const [initialX, setInitialX] = useState(0);
const handleMoveImages = (e, index) => { const [xOffset, setXOffset] = useState(0);
e.stopPropagation(); const [active, setActive] = useState(false);
// console.log("distance",distance) const base = baseRequest();
if ( const directionX = useRef(0);
distance > window.innerWidth * currentIndex && // const getDistance = (e) => {
distance < window.innerWidth + window.innerWidth * currentIndex // e.stopPropagation();
) { // const distance = ref.current.scrollLeft;
setCurrentIndex(Math.ceil(distance / 414)); // setDistance(distance);
} else if (distance < window.innerWidth * currentIndex) { // };
setCurrentIndex(Math.ceil(distance / 414) - 1); useEffect(() => {
// setCurrentIndex(defaultIndex);
// test3(defaultIndex - 1, "left");
if (defaultIndex) {
test3(defaultIndex - 1, "left");
}
}, [defaultIndex]);
useEffect(() => {
if (ref.current) {
ref.current.style.transform = `translateX(${
-window.innerWidth * currentIndex
}px)`;
}
}, [currentIndex]);
const test1 = (e) => {
setInitialX(e.touches[0].clientX - (!currentIndex ? 0 : xOffset));
if (e.touches.length === 1) {
// 单点触摸
setActive(true);
} }
}; };
const test2 = (e) => {
if (active) {
let X = e.touches[0].clientX - initialX;
setDirection(
directionX.current > e.touches[0].clientX ? "left" : "right"
);
ref.current.style.transform = "translateX(" + X + "px)";
directionX.current = e.touches[0].clientX;
}
};
const test3 = (index, currentDirection) => {
setActive(false);
let cxOffset = window.innerWidth;
if (currentDirection == "left") {
if (index < images.length - 1) {
setCurrentIndex(index + 1);
} else {
ref.current.style.transform = `translateX(${-cxOffset * index}px)`;
}
} else {
if (index > 0) {
setCurrentIndex(index - 1);
} else {
ref.current.style.transform = `translateX(${-cxOffset * index}px)`;
}
}
// setInitialX(currentX);
setInitialX(-cxOffset * (index + (currentDirection == "left" ? 1 : -1)));
if (currentDirection == "left" && index > images.length - 2) return;
setXOffset(-cxOffset * (index + (currentDirection == "left" ? 1 : -1)));
};
function downloadImage(url) {
let randomNum = "";
for (let i = 0; i < 10; i++) {
randomNum += Math.floor(Math.random() * 10);
}
fetch(url)
.then((res) => res.blob())
.then((blob) => {
var a = document.createElement("a");
a.href = URL.createObjectURL(blob);
a.download = randomNum + ".jpg";
a.click();
});
}
return ( return (
<div> <div>
<Mask <Mask
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={() => {
<div className="relative"> setVisible(false), setImages([]), setCurrentIndex(null);
<div className="text-center mb-2"> // root.unmount();
{currentIndex + 1}/{images.length} }}
</div> color="#000000d9"
<div ref={ref} id="imagesScrollBox" className="flex overflow-auto scrollbarBoxX"> >
{images.map((item, index) => { <div className="relative">
return ( {images[currentIndex]?.type != "hid" && (
<img <div
key={index} onClick={() => downloadImage(images[currentIndex]?.url)}
src={item} className="z-50 flex justify-center items-center w-[38px] h-[38px] bg-[#ffffff1a] text-[#fff] rounded-full absolute top-[12px] left-[12px]"
// onTouchMove={(e) => handleMoveImages(e, index)} >
onTouchMove={getDistance} <FontAwesomeIcon icon={faDownload} size="xl" />
onTouchEnd={(e) => handleMoveImages(e, index)} </div>
onClick={() => { )}
setVisible(false), setImages([]), setCurrentIndex(0); <div className="text-center mb-2 leading-[54px]">
}} {currentIndex + 1}/{images.length}
/>
);
})}
</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" />
</div> </div>
<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={() => { onClick={() => {
setCurrentIndex((old) => setVisible(false), setImages([]), setCurrentIndex(null);
old < images.length - 1 ? old + 1 : old // root.unmount();
);
}} }}
> >
<FontAwesomeIcon icon={faAngleRight} size="xl" /> <div
ref={ref}
id="imagesScrollBox"
className="flex justify-center items-center transition-transform duration-300 h-full"
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"
>
{/* <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",
}}
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>
)}
</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={() => {
test3(currentIndex, "right");
}}
>
<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={() => {
test3(currentIndex, "left");
}}
>
<FontAwesomeIcon icon={faAngleRight} size="xl" />
</div>
</div> </div>
</div> </div>
</div> </Mask>
</Mask>
</div> </div>
); );
} }

129
components/Photos/index.js
View File

@ -8,7 +8,7 @@ import { useRouter } from "next/navigation";
import baseRequest from "@/utils/baseRequest"; import baseRequest from "@/utils/baseRequest";
import { handleShowVideo } from "@/utils/tools/handleFuns"; import { handleShowVideo } from "@/utils/tools/handleFuns";
// import dynamic from 'next/dynamic' // import dynamic from 'next/dynamic'
// import ImagesMask from "@/components/ImagesMask"; import ImagesMask from "@/components/ImagesMask";
// const ImagesMask = dynamic(() => // const ImagesMask = dynamic(() =>
// import('@/components/ImagesMask'), { ssr: false } // import('@/components/ImagesMask'), { ssr: false }
// ) // )
@ -84,15 +84,15 @@ export default function Photos({
}, []); }, []);
const showPhotos = (photos, index) => { const showPhotos = (photos, index) => {
currentIndex.current = index; currentIndex.current = index;
const interval = setInterval(() => { // const interval = setInterval(() => {
const bodyBox = document.getElementsByClassName("photos-bodyBox")[0]; // const bodyBox = document.getElementsByClassName("photos-bodyBox")[0];
if (bodyBox) { // if (bodyBox) {
bodyBox.firstChild.lastChild.style.transform = `translateX(-${ // bodyBox.firstChild.lastChild.style.transform = `translateX(-${
currentIndex.current * (window.innerWidth + 16) // currentIndex.current * (window.innerWidth + 16)
}px)`; // }px)`;
// console.log(bodyBox.firstChild.lastChild.style.transform); // // console.log(bodyBox.firstChild.lastChild.style.transform);
} // }
}, 400); // }, 400);
// 添加左右切换按钮 // 添加左右切换按钮
// const btns = document.createElement("div"); // const btns = document.createElement("div");
@ -129,65 +129,62 @@ export default function Photos({
// }); // });
// btns.append(btnL, btnR); // btns.append(btnL, btnR);
// handleShowImages(index, photos, btns,interval); // handleShowImages(index, photos, btns,interval);
handleShowImages(index, photos, interval); // handleShowImages(index, photos, interval);
// setVisible(true) // setVisible(true)
// console.log(imagesMaskRef.current); console.log(imagesMaskRef.current, photos);
// imagesMaskRef.current.show( imagesMaskRef.current.show(photos, index, data);
// photos.map((item) => item?.url),
// index
// );
}; };
const handleShowImages = (index, photos, interval) => { // const handleShowImages = (index, photos, interval) => {
const mediaDom = document.createElement("div"); // const mediaDom = document.createElement("div");
mediaDom.style.width = "100vw"; // mediaDom.style.width = "100vw";
document.body.appendChild(mediaDom); // document.body.appendChild(mediaDom);
mediaDom.className = `${ // mediaDom.className = `${
photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom" // photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom"
}`; // }`;
// mediaDom.appendChild(btns); // // mediaDom.appendChild(btns);
document.body.style.overflow = "hidden"; // document.body.style.overflow = "hidden";
ImageViewer.clear(); // ImageViewer.clear();
ImageViewer.Multi.show({ // ImageViewer.Multi.show({
images: photos.map((item) => item?.url), // images: photos.map((item) => item?.url),
defaultIndex: index, // defaultIndex: index,
renderFooter: (image, index) => { // renderFooter: (image, index) => {
return renderFooter(photos[index]?.type == "hid", mediaDom); // return renderFooter(photos[index]?.type == "hid", mediaDom);
}, // },
getContainer: mediaDom, // getContainer: mediaDom,
onIndexChange: (index) => { // onIndexChange: (index) => {
currentIndex.current = index; // currentIndex.current = index;
mediaDom.className = `${ // mediaDom.className = `${
photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom" // photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom"
}`; // }`;
const leftBtn = document.getElementsByClassName( // const leftBtn = document.getElementsByClassName(
"imagesBtnsControllerLeft" // "imagesBtnsControllerLeft"
)[0]; // )[0];
const rightBtn = document.getElementsByClassName( // const rightBtn = document.getElementsByClassName(
"imagesBtnsControllerRight" // "imagesBtnsControllerRight"
)[0]; // )[0];
if (leftBtn && rightBtn) { // if (leftBtn && rightBtn) {
if (!index) { // if (!index) {
leftBtn.style.opacity = 0.5; // leftBtn.style.opacity = 0.5;
rightBtn.style.opacity = 1; // rightBtn.style.opacity = 1;
} else if (index == currentPhotos.length - 1) { // } else if (index == currentPhotos.length - 1) {
leftBtn.style.opacity = 1; // leftBtn.style.opacity = 1;
rightBtn.style.opacity = 0.5; // rightBtn.style.opacity = 0.5;
} else { // } else {
leftBtn.style.opacity = 1; // leftBtn.style.opacity = 1;
rightBtn.style.opacity = 1; // rightBtn.style.opacity = 1;
} // }
} // }
}, // },
afterClose: () => { // afterClose: () => {
mediaDom.remove(); // mediaDom.remove();
clearInterval(interval); // clearInterval(interval);
document.body.style.overflow = "auto"; // document.body.style.overflow = "auto";
}, // },
classNames: { body: "photos-bodyBox" }, // classNames: { body: "photos-bodyBox" },
}); // });
}; // };
const handleSeeAllPhotos = (e) => { const handleSeeAllPhotos = (e) => {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
@ -343,7 +340,7 @@ export default function Photos({
); );
})} })}
</div> </div>
{/* <ImagesMask ref={imagesMaskRef} /> */} <ImagesMask ref={imagesMaskRef} />
{/* <Viewer {/* <Viewer
visible={visible} visible={visible}
onClose={() => { setVisible(false); } } onClose={() => { setVisible(false); } }