From 24c52fc7501753c0d8d9d9b4b4b14b8ec6450380 Mon Sep 17 00:00:00 2001
From: yezian <jueweijue@gmail.com>
Date: Fri, 19 Apr 2024 11:04:07 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=A9=BA=E9=97=B4=E5=8A=A8?=
 =?UTF-8?q?=E6=80=81=E5=AE=A1=E6=A0=B8=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Op/index.jsx                    |   1 +
 src/pages/ZonePostMachineReview/index.jsx | 303 ++++++++++++++++++++++
 src/routes/index.js                       |   5 +
 3 files changed, 309 insertions(+)
 create mode 100644 src/pages/ZonePostMachineReview/index.jsx

diff --git a/src/pages/Op/index.jsx b/src/pages/Op/index.jsx
index 4059b5d..0a5035a 100644
--- a/src/pages/Op/index.jsx
+++ b/src/pages/Op/index.jsx
@@ -53,6 +53,7 @@ export default function Op() {
       getItem("图片机审回查", "imageMachineReview"),
       getItem("文本机审回查", "textMachineReview"),
       getItem("动态机审回查", "postMachineReview"),
+      getItem("空间动态审核", "zonePostMachineReview"),
       getItem("已删除动态回捞", "deletedPostReview"),
     ]),
     getItem("网红管理", "streamerManagement", <ShopOutlined />, [
diff --git a/src/pages/ZonePostMachineReview/index.jsx b/src/pages/ZonePostMachineReview/index.jsx
new file mode 100644
index 0000000..3285bdf
--- /dev/null
+++ b/src/pages/ZonePostMachineReview/index.jsx
@@ -0,0 +1,303 @@
+import React, { useState, useRef, useEffect } from "react";
+import { Form, Input, Button, Space, Table, Menu, Image } from "antd";
+import {
+  Routes,
+  Route,
+  Navigate,
+  useNavigate,
+  useLocation,
+} from "react-router-dom";
+import baseRequest from "../../utils/baseRequest";
+
+const ZonePostMachineReviewContent = (props) => {
+  const { TextArea } = Input;
+  const current = props.current;
+  //表头
+  const columns = [
+    {
+      title: "动态内容",
+      dataIndex: "content",
+      key: "content",
+      render: (data) => (
+        <div className="flex flex-col">
+          <div>
+            <p className="text-red-400">
+              文案：<span className="text-black">{data.text}</span>
+            </p>
+          </div>
+          <p className="text-red-400">媒体：</p>
+          <div className="flex flex-wrap gap-1">
+            {data.media.images.map((item, index) => (
+              <Image key={index} src={item.urls[0]} width={100} />
+            ))}
+            {data.media.videos.map((item, index) => (
+              <video key={index} src={item.urls[0]} width={150} controls />
+            ))}
+          </div>
+        </div>
+      ),
+    },
+    {
+      title: "审核结果",
+      dataIndex: "info",
+      key: "info",
+      render: (data) => (
+        <div className="flex flex-col">
+          <p>文案审核结果：</p>
+          <p className="text-green-400">{data.text_audit_opinion}</p>
+          <hr className="w-full" />
+          <p>媒体审核结果：</p>
+          <p className="text-green-400">{data.image_audit_opinion}</p>
+        </div>
+      ),
+    },
+    {
+      title: "提交时间",
+      dataIndex: "submitTime",
+      key: "submitTime",
+    },
+    {
+      title: "备注",
+      dataIndex: "remarks",
+      key: "remarks",
+      render: (_, record) => (
+        <div className="flex flex-col">
+          <Form.Item
+            name={record.momentId}
+            initialValue={record.remarks.manually_review_opinion}
+          >
+            <TextArea rows={4} />
+          </Form.Item>
+        </div>
+      ),
+    },
+    {
+      title: "操作",
+      dataIndex: "opeartion",
+      key: "opeartion",
+      render: (_, record) => (
+        <div>
+          <Space>
+            {current === "operatorReviewing" && (
+              <Space.Compact direction="vertical">
+                <Button type="primary" onClick={() => onClickPass(record)}>
+                  通过
+                </Button>
+                <Button onClick={() => onClickReject(record)}>拒绝</Button>
+              </Space.Compact>
+            )}
+          </Space>
+        </div>
+      ),
+    },
+  ];
+  //给表单绑定ref
+  const formRef = useRef(null);
+  //点击通过按钮
+  const onClickPass = (record) => {
+    formRef.current.record = record;
+    formRef.current.type = 0;
+    formRef.current.submit();
+  };
+  //点击拒绝按钮
+  const onClickReject = (record) => {
+    formRef.current.record = record;
+    formRef.current.type = 1;
+    formRef.current.submit();
+  };
+  //提交表单
+  const handleSubmit = async (value) => {
+    try {
+      const base = baseRequest();
+      const response = await fetch("/op/zone_moment/review", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          zone_moment_ids: [parseInt(formRef.current.record.momentId, 10)],
+          op_type: formRef.current.type,
+          manually_review_opinion: value[formRef.current.record.momentId]
+            ? value[formRef.current.record.momentId]
+            : "",
+          ...base,
+        }),
+      });
+      const _data = await response.json();
+      console.log(_data);
+      if (_data.ret === -1) {
+        alert(_data.msg);
+        return;
+      }
+      //取消数据展示
+      setShowData(
+        showData.filter(
+          (item) => item.momentId !== formRef.current.record.momentId
+        )
+      );
+    } catch (error) {
+      console.error(error);
+    }
+  };
+  //获取数据
+  const [data, setData] = useState([]);
+  const [offset, setOffset] = useState(0);
+  const [more, setMore] = useState(1);
+  const getData = async () => {
+    if (!more) return;
+    let querryStatus;
+    switch (current) {
+      case "operatorReviewing":
+        querryStatus = 1;
+        break;
+      case "machineReviewing":
+        querryStatus = 0;
+        break;
+      case "onlySelfCanSee":
+        querryStatus = 3;
+        break;
+      default:
+        break;
+    }
+    try {
+      const base = baseRequest();
+      const response = await fetch("/op/zone_moment/list", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          status: querryStatus,
+          offset: offset,
+          limit: 200,
+          ...base,
+        }),
+      });
+      const temData = await response.json();
+      console.log(temData);
+      if (temData.ret === -1) {
+        alert(temData.msg);
+        return;
+      }
+      //匹配表格格式
+      const structedData = temData.data.list.map((item, index) => {
+        return {
+          key: index,
+          momentId: item.id,
+          content: {
+            media: item.media_component,
+            text: item.text,
+          },
+          info: {
+            image_audit_status: item.image_audit_status,
+            image_audit_opinion: item.image_audit_opinion,
+            text_audit_status: item.text_audit_status,
+            text_audit_opinion: item.text_audit_opinion,
+          },
+          submitTime: new Date(item.ct * 1000).toLocaleString(),
+          remarks: {
+            manually_review_status: item.manually_review_status,
+            manually_review_opinion: item.manually_review_opinion,
+            manually_review_operator: item.manually_review_operator,
+          },
+        };
+      });
+      setData([...data, ...structedData]);
+      setOffset(temData.data.offset);
+      setMore(temData.data.more);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+  useEffect(() => {
+    getData();
+  }, [current]);
+
+  //展示的数据
+  const [showData, setShowData] = useState([]);
+  useEffect(() => {
+    setShowData(data);
+  }, [data]);
+  //表单提交失败
+  const onFinishFailed = (errorInfo) => {
+    console.log("Failed:", errorInfo);
+  };
+  return (
+    <div style={{ marginLeft: 20, marginRight: 20 }}>
+      <p>
+        {current === "operatorReviewing" && `运营待审核${showData.length}条`}
+        {current === "onlySelfCanSee" && `审核未通过${showData.length}条`}
+      </p>
+      <Form
+        ref={formRef}
+        name="remarks"
+        onFinish={handleSubmit}
+        onFinishFailed={onFinishFailed}
+      >
+        <Table
+          columns={columns}
+          dataSource={showData}
+          pagination={{ pageSize: 20 }}
+          scroll={{ y: window.innerHeight - 300 }}
+        />
+      </Form>
+    </div>
+  );
+};
+
+export default function ZonePostMachineReview() {
+  const navigate = useNavigate();
+  //当前tab
+  const location = useLocation();
+  const pathname = location.pathname.split("/")[2] || "operatorReviewing";
+  const [current, setCurrent] = useState(pathname);
+  //tab名称
+  const items = [
+    {
+      label: "运营待审核",
+      key: "operatorReviewing",
+    },
+    {
+      label: "机审中",
+      key: "machineReviewing",
+    },
+    {
+      label: "审核未通过",
+      key: "onlySelfCanSee",
+    },
+  ];
+  const onClick = (e) => {
+    setCurrent(e.key);
+    navigate(e.key);
+    window.location.reload();
+  };
+
+  return (
+    <div>
+      <Menu
+        onClick={onClick}
+        selectedKeys={[current]}
+        mode="horizontal"
+        items={items}
+      />
+      <Routes>
+        <Route
+          path="/"
+          element={<Navigate to="/zonePostMachineReview/operatorReviewing" />}
+        />
+        <Route
+          path="/operatorReviewing"
+          element={<ZonePostMachineReviewContent current="operatorReviewing" />}
+        />
+        <Route
+          path="/machineReviewing"
+          element={<ZonePostMachineReviewContent current="machineReviewing" />}
+        />
+        <Route
+          path="/onlySelfCanSee"
+          element={<ZonePostMachineReviewContent current="onlySelfCanSee" />}
+        />
+      </Routes>
+    </div>
+  );
+}
diff --git a/src/routes/index.js b/src/routes/index.js
index 7cd5af6..0b77176 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -22,6 +22,7 @@ import GetPhoneNumber from "../pages/GetPhoneNumber";
 import Refund from "../pages/Refund";
 import BlockUser from "../pages/BlockUser";
 import DeletedPostReview from "../pages/DeletedPostReview";
+import ZonePostMachineReview from "../pages/ZonePostMachineReview";
 
 const routes = [
   {
@@ -120,6 +121,10 @@ const routes = [
         path: "deletedPostReview/*",
         element: <DeletedPostReview />,
       },
+      {
+        path: "zonePostMachineReview/*",
+        element: <ZonePostMachineReview />,
+      },
     ],
   },
 ];