581 lines
20 KiB
JavaScript
581 lines
20 KiB
JavaScript
"use client";
|
||
|
||
import React, { useState, useEffect, useRef, useMemo, Fragment } from "react";
|
||
import { Switch, Space, Checkbox, Button, Toast, Radio } from "antd-mobile";
|
||
import { useRouter, useSearchParams } from "next/navigation";
|
||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||
import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
|
||
import OwnInput from "@/components/OwnInput";
|
||
import requireAPI from "@/utils/requireAPI";
|
||
import { get } from "@/utils/storeInfo";
|
||
import { getStreamerInfo } from "@/api/space";
|
||
const superSingles = [
|
||
{ key: 0, text: "永久" },
|
||
{ key: 1, text: "按月生效" },
|
||
{ key: 2, text: "按季度生效" },
|
||
{ key: 3, text: "按半年生效" },
|
||
{ key: 4, text: "按年生效" },
|
||
];
|
||
// const superSingles = [
|
||
// { key: 0, text: "永久" },
|
||
// { key: 1, text: "按年生效" },
|
||
// { key: 2, text: "按半年生效" },
|
||
// { key: 3, text: "按季度生效" },
|
||
// { key: 4, text: "按月生效" },
|
||
// ];
|
||
const ListItemWithCheckbox = ({
|
||
superSingle,
|
||
formData,
|
||
setFormData,
|
||
superSingleCheckeds,
|
||
}) => {
|
||
return (
|
||
<li className="mt-4" onClick={() => {}}>
|
||
<div onClick={(e) => e.stopPropagation()}>
|
||
<Radio
|
||
value={superSingle.key}
|
||
onChange={(value) => {
|
||
const newFormData = { ...formData };
|
||
newFormData.superSingle.forEach((el) => {
|
||
el.enable = 0;
|
||
});
|
||
newFormData.superSingle[superSingle.key].enable = value;
|
||
// newFormData.superSingle[superSingle.key].price = 0;
|
||
// newFormData.superSingle[superSingle.key].wechatFree = false;
|
||
setFormData(newFormData);
|
||
}}
|
||
>
|
||
{superSingle.text}
|
||
</Radio>
|
||
{/* <Checkbox
|
||
value={superSingle.key}
|
||
onChange={(value) => {
|
||
const newFormData = { ...formData };
|
||
newFormData.superSingle[superSingle.key].enable = value;
|
||
newFormData.superSingle[superSingle.key].price = 0;
|
||
newFormData.superSingle[superSingle.key].wechatFree = false;
|
||
setFormData(newFormData);
|
||
}}
|
||
>
|
||
{superSingle.text}
|
||
</Checkbox> */}
|
||
<div
|
||
className={`mt-2 px-4 h-12 py-3 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center ${
|
||
superSingleCheckeds != superSingle.key
|
||
? "mt-0 px-0 py-0 hidden"
|
||
: ""
|
||
}`}
|
||
// className={`mt-2 px-4 h-12 py-3 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center ${
|
||
// !superSingleCheckeds.includes(superSingle.key)
|
||
// ? "mt-0 px-0 py-0 hidden"
|
||
// : ""
|
||
// }`}
|
||
>
|
||
<div className="flex items-center">
|
||
<span className="mr-1 text-[#ffffffae] text-sm">¥</span>
|
||
<OwnInput
|
||
type="number"
|
||
className="text-2xl"
|
||
value={formData.superSingle[superSingle.key].price}
|
||
onChange={(value) => {
|
||
const newFormData = { ...formData };
|
||
newFormData.superSingle[superSingle.key].price = value;
|
||
setFormData(newFormData);
|
||
}}
|
||
/>
|
||
</div>
|
||
<div className="flex items-center">
|
||
<span className="text-[#ffffff26] mr-2">|</span>
|
||
<Checkbox
|
||
block
|
||
checked={formData.superSingle[superSingle.key].wechatFree}
|
||
onChange={(value) => {
|
||
const newFormData = { ...formData };
|
||
newFormData.superSingle[superSingle.key].wechatFree = value;
|
||
setFormData(newFormData);
|
||
}}
|
||
>
|
||
<p className="text-sm whitespace-nowrap">赠送微信</p>
|
||
</Checkbox>
|
||
{/* <Checkbox
|
||
block
|
||
checked={formData.superSingle[superSingle.key].wechatFree}
|
||
onChange={(value) => {
|
||
const newFormData = { ...formData };
|
||
newFormData.superSingle[superSingle.key].wechatFree = value;
|
||
setFormData(newFormData);
|
||
}}
|
||
>
|
||
<p className="text-sm whitespace-nowrap">赠送微信</p>
|
||
</Checkbox> */}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
);
|
||
};
|
||
export default function spacePaymentSetting() {
|
||
const router = useRouter();
|
||
const searchParams = useSearchParams();
|
||
const [formData, setFormData] = useState({
|
||
spacePrice: "",
|
||
ironFanPrice: "",
|
||
openSuper: true,
|
||
superSingle: [
|
||
{ enable: false, price: 0, wechatFree: false },
|
||
{ enable: false, price: 0, wechatFree: false },
|
||
{ enable: false, price: 0, wechatFree: false },
|
||
{ enable: false, price: 0, wechatFree: false },
|
||
{ enable: false, price: 0, wechatFree: false },
|
||
],
|
||
});
|
||
const [spacePriceAble, setSpacePriceAble] = useState(false);
|
||
const [tiefenPriceAble, setTiefenPriceAble] = useState(false);
|
||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||
// const [superSingleCheckeds, setSuperSingleCheckeds] = useState([]);
|
||
const [superSingleChecked, setSuperSingleChecked] = useState(null);
|
||
useEffect(() => {
|
||
const account = get("account");
|
||
getStreamerInfo(Number(account.mid)).then((res) => {
|
||
// 旧版本
|
||
const haveChecked = res.is_superfanship_enabled;
|
||
if (haveChecked) {
|
||
setSuperSingleChecked(res.superfanship_valid_period);
|
||
}
|
||
const newFormData = {
|
||
spacePrice: `${res.admission_price / 100}`,
|
||
ironFanPrice: res.ironfanship_price / 100,
|
||
openSuper: !!res.is_superfanship_enabled,
|
||
superSingle: formData.superSingle.map((it, index) => {
|
||
if (index == res.superfanship_valid_period) {
|
||
return {
|
||
enable: !!res.is_superfanship_enabled,
|
||
price: res.superfanship_price / 100,
|
||
wechatFree: !!res.is_superfanship_give_wechat,
|
||
};
|
||
} else {
|
||
return it;
|
||
}
|
||
}),
|
||
spaceIntro: res.profile,
|
||
};
|
||
setFormData(newFormData);
|
||
// 新版本
|
||
// const haveChecked = res.superfan_price_list
|
||
// .map((it, index) => ({ ...it, index }))
|
||
// .filter((it) => it.enable);
|
||
// if (haveChecked.length > 0) {
|
||
// setSuperSingleChecked(haveChecked[0].period);
|
||
// }
|
||
// setSuperSingleCheckeds(
|
||
// res.superfan_price_list
|
||
// .map((it, index) => ({ ...it, index }))
|
||
// .filter((it) => it.enable)
|
||
// .map((it) => superSingles[it.index].key)
|
||
// );
|
||
// setFormData({
|
||
// spacePrice: res.admission_price / 100,
|
||
// ironFanPrice: res.ironfanship_price / 100,
|
||
// openSuper: !!res.is_superfanship_enabled,
|
||
// superSingle: res.superfan_price_list.map((it) => ({
|
||
// enable: !!it.enable,
|
||
// price: it.price / 100,
|
||
// wechatFree: !!it.is_superfanship_give_wechat,
|
||
// })),
|
||
// spaceIntro: res.profile,
|
||
// });
|
||
});
|
||
}, []);
|
||
const listItemWithCheckboxMemo = useMemo(() => {
|
||
return superSingles.map((item, index) => (
|
||
<Fragment key={item.key}>
|
||
<ListItemWithCheckbox
|
||
superSingle={item}
|
||
formData={formData}
|
||
setFormData={setFormData}
|
||
superSingleCheckeds={superSingleChecked}
|
||
// superSingleCheckeds={superSingleCheckeds}
|
||
/>
|
||
</Fragment>
|
||
));
|
||
}, [formData, superSingleChecked]);
|
||
const handleSubmit = async () => {
|
||
const { spacePrice, ironFanPrice, openSuper, superSingle } = formData;
|
||
const openSuperEveryFalse = Object.values(superSingle).every(
|
||
(it) => !it.enable
|
||
);
|
||
if (!spacePrice || !ironFanPrice || (openSuper && openSuperEveryFalse)) {
|
||
Toast.show({
|
||
icon: "fail",
|
||
content: "请完善内容后提交",
|
||
position: "top",
|
||
});
|
||
return;
|
||
}
|
||
|
||
const _spacePrice = parseInt(spacePrice * 100, 10);
|
||
if (isNaN(_spacePrice) || _spacePrice < 0 || _spacePrice > 388800) {
|
||
Toast.show({
|
||
icon: "fail",
|
||
content: "请输入有效的解锁空间价格",
|
||
position: "top",
|
||
});
|
||
return;
|
||
}
|
||
const _ironFanPrice = parseInt(ironFanPrice * 100, 10);
|
||
if (isNaN(_ironFanPrice) || _ironFanPrice < 100 || _ironFanPrice > 388800) {
|
||
Toast.show({
|
||
icon: "fail",
|
||
content: "请输入有效的铁粉价格",
|
||
position: "top",
|
||
});
|
||
return;
|
||
}
|
||
let isPrice = false;
|
||
if (openSuper) {
|
||
// Object.values(superSingle).forEach((it) => {
|
||
// if (it.enable) {
|
||
// const superFanPrice = it.price;
|
||
// if (!superFanPrice) {
|
||
// Toast.show({
|
||
// icon: "fail",
|
||
// content: "请填写超粉价格",
|
||
// position: "top",
|
||
// });
|
||
// isPrice = true;
|
||
// return;
|
||
// } else {
|
||
// const _superFanPrice = parseInt(superFanPrice * 100, 10);
|
||
// if (
|
||
// openSuper &&
|
||
// (isNaN(_superFanPrice) ||
|
||
// _superFanPrice < 100 ||
|
||
// _superFanPrice > 388800)
|
||
// ) {
|
||
// isPrice = true;
|
||
// Toast.show({
|
||
// icon: "fail",
|
||
// content: "请输入有效的超粉价格",
|
||
// position: "top",
|
||
// });
|
||
// return;
|
||
// }
|
||
// if (openSuper && _superFanPrice <= _ironFanPrice) {
|
||
// isPrice = true;
|
||
// Toast.show({
|
||
// icon: "fail",
|
||
// content: "请输入大于铁粉价格的超粉价格",
|
||
// position: "top",
|
||
// });
|
||
// return;
|
||
// }
|
||
// }
|
||
// }
|
||
// });
|
||
if (superSingleChecked == null) {
|
||
Toast.show({
|
||
icon: "fail",
|
||
content: "请选择铁粉类型",
|
||
position: "top",
|
||
});
|
||
} else {
|
||
const superChecked = superSingle.filter(
|
||
(_, index) => index == superSingleChecked
|
||
)[0];
|
||
if (superChecked) {
|
||
const superFanPrice = superChecked.price;
|
||
if (!superFanPrice) {
|
||
Toast.show({
|
||
icon: "fail",
|
||
content: "请填写超粉价格",
|
||
position: "top",
|
||
});
|
||
isPrice = true;
|
||
return;
|
||
} else {
|
||
const _superFanPrice = parseInt(superFanPrice * 100, 10);
|
||
if (
|
||
openSuper &&
|
||
(isNaN(_superFanPrice) ||
|
||
_superFanPrice < 100 ||
|
||
_superFanPrice > 388800)
|
||
) {
|
||
isPrice = true;
|
||
Toast.show({
|
||
icon: "fail",
|
||
content: "请输入有效的超粉价格",
|
||
position: "top",
|
||
});
|
||
return;
|
||
}
|
||
if (openSuper && _superFanPrice <= _ironFanPrice) {
|
||
isPrice = true;
|
||
Toast.show({
|
||
icon: "fail",
|
||
content: "请输入大于铁粉价格的超粉价格",
|
||
position: "top",
|
||
});
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
if (isPrice) return;
|
||
// if (
|
||
// openSuper &&
|
||
// superFanExpiration !== 0 &&
|
||
// superFanExpiration !== 1 &&
|
||
// superFanExpiration !== 2 &&
|
||
// superFanExpiration !== 3 &&
|
||
// superFanExpiration !== 4
|
||
// ) {
|
||
// Toast.show({
|
||
// icon: "error",
|
||
// content: "请选择超粉有效期",
|
||
// position: "top",
|
||
// });
|
||
// return;
|
||
// }
|
||
|
||
if (isSubmitting) return;
|
||
// 旧版本
|
||
const superfanList = superSingle.map((it, index) => ({
|
||
period: index,
|
||
enable: it.enable ? 1 : 0,
|
||
price: parseInt(it.price * 100, 10),
|
||
is_superfanship_give_wechat: it.wechatFree ? 1 : 0,
|
||
}));
|
||
const superfanObj = superfanList.filter((it) => it.enable)[0];
|
||
// 新版本
|
||
// const superfan_price_list = superSingle.map((it, index) => ({
|
||
// period: index,
|
||
// enable: it.enable ? 1 : 0,
|
||
// price: parseInt(it.price * 100, 10),
|
||
// is_superfanship_give_wechat: it.wechatFree ? 1 : 0,
|
||
// }));
|
||
setIsSubmitting(true);
|
||
try {
|
||
const body = {
|
||
id: parseInt(searchParams.get("zid"), 10),
|
||
admission_price: parseInt(spacePrice * 100, 10),
|
||
ironfanship_price: parseInt(ironFanPrice * 100, 10),
|
||
is_superfanship_enabled: openSuper ? 1 : 0,
|
||
// 旧版本
|
||
superfanship_price: superfanObj.price,
|
||
superfanship_valid_period: superfanObj.period,
|
||
is_superfanship_give_wechat: superfanObj.is_superfanship_give_wechat,
|
||
// 新版本
|
||
// superfan_price_list,
|
||
};
|
||
// console.log("body", body);
|
||
const _data = await requireAPI(
|
||
"POST",
|
||
"/api/zone/update",
|
||
{
|
||
body,
|
||
},
|
||
true
|
||
);
|
||
if (_data.ret === -1) {
|
||
Toast.show({
|
||
icon: "error",
|
||
content: _data.msg,
|
||
position: "top",
|
||
});
|
||
return;
|
||
}
|
||
Toast.show({
|
||
icon: "success",
|
||
content: "修改成功，请重进空间刷新查看",
|
||
position: "top",
|
||
});
|
||
router.back();
|
||
} catch (error) {
|
||
console.error(error);
|
||
} finally {
|
||
setIsSubmitting(false);
|
||
}
|
||
};
|
||
return (
|
||
<div>
|
||
{/* 头部标题 */}
|
||
<div className="p-4 fixed top-0 z-10 w-full bg-black">
|
||
<div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full absolute">
|
||
<FontAwesomeIcon
|
||
icon={faAngleLeft}
|
||
style={{ maxWidth: "12px" }}
|
||
size="xl"
|
||
onClick={() => {
|
||
router.back();
|
||
}}
|
||
/>
|
||
</div>
|
||
<p className="text-base text-center leading-9">空间付费设置</p>
|
||
</div>
|
||
{/* 内容 */}
|
||
<div className="pt-16 p-4">
|
||
<div>
|
||
<div className="flex justify-between items-center">
|
||
<p className="text-sm whitespace-nowrap">
|
||
<span>解锁空间价格</span>
|
||
<span className="text-[#f00]">*</span>
|
||
</p>
|
||
<p className="text-[#ffffffb3] text-xs">
|
||
（成为空间成员，可查看免费帖）
|
||
</p>
|
||
</div>
|
||
<div className="mt-2 px-4 py-3 h-12 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center">
|
||
<div className="flex items-center">
|
||
<span className="mr-1 text-[#ffffffae] text-sm">¥</span>
|
||
{/* {!spacePriceAble ? (
|
||
<span className="text-2xl">{formData.spacePrice}</span>
|
||
) : (
|
||
<OwnInput
|
||
type="number"
|
||
value={formData.spacePrice}
|
||
onChange={(value) =>
|
||
setFormData((old) => ({ ...old, spacePrice: value }))
|
||
}
|
||
/>
|
||
)} */}
|
||
<OwnInput
|
||
id="spacePrice"
|
||
type="number"
|
||
fontSize="22"
|
||
placeholder="0~3888，仅支持整数"
|
||
value={formData.spacePrice}
|
||
onChange={(value) =>
|
||
setFormData((old) => ({ ...old, spacePrice: value }))
|
||
}
|
||
className={!formData.spacePrice ? "pb-1.5" : ""}
|
||
inputClassName="placeholder:text-[14px]"
|
||
/>
|
||
</div>
|
||
<label
|
||
htmlFor="spacePrice"
|
||
className="text-[#ffffff40] text-xs whitespace-nowrap"
|
||
onClick={() => setSpacePriceAble(true)}
|
||
>
|
||
点击编辑
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div className="mt-3">
|
||
<div className="flex justify-between items-center">
|
||
<p className="text-sm whitespace-nowrap">
|
||
<span>铁粉价格</span>
|
||
<span className="text-[#f00]">*</span>
|
||
</p>
|
||
<p className="text-[#ffffffb3] text-xs">
|
||
（累计消费达成后解锁铁粉权益）
|
||
</p>
|
||
</div>
|
||
<div className="mt-2 px-4 py-3 h-12 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center">
|
||
<div className="flex items-center">
|
||
<span className="mr-1 text-[#ffffffae] text-sm">¥</span>
|
||
{/* {!tiefenPriceAble ? (
|
||
<span className="text-2xl">{formData.ironFanPrice}</span>
|
||
) : (
|
||
|
||
)} */}
|
||
<OwnInput
|
||
id="ironPrice"
|
||
type="number"
|
||
fontSize="22"
|
||
placeholder="1~3888，仅支持整数"
|
||
value={formData.ironFanPrice}
|
||
onChange={(value) =>
|
||
setFormData((old) => ({ ...old, ironFanPrice: value }))
|
||
}
|
||
className={!formData.ironFanPrice ? "pb-1.5" : ""}
|
||
inputClassName="placeholder:text-[14px]"
|
||
/>
|
||
</div>
|
||
<label
|
||
htmlFor="ironPrice"
|
||
className="text-[#ffffff40] text-xs whitespace-nowrap"
|
||
onClick={() => setTiefenPriceAble(true)}
|
||
>
|
||
点击编辑
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div className="mt-3">
|
||
<div className="flex justify-between items-center">
|
||
<p className="text-sm">
|
||
<span>超粉功能</span>
|
||
<span className="text-[#f00]">*</span>
|
||
</p>
|
||
<div className="flex items-center">
|
||
<p className="text-[#ffffffae] text-xs mr-2">是否启用</p>
|
||
<Switch
|
||
checked={formData.openSuper}
|
||
onChange={(value) => {
|
||
setFormData((old) => ({
|
||
...old,
|
||
openSuper: value,
|
||
}));
|
||
}}
|
||
style={{
|
||
"--checked-color": "#FF669E",
|
||
"--height": "24px",
|
||
"--width": "36px",
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{formData.openSuper && (
|
||
<div className="mt-3">
|
||
<div className="flex justify-between items-center">
|
||
<p className="text-sm">
|
||
<span>超粉单次开通类型</span>
|
||
<span className="text-[#f00]">*</span>
|
||
</p>
|
||
<p className="text-[#ffffffb3] text-xs">
|
||
（付费后解锁对应期限超粉权益）
|
||
</p>
|
||
</div>
|
||
<Space direction="vertical" block>
|
||
<Radio.Group
|
||
value={superSingleChecked}
|
||
// value={superSingleCheckeds}
|
||
onChange={(values) => {
|
||
setSuperSingleChecked(values);
|
||
// setSuperSingleCheckeds(values);
|
||
}}
|
||
>
|
||
<ul>{listItemWithCheckboxMemo}</ul>
|
||
</Radio.Group>
|
||
{/* <Checkbox.Group
|
||
value={superSingleCheckeds}
|
||
onChange={(values) => {
|
||
setSuperSingleCheckeds(values);
|
||
}}
|
||
>
|
||
<ul>{listItemWithCheckboxMemo}</ul>
|
||
</Checkbox.Group> */}
|
||
</Space>
|
||
</div>
|
||
)}
|
||
|
||
<div className="mt-10 flex justify-center">
|
||
<Button
|
||
size="middle"
|
||
shape="rounded"
|
||
style={{
|
||
"--background-color": "#FF669E",
|
||
paddingLeft: "32px",
|
||
paddingRight: "32px",
|
||
}}
|
||
onClick={handleSubmit}
|
||
>
|
||
{isSubmitting ? "正在保存..." : "保存设置"}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|