From 70d94f0d0cda19035f6937b22f11188816ca6c74 Mon Sep 17 00:00:00 2001 From: yezian Date: Sat, 27 Jan 2024 03:00:44 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=8A=A8=E6=80=81=E7=AE=A1?= =?UTF-8?q?=E7=90=86=E7=9A=84=E5=8F=91=E5=B8=83=E3=80=81=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E3=80=81=E5=88=A0=E9=99=A4=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/CreateAndEditPost/index.jsx | 574 ++++++++++++++++++++++++ src/pages/CreatePost/index.jsx | 367 --------------- src/pages/Op/index.jsx | 5 +- src/pages/StreamerInformation/index.jsx | 2 - src/routes/index.js | 6 +- 5 files changed, 580 insertions(+), 374 deletions(-) create mode 100644 src/pages/CreateAndEditPost/index.jsx delete mode 100644 src/pages/CreatePost/index.jsx diff --git a/src/pages/CreateAndEditPost/index.jsx b/src/pages/CreateAndEditPost/index.jsx new file mode 100644 index 0000000..d1f6169 --- /dev/null +++ b/src/pages/CreateAndEditPost/index.jsx @@ -0,0 +1,574 @@ +import React, { useState, useEffect } from "react"; +import { Form, Input, Table, Image, Space, Button, Modal, message } from "antd"; +import baseRequest from "../../utils/baseRequest"; +import ImageUploader from "../../components/ImageUploader"; +import VideoUploader from "../../components/VideoUploader"; + +const CreateAndEditPostContent = (props) => { + //表头 + const columns = [ + { + title: "动态信息", + dataIndex: "info", + key: "info", + render: (data) => ( +
+

+ 动态id：{data.id} +

+

+ 点赞：{data.like} +

+

+ 创建时间：{data.ct} +

+
+ ), + }, + { + title: "动态文案", + dataIndex: "content", + key: "content", + }, + { + title: "媒体", + dataIndex: "media", + key: "media", + render: (data) => ( +
+ {data?.images?.map((item, index) => ( + + ))} + {data?.videos?.map((item, index) => ( +
+ ), + }, + { + title: "操作", + dataIndex: "opeartion", + key: "opeartion", + render: (_, record) => ( +
+ + + + + + +
+ ), + }, + ]; + + //控制编辑modal是否出现 + const [isEditModalOpen, setIsEditModalOpen] = useState(false); + + //modal打开时的默认值 + const [defaultValues, setDefaultValues] = useState({}); + const [defaultMedia, setDefaultMedia] = useState({}); + + //点击modal取消按钮 + const handleCancel = () => { + setDefaultValues({}); + setDefaultMedia({}); + setEditImageId([]); + setEditVideoId([]); + setIsEditModalOpen(false); + }; + + //点击编辑按钮 + const onClickEdit = (record) => { + setDefaultValues(record); + setDefaultMedia(record.media); + setIsEditModalOpen(true); + }; + + //保存上传的媒体id + const [editImageId, setEditImageId] = useState([]); + const [editVideoId, setEditVideoId] = useState([]); + + //删除默认的媒体 + const handleDeleteMedia = (type, id) => { + if (type === "video") { + setDefaultMedia({ + ...defaultMedia, + video_ids: [], + }); + return; + } + if (type === "image") { + setDefaultMedia({ + ...defaultMedia, + image_ids: defaultMedia.image_ids.filter((item) => item !== id), + images: defaultMedia.images.filter((item) => item.id !== id), + }); + return; + } + }; + + //点击确认提交更改动态 + const handleChange = async (value) => { + const imageIds = [...defaultMedia.image_ids, ...editImageId]; + const videoIds = [...defaultMedia.video_ids, ...editVideoId]; + if (imageIds.length === 0 && videoIds.length === 0) { + alert("图片或视频不可为空"); + return; + } + if (imageIds.length !== 0 && videoIds.length !== 0) { + alert("不可同时上传图片和视频"); + return; + } + if (imageIds.length > 9) { + alert("图片不可超过9张"); + return; + } + if (videoIds.length > 1) { + alert("视频不可超过1个"); + return; + } + + try { + const base = baseRequest(); + const response = await fetch("/op/moment/update", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + id: defaultValues.info.id, + text: value.content, + media_component: { + image_ids: imageIds, + video_ids: videoIds, + }, + ...base, + }), + }); + const temData = await response.json(); + if (temData.ret === -1) { + alert(temData.msg); + return; + } + setShowData( + showData.filter((item) => item.info.id !== defaultValues.info.id) + ); + handleCancel(); + } catch (error) { + console.error(error); + } + }; + + //点击删除按钮 + const onClickDelete = async (record) => { + try { + const base = baseRequest(); + const response = await fetch("/op/moment/delete", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + id: record.info.id, + ...base, + }), + }); + const temData = await response.json(); + console.log(temData); + if (temData.ret === -1) { + alert(temData.msg); + return; + } + setShowData(showData.filter((item) => item.info.id !== record.info.id)); + } catch (error) { + console.error(error); + } + }; + + //展示的数据 + const [showData, setShowData] = useState([]); + + //获取数据 + const getData = async () => { + try { + const base = baseRequest(); + const response = await fetch("/op/moment/list", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + ct_upper_bound: Math.floor(new Date().getTime() / 1000), + offset: 0, + limit: 200, + ...base, + }), + }); + const temData = await response.json(); + if (temData.ret === -1) { + alert(temData.msg); + return; + } + //匹配表格格式 + const structedData = temData.data.list.map((item, index) => { + return { + key: index, + info: { + id: item.id, + like: item.thumbs_up_num, + ct: new Date(item.ct * 1000).toLocaleString(), + }, + content: item.text, + media: item.media_component, + }; + }); + setShowData(structedData); + } catch (error) { + console.error(error); + } + }; + useEffect(() => { + getData(); + }, []); + + //搜索 + const search = async (value) => { + try { + const base = baseRequest(); + const detailResponse = await fetch(`/op/streamer/list_ext_by_user_id`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + user_id: parseInt(value.userId, 10), + ...base, + }), + }); + const detailData = await detailResponse.json(); + if (detailData.ret === -1) { + alert(detailData.msg); + return; + } + const response = await fetch("/op/moment/list_by_mid", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + mid: detailData.data.streamer_ext.mid, + ...base, + }), + }); + const temData = await response.json(); + if (temData.ret === -1) { + alert(temData.msg); + return; + } + //匹配表格格式 + const structedData = temData.data.list.map((item, index) => { + return { + key: index, + info: { + id: item.id, + like: item.thumbs_up_num, + ct: new Date(item.ct * 1000).toLocaleString(), + }, + content: item.text, + media: item.media_component, + }; + }); + setShowData(structedData); + } catch (error) { + console.error(error); + } + }; + //表单提交失败 + const onFinishFailed = (errorInfo) => { + console.log("Failed:", errorInfo); + }; + + //控制创建动态modal是否出现 + const [isModalOpen, setIsModalOpen] = useState(false); + + //保存上传的媒体的id + const [imageId, setImageId] = useState([]); + const [videoId, setVideoId] = useState([]); + + //在modal中搜索用户 + const [userInfo, setUserInfo] = useState(); + const modalSearch = async (value) => { + try { + const base = baseRequest(); + const response = await fetch(`/op/account/list_by_user_id`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + user_id: parseInt(value.userId, 10), + ...base, + }), + }); + const data = await response.json(); + if (data.ret === -1) { + alert(data.msg); + return; + } + setUserInfo(data.data.account); + } catch (error) { + console.error(error); + } + }; + //选中用户 + const [selectedUser, setSelectedUser] = useState(); + const handleSelected = () => { + if (selectedUser) { + setSelectedUser(); + return; + } + setSelectedUser(userInfo.mid); + }; + //提交创建动态 + const [form] = Form.useForm(); + const handleSubmit = async (value) => { + if (!selectedUser) { + alert("还未选中用户"); + return; + } + if (imageId.length === 0 && videoId.length === 0) { + alert("图片或视频不可为空"); + return; + } + if (imageId.length !== 0 && videoId.length !== 0) { + alert("不可同时上传图片和视频"); + return; + } + if (imageId.length > 9) { + alert("图片不可超过9张"); + return; + } + if (videoId.length > 1) { + alert("视频不可超过1个"); + return; + } + + try { + const base = baseRequest(); + const response = await fetch(`/op/moment/create`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + mid: selectedUser, + status: 2, + text: value.content, + media_component: { image_ids: imageId, video_ids: videoId }, + ...base, + }), + }); + const data = await response.json(); + if (data.ret === -1) { + alert(data.msg); + return; + } + message.success("发布成功"); + } catch (error) { + console.error(error); + } + + form.resetFields(); + setUserInfo(); + setSelectedUser(); + setIsModalOpen(false); + setImageId([]); + setVideoId([]); + }; + //关闭弹窗 + const handleCancelModal = () => { + form.resetFields(); + setUserInfo(); + setSelectedUser(); + setIsModalOpen(false); + setImageId([]); + setVideoId([]); + }; + + return ( +
+
+ + + + + + +
+ +
+ + + {/* 重复判断isModalOpen是为了重新渲染ImageUploader和VideoUploader组件 */} + {isModalOpen && ( + +

+ *请选中主播后再发布，并确保文案不为空，图片数不超过9，视频数不超过1，图片视频不同时存在 +

+
+ + + + + + + + {userInfo && ( +
+ +
+

ID：{userInfo.user_id}

+

昵称：{userInfo.name}

+
+ +
+ )} +
+ + + + + + + + + + + )} + {/* 编辑动态内容的弹窗，重复判断isEditModalOpen是为了重新渲染ImageUploader和VideoUploader组件 */} + {isEditModalOpen && ( + +

+ *请选中主播后再发布，并确保文案不为空，图片数不超过9，视频数不超过1，图片视频不同时存在 +

+
+ + + + + + {defaultMedia.image_ids.length !== 0 && ( +
+ {defaultMedia.images.map((item) => ( +
+ + +
+ ))} +
+ )} + {defaultMedia.video_ids.length !== 0 && ( +
+
+
+
+ )} + + + + + + )} + + ); +}; + +export default function CreateAndEditPost() { + return ; +} diff --git a/src/pages/CreatePost/index.jsx b/src/pages/CreatePost/index.jsx deleted file mode 100644 index 4c3ddfe..0000000 --- a/src/pages/CreatePost/index.jsx +++ /dev/null @@ -1,367 +0,0 @@ -import React, { useState, useEffect } from "react"; -import { Form, Input, Table, Image, Space, Button, Modal, message } from "antd"; -import baseRequest from "../../utils/baseRequest"; -import ImageUploader from "../../components/ImageUploader"; -import VideoUploader from "../../components/VideoUploader"; - -const CreatePostContent = (props) => { - const { TextArea } = Input; - //表头 - const columns = [ - { - title: "动态信息", - dataIndex: "info", - key: "info", - render: (data) => ( -
-

- 动态id：{data.id} -

-

- 创建时间：{data.ct} -

-
- ), - }, - { - title: "动态文案", - dataIndex: "content", - key: "content", - }, - { - title: "媒体", - dataIndex: "media", - key: "media", - render: (data) => ( -
- {data?.images?.map((item, index) => ( - - ))} - {data?.videos?.map((item, index) => ( -
- ), - }, - ]; - //获取数据 - const [data, setData] = useState([]); - // const [offset, setOffset] = useState(0); - // const [more, setMore] = useState(1); - // const getData = async () => { - // if (!more) return; - // try { - // const base = baseRequest(); - // const response = await fetch("/op/image_audit_task/list", { - // method: "POST", - // headers: { - // "Content-Type": "application/json", - // }, - // body: JSON.stringify({ - // offset: offset, - // limit: 20, - // ...base, - // }), - // }); - // const temData = await response.json(); - // if (temData.ret === -1) { - // alert(temData.msg); - // return; - // } - // //匹配表格格式 - // const structedData = temData.data.list.map((item, index) => { - // return { - // key: index, - // id: item.id, - // newMedia: item?.audited_media?.images, - // oldMedia: item?.old_media?.images, - // info: item.image_audits, - // submitTime: new Date(item.ct * 1000).toLocaleString(), - // remarks: item.remarks, - // others: { - // id: item.id, - // audited_media: item.audited_media, - // associative_database: item.associative_database, - // associative_table_name: item.associative_table_name, - // associative_table_id: item.associative_table_id, - // associative_table_column: item.associative_table_column, - // }, - // }; - // }); - // setData([...data, ...structedData]); - // setOffset(temData.data.offset); - // setMore(temData.data.more); - // } catch (error) { - // console.error(error); - // } - // }; - // useEffect(() => { - // getData(); - // }, []); - - //展示的数据 - const [showData, setShowData] = useState([]); - - //搜索 - const search = async (value) => { - return; - // try { - // const base = baseRequest(); - // const response = await fetch("/op/moment/list_by_mid", { - // method: "POST", - // headers: { - // "Content-Type": "application/json", - // }, - // body: JSON.stringify({ - // mid: 1, - // ...base, - // }), - // }); - // const temData = await response.json(); - // if (temData.ret === -1) { - // alert(temData.msg); - // return; - // } - // //匹配表格格式 - // const structedData = temData.data.list.map((item, index) => { - // return { - // key: index, - // id: item.id, - // newMedia: item?.audited_media?.images, - // oldMedia: item?.old_media?.images, - // info: item.image_audits, - // submitTime: new Date(item.ct * 1000).toLocaleString(), - // remarks: item.remarks, - // others: { - // id: item.id, - // audited_media: item.audited_media, - // associative_database: item.associative_database, - // associative_table_name: item.associative_table_name, - // associative_table_id: item.associative_table_id, - // associative_table_column: item.associative_table_column, - // }, - // }; - // }); - // setShowData([...showData, ...structedData]); - // } catch (error) { - // console.error(error); - // } - }; - //表单提交失败 - const onFinishFailed = (errorInfo) => { - console.log("Failed:", errorInfo); - }; - - //控制充值modal是否出现 - const [isModalOpen, setIsModalOpen] = useState(false); - - //保存上传的媒体的id - const [imageId, setImageId] = useState([]); - const [videoId, setVideoId] = useState([]); - - //在modal中搜索用户 - const [userInfo, setUserInfo] = useState(); - const modalSearch = async (value) => { - try { - const base = baseRequest(); - const response = await fetch(`/op/account/list_by_user_id`, { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - user_id: parseInt(value.userId, 10), - ...base, - }), - }); - const data = await response.json(); - if (data.ret === -1) { - alert(data.msg); - return; - } - setUserInfo(data.data.account); - } catch (error) { - console.error(error); - } - }; - //选中用户 - const [selectedUser, setSelectedUser] = useState(); - const handleSelected = () => { - if (selectedUser) { - setSelectedUser(); - return; - } - setSelectedUser(userInfo.mid); - }; - //提交修改 - const [form] = Form.useForm(); - const handleSubmit = async (value) => { - if (!selectedUser) { - alert("还未选中用户"); - return; - } - if (imageId.length === 0 && videoId.length === 0) { - alert("图片或视频不可为空"); - return; - } - if (imageId.length !== 0 && videoId.length !== 0) { - alert("不可同时上传图片和视频"); - return; - } - if (imageId.length > 9) { - alert("图片不可超过9张"); - return; - } - if (videoId.length > 1) { - alert("视频不可超过1个"); - return; - } - - try { - const base = baseRequest(); - const response = await fetch(`/op/moment/create`, { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - mid: selectedUser, - status: 2, - text: value.content, - media_component: { image_ids: imageId, video_ids: videoId }, - ...base, - }), - }); - const data = await response.json(); - if (data.ret === -1) { - alert(data.msg); - return; - } - message.success("发布成功"); - } catch (error) { - console.error(error); - } - - form.resetFields(); - setUserInfo(); - setSelectedUser(); - setIsModalOpen(false); - setImageId([]); - setVideoId([]); - }; - //关闭弹窗 - const handleCancelModal = () => { - form.resetFields(); - setUserInfo(); - setSelectedUser(); - setIsModalOpen(false); - setImageId([]); - setVideoId([]); - }; - - return ( -
-
- - - - - - - - -
-
- - {/* 重复判断isModalOpen是为了重新渲染ImageUploader和VideoUploader组件 */} - {isModalOpen && ( - -

- *请选中主播后再发布，并确保文案不为空，图片数不超过9，视频数不超过1，图片视频不同时存在 -

-
- - - - - - - - {userInfo && ( -
- -
-

ID：{userInfo.user_id}

-

昵称：{userInfo.name}

-
- -
- )} -
- - - - - - - - - - - )} - - ); -}; - -export default function CreatePost() { - return ; -} diff --git a/src/pages/Op/index.jsx b/src/pages/Op/index.jsx index 74c99da..3cc2eb2 100644 --- a/src/pages/Op/index.jsx +++ b/src/pages/Op/index.jsx @@ -12,6 +12,7 @@ import { PoweroffOutlined, MoneyCollectOutlined, FileSearchOutlined, + FormOutlined, } from "@ant-design/icons"; import { Menu, Layout } from "antd"; import { Outlet, useNavigate, useLocation } from "react-router-dom"; @@ -56,8 +57,8 @@ export default function Op() { getItem("网红资料", "streamerInformation"), // getItem("网红平台", "streamerPlatform"), ]), - getItem("动态管理", "postManagement", , [ - getItem("发布", "createPost"), + getItem("动态管理", "postManagement", , [ + getItem("发布与编辑", "createAndEditPost"), ]), // getItem("用户管理", "userManagement", ), // getItem("订单管理", "orderManagement", , [ diff --git a/src/pages/StreamerInformation/index.jsx b/src/pages/StreamerInformation/index.jsx index 249a13c..870c6bd 100644 --- a/src/pages/StreamerInformation/index.jsx +++ b/src/pages/StreamerInformation/index.jsx @@ -209,8 +209,6 @@ const StreamerInformationContent = () => { { label: "香港特别行政区", value: "香港特别行政区" }, { label: "澳门特别行政区", value: "澳门特别行政区" }, ]; - //modal中平台checkbox名称 - const platformList = ["抖音", "微博", "哔哩哔哩", "快手", "秘live"]; //表头可见性表单的checkbox选项 const showColumnsOptions = [ { diff --git a/src/routes/index.js b/src/routes/index.js index 26bdfde..a4cd4af 100644 --- a/src/routes/index.js +++ b/src/routes/index.js @@ -15,7 +15,7 @@ import StreamerVerification from "../pages/StreamerVerification"; import ImageMachineReview from "../pages/ImageMachineReview"; import TextMachineReview from "../pages/TextMachineReview"; import ManualRechargeAndWithdrawal from "../pages/ManualRechargeAndWithdrawal"; -import CreatePost from "../pages/CreatePost"; +import CreateAndEditPost from "../pages/CreateAndEditPost"; const routes = [ { @@ -87,8 +87,8 @@ const routes = [ element: , }, { - path: "createPost/*", - element: , + path: "createAndEditPost/*", + element: , }, ], },