From e9e95f3749313834b07cc86f1cade4287a9d1a7f Mon Sep 17 00:00:00 2001
From: al <al@cdhncy.com>
Date: Wed, 6 Nov 2024 15:54:13 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=9B=BE=E7=89=87=E6=8B=96?=
 =?UTF-8?q?=E6=8B=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/my/createProfile/page.jsx  |   1 -
 components/UploadImgs/index.js | 139 +++++++++++++++++++++++----------
 2 files changed, 96 insertions(+), 44 deletions(-)

diff --git a/app/my/createProfile/page.jsx b/app/my/createProfile/page.jsx
index 6244122..b9cca2b 100644
--- a/app/my/createProfile/page.jsx
+++ b/app/my/createProfile/page.jsx
@@ -316,7 +316,6 @@ export default function CreateProfile() {
         // 新版本
         // superfan_price_list,
       };
-      debugger;
       const _data = await requireAPI(
         "POST",
         "/api/zone/create",
diff --git a/components/UploadImgs/index.js b/components/UploadImgs/index.js
index 9f5682d..f1e6552 100644
--- a/components/UploadImgs/index.js
+++ b/components/UploadImgs/index.js
@@ -1,10 +1,11 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
-import { DotLoading, Image, Toast, ImageViewer, Modal } from "antd-mobile";
+import { DotLoading, Image, List, ImageViewer, Modal } from "antd-mobile";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAdd, faClose, faPlay } from "@fortawesome/free-solid-svg-icons";
 import { getVideoBase64 } from "@/utils/tools";
+import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
 export default function UploadImgs({
   assets,
   getImgs,
@@ -21,7 +22,9 @@ export default function UploadImgs({
   const [frameImage, setFrameImage] = useState({ src: null, h: 0, w: 0 });
   useEffect(() => {
     if (existImages.length > 0) {
-      setFilesUrls(existImages.map((it) => it.url));
+      setFilesUrls(
+        existImages.map((it, index) => ({ url: it.url, id: `${index}` }))
+      );
     }
     if (videoSrc) {
       setVideoUrl(videoSrc);
@@ -38,7 +41,10 @@ export default function UploadImgs({
     var videoObj = document.createElement("video");
     const eles = Array.from(e.target.files);
     if (type == 1) {
-      const newFils = eles.map((it) => URL.createObjectURL(it));
+      const newFils = eles.map((it, index) => ({
+        url: URL.createObjectURL(it),
+        id: "new" + index,
+      }));
       setFilesUrls((old) => [...old, ...newFils]);
     } else {
       videoObj.onloadedmetadata = function (evt) {
@@ -112,53 +118,100 @@ export default function UploadImgs({
     // videoD.src = url;
     getVideoBase64(url).then((src) => {
       setFrameImage((old) => ({ ...old, src }));
-      setFilesUrls([src]);
+      setFilesUrls([{ url: src, id: "0" }]);
     });
   };
+  const reorder = (list, startIndex, endIndex) => {
+    const result = Array.from(list);
+    const [removed] = result.splice(startIndex, 1);
+    result.splice(endIndex, 0, removed);
 
+    return result;
+  };
+  const onDragEnd = (result) => {
+    if (!result.destination) return;
+    const newList = reorder(
+      assets,
+      result.source.index,
+      result.destination.index
+    );
+    getImgs([...newList]);
+    // const newArr=newList.map((it,index)=>({...it,url:it.url||URL.createObjectURL(it)}))
+    const newArr = newList.map((it, index) => {
+      if (it.url) {
+        return { url: it.url, id: `${index}` };
+      } else {
+        return { url: URL.createObjectURL(it), id: `${index}` };
+      }
+    });
+    setFilesUrls(newArr);
+  };
   return (
     <div>
-      <div className="grid grid-cols-4 gap-1">
-        {filesUrls.map((item, index) => {
-          return (
-            <div key={index} className="rounded relative">
-              <div
-                onClick={() => showPhotos(filesUrls, index)}
-                style={{ height: "calc(25vw - 0.75rem)" }}
-              >
-                <Image
-                  src={item}
-                  width="100%"
-                  height="100%"
-                  className="rounded"
-                  fit="cover"
-                />
-              </div>
+      <DragDropContext onDragEnd={onDragEnd}>
+        <Droppable direction="horizontal" droppableId="droppable">
+          {(droppableProvided) => (
+            <div
+              className="mb-2 grid grid-cols-4 gap-1"
+              ref={droppableProvided.innerRef}
+            >
+              {filesUrls.map((item, index) => (
+                <Draggable key={item.id} draggableId={item.id} index={index}>
+                  {(provided, snapshot) => (
+                    <div
+                      ref={provided.innerRef}
+                      {...provided.draggableProps}
+                      {...provided.dragHandleProps}
+                      style={{
+                        ...provided.draggableProps.style,
+                        opacity: snapshot.isDragging ? 0.8 : 1,
+                      }}
+                    >
+                      <div key={index} className="rounded relative">
+                        <div
+                          onClick={() => showPhotos(filesUrls, index)}
+                          style={{ height: "calc(25vw - 0.75rem)" }}
+                        >
+                          <Image
+                            src={item.url}
+                            width="100%"
+                            height="100%"
+                            className="rounded"
+                            fit="cover"
+                          />
+                        </div>
 
-              <div
-                className="h-6 w-6 bg-[#33333380] absolute top-0 right-0 flex justify-center items-center rounded-bl"
-                onClick={() => handleRemoveItem(index)}
-              >
-                <FontAwesomeIcon icon={faClose} size="xl" />
-              </div>
-              {type == 2 && (
-                <div
-                  className="absolute top-1/2 left-1/2 flex justify-center items-center -mt-2 -ml-1"
-                  onClick={() => showPhotos(filesUrls)}
-                >
-                  <FontAwesomeIcon icon={faPlay} size="xl" />
-                </div>
-              )}
+                        <div
+                          className="h-6 w-6 bg-[#33333380] absolute top-0 right-0 flex justify-center items-center rounded-bl"
+                          onClick={() => handleRemoveItem(index)}
+                        >
+                          <FontAwesomeIcon icon={faClose} size="xl" />
+                        </div>
+                        {type == 2 && (
+                          <div
+                            className="absolute top-1/2 left-1/2 flex justify-center items-center -mt-2 -ml-1"
+                            onClick={() => showPhotos(filesUrls)}
+                          >
+                            <FontAwesomeIcon icon={faPlay} size="xl" />
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  )}
+                </Draggable>
+              ))}
+              {droppableProvided.placeholder}
             </div>
-          );
-        })}
-        {loading && (
-          <div className="rounded border-[#ffffff80] text-[#ffffff80] flex flex-col justify-center items-center">
-            <DotLoading />
-            <p>上传中</p>
-          </div>
-        )}
-
+          )}
+        </Droppable>
+      </DragDropContext>
+      {loading && (
+        <div className="rounded border-[#ffffff80] text-[#ffffff80] flex flex-col justify-center items-center">
+          <DotLoading />
+          <p>上传中</p>
+        </div>
+      )}
+      <div className="grid grid-cols-4 gap-1">
         {type == 2 && filesUrls.length > 0 ? null : (
           <>
             <label htmlFor="uploadAvatarBtn">