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

修复document未定义问题

This commit is contained in:
al 2024-08-15 21:03:10 +08:00
parent 4f6c890380
commit 957abda50a
10 changed files with 235 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/layout.js
View File

@ -36,6 +36,7 @@ export default function RootLayout({ children }) {
useEffect(() => {
// 禁止双指放大
window.onload = function () {
if (typeof window !== "undefined") {
document.addEventListener("touchstart", function (event) {
if (event.touches.length > 1) {
event.preventDefault();
@ -56,6 +57,7 @@ export default function RootLayout({ children }) {
document.addEventListener("gesturestart", function (event) {
event.preventDefault();
});
}
};
}, []);
useEffect(() => {

153
app/profile/[mid]/page.js
View File

@ -47,7 +47,28 @@ export default function PersonSpace() {
const showPhotos = (photos, index) => {
currentIndex.current = index;
const interval = setInterval(() => {
console.log("bbbbbb")
console.log("bbbbbb");
if (typeof window == "undefined") return;
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();
});
const bodyBox = document.getElementsByClassName("photos-bodyBox")[0];
if (bodyBox) {
bodyBox.firstChild.lastChild.style.transform = `translateX(-${
@ -57,7 +78,6 @@ export default function PersonSpace() {
}
}, 400);
handleShowImages(index, photos, interval);
// setVisible(true)
@ -68,6 +88,7 @@ export default function PersonSpace() {
// );
};
const handleShowImages = (index, photos, interval) => {
if (typeof window == "undefined") return;
const mediaDom = document.createElement("div");
mediaDom.style.width = "100vw";
document.body.appendChild(mediaDom);
@ -84,22 +105,27 @@ export default function PersonSpace() {
getContainer: mediaDom,
onIndexChange: (index) => {
if (typeof window == "undefined") return;
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==photos.length-1){
leftBtn.style.opacity=1
rightBtn.style.opacity=0.5
}else{
leftBtn.style.opacity=1
rightBtn.style.opacity=1
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 == photos.length - 1) {
leftBtn.style.opacity = 1;
rightBtn.style.opacity = 0.5;
} else {
leftBtn.style.opacity = 1;
rightBtn.style.opacity = 1;
}
}
},
@ -244,7 +270,9 @@ export default function PersonSpace() {
} else {
showPhotos(
topPhotos.filter((it) => it.type == "img"),
topPhotos.filter((it) => it.type == "img").indexOf(photo)
topPhotos
.filter((it) => it.type == "img")
.indexOf(photo)
);
}
}}
@ -264,7 +292,10 @@ export default function PersonSpace() {
className=""
width={98}
height={98}
src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/play.png"}
src={
process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
"/icons/play.png"
}
/>
</div>
)}
@ -282,7 +313,12 @@ export default function PersonSpace() {
{streamerInfo?.streamer_ext?.name}
</p>
<div className="w-5 h-5">
<Image src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/verification.png"} />
<Image
src={
process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
"/icons/verification.png"
}
/>
</div>
</div>
<ul className="flex">
@ -300,7 +336,10 @@ export default function PersonSpace() {
<ul className="flex mb-1 flex-wrap">
<li className="h-4 flex items-center text-xs bg-[#FFFFFF1A] rounded-full px-2 py-2.5 mb-1 mr-1">
<Image
src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/info/ID.png"}
src={
process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
"/icons/info/ID.png"
}
width={14}
height={14}
className="w-4 h-full mr-1"
@ -309,7 +348,10 @@ export default function PersonSpace() {
</li>
<li className="h-4 flex items-center text-xs bg-[#FFFFFF1A] rounded-full px-2 py-2.5 mb-1 mr-1">
<Image
src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/info/fan.png"}
src={
process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
"/icons/info/fan.png"
}
width={14}
height={14}
className="w-4 h-full mr-1"
@ -322,14 +364,20 @@ export default function PersonSpace() {
<li className="h-4 flex items-center text-xs bg-[#FFFFFF1A] rounded-full px-2 py-2.5 mb-1 mr-1">
{streamerInfo?.streamer_ext?.gender === 1 ? (
<Image
src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/info/female.png"}
src={
process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
"/icons/info/female.png"
}
width={14}
height={14}
className="w-4 h-full mr-1"
/>
) : (
<Image
src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/info/male.png"}
src={
process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
"/icons/info/male.png"
}
width={14}
height={14}
className="w-4 h-full mr-1"
@ -345,7 +393,10 @@ export default function PersonSpace() {
<Image
width={14}
height={14}
src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/info/height.png"}
src={
process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
"/icons/info/height.png"
}
className="w-4 h-full mr-1"
/>
<span className="text-white text-xs font-medium ml-0.5">
@ -358,7 +409,10 @@ export default function PersonSpace() {
<Image
width={14}
height={14}
src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/info/weight.png"}
src={
process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
"/icons/info/weight.png"
}
className="w-4 h-full mr-1"
/>
<span className="text-white text-xs font-medium ml-0.5">
@ -371,7 +425,10 @@ export default function PersonSpace() {
<Image
width={14}
height={14}
src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/info/constellation.png"}
src={
process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
"/icons/info/constellation.png"
}
className="w-4 h-full mr-1"
/>
<span className="text-white text-xs font-medium ml-0.5">
@ -384,7 +441,10 @@ export default function PersonSpace() {
<Image
width={14}
height={14}
src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/info/location.png"}
src={
process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
"/icons/info/location.png"
}
className="w-4 h-full mr-1"
/>
<span className="text-white text-xs font-medium ml-0.5">
@ -394,11 +454,17 @@ export default function PersonSpace() {
)}
</ul>
{streamerInfo?.streamer_ext?.bio && (
<div className="whitespace-pre-wrap" style={{overflowWrap:"anywhere"}}><span className="text-[#ffffff88]">个性签名｜</span>{streamerInfo?.streamer_ext?.bio}</div>
<div
className="whitespace-pre-wrap"
style={{ overflowWrap: "anywhere" }}
>
<span className="text-[#ffffff88]">个性签名｜</span>
{streamerInfo?.streamer_ext?.bio}
</div>
)}
</div>
</div>
{spaceData&&!!spaceData?.previews?.images?.length&&
{spaceData && !!spaceData?.previews?.images?.length && (
<>
<Divider />
<div>
@ -428,7 +494,9 @@ export default function PersonSpace() {
</div>
</div>
<div className="flex ">
{spaceData?.previews?.images?.slice(0,4).map((item, index) => (
{spaceData?.previews?.images
?.slice(0, 4)
.map((item, index) => (
<div
key={item.id}
className="w-20 h-20 overflow-hidden rounded mr-1"
@ -448,7 +516,7 @@ export default function PersonSpace() {
</div>
</div>
</>
}
)}
<>
<Divider />
@ -462,7 +530,10 @@ export default function PersonSpace() {
height={32}
width={32}
className="mr-2"
src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/images/platform_wechat.png"}
src={
process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
"/images/platform_wechat.png"
}
/>
<div className="text-base">
<span>微信：</span>
@ -479,7 +550,7 @@ export default function PersonSpace() {
<li
key={item.id}
className="grid gap-1 justify-between border-[1.5px] border-[#ffffff43] rounded-xl p-2"
style={{gridTemplateColumns:"calc(100% - 130px) 130px"}}
style={{ gridTemplateColumns: "calc(100% - 130px) 130px" }}
>
<div className="flex items-center">
<Image
@ -508,7 +579,10 @@ export default function PersonSpace() {
height={24}
width={24}
className="mr-1"
src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/copy.png"}
src={
process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
"/icons/copy.png"
}
/>
<span className="whitespace-nowrap">复制</span>
</div>
@ -522,9 +596,14 @@ export default function PersonSpace() {
height={24}
width={24}
className="mr-1"
src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/goto.png"}
src={
process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
"/icons/goto.png"
}
/>
<Link href={item?.url} className="whitespace-nowrap">前往</Link>
<Link href={item?.url} className="whitespace-nowrap">
前往
</Link>
</div>
</div>
</li>
@ -542,7 +621,11 @@ export default function PersonSpace() {
</div>
<div
className="text-base bg-[#FFFFFF1A] py-2 px-6 rounded-full whitespace-nowrap"
onClick={() => router.push("/messageDetail?mid="+streamerInfo?.streamer_ext?.mid)}
onClick={() =>
router.push(
"/messageDetail?mid=" + streamerInfo?.streamer_ext?.mid
)
}
>
私聊
</div>

11
app/space/[id]/page.js
View File

@ -144,20 +144,21 @@ export default function PersonSpace() {
setLoading(false);
setOffset(data.data.offset);
setHasMore(data.data.more)
setHasMore(data.data.more);
return data.data.list;
} catch (error) {
setLoading(false);
}
};
const firstRequest = (currentKey) => {
if (typeof window == "undefined") return;
let floatingPanel = document.getElementsByClassName(
"adm-floating-panel-content"
)[0];
floatingPanel?.scrollTo(0, 0);
setOffset(0);
setHasMore(true);
if(!postList.length)return;
if (!postList.length) return;
if (streamerInfo) {
getPostList(streamerInfo.id, currentKey, 0).then((res) => {
setPostList(res || []);
@ -200,7 +201,7 @@ export default function PersonSpace() {
visitor_role: streamerInfo?.visitor_role,
avatar:
streamerInfo?.streamer_ext?.avatar?.images[0]?.urls[0],
admission_price:streamerInfo?.admission_price
admission_price: streamerInfo?.admission_price,
})
)
)
@ -212,7 +213,9 @@ export default function PersonSpace() {
<div
className="bg-no-repeat bg-cover bg-center"
style={{
backgroundImage: `url(${streamerInfo?.streamer_ext?.cover?.images[0]?.urls[0] || ""})`,
backgroundImage: `url(${
streamerInfo?.streamer_ext?.cover?.images[0]?.urls[0] || ""
})`,
}}
>
<div className="px-4 pt-24 pb-8 bg-[#181818a9]">

52
app/space/person_space_introduce/[mid]/page.js
View File

@ -43,7 +43,7 @@ export default function PersonSpaceIntroduce() {
const showPhotos = (photos, index) => {
currentIndex.current = index;
const interval = setInterval(() => {
console.log("bbbbbb")
if (typeof window == "undefined") return;
const bodyBox = document.getElementsByClassName("photos-bodyBox")[0];
if (bodyBox) {
bodyBox.firstChild.lastChild.style.transform = `translateX(-${
@ -53,7 +53,6 @@ export default function PersonSpaceIntroduce() {
}
}, 400);
handleShowImages(index, photos, interval);
// setVisible(true)
@ -64,6 +63,7 @@ export default function PersonSpaceIntroduce() {
// );
};
const handleShowImages = (index, photos, interval) => {
if (typeof window == "undefined") return;
const mediaDom = document.createElement("div");
mediaDom.style.width = "100vw";
document.body.appendChild(mediaDom);
@ -80,22 +80,27 @@ export default function PersonSpaceIntroduce() {
getContainer: mediaDom,
onIndexChange: (index) => {
if (typeof window == "undefined") return;
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==photos.length-1){
leftBtn.style.opacity=1
rightBtn.style.opacity=0.5
}else{
leftBtn.style.opacity=1
rightBtn.style.opacity=1
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 == photos.length - 1) {
leftBtn.style.opacity = 1;
rightBtn.style.opacity = 0.5;
} else {
leftBtn.style.opacity = 1;
rightBtn.style.opacity = 1;
}
}
},
@ -166,7 +171,10 @@ export default function PersonSpaceIntroduce() {
</p>
<div className="h-4 flex items-center text-xs bg-[#ffffff18] rounded-full px-2 py-2.5 mb-1 w-max">
<Image
src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/info/ID.png"}
src={
process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
"/icons/info/ID.png"
}
width={14}
height={14}
className="w-4 h-full mr-1"
@ -181,7 +189,10 @@ export default function PersonSpaceIntroduce() {
>
<div className="w-9 h-9 flex items-center justify-center bg-[#1d1d1d71] rounded-full mb-1">
<Image
src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/images/wechat.png"}
src={
process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
"/images/wechat.png"
}
width={22}
height={22}
className="w-4 h-full"
@ -226,7 +237,9 @@ export default function PersonSpaceIntroduce() {
className=""
width={98}
height={98}
src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/play.png"}
src={
process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/play.png"
}
placeholder=""
/>
</div>
@ -314,7 +327,10 @@ export default function PersonSpaceIntroduce() {
height={18}
placeholder=""
className="mr-2"
src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/money_pink.png"}
src={
process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
"/icons/money_pink.png"
}
/>
)}
<span>

6
components/ImagesMask/index.jsx
View File

@ -17,7 +17,10 @@ import {
import { createRoot } from "react-dom/client";
import { useRouter } from "next/navigation";
import baseRequest from "@/utils/baseRequest";
const root = createRoot(document?.getElementById("maskDomBox"));
const root =
typeof window !== "undefined"
? createRoot(document?.getElementById("maskDomBox"))
: null;
function ImagesMask({}, ref) {
const [visible, setVisible] = useState(false);
const [images, setImages] = useState([]);
@ -139,6 +142,7 @@ const ImagesMaskContaint = forwardRef(
fetch(url)
.then((res) => res.blob())
.then((blob) => {
if (typeof window == "undefined") return;
var a = document.createElement("a");
a.href = URL.createObjectURL(blob);
a.download = randomNum + ".jpg";

1
components/Photos/index.js
View File

@ -244,6 +244,7 @@ export default function Photos({
onClick={() => {
if (item?.type == "video") {
if (!isUnlocked && type == "space") {
if (typeof window == "undefined") return;
const mediaDom = document.createElement("div");
document.body.appendChild(mediaDom);
ImageViewer.show({

23
components/UploadImgs/index.js
View File

@ -3,7 +3,7 @@ import { DotLoading, Image, ImageViewer } from "antd-mobile";
import { uploadImage, uploadVideo } from "@/utils/upload";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAdd, faClose } from "@fortawesome/free-solid-svg-icons";
export default function UploadImgs({assets, getImgs }) {
export default function UploadImgs({ assets, getImgs }) {
const maxCount = 6;
const [fileList, setFileList] = useState([]);
const [loading, setLoading] = useState(false);
@ -14,14 +14,15 @@ export default function UploadImgs({assets, getImgs }) {
if (file.type.indexOf("image/") != -1) {
// const image = await uploadImage(file);
// getImgs((old) => [...old, image.id]);
const newFiles = [
...assets,
file,
];
const newAssets = newFiles.map(item=>({ type: "img", src: URL.createObjectURL(item) }));
const newFiles = [...assets, file];
const newAssets = newFiles.map((item) => ({
type: "img",
src: URL.createObjectURL(item),
}));
setFileList(newAssets);
getImgs(newFiles);
} else if (file.type.indexOf("video/") != -1) {
if (typeof window == "undefined") return;
const videoD = document.getElementById("videoD");
const videoC = document.getElementById("videoC");
// console.log("videoC", videoC);
@ -43,11 +44,11 @@ export default function UploadImgs({assets, getImgs }) {
// const video = await uploadVideo(file);
// getImgs((old) => [...old, video.id]);
// setFileList((old) => [...old, video]);
const newFiles = [
...assets,
file,
];
const newAssets = newFiles.map(item=>({ type: "video", src: URL.createObjectURL(item) }));
const newFiles = [...assets, file];
const newAssets = newFiles.map((item) => ({
type: "video",
src: URL.createObjectURL(item),
}));
setFileList(newAssets);
}

1
utils/copy.js
View File

@ -1,4 +1,5 @@
export default function copy(text = "") {
if (typeof window == "undefined") return;
let input = document.createElement("input");
input.style.position = "fixed";
input.style.top = "-10000px";

17
utils/tools/handleFuns.js
View File

@ -1,8 +1,8 @@
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faClose} from "@fortawesome/free-solid-svg-icons";
import { Dialog,Toast } from "antd-mobile";
import { faClose } from "@fortawesome/free-solid-svg-icons";
import { Dialog, Toast } from "antd-mobile";
import html2canvas from "html2canvas";
import {checkRole} from "../auth";
import { checkRole } from "../auth";
import Player from "next-video/player";
// export const handleShowVideos = (video) => {
// Dialog.className = "videoMask";
@ -52,10 +52,13 @@ export const handleShowVideo = (video) => {
Dialog.className = "videoMask";
Dialog.show({
title: "",
bodyStyle:{paddingTop:0},
bodyStyle: { paddingTop: 0 },
content: (
<div className="h-screen flex justify-center items-center relative" >
<div className="h-screen w-screen absolute" onClick={() => Dialog.clear()}></div>
<div className="h-screen flex justify-center items-center relative">
<div
className="h-screen w-screen absolute"
onClick={() => Dialog.clear()}
></div>
<div className="w-screen flex flex-col gap-2 pointer-events-none absolute top-0">
<div className="flex w-full justify-end">
<div
@ -113,6 +116,7 @@ export const handleShowVideo = (video) => {
};
//保存div内容为图片
export const saveImage = async (divId) => {
if (typeof window == "undefined") return;
const div = document.getElementById(divId);
html2canvas(div, { useCORS: true }).then(function (canvas) {
// 创建一个图片元素
@ -138,6 +142,7 @@ export const saveFile = async (href) => {
});
return;
}
if (typeof window == "undefined") return;
var link = document.createElement("a");
link.href = href;
link.target = "_blank";

2
utils/upload.js
View File

@ -45,7 +45,7 @@ async function calculateFileMetadata(file) {
const fileData = event.target.result;
const wordArray = CryptoJS.lib.WordArray.create(fileData);
const md5Hash = CryptoJS.MD5(wordArray).toString();
if (typeof window == "undefined") return;
const mediaElement = document.createElement(
file.type.startsWith("image/") ? "img" : "video"
);