编辑图片拖拽
This commit is contained in:
al
parent
de9e8e747e
commit
e9e95f3749
|
|
@ -316,7 +316,6 @@ export default function CreateProfile() {
|
|||
// 新版本
|
||||
// superfan_price_list,
|
||||
};
|
||||
debugger;
|
||||
const _data = await requireAPI(
|
||||
"POST",
|
||||
"/api/zone/create",
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue