390 lines
12 KiB
React
390 lines
12 KiB
React
|
"use client";
|
|||
|
|
|
|||
|
|
import React, { useState, useRef, useMemo, Fragment } from "react";
|
|||
|
|
import { Switch, Space, Checkbox, Button, Toast, TextArea } 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";
|
|||
|
|
const superSingles = [
|
|||
|
|
{ key: 0, text: "永久" },
|
|||
|
|
{ key: 1, text: "按年生效" },
|
|||
|
|
{ key: 2, text: "按半年生效" },
|
|||
|
|
{ key: 3, text: "按季度生效" },
|
|||
|
|
{ key: 4, text: "按月生效" },
|
|||
|
|
];
|
|||
|
|
const ListItemWithCheckbox = ({
|
|||
|
|
superSingle,
|
|||
|
|
formData,
|
|||
|
|
setFormData,
|
|||
|
|
superSingleCheckeds,
|
|||
|
|
}) => {
|
|||
|
|
const checkboxRef = useRef(null);
|
|||
|
|
return (
|
|||
|
|
<li
|
|||
|
|
className="mt-4"
|
|||
|
|
onClick={() => {
|
|||
|
|
checkboxRef.current?.toggle();
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<div onClick={(e) => e.stopPropagation()}>
|
|||
|
|
<Checkbox
|
|||
|
|
value={superSingle.key}
|
|||
|
|
ref={checkboxRef}
|
|||
|
|
onChange={(value) => {
|
|||
|
|
const newFormData = { ...formData };
|
|||
|
|
newFormData.superSingle[superSingle.key].enable = value;
|
|||
|
|
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.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-[#ffffffae] 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">赠送微信</p>
|
|||
|
|
</Checkbox>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
export default function CreateProfile() {
|
|||
|
|
const router = useRouter();
|
|||
|
|
const searchParams = useSearchParams();
|
|||
|
|
const [formData, setFormData] = useState({
|
|||
|
|
spacePrice: 0,
|
|||
|
|
ironFanPrice: 0,
|
|||
|
|
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 },
|
|||
|
|
],
|
|||
|
|
spaceIntro: "",
|
|||
|
|
});
|
|||
|
|
const [spacePriceAble, setSpacePriceAble] = useState(false);
|
|||
|
|
const [tiefenPriceAble, setTiefenPriceAble] = useState(false);
|
|||
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|||
|
|
const [superSingleCheckeds, setSuperSingleCheckeds] = useState([]);
|
|||
|
|
|
|||
|
|
const listItemWithCheckboxMemo = useMemo(() => {
|
|||
|
|
return superSingles.map((item) => (
|
|||
|
|
<Fragment key={item.key}>
|
|||
|
|
<ListItemWithCheckbox
|
|||
|
|
superSingle={item}
|
|||
|
|
formData={formData}
|
|||
|
|
setFormData={setFormData}
|
|||
|
|
superSingleCheckeds={superSingleCheckeds}
|
|||
|
|
/>
|
|||
|
|
</Fragment>
|
|||
|
|
));
|
|||
|
|
}, [formData, superSingleCheckeds]);
|
|||
|
|
const handleSubmit = async () => {
|
|||
|
|
const { spaceIntro, spacePrice, ironFanPrice, openSuper, superSingle } =
|
|||
|
|
formData;
|
|||
|
|
|
|||
|
|
if (!spaceIntro || !spacePrice || !ironFanPrice) {
|
|||
|
|
Toast.show({
|
|||
|
|
icon: "fail",
|
|||
|
|
content: "请完善内容后提交",
|
|||
|
|
position: "top",
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const _spacePrice = parseInt(spacePrice * 100, 10);
|
|||
|
|
if (isNaN(_spacePrice) || _spacePrice < 0) {
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
if (openSuper) {
|
|||
|
|
Object.values(superSingle).forEach((it) => {
|
|||
|
|
if (it.enable) {
|
|||
|
|
const superFanPrice = it.price;
|
|||
|
|
if (!superFanPrice) {
|
|||
|
|
Toast.show({
|
|||
|
|
icon: "fail",
|
|||
|
|
content: "请填写超粉价格",
|
|||
|
|
position: "top",
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
const _superFanPrice = parseInt(superFanPrice * 100, 10);
|
|||
|
|
if (
|
|||
|
|
openSuper &&
|
|||
|
|
(isNaN(_superFanPrice) ||
|
|||
|
|
_superFanPrice < 100 ||
|
|||
|
|
_superFanPrice > 388800)
|
|||
|
|
) {
|
|||
|
|
Toast.show({
|
|||
|
|
icon: "fail",
|
|||
|
|
content: "请输入有效的超粉价格",
|
|||
|
|
position: "top",
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (openSuper && _superFanPrice <= _ironFanPrice) {
|
|||
|
|
Toast.show({
|
|||
|
|
icon: "fail",
|
|||
|
|
content: "请输入大于铁粉价格的超粉价格",
|
|||
|
|
position: "top",
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
if (isSubmitting) return;
|
|||
|
|
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 = {
|
|||
|
|
profile: spaceIntro,
|
|||
|
|
admission_price: parseInt(spacePrice * 100, 10),
|
|||
|
|
ironfanship_price: parseInt(ironFanPrice * 100, 10),
|
|||
|
|
is_superfanship_enabled: openSuper ? 1 : 0,
|
|||
|
|
superfan_price_list,
|
|||
|
|
};
|
|||
|
|
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">
|
|||
|
|
<span>空间介绍</span>
|
|||
|
|
<span className="text-[#f00]">*</span>
|
|||
|
|
</p>
|
|||
|
|
<p className="text-[#ffffffae] text-xs"></p>
|
|||
|
|
</div>
|
|||
|
|
<div className="mt-2 px-4 py-3 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center">
|
|||
|
|
<TextArea
|
|||
|
|
value={formData.info}
|
|||
|
|
placeholder="介绍下你的空间吧～"
|
|||
|
|
onChange={(value) =>
|
|||
|
|
setFormData((old) => ({ ...old, spaceIntro: value }))
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="mt-6">
|
|||
|
|
<div className="flex justify-between items-center">
|
|||
|
|
<p className="text-sm">
|
|||
|
|
<span>解锁空间价格</span>
|
|||
|
|
<span className="text-[#f00]">*</span>
|
|||
|
|
</p>
|
|||
|
|
<p className="text-[#ffffffae] 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 }))
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<p
|
|||
|
|
className="text-[#ffffffae] text-xs"
|
|||
|
|
onClick={() => setSpacePriceAble(true)}
|
|||
|
|
>
|
|||
|
|
点击编辑
|
|||
|
|
</p>
|
|||
|
|
</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>
|
|||
|
|
<p className="text-[#ffffffae] 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
|
|||
|
|
type="number"
|
|||
|
|
value={formData.ironFanPrice}
|
|||
|
|
onChange={(value) =>
|
|||
|
|
setFormData((old) => ({ ...old, ironFanPrice: value }))
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<p
|
|||
|
|
className="text-[#ffffffae] text-xs"
|
|||
|
|
onClick={() => setTiefenPriceAble(true)}
|
|||
|
|
>
|
|||
|
|
点击编辑
|
|||
|
|
</p>
|
|||
|
|
</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>
|
|||
|
|
<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"></div>
|
|||
|
|
</div>
|
|||
|
|
<Space direction="vertical" block>
|
|||
|
|
<Checkbox.Group
|
|||
|
|
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}
|
|||
|
|
>
|
|||
|
|
保存设置
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|