完善功能图片浏览功能

This commit is contained in:
al 2024-08-08 20:34:18 +08:00
parent ad47c28d0f
commit a02e57e404
5 changed files with 46 additions and 32 deletions

View File

@ -3,7 +3,7 @@ import { Form, Input, Table, Image, Space, Button, Modal, message } from "antd";
import baseRequest from "../../utils/baseRequest"; import baseRequest from "../../utils/baseRequest";
import ImageUploader from "../../components/ImageUploader"; import ImageUploader from "../../components/ImageUploader";
import VideoUploader from "../../components/VideoUploader"; import VideoUploader from "../../components/VideoUploader";
import VideoPlayer from '../../components/VideoPlayer'; import VideoPlayer from "../../components/VideoPlayer";
const CreateAndEditPostContent = (props) => { const CreateAndEditPostContent = (props) => {
const { TextArea } = Input; const { TextArea } = Input;
// //
@ -37,16 +37,20 @@ const CreateAndEditPostContent = (props) => {
key: "media", key: "media",
render: (data) => ( render: (data) => (
<div> <div>
{data?.images?.map((item, index) => ( <Image.PreviewGroup
<Image items={data?.images?.map((item) => item.urls[0])}
key={index} >
src={item.urls[0]} {data?.images?.map((item, index) => (
width={150} <Image
style={{ marginBottom: 10 }} key={index}
/> src={item.urls[0]}
))} width={150}
style={{ marginBottom: 10 }}
/>
))}
</Image.PreviewGroup>
{data?.videos?.map((item, index) => ( {data?.videos?.map((item, index) => (
<VideoPlayer key={index} url={item.urls[0]}/> <VideoPlayer key={index} url={item.urls[0]} />
))} ))}
</div> </div>
), ),
@ -542,7 +546,7 @@ const CreateAndEditPostContent = (props) => {
<div className="flex flex-row mt-4"> <div className="flex flex-row mt-4">
<div className="relative"> <div className="relative">
<div className="mr-auto"> <div className="mr-auto">
<VideoPlayer url={defaultMedia.videos[0].urls[0]}/> <VideoPlayer url={defaultMedia.videos[0].urls[0]} />
</div> </div>
<Button <Button
className="absolute top-0 left-0 w-full" className="absolute top-0 left-0 w-full"

View File

@ -55,9 +55,11 @@ const EditSpacePostContent = (props) => {
</div> </div>
<p className="text-red-400">媒体</p> <p className="text-red-400">媒体</p>
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
<Image.PreviewGroup items={data.media.images?.map((item) => item.urls[0])}>
{data.media.images.map((item, index) => ( {data.media.images.map((item, index) => (
<Image key={index} src={item.urls[0]} width={100} /> <Image key={index} src={item.urls[0]} width={100} />
))} ))}
</Image.PreviewGroup>
{data.media.videos.map((item, index) => ( {data.media.videos.map((item, index) => (
<VideoPlayer key={index} url={item.urls[0]}/> <VideoPlayer key={index} url={item.urls[0]}/>
))} ))}

View File

@ -53,9 +53,11 @@ const StreamerImageMachineReviewContent = (props) => {
key: "newMedia", key: "newMedia",
render: (data) => ( render: (data) => (
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
{data?.map((item, index) => ( <Image.PreviewGroup items={data?.map((item) => item.urls[0])}>
<Image key={index} src={item.urls[0]} width={100} /> {data?.map((item, index) => (
))} <Image key={index} src={item.urls[0]} width={100} />
))}
</Image.PreviewGroup>
</div> </div>
), ),
}, },
@ -65,9 +67,11 @@ const StreamerImageMachineReviewContent = (props) => {
key: "oldMedia", key: "oldMedia",
render: (data) => ( render: (data) => (
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
{data?.map((item, index) => ( <Image.PreviewGroup items={data?.map((item) => item.urls[0])}>
<Image key={index} src={item.urls[0]} width={100} /> {data?.map((item, index) => (
))} <Image key={index} src={item.urls[0]} width={100} />
))}
</Image.PreviewGroup>
</div> </div>
), ),
}, },

View File

@ -1,7 +1,7 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { Form, Input, Table, Image, Space, Button, Modal, message } from "antd"; import { Form, Input, Table, Image, Space, Button, Modal, message } from "antd";
import baseRequest from "../../utils/baseRequest"; import baseRequest from "../../utils/baseRequest";
import VideoPlayer from '../../components/VideoPlayer'; import VideoPlayer from "../../components/VideoPlayer";
const TopPostsContent = (props) => { const TopPostsContent = (props) => {
// //
const columns = [ const columns = [
@ -34,16 +34,18 @@ const TopPostsContent = (props) => {
key: "media", key: "media",
render: (data) => ( render: (data) => (
<div> <div>
{data?.images?.map((item, index) => ( <Image.PreviewGroup items={data?.images?.map((item) => item.urls[0])}>
<Image {data?.images?.map((item, index) => (
key={index} <Image
src={item.urls[0]} key={index}
width={150} src={item.urls[0]}
style={{ marginBottom: 10 }} width={150}
/> style={{ marginBottom: 10 }}
))} />
))}
</Image.PreviewGroup>
{data?.videos?.map((item, index) => ( {data?.videos?.map((item, index) => (
<VideoPlayer key={index} url={item.urls[0]} width={150} /> <VideoPlayer key={index} url={item.urls[0]} width={150} />
))} ))}
</div> </div>
), ),

View File

@ -8,7 +8,7 @@ import {
useLocation, useLocation,
} from "react-router-dom"; } from "react-router-dom";
import baseRequest from "../../utils/baseRequest"; import baseRequest from "../../utils/baseRequest";
import VideoPlayer from '../../components/VideoPlayer'; import VideoPlayer from "../../components/VideoPlayer";
const ZonePostMachineReviewContent = (props) => { const ZonePostMachineReviewContent = (props) => {
const { TextArea } = Input; const { TextArea } = Input;
const current = props.current; const current = props.current;
@ -48,11 +48,13 @@ const ZonePostMachineReviewContent = (props) => {
</div> </div>
<p className="text-red-400">媒体</p> <p className="text-red-400">媒体</p>
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
{data.media.images.map((item, index) => ( <Image.PreviewGroup items={data.media.images?.map((item) => item.urls[0])}>
<Image key={index} src={item.urls[0]} width={100} /> {data.media.images.map((item, index) => (
))} <Image key={index} src={item.urls[0]} width={100} />
))}
</Image.PreviewGroup>
{data.media.videos.map((item, index) => ( {data.media.videos.map((item, index) => (
<VideoPlayer key={index} url={item.urls[0]} width={150} /> <VideoPlayer key={index} url={item.urls[0]} width={150} />
))} ))}
</div> </div>
</div> </div>