diff --git a/components/AddToHome/index.jsx b/components/AddToHome/index.jsx
index d2096c4..1f37e6b 100644
--- a/components/AddToHome/index.jsx
+++ b/components/AddToHome/index.jsx
@@ -1,42 +1,88 @@
"use client";
-import React,{useState,useEffect} from "react";
-import { Image ,Toast} from "antd-mobile";
+import React, { useState, useEffect } from "react";
+import { Image } from "antd-mobile";
import { get,save } from "@/utils/storeInfo";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faAngleUp, faClose } from "@fortawesome/free-solid-svg-icons";
export default function AddToHome() {
- const [firstLogin, setFirstLogin] = useState("0");
+ const [firstLogin, setFirstLogin] = useState({ first: "0", second: false });
useEffect(() => {
- if(!(("standalone" in window.navigator) && window.navigator.standalone)
- ){
- setFirstLogin(get("firstLogin"))
+ if (!("standalone" in window.navigator && window.navigator.standalone)) {
+ setFirstLogin((old) => ({ ...old, first: get("firstLogin") }));
}
-
}, []);
- return (
- firstLogin=="1"?
{save("firstLogin", 0);setFirstLogin("0")}}
+ return firstLogin.first == "1" ? (
+
:null
- );
+ {!firstLogin.second ? (
+
+
+
+
+
+ 建议您添加铁粉空间
+ 到手机桌面
+
+
以便随时关注圈子动态
+
+
+
setFirstLogin((old) => ({ ...old, second: true }))}
+ >
+ 去添加
+
+
{
+ save("firstLogin", 0);
+ setFirstLogin((old) => ({ first: "0", second: false }));
+ }}
+ />
+
+ ) : (
+
{
+ save("firstLogin", 0);
+ setFirstLogin((old) => ({ first: "0", second: false }));
+ }}
+ >
+
+ 点击
+
+ 添加到主屏幕
+
+
+
+ )}
+
+ ) : null;
}
diff --git a/components/ImagesMask/index.jsx b/components/ImagesMask/index.jsx
new file mode 100644
index 0000000..4de306a
--- /dev/null
+++ b/components/ImagesMask/index.jsx
@@ -0,0 +1,117 @@
+"use client";
+
+import React, {
+ useState,
+ useEffect,
+ useRef,
+ forwardRef,
+ useImperativeHandle,
+} from "react";
+import { Mask, Image } from "antd-mobile";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";
+function ImagesMask({}, ref) {
+ const [currentIndex, setCurrentIndex] = useState(0);
+ const [visible, setVisible] = useState(false);
+ const [images, setImages] = useState([]);
+ const [distance, setDistance] = useState(0);
+ const scrollRef = useRef(null);
+ useEffect(() => {
+ if (scrollRef.current) {
+ setTimeout(() => {
+ scrollRef.current.scrollLeft = 414 * currentIndex;
+ }, 200);
+ }
+ }, [currentIndex]);
+ useImperativeHandle(ref, () => ({
+ show: (arr, index) => {
+ setCurrentIndex(index);
+ setImages(arr);
+ setVisible(true);
+ // Mask.show
+ // const maskDomBox = document.getElementById("maskDomBox");
+ },
+ close: () => setVisible(false),
+ }));
+ const getDistance = (e) => {
+ e.stopPropagation();
+ const distance = scrollRef.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)
+ }
+ };
+ return (
+
+
+
+ {currentIndex + 1}/{images.length}
+
+
+
+
{
+ setCurrentIndex((old) => (old > 0 ? old - 1 : old));
+ }}
+ >
+
+
+
{
+ setCurrentIndex((old) =>
+ old < images.length - 1 ? old + 1 : old
+ );
+ }}
+ >
+
+
+
+
+ );
+}
+
+export default forwardRef(ImagesMask);
diff --git a/components/Photos/index.js b/components/Photos/index.js
index 703d992..7e2ecb0 100644
--- a/components/Photos/index.js
+++ b/components/Photos/index.js
@@ -1,12 +1,14 @@
"use client";
-import React, { useEffect, useState,useRef } from "react";
+import React, { useEffect, useState, useRef } from "react";
import { Image, ImageViewer, Dialog } from "antd-mobile";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleUp, faClose } from "@fortawesome/free-solid-svg-icons";
import { useRouter } from "next/navigation";
import baseRequest from "@/utils/baseRequest";
import Player from "next-video/player";
+// import ImagesMask from "@/components/ImagesMask";
+// import Viewer from 'react-viewer';
export default function Photos({
isUnlocked,
mediaVisibleRange,
@@ -18,7 +20,10 @@ export default function Photos({
const [seeAllPhotos, setSeeAllPhotos] = useState(false);
const [currentPhotos, setCurrentPhotos] = useState([]);
const [photos, setPhotos] = useState([]);
+ const [visible, setVisible] = useState(false);
const currentIndex = useRef();
+ const swiper = useRef(null);
+ // const imagesMaskRef = useRef(null);
const router = useRouter();
const base = baseRequest();
useEffect(() => {
@@ -57,22 +62,65 @@ export default function Photos({
}
}, [media]);
const showPhotos = (photos, index) => {
- currentIndex.current=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 btns = document.createElement("div");
+ btns.className = "imagesBtnsControllers";
+ const btnL = document.createElement("div");
+ btnL.className = "imagesBtnsControllerLeft";
+ btnL.addEventListener("click", () => {
+ if (currentIndex.current > 0) {
+ currentIndex.current = currentIndex.current - 1;
+ handleShowImages(currentIndex.current, photos, btns);
+ if (!currentIndex.current) {
+ btnL.style.opacity = 0.5;
+ btnR.style.opacity = 1;
+ } else {
+ btnR.style.opacity = 1;
+ btnL.style.opacity = 1;
+ }
+ }
+ });
+ const btnR = document.createElement("div");
+ btnR.className = "imagesBtnsControllerRight";
+ btnR.addEventListener("click", () => {
+ if (currentIndex.current < currentPhotos.length - 1) {
+ currentIndex.current = currentIndex.current + 1;
+ handleShowImages(currentIndex.current, photos, btns);
+ if (currentIndex.current == currentPhotos.length - 1) {
+ btnR.style.opacity = 0.5;
+ btnL.style.opacity = 1;
+ } else {
+ btnR.style.opacity = 1;
+ btnL.style.opacity = 1;
+ }
+ }
+ });
+ btns.append(btnL, btnR);
+ handleShowImages(index, photos, btns);
+
+ // setVisible(true)
+ // imagesMaskRef.current.show(photos.map((item) => item?.url),index)
+ };
+ const handleShowImages = (index, photos, btns) => {
const mediaDom = document.createElement("div");
mediaDom.style.width = "100vw";
document.body.appendChild(mediaDom);
mediaDom.className = `${
photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom"
}`;
- 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);
+ mediaDom.appendChild(btns);
+ ImageViewer.clear();
ImageViewer.Multi.show({
images: photos.map((item) => item?.url),
defaultIndex: index,
@@ -82,18 +130,31 @@ export default function Photos({
getContainer: mediaDom,
onIndexChange: (index) => {
- currentIndex.current=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);
+ // clearInterval(interval);
},
classNames: { body: "photos-bodyBox" },
});
-
};
const handleShowVideo = (video) => {
Dialog.className = "videoMask";
@@ -293,6 +354,12 @@ export default function Photos({
);
})}