初步完成发动态功能
This commit is contained in:
parent
51906bafa4
commit
d99cec76cf
|
|
@ -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) => (
|
||||
<div>
|
||||
<p>
|
||||
动态id：<span className="text-red-400">{data.id}</span>
|
||||
</p>
|
||||
<p>
|
||||
创建时间：<span className="text-red-400">{data.ct}</span>
|
||||
</p>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "动态文案",
|
||||
dataIndex: "content",
|
||||
key: "content",
|
||||
},
|
||||
{
|
||||
title: "媒体",
|
||||
dataIndex: "media",
|
||||
key: "media",
|
||||
render: (data) => (
|
||||
<div>
|
||||
{data?.images?.map((item, index) => (
|
||||
<Image
|
||||
key={index}
|
||||
src={item.urls[0]}
|
||||
width={150}
|
||||
style={{ marginBottom: 10 }}
|
||||
/>
|
||||
))}
|
||||
{data?.videos?.map((item, index) => (
|
||||
<video key={index} src={item.urls[0]} width={150} controls />
|
||||
))}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
//获取数据
|
||||
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 (
|
||||
<div className="mt-4" style={{ marginLeft: 20, marginRight: 20 }}>
|
||||
<Form name="search" onFinish={search} onFinishFailed={onFinishFailed}>
|
||||
<Space style={{ marginBottom: 20 }}>
|
||||
<Form.Item label="ID" name="userId" style={{ margin: 0 }}>
|
||||
<Input type="number" />
|
||||
</Form.Item>
|
||||
<Button type="primary" htmlType="submit">
|
||||
搜索
|
||||
</Button>
|
||||
</Space>
|
||||
</Form>
|
||||
<Button
|
||||
className="mb-4"
|
||||
type="primary"
|
||||
onClick={() => setIsModalOpen(true)}
|
||||
>
|
||||
创建动态
|
||||
</Button>
|
||||
<Form name="remarks">
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={showData}
|
||||
pagination={{ pageSize: 20 }}
|
||||
scroll={{ y: window.innerHeight - 300 }}
|
||||
/>
|
||||
</Form>
|
||||
{/* 重复判断isModalOpen是为了重新渲染ImageUploader和VideoUploader组件 */}
|
||||
{isModalOpen && (
|
||||
<Modal footer={null} open={isModalOpen} onCancel={handleCancelModal}>
|
||||
<p className="text-sm text-red-400 font-bold">
|
||||
*请选中主播后再发布，并确保文案不为空，图片数不超过9，视频数不超过1，图片视频不同时存在
|
||||
</p>
|
||||
<Form name="modal_search" onFinish={modalSearch}>
|
||||
<Space style={{ marginBottom: 20 }}>
|
||||
<Form.Item label="ID" name="userId" style={{ margin: 0 }}>
|
||||
<Input type="number" />
|
||||
</Form.Item>
|
||||
<Button type="primary" htmlType="submit">
|
||||
搜索
|
||||
</Button>
|
||||
</Space>
|
||||
</Form>
|
||||
{userInfo && (
|
||||
<div
|
||||
className={`flex flex-row items-center p-2 rounded-xl ${
|
||||
selectedUser ? "bg-green-300" : "bg-gray-300"
|
||||
}`}
|
||||
>
|
||||
<Image
|
||||
src={userInfo?.avatar?.images[0].urls[0]}
|
||||
width={80}
|
||||
height={80}
|
||||
/>
|
||||
<div className="flex flex-col justify-center mx-4">
|
||||
<p className="text-lg font-bold">ID：{userInfo.user_id}</p>
|
||||
<p className="text-lg font-bold">昵称：{userInfo.name}</p>
|
||||
</div>
|
||||
<Button
|
||||
type={selectedUser ? "default" : "primary"}
|
||||
onClick={handleSelected}
|
||||
>
|
||||
{selectedUser ? "取消选中" : "选中用户"}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
<Form
|
||||
className="mt-4 flex flex-col"
|
||||
form={form}
|
||||
onFinish={handleSubmit}
|
||||
>
|
||||
<Space>
|
||||
<Form.Item
|
||||
label="文案"
|
||||
name="content"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: "请填写文案",
|
||||
},
|
||||
]}
|
||||
style={{ margin: 0 }}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Space>
|
||||
<ImageUploader setIds={setImageId} />
|
||||
<VideoUploader setIds={setVideoId} />
|
||||
<Button className="ml-8" type="primary" htmlType="submit">
|
||||
确认
|
||||
</Button>
|
||||
</Form>
|
||||
</Modal>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default function CreatePost() {
|
||||
return <CreatePostContent />;
|
||||
}
|
||||
|
|
@ -56,6 +56,9 @@ export default function Op() {
|
|||
getItem("网红资料", "streamerInformation"),
|
||||
// getItem("网红平台", "streamerPlatform"),
|
||||
]),
|
||||
getItem("动态管理", "postManagement", <ShopOutlined />, [
|
||||
getItem("发布", "createPost"),
|
||||
]),
|
||||
// getItem("用户管理", "userManagement", <UsergroupAddOutlined />),
|
||||
// getItem("订单管理", "orderManagement", <FileSearchOutlined />, [
|
||||
// getItem("订单查询", "ordersQuerry"),
|
||||
|
|
|
|||
|
|
@ -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: <ManualRechargeAndWithdrawal />,
|
||||
},
|
||||
{
|
||||
path: "createPost/*",
|
||||
element: <CreatePost />,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
|
|
|||
Loading…
Reference in New Issue