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 (
-
- {filesUrls.map((item, index) => { - return ( -
-
showPhotos(filesUrls, index)} - style={{ height: "calc(25vw - 0.75rem)" }} - > - -
+ + + {(droppableProvided) => ( +
+ {filesUrls.map((item, index) => ( + + {(provided, snapshot) => ( +
+
+
showPhotos(filesUrls, index)} + style={{ height: "calc(25vw - 0.75rem)" }} + > + +
-
handleRemoveItem(index)} - > - -
- {type == 2 && ( -
showPhotos(filesUrls)} - > - -
- )} +
handleRemoveItem(index)} + > + +
+ {type == 2 && ( +
showPhotos(filesUrls)} + > + +
+ )} +
+
+ )} +
+ ))} + {droppableProvided.placeholder}
- ); - })} - {loading && ( -
- -

上传中

-
- )} - + )} +
+
+ {loading && ( +
+ +

上传中

+
+ )} +
{type == 2 && filesUrls.length > 0 ? null : ( <>