冻结提现功能

src/pages/BlockWithdraw/index.jsx

@@ -0,0 +1,308 @@
+import React, { useState, useRef, useEffect } from "react";
+import { Form, Input, Button, Space, Table, Image, Modal } from "antd";
+import baseRequest from "../../utils/baseRequest";
+
+const BlockWithdrawContent = (props) => {
+  const current = props.current;
+  //表头
+  const columns = [
+    {
+      title: "用户信息",
+      dataIndex: "user",
+      key: "user",
+      render: (data) => (
+        <div>
+          <Image
+            src={data.avatar}
+            width={50}
+            height={50}
+            className="rounded-full object-cover"
+          />
+          <p>
+            昵称：<span className="text-red-400">{data.name}</span>
+          </p>
+          <p>
+            ID：<span className="text-red-400">{data.user_id}</span>
+          </p>
+        </div>
+      ),
+    },
+    {
+      title: "冻结时间",
+      dataIndex: "ct",
+      key: "ct",
+    },
+    {
+      title: "操作",
+      dataIndex: "opeartion",
+      key: "opeartion",
+      render: (_, record) => (
+        <div>
+          <Space>
+            <Space.Compact direction="vertical">
+              <Button type="primary" onClick={() => unblock(record)}>
+                解封
+              </Button>
+            </Space.Compact>
+          </Space>
+        </div>
+      ),
+    },
+  ];
+  //给表单绑定ref
+  const formRef = useRef(null);
+  //点击修改状态按钮
+  const unblock = (record) => {
+    formRef.current.user_id = record.user.user_id;
+    formRef.current.btn = "unblock";
+    formRef.current.submit();
+  };
+  //解封
+  const handleSubmit = async (value) => {
+    //提交数据
+    try {
+      const base = baseRequest();
+      const _response = await fetch("/op/vas/del_withdraw_freeze", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          user_id: formRef.current.user_id,
+          ...base,
+        }),
+      });
+      const _data = await _response.json();
+      if (_data.ret === -1) {
+        alert(_data.msg);
+        return;
+      }
+    } catch (error) {
+      console.error(error);
+    }
+    //刷新页面
+    window.location.reload();
+  };
+
+  //获取数据
+  const [data, setData] = useState([]);
+  const getData = async () => {
+    try {
+      const base = baseRequest();
+      const _response = await fetch("/op/vas/get_withdraw_freeze_list", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          ...base,
+        }),
+      });
+      const _data = await _response.json();
+      console.log(_data);
+      if (_data.ret === -1) {
+        alert(_data.msg);
+        return;
+      }
+      //匹配表格格式
+      const structedData = _data.data.list.map((item, index) => {
+        return {
+          key: index,
+          user: {
+            // avatar: item.account.avatar?.images[0].urls[0],
+            user_id: item.user_id,
+            // name: item.account.name,
+          },
+          ct: new Date(item.ct * 1000).toLocaleString(),
+        };
+      });
+      setData([...data, ...structedData]);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+  useEffect(() => {
+    getData();
+  }, [current]);
+
+  //展示的数据
+  const [showData, setShowData] = useState([]);
+  useEffect(() => {
+    setShowData(data);
+  }, [data]);
+
+  //搜索用户
+  const search = (value) => {
+    value.id
+      ? setShowData(data.filter((item) => item.user.user_id == value.id))
+      : setShowData(data);
+  };
+
+  //打开添加封禁Modal
+  const [isModalVisible, setIsModalVisible] = useState(false);
+
+  //在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();
+      console.log(_data);
+      if (_data.ret === -1) {
+        alert(_data.msg);
+        return;
+      }
+      setSelectedUser();
+      setUserInfo(_data.data.account);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+  //选中用户
+  const [selectedUser, setSelectedUser] = useState();
+  const handleSelected = () => {
+    if (selectedUser) {
+      setSelectedUser();
+      return;
+    }
+    setSelectedUser(userInfo.user_id);
+  };
+  //添加封禁
+  const [form] = Form.useForm();
+  const block = async (value) => {
+    if (!selectedUser) {
+      alert("还未选中用户");
+      return;
+    }
+    try {
+      const base = baseRequest();
+      const _response = await fetch("/op/vas/add_withdraw_freeze", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          user_id: selectedUser,
+          ...base,
+        }),
+      });
+      const _data = await _response.json();
+      console.log(_data);
+      if (_data.ret === -1) {
+        alert(_data.msg);
+        return;
+      }
+      handleCancelModal();
+      //刷新页面
+      window.location.reload();
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  //关闭弹窗
+  const handleCancelModal = () => {
+    form.resetFields();
+    setUserInfo();
+    setSelectedUser();
+    setIsModalVisible(false);
+  };
+
+  //表单提交失败
+  const onFinishFailed = (errorInfo) => {
+    console.log("Failed:", errorInfo);
+  };
+  return (
+    <div style={{ marginLeft: 20, marginRight: 20, marginTop: 20 }}>
+      <Form name="search" onFinish={search} onFinishFailed={onFinishFailed}>
+        <Space style={{ marginBottom: 20 }}>
+          <Form.Item label="ID" name="id" style={{ margin: 0 }}>
+            <Input />
+          </Form.Item>
+          <Button type="primary" htmlType="submit">
+            搜索
+          </Button>
+        </Space>
+      </Form>
+      <Button
+        className="mb-4"
+        type="primary"
+        onClick={() => setIsModalVisible(true)}
+      >
+        添加封禁
+      </Button>
+      <Form
+        ref={formRef}
+        name="remarks"
+        onFinish={handleSubmit}
+        onFinishFailed={onFinishFailed}
+      >
+        <Table
+          columns={columns}
+          dataSource={showData}
+          pagination={{ pageSize: 20 }}
+          scroll={{ y: window.innerHeight - 300 }}
+        />
+      </Form>
+      {isModalVisible && (
+        <Modal footer={null} open={isModalVisible} onCancel={handleCancelModal}>
+          <p className="text-sm text-red-400 font-bold">
+            *请选中用户后再执行操作
+          </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={block}>
+            <Button className="ml-8" type="primary" htmlType="submit">
+              确认
+            </Button>
+          </Form>
+        </Modal>
+      )}
+    </div>
+  );
+};
+
+export default function BlockWithdraw() {
+  return <BlockWithdrawContent />;
+}

src/routes/index.js

@@ -34,6 +34,7 @@ import StreamerTextMachineReview from "../pages/StreamerTextMachineReview";
 import StreamerVideoMachineReview from "../pages/StreamerVideoMachineReview";
 import RollbackUserLeaveSpace from "../pages/RollbackUserLeaveSpace";
 import RollbackUserRefundSpaceStatus from "../pages/RollbackUserRefundSpaceStatus/index";
+import BlockWithdraw from "../pages/BlockWithdraw";
 
 const routes = [
   {
@@ -180,6 +181,10 @@ const routes = [
         path: "rollbackUserRefundSpaceStatus/*",
         element: <RollbackUserRefundSpaceStatus />,
       },
+      {
+        path: "blockWithdraw/*",
+        element: <BlockWithdraw />,
+      },
     ],
   },
 ];