初步完成修改置顶动态功能
This commit is contained in:
parent
70d94f0d0c
commit
f5c4da9852
|
|
@ -59,6 +59,7 @@ export default function Op() {
|
|||
]),
|
||||
getItem("动态管理", "postManagement", <FormOutlined />, [
|
||||
getItem("发布与编辑", "createAndEditPost"),
|
||||
getItem("置顶动态", "topPosts"),
|
||||
]),
|
||||
// getItem("用户管理", "userManagement", <UsergroupAddOutlined />),
|
||||
// getItem("订单管理", "orderManagement", <FileSearchOutlined />, [
|
||||
|
|
|
|||
|
|
@ -0,0 +1,234 @@
|
|||
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 TopPostsContent = (props) => {
|
||||
//表头
|
||||
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.like}</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 [showData, setShowData] = useState([]);
|
||||
|
||||
//获取数据
|
||||
const getData = async () => {
|
||||
try {
|
||||
const base = baseRequest();
|
||||
//获取现有id
|
||||
const response = await fetch("/op/app_config/list_by_key", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
config_key: "free_moment_ids",
|
||||
...base,
|
||||
}),
|
||||
});
|
||||
const temData = await response.json();
|
||||
console.log(temData);
|
||||
if (temData.ret === -1) {
|
||||
alert(temData.msg);
|
||||
return;
|
||||
}
|
||||
//用id查动态
|
||||
if (!temData.data.app_config.config_value) return;
|
||||
const intIds = temData.data.app_config.config_value?.map((item) =>
|
||||
parseInt(item, 10)
|
||||
);
|
||||
const response2 = await fetch("/op/moment/list_by_ids", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
ids: intIds,
|
||||
...base,
|
||||
}),
|
||||
});
|
||||
const temData2 = await response2.json();
|
||||
console.log(temData2);
|
||||
if (temData2.ret === -1) {
|
||||
alert(temData2.msg);
|
||||
return;
|
||||
}
|
||||
//匹配表格格式
|
||||
const structedData = temData2.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();
|
||||
}, []);
|
||||
|
||||
//控制modal是否出现
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
|
||||
//提交创建动态
|
||||
const [form] = Form.useForm();
|
||||
const handleSubmit = async (value) => {
|
||||
try {
|
||||
const base = baseRequest();
|
||||
//获取现有id
|
||||
const response = await fetch("/op/app_config/update", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
config_key: "free_moment_ids",
|
||||
config_value: [value.post_id_1, value.post_id_2, value.post_id_3],
|
||||
...base,
|
||||
}),
|
||||
});
|
||||
const temData = await response.json();
|
||||
if (temData.ret === -1) {
|
||||
alert(temData.msg);
|
||||
return;
|
||||
}
|
||||
form.resetFields();
|
||||
setIsModalOpen(false);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
//关闭弹窗
|
||||
const handleCancelModal = () => {
|
||||
form.resetFields();
|
||||
setIsModalOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mt-4" style={{ marginLeft: 20, marginRight: 20 }}>
|
||||
<Button
|
||||
className="mb-4"
|
||||
type="primary"
|
||||
onClick={() => setIsModalOpen(true)}
|
||||
>
|
||||
修改置顶动态
|
||||
</Button>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={showData}
|
||||
pagination={{ pageSize: 20 }}
|
||||
scroll={{ y: window.innerHeight - 300 }}
|
||||
/>
|
||||
<Modal footer={null} open={isModalOpen} onCancel={handleCancelModal}>
|
||||
<p className="text-sm text-red-400 font-bold">
|
||||
*请确保输入的动态id存在
|
||||
</p>
|
||||
<Form
|
||||
className="mt-4 flex flex-col gap-4"
|
||||
form={form}
|
||||
onFinish={handleSubmit}
|
||||
>
|
||||
<Form.Item
|
||||
label="动态id_1"
|
||||
name="post_id_1"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: "请填写id",
|
||||
},
|
||||
]}
|
||||
style={{ margin: 0 }}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="动态id_2"
|
||||
name="post_id_2"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: "请填写id",
|
||||
},
|
||||
]}
|
||||
style={{ margin: 0 }}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="动态id_3"
|
||||
name="post_id_3"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: "请填写id",
|
||||
},
|
||||
]}
|
||||
style={{ margin: 0 }}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Button className="ml-8" type="primary" htmlType="submit">
|
||||
确认
|
||||
</Button>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default function TopPosts() {
|
||||
return <TopPostsContent />;
|
||||
}
|
||||
|
|
@ -16,6 +16,7 @@ import ImageMachineReview from "../pages/ImageMachineReview";
|
|||
import TextMachineReview from "../pages/TextMachineReview";
|
||||
import ManualRechargeAndWithdrawal from "../pages/ManualRechargeAndWithdrawal";
|
||||
import CreateAndEditPost from "../pages/CreateAndEditPost";
|
||||
import TopPosts from "../pages/TopPosts";
|
||||
|
||||
const routes = [
|
||||
{
|
||||
|
|
@ -90,6 +91,10 @@ const routes = [
|
|||
path: "createAndEditPost/*",
|
||||
element: <CreateAndEditPost />,
|
||||
},
|
||||
{
|
||||
path: "topPosts/*",
|
||||
element: <TopPosts />,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
|
|
|||
Loading…
Reference in New Issue