改善图片拖动功能以及修复问题
This commit is contained in:
parent
ce40a40489
commit
12b19ce52e
|
|
@ -316,7 +316,7 @@ export default function EditSpacePost() {
|
|||
}))
|
||||
}
|
||||
autoSize={{ minRows: 6, maxRows: 15 }}
|
||||
value={formData.paidText.includes("\n") ? formData.paidText.slice(2): formData.paidText}
|
||||
value={formData.paidText.includes("\n") ? formData.paidText.slice(1): formData.paidText}
|
||||
style={{ "--font-size": "14px" }}
|
||||
className="bg-[#FFFFFF1A] rounded-2xl mt-2 mb-4 p-2 h-full"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import {
|
|||
faAngleRight,
|
||||
faCalendar,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { getSpaceData,getStreamerInfo } from "@/api/space";
|
||||
import { getSpaceData,getStreamerDetailInfo } from "@/api/space";
|
||||
import requireAPI from "@/utils/requireAPI";
|
||||
export default function Setting() {
|
||||
const router = useRouter();
|
||||
|
|
@ -19,9 +19,10 @@ export default function Setting() {
|
|||
(async () => {
|
||||
const {mid} = params;
|
||||
if (mid) {
|
||||
const info = await getStreamerInfo(Number(mid));
|
||||
const info = await getStreamerDetailInfo(Number(mid));
|
||||
await getSpaceData(Number(mid)).then((res) => {
|
||||
setStreamerInfo({ ...info, refund_enable: res?.refund_enable });
|
||||
setStreamerInfo({ ...info.streamer_ext
|
||||
, refund_enable: res?.refund_enable });
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
|
@ -133,7 +134,7 @@ export default function Setting() {
|
|||
<Avatar
|
||||
rounded-full
|
||||
mr-4
|
||||
src={streamerInfo?.avatar}
|
||||
src={streamerInfo?.avatar.images[0].urls[0] }
|
||||
className="mr-4"
|
||||
style={{ "--size": "52px", "--border-radius": "50%" }}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -79,11 +79,15 @@ export default function PostItem({
|
|||
}, []);
|
||||
const handleDelete = async (type) => {
|
||||
try {
|
||||
const _data = await requireAPI("POST", `/api/${type=="space"?"zone_moment":"moment"}/delete`, {
|
||||
body: {
|
||||
id: data?.id,
|
||||
},
|
||||
});
|
||||
const _data = await requireAPI(
|
||||
"POST",
|
||||
`/api/${type == "space" ? "zone_moment" : "moment"}/delete`,
|
||||
{
|
||||
body: {
|
||||
id: data?.id,
|
||||
},
|
||||
}
|
||||
);
|
||||
if (_data.ret === -1) {
|
||||
Toast.show({
|
||||
icon: "fail",
|
||||
|
|
@ -172,21 +176,23 @@ export default function PostItem({
|
|||
</span>
|
||||
)}
|
||||
</div>
|
||||
{(data?.status === 0 || data?.status === 1) && (
|
||||
{(type == "space"
|
||||
? data?.status === 0 || data?.status === 1
|
||||
: data?.status === 3 || data?.status === 4) && (
|
||||
<div className="flex flex-col items-start mt-2">
|
||||
<div className="py-1 px-2 rounded bg-[#3B69B8]">
|
||||
<span className="text-sm">审核中</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{data?.status === 3 &&
|
||||
{(type == "space"
|
||||
? data?.status === 3
|
||||
: data?.status === 5 || data?.status === 6) &&
|
||||
(type == "space" ? (
|
||||
<p
|
||||
className="py-1 px-2 inline-block bg-[#F53030] rounded"
|
||||
onClick={() => {
|
||||
router.push(
|
||||
`/space/editSpacePost/${data.id}`
|
||||
);
|
||||
router.push(`/space/editSpacePost/${data.id}`);
|
||||
}}
|
||||
>
|
||||
<span className="text-sm">
|
||||
|
|
@ -195,9 +201,7 @@ export default function PostItem({
|
|||
</p>
|
||||
) : (
|
||||
<p className="py-1 px-2 inline-block bg-[#F53030] rounded">
|
||||
<span className="text-sm">
|
||||
审核未通过，请删除后重新提交。
|
||||
</span>
|
||||
<span className="text-sm">审核未通过，请删除后重新提交。</span>
|
||||
</p>
|
||||
))}
|
||||
<div>
|
||||
|
|
@ -389,21 +393,25 @@ export default function PostItem({
|
|||
<li
|
||||
className="py-1 px-4"
|
||||
onClick={() => {
|
||||
router.push(
|
||||
`/space/editSpacePost/${data.id}`
|
||||
);
|
||||
router.push(`/space/editSpacePost/${data.id}`);
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</li>
|
||||
<hr className="border-[#ffffff2b] my-1" />
|
||||
<li className="py-1 px-4" onClick={()=>handleDelete("space")}>
|
||||
<li
|
||||
className="py-1 px-4"
|
||||
onClick={() => handleDelete("space")}
|
||||
>
|
||||
删除
|
||||
</li>
|
||||
</>
|
||||
) : type == "post" && account?.mid == data?.mid ? (
|
||||
<>
|
||||
<li className="py-1 px-4" onClick={()=>handleDelete("post")}>
|
||||
<li
|
||||
className="py-1 px-4"
|
||||
onClick={() => handleDelete("post")}
|
||||
>
|
||||
删除
|
||||
</li>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -15,12 +15,13 @@ export default function UploadImgs({
|
|||
videoSrc = null,
|
||||
getVideoCover,
|
||||
id = "uploadAvatarBtn",
|
||||
maxLength=9
|
||||
maxLength = 9,
|
||||
}) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [filesUrls, setFilesUrls] = useState([]);
|
||||
const [videoUrl, setVideoUrl] = useState(null);
|
||||
const [frameImage, setFrameImage] = useState({ src: null, h: 0, w: 0 });
|
||||
const [columns, setColumns] = useState([]);
|
||||
useEffect(() => {
|
||||
if (existImages.length > 0) {
|
||||
setFilesUrls(
|
||||
|
|
@ -41,21 +42,35 @@ export default function UploadImgs({
|
|||
id: `${index}`,
|
||||
}));
|
||||
setFilesUrls(list);
|
||||
// 将filesUrls转变为每组四个的二维数组
|
||||
const newList = [];
|
||||
for (let i = 0; i < list.length; i += 4) {
|
||||
newList.push(list.slice(i, i + 4));
|
||||
}
|
||||
const newColumns = newList.map((it, index) => {
|
||||
return {
|
||||
id: "column-" + index,
|
||||
title: "Column " + index,
|
||||
items: it,
|
||||
};
|
||||
});
|
||||
setColumns(newColumns);
|
||||
} else {
|
||||
setFilesUrls([]);
|
||||
setColumns([]);
|
||||
}
|
||||
}, [assets]);
|
||||
|
||||
const handleUploadImage = async (e) => {
|
||||
let file = e.target.files[0];
|
||||
if (!file) return;
|
||||
if((e.target.files.length+assets.length)>maxLength){
|
||||
if (e.target.files.length + assets.length > maxLength) {
|
||||
Toast.show({
|
||||
icon: "fail",
|
||||
content: '最多上传'+maxLength+'张图片',
|
||||
content: "最多上传" + maxLength + "张图片",
|
||||
position: "top",
|
||||
});
|
||||
return
|
||||
return;
|
||||
}
|
||||
var videoUrl = URL.createObjectURL(file);
|
||||
var videoObj = document.createElement("video");
|
||||
|
|
@ -99,12 +114,12 @@ export default function UploadImgs({
|
|||
let newAssets = [...assets];
|
||||
newArr.splice(index, 1);
|
||||
newAssets.splice(index, 1);
|
||||
setFilesUrls(newArr);
|
||||
setFilesUrls(newAssets);
|
||||
getImgs(newAssets);
|
||||
};
|
||||
const showPhotos = (images, index) => {
|
||||
const file = images[0];
|
||||
const urls = type == 2 ? [frameImage.src] : images;
|
||||
const urls = type == 2 ? [frameImage.src] : images.map((it) => it.url);
|
||||
if (type == 1) {
|
||||
ImageViewer.Multi.show({
|
||||
images: urls,
|
||||
|
|
@ -143,87 +158,114 @@ export default function UploadImgs({
|
|||
};
|
||||
const reorder = (list, startIndex, endIndex) => {
|
||||
const result = Array.from(list);
|
||||
const [removed] = result.splice(startIndex, 1);
|
||||
result.splice(endIndex, 0, removed);
|
||||
|
||||
const removing = result[startIndex];
|
||||
const removed = result[endIndex];
|
||||
result[startIndex] = removed;
|
||||
result[endIndex] = removing;
|
||||
return result;
|
||||
};
|
||||
const onDragEnd = (result) => {
|
||||
if (!result.destination) return;
|
||||
const { source, destination, draggableId } = result;
|
||||
|
||||
if (!destination) return;
|
||||
|
||||
if (
|
||||
source.droppableId === destination.droppableId &&
|
||||
source.index === destination.index
|
||||
) {
|
||||
return;
|
||||
}
|
||||
const newList = reorder(
|
||||
assets,
|
||||
result.source.index,
|
||||
result.destination.index
|
||||
parseInt(source.droppableId.match(/\d+/)[0], 10) * 4 + source.index,
|
||||
parseInt(destination.droppableId.match(/\d+/)[0], 10) * 4 + 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}` };
|
||||
const start = columns.find((column) => column.id === source.droppableId);
|
||||
const end = columns.find((column) => column.id === destination.droppableId);
|
||||
const startItems = Array.from(start.items);
|
||||
let endItems = Array.from(end.items);
|
||||
const newColumns = columns.map((column) => {
|
||||
if (column.id === start.id) {
|
||||
startItems.splice(source.index, 1, end.items[destination.index]);
|
||||
return { ...column, items: startItems };
|
||||
}
|
||||
if (column.id === end.id) {
|
||||
endItems.splice(destination.index, 1, start.items[source.index]);
|
||||
return { ...column, items: endItems };
|
||||
}
|
||||
|
||||
return column;
|
||||
});
|
||||
setFilesUrls(newArr);
|
||||
setColumns(newColumns);
|
||||
};
|
||||
return (
|
||||
<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 className="event-none">
|
||||
<DragDropContext
|
||||
onDragEnd={onDragEnd}
|
||||
>
|
||||
{columns.map((column,index) => (
|
||||
<Droppable
|
||||
direction="horizontal"
|
||||
key={column.id}
|
||||
droppableId={column.id}
|
||||
>
|
||||
{(provided) => (
|
||||
<div
|
||||
className="droppable-area grid grid-cols-4 gap-1"
|
||||
style={{ height: "calc(25vw - 0.75rem)" }}
|
||||
{...provided.droppableProps}
|
||||
ref={provided.innerRef}
|
||||
>
|
||||
{column.items.map((item, ind) => (
|
||||
<Draggable key={item.id} draggableId={item.id} index={ind}>
|
||||
{(provided) => (
|
||||
<div
|
||||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
>
|
||||
<div
|
||||
onClick={() => showPhotos(filesUrls, index)}
|
||||
style={{ height: "calc(25vw - 0.75rem)" }}
|
||||
key={ind}
|
||||
className="rounded relative mr-1 mb-1 h-full"
|
||||
>
|
||||
<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)}
|
||||
onClick={() => showPhotos(filesUrls, index*4+ind)}
|
||||
style={{ height: "calc(25vw - 0.75rem)" }}
|
||||
className="h-full pb-1"
|
||||
>
|
||||
<FontAwesomeIcon icon={faPlay} size="xl" />
|
||||
<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*4+ind)}
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
)}
|
||||
</Draggable>
|
||||
))}
|
||||
{droppableProvided.placeholder}
|
||||
</div>
|
||||
)}
|
||||
</Droppable>
|
||||
)}
|
||||
</Draggable>
|
||||
))}
|
||||
{provided.placeholder}
|
||||
</div>
|
||||
)}
|
||||
</Droppable>
|
||||
))}
|
||||
</DragDropContext>
|
||||
{loading && (
|
||||
<div className="rounded border-[#ffffff80] text-[#ffffff80] flex flex-col justify-center items-center">
|
||||
|
|
@ -260,3 +302,11 @@ export default function UploadImgs({
|
|||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ListElement({ item: { id } }) {
|
||||
return (
|
||||
<div className="item">
|
||||
<div>{id}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue