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,图片视频不同时存在
+
+
+
+ )}
+
+ );
+};
+
+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: ,
},
],
},