1158 lines
36 KiB
JavaScript
1158 lines
36 KiB
JavaScript
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
||
import {
|
||
Form,
|
||
Input,
|
||
Button,
|
||
Space,
|
||
Table,
|
||
Checkbox,
|
||
InputNumber,
|
||
Image,
|
||
Modal,
|
||
message,
|
||
} from "antd";
|
||
import baseRequest from "../../utils/baseRequest";
|
||
import { useNavigate } from "react-router-dom";
|
||
|
||
//tab内容
|
||
const StreamerSpaceContent = () => {
|
||
const navigate = useNavigate();
|
||
const { TextArea } = Input;
|
||
//展示的表头
|
||
const [showColumns, setShowColumns] = useState([
|
||
"baseInfo",
|
||
"profile",
|
||
"paymentSettings",
|
||
"active",
|
||
"ratio",
|
||
]);
|
||
//动态的表头
|
||
const dynamicColumns = showColumns.map((item) => {
|
||
switch (item) {
|
||
case "baseInfo":
|
||
return {
|
||
title: "基础信息",
|
||
dataIndex: "baseInfo",
|
||
key: "baseInfo",
|
||
render: (data) => (
|
||
<div>
|
||
<Image src={data.avatar} width={50} />
|
||
<p>
|
||
ID：<span className="text-red-400">{data.id}</span>
|
||
</p>
|
||
<p>
|
||
昵称：<span className="text-red-400">{data.name}</span>
|
||
</p>
|
||
<p>
|
||
创建时间：<span className="text-red-400">{data.ct}</span>
|
||
</p>
|
||
</div>
|
||
),
|
||
};
|
||
case "profile":
|
||
return {
|
||
title: "空间介绍",
|
||
dataIndex: "profile",
|
||
key: "profile",
|
||
};
|
||
case "paymentSettings":
|
||
return {
|
||
title: "付费设置",
|
||
dataIndex: "paymentSettings",
|
||
key: "paymentSettings",
|
||
render: (data) => (
|
||
<div>
|
||
<p>
|
||
解锁空间价格：
|
||
<span className="text-red-400">¥{data.admission_price}</span>
|
||
</p>
|
||
<p>
|
||
铁粉价格：
|
||
<span className="text-red-400">¥{data.ironfanship_price}</span>
|
||
</p>
|
||
<p>
|
||
是否开启超粉功能：
|
||
<span className="text-red-400">
|
||
{data.is_superfanship_enabled === 1 ? "是" : "否"}
|
||
</span>
|
||
</p>
|
||
{data.is_superfanship_enabled === 1 && (
|
||
<>
|
||
<p>
|
||
超粉价格：
|
||
<span className="text-red-400">
|
||
¥{data.superfanship_price}
|
||
</span>
|
||
</p>
|
||
<p>
|
||
超粉有效期：
|
||
{data.superfanship_valid_period === 0 && (
|
||
<span className="text-red-400">永久</span>
|
||
)}
|
||
{data.superfanship_valid_period === 1 && (
|
||
<span className="text-red-400">月度</span>
|
||
)}
|
||
{data.superfanship_valid_period === 2 && (
|
||
<span className="text-red-400">季度</span>
|
||
)}
|
||
{data.superfanship_valid_period === 3 && (
|
||
<span className="text-red-400">半年</span>
|
||
)}
|
||
{data.superfanship_valid_period === 4 && (
|
||
<span className="text-red-400">年度</span>
|
||
)}
|
||
</p>
|
||
<p>
|
||
开通超粉是否送微信：
|
||
<span className="text-red-400">
|
||
{data.is_superfanship_give_wechat === 1 ? "是" : "否"}
|
||
</span>
|
||
</p>
|
||
</>
|
||
)}
|
||
</div>
|
||
),
|
||
};
|
||
case "active":
|
||
return {
|
||
title: "活跃情况",
|
||
dataIndex: "active",
|
||
key: "active",
|
||
render: (data) => (
|
||
<div>
|
||
<p>
|
||
动态数量：
|
||
<span className="text-red-400">{data.zone_moment_count}</span>
|
||
</p>
|
||
<p>
|
||
图片数量：
|
||
<span className="text-red-400">{data.image_count}</span>
|
||
</p>
|
||
<p>
|
||
视频数量：
|
||
<span className="text-red-400">{data.video_count}</span>
|
||
</p>
|
||
<p>
|
||
最后发帖时间：
|
||
<span className="text-red-400">{data.last_zone_moment_ct}</span>
|
||
</p>
|
||
</div>
|
||
),
|
||
};
|
||
case "ratio":
|
||
return {
|
||
title: "分成情况",
|
||
dataIndex: "ratio",
|
||
key: "ratio",
|
||
render: (data) => (
|
||
<div>
|
||
{data.is_hided === 1 && (
|
||
<p className="text-red-400">对主播隐藏代运营</p>
|
||
)}
|
||
<hr />
|
||
{data.zone_third_partner?.third_partner_account?.mid && (
|
||
<>
|
||
<p>
|
||
代运营ID：
|
||
<span className="text-red-400">
|
||
{data.zone_third_partner?.third_partner_account?.user_id}
|
||
</span>
|
||
</p>
|
||
<p>
|
||
代运营比例：
|
||
<span className="text-red-400">
|
||
{(data.zone_third_partner.sharing_ratio * 100).toFixed()}%
|
||
</span>
|
||
</p>
|
||
</>
|
||
)}
|
||
<hr />
|
||
{data.zone_collaborator_list.length !== 0 &&
|
||
data.zone_collaborator_list?.map((item, index) => (
|
||
<div key={index}>
|
||
<p>
|
||
合伙人ID：
|
||
<span className="text-red-400">
|
||
{item?.collaborator_account?.user_id}
|
||
</span>
|
||
</p>
|
||
<p>
|
||
合伙人比例：
|
||
<span className="text-red-400">
|
||
{(item.sharing_ratio * 100).toFixed()}%
|
||
</span>
|
||
</p>
|
||
<br />
|
||
</div>
|
||
))}
|
||
</div>
|
||
),
|
||
};
|
||
default:
|
||
return {};
|
||
}
|
||
});
|
||
dynamicColumns.push({
|
||
title: "操作",
|
||
dataIndex: "opeartion",
|
||
key: "opeartion",
|
||
render: (_, record) => (
|
||
<div>
|
||
<Space>
|
||
<Space.Compact direction="vertical">
|
||
<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}`)
|
||
}
|
||
>
|
||
查看动态
|
||
</Button>
|
||
</Space.Compact>
|
||
</Space>
|
||
</div>
|
||
),
|
||
});
|
||
|
||
//表头可见性表单的checkbox选项
|
||
const showColumnsOptions = [
|
||
{
|
||
label: "基础信息",
|
||
value: "baseInfo",
|
||
},
|
||
{
|
||
label: "空间介绍",
|
||
value: "profile",
|
||
},
|
||
{
|
||
label: "付费设置",
|
||
value: "paymentSettings",
|
||
},
|
||
{
|
||
label: "活跃情况",
|
||
value: "active",
|
||
},
|
||
{
|
||
label: "分成情况",
|
||
value: "ratio",
|
||
},
|
||
];
|
||
//展示的数据
|
||
const [showData, setShowData] = useState([]);
|
||
//搜索空间
|
||
const search = async (value) => {
|
||
if (!value.id) {
|
||
getAllSpace();
|
||
return;
|
||
}
|
||
try {
|
||
const base = baseRequest();
|
||
const detailResponse = await fetch(`/op/zone/list_by_user_id`, {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify({
|
||
user_id: parseInt(value.id, 10),
|
||
...base,
|
||
}),
|
||
});
|
||
const detailData = await detailResponse.json();
|
||
if (detailData.ret === -1) {
|
||
alert(detailData.msg);
|
||
return;
|
||
}
|
||
const zone = detailData.data.list[0];
|
||
setShowData([
|
||
{
|
||
key: zone.id,
|
||
baseInfo: {
|
||
id: zone.streamer_ext.user_id,
|
||
name: zone.streamer_ext.name,
|
||
avatar: zone.streamer_ext.avatar.images[0].urls[0],
|
||
ct: new Date(zone.ct * 1000).toLocaleString(),
|
||
},
|
||
profile: zone.profile,
|
||
paymentSettings: {
|
||
admission_price: zone.admission_price / 100,
|
||
ironfanship_price: zone.ironfanship_price / 100,
|
||
is_superfanship_enabled: zone.is_superfanship_enabled,
|
||
superfanship_price: zone.superfanship_price / 100,
|
||
superfanship_valid_period: zone.superfanship_valid_period,
|
||
is_superfanship_give_wechat: zone.is_superfanship_give_wechat,
|
||
},
|
||
active: {
|
||
zone_moment_count: zone.zone_moment_count,
|
||
image_count: zone.image_count,
|
||
video_count: zone.video_count,
|
||
last_zone_moment_ct: new Date(
|
||
zone?.last_zone_moment_ct * 1000
|
||
).toLocaleString(),
|
||
},
|
||
ratio: {
|
||
zone_third_partner: zone.zone_third_partner,
|
||
zone_collaborator_list: zone.zone_collaborator_list,
|
||
is_hided: zone.zone_third_partner?.is_hided,
|
||
},
|
||
},
|
||
]);
|
||
} catch (error) {
|
||
console.error(error);
|
||
}
|
||
};
|
||
//表单提交失败
|
||
const onFinishFailed = (errorInfo) => {
|
||
console.log("Failed:", errorInfo);
|
||
};
|
||
//展示所有已创建空间
|
||
const getAllSpace = async () => {
|
||
try {
|
||
const base = baseRequest();
|
||
const detailResponse = await fetch(`/op/zone/list`, {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify({
|
||
offset: 0,
|
||
limit: 2000,
|
||
...base,
|
||
}),
|
||
});
|
||
const detailData = await detailResponse.json();
|
||
console.log(detailData);
|
||
if (detailData.ret === -1) {
|
||
alert(detailData.msg);
|
||
return;
|
||
}
|
||
//匹配表格格式
|
||
const structedData = detailData.data.list.map((item, index) => {
|
||
return {
|
||
key: item.id,
|
||
baseInfo: {
|
||
id: item.streamer_ext.user_id,
|
||
name: item.streamer_ext.name,
|
||
avatar: item.streamer_ext.avatar.images[0].urls[0],
|
||
ct: new Date(item.ct * 1000).toLocaleString(),
|
||
},
|
||
profile: item.profile,
|
||
paymentSettings: {
|
||
admission_price: item.admission_price / 100,
|
||
ironfanship_price: item.ironfanship_price / 100,
|
||
is_superfanship_enabled: item.is_superfanship_enabled,
|
||
superfanship_price: item.superfanship_price / 100,
|
||
superfanship_valid_period: item.superfanship_valid_period,
|
||
is_superfanship_give_wechat: item.is_superfanship_give_wechat,
|
||
},
|
||
active: {
|
||
zone_moment_count: item.zone_moment_count,
|
||
image_count: item.image_count,
|
||
video_count: item.video_count,
|
||
last_zone_moment_ct: new Date(
|
||
item?.last_zone_moment_ct * 1000
|
||
).toLocaleString(),
|
||
},
|
||
ratio: {
|
||
zone_third_partner: item.zone_third_partner,
|
||
zone_collaborator_list: item.zone_collaborator_list,
|
||
is_hided: item.zone_third_partner?.is_hided,
|
||
},
|
||
};
|
||
});
|
||
setShowData(structedData);
|
||
} catch (error) {
|
||
console.error(error);
|
||
}
|
||
};
|
||
useEffect(() => {
|
||
getAllSpace();
|
||
}, []);
|
||
//modal是否展示
|
||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||
//点击modal取消按钮
|
||
const handleCancel = () => {
|
||
setShowData([]);
|
||
setDefaultValues({});
|
||
setIsModalOpen(false);
|
||
};
|
||
//modal打开时的默认值
|
||
const [defaultValues, setDefaultValues] = useState({});
|
||
//点击修改按钮
|
||
const handleModal = (record) => {
|
||
setDefaultValues(record);
|
||
setIsModalOpen(true);
|
||
};
|
||
//表单提交成功
|
||
const onModalFormFinish = async (value) => {
|
||
//上传表单操作...
|
||
if (
|
||
!value.admission_price?.toString() ||
|
||
!value.ironfanship_price?.toString() ||
|
||
!value.is_superfanship_enabled?.toString() ||
|
||
!value.profile
|
||
) {
|
||
alert("请完善表单信息");
|
||
return;
|
||
}
|
||
if (
|
||
parseInt(value.is_superfanship_enabled) === 1 &&
|
||
(!value.superfanship_price?.toString() ||
|
||
!value.superfanship_valid_period?.toString() ||
|
||
!value.is_superfanship_give_wechat?.toString())
|
||
) {
|
||
alert("请完善表单信息");
|
||
return;
|
||
}
|
||
const _spacePrice = parseInt(value.admission_price * 100, 10);
|
||
if (isNaN(_spacePrice) || _spacePrice < 0) {
|
||
alert("请输入有效的解锁空间价格");
|
||
return;
|
||
}
|
||
const _ironFanPrice = parseInt(value.ironfanship_price * 100, 10);
|
||
if (isNaN(_ironFanPrice) || _ironFanPrice < 100 || _ironFanPrice > 388800) {
|
||
alert("请输入有效的铁粉价格");
|
||
return;
|
||
}
|
||
const _superFanPrice = parseInt(value.superfanship_price * 100, 10);
|
||
if (
|
||
parseInt(value.is_superfanship_enabled) === 1 &&
|
||
(isNaN(_superFanPrice) || _superFanPrice < 100 || _superFanPrice > 388800)
|
||
) {
|
||
alert("请输入有效的超粉价格");
|
||
return;
|
||
}
|
||
if (
|
||
parseInt(value.is_superfanship_enabled) === 1 &&
|
||
_superFanPrice <= _ironFanPrice
|
||
) {
|
||
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,
|
||
profile: value.profile,
|
||
admission_price: parseInt(value.admission_price * 100, 10),
|
||
ironfanship_price: parseInt(value.ironfanship_price * 100, 10),
|
||
is_superfanship_enabled: parseInt(value.is_superfanship_enabled),
|
||
superfanship_price: parseInt(value.superfanship_price * 100, 10),
|
||
superfanship_valid_period: parseInt(
|
||
value.superfanship_valid_period,
|
||
10
|
||
),
|
||
is_superfanship_give_wechat: parseInt(
|
||
value.is_superfanship_give_wechat,
|
||
10
|
||
),
|
||
...base,
|
||
}),
|
||
});
|
||
const detailData = await detailResponse.json();
|
||
if (detailData.ret === -1) {
|
||
alert(detailData.msg);
|
||
return;
|
||
}
|
||
} catch (error) {
|
||
console.error(error);
|
||
}
|
||
//关闭模态
|
||
setShowData([]);
|
||
setDefaultValues({});
|
||
setIsModalOpen(false);
|
||
};
|
||
//表单提交失败
|
||
const onModalFormFinishFailed = (errorInfo) => {
|
||
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.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);
|
||
}
|
||
//关闭模态
|
||
setShowData([]);
|
||
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([]);
|
||
setIsAgencyModalOpen(false);
|
||
};
|
||
|
||
return (
|
||
<div style={{ marginLeft: 20, marginRight: 20 }}>
|
||
<div style={{ marginTop: 20, marginBottom: 10 }}>
|
||
<p style={{ display: "inline" }}>数据可见性：</p>
|
||
<Checkbox.Group
|
||
options={showColumnsOptions}
|
||
defaultValue={showColumns}
|
||
onChange={(value) => setShowColumns(value)}
|
||
/>
|
||
</div>
|
||
<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>
|
||
<p>共{showData.length}条结果</p>
|
||
<Table
|
||
columns={dynamicColumns}
|
||
dataSource={showData}
|
||
pagination={{ pageSize: 20 }}
|
||
scroll={{ y: window.innerHeight - 300 }}
|
||
/>
|
||
{/* 编辑空间模态框是否显示 */}
|
||
<Modal footer={null} open={isModalOpen} onCancel={handleCancel}>
|
||
<Form
|
||
name="change"
|
||
onFinish={onModalFormFinish}
|
||
onFinishFailed={onModalFormFinishFailed}
|
||
autoComplete="off"
|
||
>
|
||
<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是否可见 */}
|
||
<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"
|
||
>
|
||
<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>
|
||
);
|
||
};
|
||
|
||
export default function StreamerSpace() {
|
||
return <StreamerSpaceContent />;
|
||
}
|