From 0a647744135d42eb215aa6627f415f42635a2281 Mon Sep 17 00:00:00 2001
From: al <al@cdhncy.com>
Date: Mon, 5 Aug 2024 18:04:26 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E8=A7=88=E5=9B=BE=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Photos/index.js | 30 +++++++++++++++++++++---------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/components/Photos/index.js b/components/Photos/index.js
index 2dd91fe..2fdaefa 100644
--- a/components/Photos/index.js
+++ b/components/Photos/index.js
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useState } 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";
@@ -18,6 +18,7 @@ export default function Photos({
   const [seeAllPhotos, setSeeAllPhotos] = useState(false);
   const [currentPhotos, setCurrentPhotos] = useState([]);
   const [photos, setPhotos] = useState([]);
+  const currentIndex = useRef();
   const router = useRouter();
   const base = baseRequest();
   useEffect(() => {
@@ -56,32 +57,43 @@ export default function Photos({
     }
   }, [media]);
   const showPhotos = (photos, index) => {
+    currentIndex.current=index;
     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);
     ImageViewer.Multi.show({
       images: photos.map((item) => item?.url),
       defaultIndex: index,
-      renderFooter: (image, index) =>
-        renderFooter(photos[index]?.type == "hid", mediaDom),
+      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 bodyBox = document.getElementsByClassName("photos-bodyBox")[0];
-        setTimeout(() => {
-          bodyBox.firstChild.lastChild.style.transform=`translateX(-${index*(window.innerWidth+16)}px)`;
-          console.log(bodyBox.firstChild.lastChild.style.transform)
-        }, 600);
       },
       afterClose: () => {
         mediaDom.remove();
+        clearInterval(interval);
       },
       classNames: { body: "photos-bodyBox" },
     });
+    
   };
   const handleShowVideo = (video) => {
     Dialog.className = "videoMask";
@@ -118,7 +130,7 @@ export default function Photos({
                 poster={video?.url.src}
                 blurDataURL={video?.url.blurDataURL}
                 autoPlay={true}
-                style={{ height: "500px",width:"100vw" }}
+                style={{ height: "500px", width: "100vw" }}
               />
               {/* <Player
               src="https://www.mydomain.com/remote-video.mp4"