From 43a04ea427ef9c975a76638521880439961435a0 Mon Sep 17 00:00:00 2001
From: yezian <jueweijue@gmail.com>
Date: Fri, 24 May 2024 23:53:00 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=BB=A3=E8=BF=90=E8=90=A5?=
 =?UTF-8?q?=E3=80=81=E7=BC=96=E8=BE=91=E4=BB=A3=E8=BF=90=E8=90=A5=E3=80=81?=
 =?UTF-8?q?=E9=9A=90=E8=97=8F=E4=BB=A3=E8=BF=90=E8=90=A5=E3=80=81=E5=88=A0?=
 =?UTF-8?q?=E9=99=A4=E4=BB=A3=E8=BF=90=E8=90=A5=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/StreamerSpace/index.jsx | 859 +++++++++++++++++++++---------
 1 file changed, 608 insertions(+), 251 deletions(-)

diff --git a/src/pages/StreamerSpace/index.jsx b/src/pages/StreamerSpace/index.jsx
index 256411d..a76d18a 100644
--- a/src/pages/StreamerSpace/index.jsx
+++ b/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>
-            <Button type="primary" onClick={() => handleAgencyModal(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 [isAddAgencyModalOpen, setIsAddAgencyModalOpen] = useState(false);
+  //点击添加代运营按钮
+  const handleAddAgencyModal = (record) => {
+    setDefaultValues(record);
+    setIsAddAgencyModalOpen(true);
+    setSelectedUser();
+    setUserInfo();
+  };
+  //提交添加代运营表单
+  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/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,
+          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.is_hided?.toString()) {
-      alert("请完善表单信息");
+    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`,
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({
-            zid: defaultValues.key,
-            is_hided: parseInt(value.is_hided, 10),
-            ...base,
-          }),
-        }
-      );
+      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,247 +724,430 @@ 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">
-                  <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 }}
-                >
-                  <Form.Item
-                    className="basis-1/2 px-2"
-                    name="profile"
-                    label="空间介绍"
-                    initialValue={defaultValues.profile}
-                    rules={[
-                      {
-                        required: true,
-                        message: "请输入空间介绍",
-                      },
-                    ]}
-                  >
-                    <TextArea />
-                  </Form.Item>
-                  <Form.Item
-                    className="basis-1/2 px-2"
-                    name="admission_price"
-                    label="解锁空间价格（元）"
-                    initialValue={defaultValues.paymentSettings.admission_price}
-                    rules={[
-                      {
-                        required: true,
-                        message: "请输入解锁空间价格",
-                      },
-                    ]}
-                  >
-                    <InputNumber min={0} />
-                  </Form.Item>
-                  <Form.Item
-                    className="basis-1/2 px-2"
-                    name="ironfanship_price"
-                    label="铁粉价格（元）"
-                    initialValue={
-                      defaultValues.paymentSettings.ironfanship_price
-                    }
-                    rules={[
-                      {
-                        required: true,
-                        message: "请输入铁粉价格",
-                      },
-                    ]}
-                  >
-                    <InputNumber min={0} />
-                  </Form.Item>
-                  <Form.Item
-                    className="basis-1/2 px-2"
-                    name="is_superfanship_enabled"
-                    label="是否开通超粉功能"
-                    initialValue={
-                      defaultValues.paymentSettings.is_superfanship_enabled
-                    }
-                    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>
-                  <Form.Item
-                    className="basis-1/2 px-2"
-                    name="superfanship_price"
-                    label="超粉价格（元）"
-                    initialValue={
-                      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
-                    }
-                  >
-                    <select
-                      style={{
-                        height: 32,
-                        padding: "4px 11px",
-                        border: "1px solid #d9d9d9",
-                        borderRadius: 4,
-                        outline: "none",
-                      }}
-                    >
-                      <option value={0}>永久</option>
-                      <option value={1}>月度</option>
-                      <option value={2}>季度</option>
-                      <option value={3}>半年</option>
-                      <option value={4}>年度</option>
-                    </select>
-                  </Form.Item>
-                  <Form.Item
-                    className="basis-1/2 px-2"
-                    name="is_superfanship_give_wechat"
-                    label="开通超粉是否送微信"
-                    initialValue={
-                      defaultValues.paymentSettings.is_superfanship_give_wechat
-                    }
-                  >
-                    <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>
-                </div>
+          <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>
+            <div className="flex flex-col">
+              <Form.Item
+                name="profile"
+                label="空间介绍"
+                initialValue={defaultValues?.profile}
+                rules={[
+                  {
+                    required: true,
+                    message: "请输入空间介绍",
+                  },
+                ]}
+              >
+                <TextArea />
+              </Form.Item>
+              <Form.Item
+                name="admission_price"
+                label="解锁空间价格（元）"
+                initialValue={defaultValues?.paymentSettings?.admission_price}
+                rules={[
+                  {
+                    required: true,
+                    message: "请输入解锁空间价格",
+                  },
+                ]}
+              >
+                <InputNumber min={0} />
+              </Form.Item>
+              <Form.Item
+                name="ironfanship_price"
+                label="铁粉价格（元）"
+                initialValue={defaultValues?.paymentSettings?.ironfanship_price}
+                rules={[
+                  {
+                    required: true,
+                    message: "请输入铁粉价格",
+                  },
+                ]}
+              >
+                <InputNumber min={0} />
+              </Form.Item>
+              <Form.Item
+                name="is_superfanship_enabled"
+                label="是否开通超粉功能"
+                initialValue={
+                  defaultValues?.paymentSettings?.is_superfanship_enabled
+                }
+                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>
+              <Form.Item
+                name="superfanship_price"
+                label="超粉价格（元）"
+                initialValue={
+                  defaultValues?.paymentSettings?.superfanship_price
+                }
+              >
+                <InputNumber min={0} />
+              </Form.Item>
+              <Form.Item
+                name="superfanship_valid_period"
+                label="超粉有效期"
+                initialValue={
+                  defaultValues?.paymentSettings?.superfanship_valid_period
+                }
+              >
+                <select
+                  style={{
+                    height: 32,
+                    padding: "4px 11px",
+                    border: "1px solid #d9d9d9",
+                    borderRadius: 4,
+                    outline: "none",
+                  }}
+                >
+                  <option value={0}>永久</option>
+                  <option value={1}>月度</option>
+                  <option value={2}>季度</option>
+                  <option value={3}>半年</option>
+                  <option value={4}>年度</option>
+                </select>
+              </Form.Item>
+              <Form.Item
+                name="is_superfanship_give_wechat"
+                label="开通超粉是否送微信"
+                initialValue={
+                  defaultValues?.paymentSettings?.is_superfanship_give_wechat
+                }
+              >
+                <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 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 && (
-        <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 }}
+      <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 }}
               >
-                <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 && (
-                    <Form.Item
-                      className="basis-1/2 px-2"
-                      name="is_hided"
-                      label="是否对主播隐藏代运营"
-                      initialValue={
-                        defaultValues.ratio.zone_third_partner?.is_hided
-                      }
-                      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>
-                  )}
-                </div>
+                <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>
-            }
-          />
-        </Form>
-      )}
+              <Button
+                type={selectedUser ? "default" : "primary"}
+                onClick={handleSelected}
+              >
+                {selectedUser ? "取消选中" : "选中用户"}
+              </Button>
+            </div>
+          )}
+          <Form
+            name="agency"
+            onFinish={handleSubmitAgencySetting}
+            onFinishFailed={onModalFormFinishFailed}
+            autoComplete="off"
+          >
+            <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
+                name="is_hided"
+                label="是否对主播隐藏代运营"
+                initialValue={
+                  defaultValues?.ratio?.zone_third_partner?.is_hided
+                }
+                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 type="primary" htmlType="submit">
+                确认
+              </Button>
+            </div>
+          </Form>
+        </div>
+      </Modal>
     </div>
   );
 };