From d99cec76cfc157efaeaf35f5f56a83d80086847f Mon Sep 17 00:00:00 2001 From: yezian Date: Fri, 26 Jan 2024 10:22:39 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=9D=E6=AD=A5=E5=AE=8C=E6=88=90=E5=8F=91?= =?UTF-8?q?=E5=8A=A8=E6=80=81=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/CreatePost/index.jsx | 367 +++++++++++++++++++++++++++++++++ src/pages/Op/index.jsx | 3 + src/routes/index.js | 5 + 3 files changed, 375 insertions(+) create mode 100644 src/pages/CreatePost/index.jsx diff --git a/src/pages/CreatePost/index.jsx b/src/pages/CreatePost/index.jsx new file mode 100644 index 0000000..4c3ddfe --- /dev/null +++ b/src/pages/CreatePost/index.jsx @@ -0,0 +1,367 @@ +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 824e548..74c99da 100644 --- a/src/pages/Op/index.jsx +++ b/src/pages/Op/index.jsx @@ -56,6 +56,9 @@ export default function Op() { getItem("网红资料", "streamerInformation"), // getItem("网红平台", "streamerPlatform"), ]), + getItem("动态管理", "postManagement", , [ + getItem("发布", "createPost"), + ]), // getItem("用户管理", "userManagement", ), // getItem("订单管理", "orderManagement", , [ // getItem("订单查询", "ordersQuerry"), diff --git a/src/routes/index.js b/src/routes/index.js index 84e1610..26bdfde 100644 --- a/src/routes/index.js +++ b/src/routes/index.js @@ -15,6 +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"; const routes = [ { @@ -85,6 +86,10 @@ const routes = [ path: "manualRechargeAndWithdrawal/*", element: , }, + { + path: "createPost/*", + element: , + }, ], }, ];