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 (
上传中
-上传中
+