添加代运营、编辑代运营、隐藏代运营、删除代运营功能

src/pages/StreamerSpace/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import {
   Form,
   Input,
@@ -8,8 +8,9 @@ import {
   Checkbox,
   InputNumber,
   Image,
+  Modal,
+  message,
 } from "antd";
-import Modal from "../../components/Modal";
 import baseRequest from "../../utils/baseRequest";
 import { useNavigate } from "react-router-dom";
 
@@ -202,9 +203,18 @@ const StreamerSpaceContent = () => {
             <Button type="primary" onClick={() => handleModal(record)}>
               修改
             </Button>
+            {record.ratio.zone_third_partner?.third_partner_account?.mid ? (
               <Button type="primary" onClick={() => handleAgencyModal(record)}>
                 编辑代运营
               </Button>
+            ) : (
+              <Button
+                type="primary"
+                onClick={() => handleAddAgencyModal(record)}
+              >
+                添加代运营
+              </Button>
+            )}
             <Button
               onClick={() =>
                 navigate(`/editSpacePost?user_id=${record.baseInfo.id}`)
@@ -324,6 +334,7 @@ const StreamerSpaceContent = () => {
         }),
       });
       const detailData = await detailResponse.json();
+      console.log(detailData);
       if (detailData.ret === -1) {
         alert(detailData.msg);
         return;
@@ -474,40 +485,174 @@ const StreamerSpaceContent = () => {
     console.log("Failed:", errorInfo);
   };
 
-  //编辑代运营Modal是否可见
-  const [isAgencyModalOpen, setIsAgencyModalOpen] = useState(false);
-  //点击编辑代运营按钮
-  const handleAgencyModal = (record) => {
+  //添加代运营Modal是否可见
+  const [isAddAgencyModalOpen, setIsAddAgencyModalOpen] = useState(false);
+  //点击添加代运营按钮
+  const handleAddAgencyModal = (record) => {
     setDefaultValues(record);
-    setIsAgencyModalOpen(true);
+    setIsAddAgencyModalOpen(true);
+    setSelectedUser();
+    setUserInfo();
   };
-  //提交编辑代运营表单
-  const handleSubmitAgencySetting = async (value) => {
-    if (!value.is_hided?.toString()) {
-      alert("请完善表单信息");
+  //提交添加代运营表单
+  const handleSubmitAddAgencySetting = async (value) => {
+    if (!value.sharing_ratio?.toString() || !value.is_hided?.toString()) {
+      alert("请完善表单");
+      return;
+    }
+    if (!selectedUser) {
+      alert("请选择代运营");
       return;
     }
     try {
       const base = baseRequest();
-      const detailResponse = await fetch(
-        `/op/zone_third_partner/set_is_hided`,
-        {
+      const detailResponse = await fetch(`/op/zone/update`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          id: defaultValues.key,
+          is_zone_third_partner_hided: parseInt(value.is_hided, 10),
+          ...base,
+        }),
+      });
+      const detailData = await detailResponse.json();
+      if (detailData.ret === -1) {
+        alert(detailData.msg);
+        return;
+      }
+      const _response = await fetch(`/op/zone_third_partner/create`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
         },
         body: JSON.stringify({
           zid: defaultValues.key,
-            is_hided: parseInt(value.is_hided, 10),
+          third_partner_mid: selectedUser,
+          sharing_ratio: parseInt(value.sharing_ratio, 10) / 100,
           ...base,
         }),
+      });
+      const _data = await _response.json();
+      console.log(_data);
+      if (_data.ret === -1) {
+        alert(_data.msg);
+        return;
       }
-      );
+    } catch (error) {
+      console.error(error);
+    }
+    //关闭模态
+    setShowData([]);
+    setDefaultValues({});
+    setIsAddAgencyModalOpen(false);
+  };
+  //点击添加代运营Modal取消按钮
+  const handleAddAgencyModalCancel = () => {
+    setShowData([]);
+    setIsAddAgencyModalOpen(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();
+      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.mid);
+  };
+  //生成比例选项
+  const generateItems = useCallback((min, max) => {
+    const items = [];
+    for (let i = min; i <= max; i++) {
+      items.push({ label: `${i.toString()}%`, value: i.toString() });
+    }
+    return items;
+  }, []);
+  const rates = useMemo(() => generateItems(1, 50), []);
+
+  //编辑代运营Modal是否可见
+  const [isAgencyModalOpen, setIsAgencyModalOpen] = useState(false);
+  //点击编辑代运营按钮
+  const handleAgencyModal = (record) => {
+    setDefaultValues(record);
+    setIsAgencyModalOpen(true);
+    setSelectedUser();
+    setUserInfo();
+  };
+  //提交编辑代运营表单
+  const handleSubmitAgencySetting = async (value) => {
+    if (!value.sharing_ratio?.toString() || !value.is_hided?.toString()) {
+      alert("请完善表单");
+      return;
+    }
+    if (!selectedUser) {
+      alert("请选择代运营");
+      return;
+    }
+    try {
+      const base = baseRequest();
+      const detailResponse = await fetch(`/op/zone/update`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          id: defaultValues.key,
+          is_zone_third_partner_hided: parseInt(value.is_hided, 10),
+          ...base,
+        }),
+      });
       const detailData = await detailResponse.json();
       if (detailData.ret === -1) {
         alert(detailData.msg);
         return;
       }
+      const _response = await fetch(`/op/zone_third_partner/update`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          zid: defaultValues.key,
+          third_partner_mid: selectedUser,
+          sharing_ratio: parseInt(value.sharing_ratio, 10) / 100,
+          ...base,
+        }),
+      });
+      const _data = await _response.json();
+      console.log(_data);
+      if (_data.ret === -1) {
+        alert(_data.msg);
+        return;
+      }
     } catch (error) {
       console.error(error);
     }
@@ -516,6 +661,35 @@ const StreamerSpaceContent = () => {
     setDefaultValues({});
     setIsAgencyModalOpen(false);
   };
+  //删除代运营
+  const handleDeleteAgency = async () => {
+    try {
+      const base = baseRequest();
+      const detailResponse = await fetch(`/op/zone_third_partner/delete`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          zid: defaultValues.key,
+          ...base,
+        }),
+      });
+      const detailData = await detailResponse.json();
+      console.log(detailData);
+      if (detailData.ret === -1) {
+        alert(detailData.msg);
+        return;
+      }
+      message.success("删除成功");
+      //关闭模态
+      setShowData([]);
+      setDefaultValues({});
+      setIsAgencyModalOpen(false);
+    } catch (error) {
+      console.error(error);
+    }
+  };
   //点击编辑代运营Modal取消按钮
   const handleAgencyModalCancel = () => {
     setShowData([]);
@@ -550,47 +724,36 @@ const StreamerSpaceContent = () => {
         scroll={{ y: window.innerHeight - 300 }}
       />
       {/* 编辑空间模态框是否显示 */}
-      {isModalOpen && (
+      <Modal footer={null} open={isModalOpen} onCancel={handleCancel}>
         <Form
           name="change"
           onFinish={onModalFormFinish}
           onFinishFailed={onModalFormFinishFailed}
           autoComplete="off"
         >
-          <Modal
-            title="修改空间设置"
-            cancel={handleCancel}
-            content={
-              <div
-                className="flex flex-col overflow-y-scroll"
-                style={{ height: (window.innerHeight * 2) / 3 }}
-              >
-                <div className="flex flex-row">
+          <div className="flex flex-col overflow-y-scroll">
+            <div className="flex flex-row mb-4">
               <Image
                 width={80}
                 height={80}
                 className="rounded-full"
-                    src={defaultValues.baseInfo.avatar}
+                src={defaultValues?.baseInfo?.avatar}
               />
               <div className="flex flex-col justify-between ml-2">
-                    <p className="font-bold">ID：{defaultValues.baseInfo.id}</p>
+                <p className="font-bold">ID：{defaultValues?.baseInfo?.id}</p>
                 <p className="font-bold">
-                      昵称：{defaultValues.baseInfo.name}
+                  昵称：{defaultValues?.baseInfo?.name}
                 </p>
                 <p className="font-bold">
-                      创建时间：{defaultValues.baseInfo.ct}
+                  创建时间：{defaultValues?.baseInfo?.ct}
                 </p>
               </div>
             </div>
-                <div
-                  className="flex flex-row flex-wrap"
-                  style={{ width: (window.innerWidth * 2) / 3 }}
-                >
+            <div className="flex flex-col">
               <Form.Item
-                    className="basis-1/2 px-2"
                 name="profile"
                 label="空间介绍"
-                    initialValue={defaultValues.profile}
+                initialValue={defaultValues?.profile}
                 rules={[
                   {
                     required: true,
@@ -601,10 +764,9 @@ const StreamerSpaceContent = () => {
                 <TextArea />
               </Form.Item>
               <Form.Item
-                    className="basis-1/2 px-2"
                 name="admission_price"
                 label="解锁空间价格（元）"
-                    initialValue={defaultValues.paymentSettings.admission_price}
+                initialValue={defaultValues?.paymentSettings?.admission_price}
                 rules={[
                   {
                     required: true,
@@ -615,12 +777,9 @@ const StreamerSpaceContent = () => {
                 <InputNumber min={0} />
               </Form.Item>
               <Form.Item
-                    className="basis-1/2 px-2"
                 name="ironfanship_price"
                 label="铁粉价格（元）"
-                    initialValue={
-                      defaultValues.paymentSettings.ironfanship_price
-                    }
+                initialValue={defaultValues?.paymentSettings?.ironfanship_price}
                 rules={[
                   {
                     required: true,
@@ -631,11 +790,10 @@ const StreamerSpaceContent = () => {
                 <InputNumber min={0} />
               </Form.Item>
               <Form.Item
-                    className="basis-1/2 px-2"
                 name="is_superfanship_enabled"
                 label="是否开通超粉功能"
                 initialValue={
-                      defaultValues.paymentSettings.is_superfanship_enabled
+                  defaultValues?.paymentSettings?.is_superfanship_enabled
                 }
                 rules={[
                   {
@@ -658,21 +816,19 @@ const StreamerSpaceContent = () => {
                 </select>
               </Form.Item>
               <Form.Item
-                    className="basis-1/2 px-2"
                 name="superfanship_price"
                 label="超粉价格（元）"
                 initialValue={
-                      defaultValues.paymentSettings.superfanship_price
+                  defaultValues?.paymentSettings?.superfanship_price
                 }
               >
                 <InputNumber min={0} />
               </Form.Item>
               <Form.Item
-                    className="basis-1/2 px-2"
                 name="superfanship_valid_period"
                 label="超粉有效期"
                 initialValue={
-                      defaultValues.paymentSettings.superfanship_valid_period
+                  defaultValues?.paymentSettings?.superfanship_valid_period
                 }
               >
                 <select
@@ -692,11 +848,10 @@ const StreamerSpaceContent = () => {
                 </select>
               </Form.Item>
               <Form.Item
-                    className="basis-1/2 px-2"
                 name="is_superfanship_give_wechat"
                 label="开通超粉是否送微信"
                 initialValue={
-                      defaultValues.paymentSettings.is_superfanship_give_wechat
+                  defaultValues?.paymentSettings?.is_superfanship_give_wechat
                 }
               >
                 <select
@@ -712,57 +867,259 @@ const StreamerSpaceContent = () => {
                   <option value={0}>否</option>
                 </select>
               </Form.Item>
+              <Button type="primary" htmlType="submit">
+                确认
+              </Button>
             </div>
           </div>
-            }
-          />
         </Form>
+      </Modal>
+      {/* 添加代运营Modal是否可见 */}
+      <Modal
+        footer={null}
+        open={isAddAgencyModalOpen}
+        onCancel={handleAddAgencyModalCancel}
+      >
+        <div className="flex flex-col overflow-y-scroll">
+          <div className="flex flex-row mb-4">
+            <Image
+              width={80}
+              height={80}
+              className="rounded-full"
+              src={defaultValues?.baseInfo?.avatar}
+            />
+            <div className="flex flex-col justify-between ml-2">
+              <p className="font-bold">ID：{defaultValues?.baseInfo?.id}</p>
+              <p className="font-bold">昵称：{defaultValues?.baseInfo?.name}</p>
+              <p className="font-bold">
+                创建时间：{defaultValues?.baseInfo?.ct}
+              </p>
+            </div>
+          </div>
+          <Form name="modal_search" onFinish={modalSearch}>
+            <Space style={{ marginBottom: 20 }}>
+              <Form.Item
+                label="ID"
+                rules={[
+                  {
+                    required: true,
+                    message: "请填写代运营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 mb-4 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
+            name="add_agency"
+            onFinish={handleSubmitAddAgencySetting}
+            onFinishFailed={onModalFormFinishFailed}
+            autoComplete="off"
+          >
+            <Form.Item
+              name="sharing_ratio"
+              label="代运营分成比例"
+              initialValue={"1"}
+              rules={[
+                {
+                  required: true,
+                  message: "请选择代运营分成比例",
+                },
+              ]}
+            >
+              <select
+                style={{
+                  height: 32,
+                  padding: "4px 11px",
+                  border: "1px solid #d9d9d9",
+                  borderRadius: 4,
+                  outline: "none",
+                }}
+              >
+                {rates.map((item, index) => (
+                  <option key={index} value={item.value}>
+                    {item.label}
+                  </option>
+                ))}
+              </select>
+            </Form.Item>
+            <Form.Item
+              name="is_hided"
+              label="是否对主播隐藏代运营"
+              initialValue={"0"}
+              rules={[
+                {
+                  required: true,
+                  message: "请选择是否对主播隐藏代运营选项",
+                },
+              ]}
+            >
+              <select
+                style={{
+                  height: 32,
+                  padding: "4px 11px",
+                  border: "1px solid #d9d9d9",
+                  borderRadius: 4,
+                  outline: "none",
+                }}
+              >
+                <option value={1}>是</option>
+                <option value={0}>否</option>
+              </select>
+            </Form.Item>
+            <Button className="w-full" type="primary" htmlType="submit">
+              确认
+            </Button>
+          </Form>
+        </div>
+      </Modal>
       {/* 编辑代运营Modal是否可见 */}
-      {isAgencyModalOpen && (
+      <Modal
+        footer={null}
+        open={isAgencyModalOpen}
+        onCancel={handleAgencyModalCancel}
+      >
+        <div className="flex flex-col overflow-y-scroll">
+          <div className="flex flex-row mb-4">
+            <Image
+              width={80}
+              height={80}
+              className="rounded-full"
+              src={defaultValues?.baseInfo?.avatar}
+            />
+            <div className="flex flex-col justify-between ml-2">
+              <p className="font-bold">ID：{defaultValues?.baseInfo?.id}</p>
+              <p className="font-bold">昵称：{defaultValues?.baseInfo?.name}</p>
+              <p className="font-bold">
+                创建时间：{defaultValues?.baseInfo?.ct}
+              </p>
+            </div>
+          </div>
+          <Button
+            className="mb-4"
+            type="primary"
+            danger
+            onClick={handleDeleteAgency}
+          >
+            【慎点】删除代运营
+          </Button>
+          <Form name="modal_search" onFinish={modalSearch}>
+            <Space style={{ marginBottom: 20 }}>
+              <Form.Item
+                label="ID"
+                initialValue={
+                  defaultValues?.ratio?.zone_third_partner
+                    ?.third_partner_account?.user_id
+                }
+                rules={[
+                  {
+                    required: true,
+                    message: "请填写代运营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 mb-4 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
             name="agency"
             onFinish={handleSubmitAgencySetting}
             onFinishFailed={onModalFormFinishFailed}
             autoComplete="off"
           >
-          <Modal
-            title="修改代运营设置"
-            cancel={handleAgencyModalCancel}
-            content={
-              <div
-                className="flex flex-col overflow-y-scroll"
-                style={{ height: (window.innerHeight * 2) / 3 }}
-              >
-                <div className="flex flex-row">
-                  <Image
-                    width={80}
-                    height={80}
-                    className="rounded-full"
-                    src={defaultValues.baseInfo.avatar}
-                  />
-                  <div className="flex flex-col justify-between ml-2">
-                    <p className="font-bold">ID：{defaultValues.baseInfo.id}</p>
-                    <p className="font-bold">
-                      昵称：{defaultValues.baseInfo.name}
-                    </p>
-                    <p className="font-bold">
-                      创建时间：{defaultValues.baseInfo.ct}
-                    </p>
-                  </div>
-                </div>
-                <div
-                  className="flex flex-row flex-wrap"
-                  style={{ width: (window.innerWidth * 2) / 3 }}
-                >
-                  {defaultValues.ratio.zone_third_partner?.is_hided !==
-                    undefined && (
+            <div className="flex flex-col">
+              <Form.Item
+                name="sharing_ratio"
+                label="代运营分成比例"
+                initialValue={
+                  defaultValues?.ratio?.zone_third_partner?.sharing_ratio * 100
+                }
+                rules={[
+                  {
+                    required: true,
+                    message: "请选择代运营分成比例",
+                  },
+                ]}
+              >
+                <select
+                  style={{
+                    height: 32,
+                    padding: "4px 11px",
+                    border: "1px solid #d9d9d9",
+                    borderRadius: 4,
+                    outline: "none",
+                  }}
+                >
+                  {rates.map((item, index) => (
+                    <option key={index} value={item.value}>
+                      {item.label}
+                    </option>
+                  ))}
+                </select>
+              </Form.Item>
               <Form.Item
-                      className="basis-1/2 px-2"
                 name="is_hided"
                 label="是否对主播隐藏代运营"
                 initialValue={
-                        defaultValues.ratio.zone_third_partner?.is_hided
+                  defaultValues?.ratio?.zone_third_partner?.is_hided
                 }
                 rules={[
                   {
@@ -784,13 +1141,13 @@ const StreamerSpaceContent = () => {
                   <option value={0}>否</option>
                 </select>
               </Form.Item>
-                  )}
+              <Button type="primary" htmlType="submit">
+                确认
+              </Button>
             </div>
-              </div>
-            }
-          />
           </Form>
-      )}
+        </div>
+      </Modal>
     </div>
   );
 };