tiefen_space_op/src/pages/TopPosts/index.jsx

import React, { useState, useEffect } from "react";
import { Form, Input, Table, Image, Space, Button, Modal, message } from "antd";
import baseRequest from "../../utils/baseRequest";
import VideoPlayer from "../../components/VideoPlayer";
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>
          <Image.PreviewGroup items={data?.images?.map((item) => item.urls[0])}>
            {data?.images?.map((item, index) => (
              <Image
                key={index}
                src={item.urls[0]}
                width={150}
                style={{ marginBottom: 10 }}
              />
            ))}
          </Image.PreviewGroup>
          {data?.videos?.map((item, index) => (
            <VideoPlayer key={index} url={item.urls[0]} width={150} />
          ))}
        </div>
      ),
    },
  ];

  //展示的数据
  const [showData, setShowData] = useState([]);
  const [total, setTotal] = useState(0);
  const [offset, setOffset] = useState(0);
  const [more, setMore] = useState(1);
  //获取数据
  const getData = async () => {
    if (!more) return;
    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,
          offset: 0,
          limit: 20 + offset,
          ...base,
        }),
      });
      const temData2 = await response2.json();
      console.log(temData2);
      if (temData2.ret === -1) {
        alert(temData2.msg);
        return;
      }
      if (temData.data.offset > total) {
        setTotal(temData.data.offset);
      }
      setOffset(temData2.data.offset);
      setMore(temData2.data.more);
      //匹配表格格式
      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 }}
        pagination={{
          pageSize: 20,
          showSizeChanger: false,
          total: total,
        }}
        scroll={{ x: "max-content", y: window.innerHeight - 280 }}
        footer={() => (
          <div className="text-gray-400">获得总数：{showData.length}</div>
        )}
        onScroll={(e) => {
          const { scrollHeight, scrollTop, clientHeight } = e.currentTarget;
          console.log(scrollHeight, scrollTop + clientHeight);

          if (scrollTop + clientHeight + 5 >= scrollHeight) {
            getData(offset);
          }
        }}
      />
      <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 />;
}