打开滚动通知

This commit is contained in:
al 2025-01-16 16:11:34 +08:00
parent 0de1e7a185
commit a98db1bf18
2 changed files with 327 additions and 306 deletions
app
noticeDetail/components/MessageList
space/setting/spacePaymentSetting

View File

@ -5,7 +5,7 @@ import React, {
useImperativeHandle,
} from "react";
import { formatDate } from "../../../../utils/tools";
// import ScrollNotice from "../ScrollNotice";
import ScrollNotice from "../ScrollNotice";
import { useRouter } from "next/navigation";
import requireAPI from "@/utils/requireAPI";
import { connect } from "react-redux";
@ -217,7 +217,7 @@ const MessageList = ({ mid, changeNoticeCount, refInstance, noticeCount }) => {
return (
<div className="flex flex-col flex-1 p-4">
{/* 广告轮播 */}
{/* {!!scollNotice.length && <ScrollNotice content={scollNotice} />} */}
{!!scollNotice.length && <ScrollNotice content={scollNotice} />}
{/* 官方消息 */}
<div className="flex flex-col rounded-2xl mt-3.5">

View File

@ -1,7 +1,7 @@
"use client";
import React, { useState, useEffect, useRef, useMemo, Fragment } from "react";
import { Switch, Space, Checkbox, Button, Toast, Radio } from "antd-mobile";
import { Switch, Space, Checkbox, Button, Toast, Form } from "antd-mobile";
import { useRouter, useSearchParams } from "next/navigation";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
@ -10,11 +10,11 @@ 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: "按年生效" },
{ key: 0, index: 0, text: "永久" },
{ key: 4, index: 1, text: "按年生效" },
{ key: 3, index: 2, text: "按半年生效" },
{ key: 2, index: 3, text: "按季度生效" },
{ key: 1, index: 4, text: "按月生效" },
];
// const superSingles = [
// { key: 0, text: "" },
@ -25,62 +25,61 @@ const superSingles = [
// ];
const ListItemWithCheckbox = ({
superSingle,
formData,
setFormData,
superSinglesContr,
setSuperSinglesContr,
superSingleCheckeds,
index,
}) => {
return (
<li className="mt-4" onClick={() => {}}>
<div onClick={(e) => e.stopPropagation()}>
<Radio
value={superSingle.key}
{/* <Radio
value={index}
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;
newFormData.superSingle[index].enable = value;
// newFormData.superSingle[index].price = 0;
// newFormData.superSingle[index].wechatFree = false;
setFormData(newFormData);
}}
>
{superSingle.text}
</Radio>
{/* <Checkbox
value={superSingle.key}
</Radio> */}
<Checkbox
value={index}
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);
const newSuperSinglesContr = [...superSinglesContr];
newSuperSinglesContr[index].enable = value;
// newSuperSinglesContr[index].price = 0;
// newSuperSinglesContr[index].wechatFree = false;
setSuperSinglesContr(newSuperSinglesContr);
}}
>
{superSingle.text}
</Checkbox> */}
</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)
// superSingleCheckeds != index
// ? "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(index) ? "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}
value={superSinglesContr[index].price}
onChange={(value) => {
const newFormData = { ...formData };
newFormData.superSingle[superSingle.key].price = value;
setFormData(newFormData);
const newSuperSinglesContr = [...superSinglesContr];
newSuperSinglesContr[index].price = value;
setSuperSinglesContr(newSuperSinglesContr);
}}
/>
</div>
@ -88,126 +87,107 @@ const ListItemWithCheckbox = ({
<span className="text-[#ffffff26] mr-2">|</span>
<Checkbox
block
checked={formData.superSingle[superSingle.key].wechatFree}
checked={superSinglesContr[index].wechatFree}
onChange={(value) => {
const newFormData = { ...formData };
newFormData.superSingle[superSingle.key].wechatFree = value;
setFormData(newFormData);
const newSuperSinglesContr = [...superSinglesContr];
newSuperSinglesContr[index].wechatFree = value;
setSuperSinglesContr(newSuperSinglesContr);
}}
>
<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() {
export default function SpacePaymentSetting() {
const [form] = Form.useForm();
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 [openSuper, setOpenSuper] = useState(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);
const [superSingleCheckeds, setSuperSingleCheckeds] = useState([]);
const [superSinglesContr, setSuperSinglesContr] = useState([
{ enable: false, price: 0, wechatFree: false, key: 0 },
{ enable: false, price: 0, wechatFree: false, key: 4 },
{ enable: false, price: 0, wechatFree: false, key: 3 },
{ enable: false, price: 0, wechatFree: false, key: 2 },
{ enable: false, price: 0, wechatFree: false, key: 1 },
]);
const [spacePriceInfo, setSpacePriceInfo] = 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);
const priceList = res.superfan_price_list ?? [
{ enable: false, price: 0, is_superfanship_give_wechat: false, key: 0 },
{ enable: false, price: 0, is_superfanship_give_wechat: false, key: 4 },
{ enable: false, price: 0, is_superfanship_give_wechat: false, key: 3 },
{ enable: false, price: 0, is_superfanship_give_wechat: false, key: 2 },
{ enable: false, price: 0, is_superfanship_give_wechat: false, key: 1 },
];
const haveChecked = priceList
.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,
// });
setSuperSingleCheckeds(
priceList
.map((it, index) => ({ ...it, index }))
.filter((it) => it.enable)
.map((it) => superSingles[it.index].index)
);
setOpenSuper(!!res.is_superfanship_enabled);
setSuperSinglesContr(
priceList.map((it, index) => ({
enable: !!it.enable,
price: it.price / 100,
wechatFree: !!it.is_superfanship_give_wechat,
key: index ? 5 - index : index,
}))
);
setSpacePriceInfo(res);
});
}, []);
useEffect(() => {
if (!spacePriceInfo) return;
form.setFieldsValue({
spacePrice: spacePriceInfo.admission_price / 100,
ironFanPrice: spacePriceInfo.ironfanship_price / 100,
});
}, [form, spacePriceInfo]);
const listItemWithCheckboxMemo = useMemo(() => {
return superSingles.map((item, index) => (
<Fragment key={item.key}>
<ListItemWithCheckbox
superSingle={item}
formData={formData}
setFormData={setFormData}
superSingleCheckeds={superSingleChecked}
// superSingleCheckeds={superSingleCheckeds}
superSinglesContr={superSinglesContr}
setSuperSinglesContr={setSuperSinglesContr}
// superSingleCheckeds={superSingleChecked}
superSingleCheckeds={superSingleCheckeds}
index={index}
/>
</Fragment>
));
}, [formData, superSingleChecked]);
const handleSubmit = async () => {
const { spacePrice, ironFanPrice, openSuper, superSingle } = formData;
}, [superSingleCheckeds, superSinglesContr]);
const handleSubmit = async (newFormData) => {
const { spacePrice, ironFanPrice } = newFormData;
const superSingle = [...superSinglesContr];
const openSuperEveryFalse = Object.values(superSingle).every(
(it) => !it.enable
);
if (!spacePrice || !ironFanPrice || (openSuper && openSuperEveryFalse)) {
if (openSuper && openSuperEveryFalse) {
Toast.show({
icon: "fail",
content: "请完善内容后提交",
content: "请完善档位内容后提交",
position: "top",
});
return;
@ -233,57 +213,9 @@ export default function spacePaymentSetting() {
}
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;
Object.values(superSingle).forEach((it) => {
if (it.enable) {
const superFanPrice = it.price;
if (!superFanPrice) {
Toast.show({
icon: "fail",
@ -319,7 +251,55 @@ export default function spacePaymentSetting() {
}
}
}
}
});
// 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 (
@ -340,20 +320,21 @@ export default function spacePaymentSetting() {
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) => ({
// 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 = superSinglesContr.map((it, index) => ({
period: it.key,
enable: it.enable ? 1 : 0,
price: parseInt(it.price * 100, 10),
is_superfanship_give_wechat: it.wechatFree ? 1 : 0,
}));
setIsSubmitting(true);
try {
const body = {
@ -362,13 +343,12 @@ export default function spacePaymentSetting() {
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,
// superfanship_price: superfanObj.price,
// superfanship_valid_period: superfanObj.period,
// is_superfanship_give_wechat: superfanObj.is_superfanship_give_wechat,
//
// superfan_price_list,
superfan_price_list,
};
// console.log("body", body);
const _data = await requireAPI(
"POST",
"/api/zone/update",
@ -397,6 +377,7 @@ export default function spacePaymentSetting() {
setIsSubmitting(false);
}
};
const messageEle = (message) => <p className="text-right">{message}</p>;
return (
<div>
{/* 头部标题 */}
@ -415,10 +396,35 @@ export default function spacePaymentSetting() {
</div>
{/* 内容 */}
<div className="pt-16 p-4 mt-4">
<div>
<Form
requiredMarkStyle="none"
form={form}
initialValues={{
spacePrice: 0,
ironFanPrice: 0,
}}
onFinishFailed={(error) => {
Toast.show({
icon: "fail",
content: "请检查所填内容",
position: "top",
});
}}
onFinish={handleSubmit}
onValuesChange={(values) => {
console.log("onValuesChange:", values);
// setFormData(values);
}}
// hasFeedback={false}
validateMessages={{
required: (name) => {
return <p className="text-right">{`请输入${name}`}</p>;
},
}}
>
<div className="flex justify-between items-center">
<p className="text-sm whitespace-nowrap">
<span>解锁空间价格</span>
<span className="text-white">解锁空间价格</span>
<span className="text-[#f00]">*</span>
</p>
<p className="text-[#ffffffb3] text-xs">
@ -428,28 +434,31 @@ export default function spacePaymentSetting() {
<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>
) : (
<Form.Item
required
name="spacePrice"
// childElementPosition="left"
layout="vertical"
rules={[
{
required: true,
message: messageEle("请填写解锁空间的价格"),
pattern: /^[1-9]\d*$/,
// validator: (rule, value) => {
// if (value.length === 0) {
// return Promise.reject(messageEle(""));
// }
// },
},
]}
>
<OwnInput
id="spacePrice"
type="number"
value={formData.spacePrice}
onChange={(value) =>
setFormData((old) => ({ ...old, spacePrice: value }))
}
placeholder="0~3888仅支持整数"
inputClassName="placeholder:text-[14px]"
/>
)} */}
<OwnInput
id="spacePrice"
type="number"
placeholder="0~3888仅支持整数"
value={formData.spacePrice}
onChange={(value) =>
setFormData((old) => ({ ...old, spacePrice: value }))
}
className={!formData.spacePrice ? "pb-1.5" : ""}
inputClassName="placeholder:text-[14px]"
/>
</Form.Item>
</div>
<label
htmlFor="spacePrice"
@ -459,119 +468,131 @@ export default function spacePaymentSetting() {
点击编辑
</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"
placeholder="1~3888仅支持整数"
value={formData.ironFanPrice}
onChange={(value) =>
setFormData((old) => ({ ...old, ironFanPrice: value }))
}
className={!formData.ironFanPrice ? "pb-1.5" : ""}
inputClassName="placeholder:text-[14px]"
/>
<Form.Item
name="ironFanPrice"
// childElementPosition="left"
label={
<div className="flex justify-between items-center">
<p className="text-sm whitespace-nowrap">
<span className="text-white">铁粉价格</span>
<span className="text-[#f00]">*</span>
</p>
<p className="text-[#ffffffb3] text-xs">
累计消费达成后解锁铁粉权益
</p>
</div>
}
layout="vertical"
rules={[
{
required: true,
message: messageEle("请填写铁粉价格"),
// validator: (rule, value) => {
// if (value.length === 0) {
// return Promise.reject(messageEle(""));
// }
// },
},
]}
>
<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>
<Form.Item name="ironFanPrice">
<OwnInput
id="ironFanPrice"
type="number"
placeholder="1~3888仅支持整数"
inputClassName="placeholder:text-[14px]"
/>
</Form.Item>
</div>
<label
htmlFor="ironFanPrice"
className="text-[#ffffff40] text-xs whitespace-nowrap"
onClick={() => setTiefenPriceAble(true)}
>
点击编辑
</label>
</div>
<label
htmlFor="ironPrice"
className="text-[#ffffff40] text-xs whitespace-nowrap"
onClick={() => setTiefenPriceAble(true)}
>
点击编辑
</label>
</div>
</div>
<div className="mt-3">
</Form.Item>
<div className="flex justify-between items-center">
<p className="text-sm">
<span>超粉功能</span>
<span className="text-[#f00]">*</span>
<span className="text-white">超粉功能</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",
}}
/>
<Form.Item>
<Switch
checked={openSuper}
onChange={() => setOpenSuper((old) => !old)}
style={{
"--checked-color": "#FF669E",
"--height": "24px",
"--width": "36px",
}}
/>
</Form.Item>
</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",
{openSuper && (
<Form.Item
name="superSingleCheckeds"
// childElementPosition="left"
label={
<div className="flex justify-between items-center">
<p className="text-sm">
<span className="text-white">超粉单次开通类型</span>
<span className="text-[#f00]">*</span>
</p>
<p className="text-[#ffffffb3] text-xs">
付费后解锁对应期限超粉权益
</p>
</div>
}
layout="vertical"
>
<Space direction="vertical" block>
{/* <Radio.Group
value={superSingleChecked}
// value={superSingleCheckeds}
onChange={(values) => {
setSuperSingleChecked(values);
// setSuperSingleCheckeds(values);
}}
onClick={handleSubmit}
>
{isSubmitting ? "正在保存..." : "保存设置"}
</Button>
</div>
<ul>{listItemWithCheckboxMemo}</ul>
</Radio.Group> */}
<Checkbox.Group
value={superSingleCheckeds}
onChange={(values) => {
setSuperSingleCheckeds(values);
}}
>
<ul>{listItemWithCheckboxMemo}</ul>
</Checkbox.Group>
</Space>
</Form.Item>
)}
<Form.Item label={null} className="mt-10 flex-1 flex justify-center">
<Button
size="middle"
shape="rounded"
block
style={{
"--background-color": "#FF669E",
paddingLeft: "32px",
paddingRight: "32px",
}}
type="primary"
htmlType="submit"
disabled={isSubmitting}
>
{isSubmitting ? "正在保存..." : "保存设置"}
</Button>
</Form.Item>
</Form>
</div>
</div>
);