From f5c4da98521b6328da7e5dbe9f7dfbd6d04f1400 Mon Sep 17 00:00:00 2001
From: yezian <jueweijue@gmail.com>
Date: Sat, 3 Feb 2024 20:01:33 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9D=E6=AD=A5=E5=AE=8C=E6=88=90=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E7=BD=AE=E9=A1=B6=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/Op/index.jsx       |   1 +
 src/pages/TopPosts/index.jsx | 234 +++++++++++++++++++++++++++++++++++
 src/routes/index.js          |   5 +
 3 files changed, 240 insertions(+)
 create mode 100644 src/pages/TopPosts/index.jsx

diff --git a/src/pages/Op/index.jsx b/src/pages/Op/index.jsx
index 3cc2eb2..be50991 100644
--- a/src/pages/Op/index.jsx
+++ b/src/pages/Op/index.jsx
@@ -59,6 +59,7 @@ export default function Op() {
     ]),
     getItem("动态管理", "postManagement", <FormOutlined />, [
       getItem("发布与编辑", "createAndEditPost"),
+      getItem("置顶动态", "topPosts"),
     ]),
     // getItem("用户管理", "userManagement", <UsergroupAddOutlined />),
     // getItem("订单管理", "orderManagement", <FileSearchOutlined />, [
diff --git a/src/pages/TopPosts/index.jsx b/src/pages/TopPosts/index.jsx
new file mode 100644
index 0000000..9eaf9c1
--- /dev/null
+++ b/src/pages/TopPosts/index.jsx
@@ -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 />;
+}
diff --git a/src/routes/index.js b/src/routes/index.js
index a4cd4af..8a3b93a 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -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 />,
+      },
     ],
   },
 ];