tiefen_space_h5/app/space/setting/spaceIntroSetting/page.jsx

129 lines
3.9 KiB
JavaScript

"use client";
import OwnInput from "@/components/OwnInput";
import { Button, Divider, TextArea, Toast } from "antd-mobile";
import React, { useEffect, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleRight, faAngleLeft } from "@fortawesome/free-solid-svg-icons";
import { getStreamerInfo } from "@/api/space";
import requireAPI from "@/utils/requireAPI";
export default function SpaceIntroSetting() {
const searchParams = useSearchParams();
const router = useRouter();
const [data, setData] = useState({});
const [isSubmitting, setIsSubmitting] = useState(false);
//空间介绍
const [spaceIntro, setSpaceIntro] = useState("");
useEffect(() => {
const _data = decodeURIComponent(searchParams.get("data"));
getStreamerInfo(_data.mid).then((res) => {
setData(res);
setSpaceIntro(res?.profile);
});
}, []);
const handleSubmit = async () => {
if (!spaceIntro) {
Toast.show({
icon: "fail",
content: "请完善内容后提交",
position: "top",
});
return;
}
if (isSubmitting) return;
setIsSubmitting(true);
try {
const body = {
id: data.id,
profile: spaceIntro,
};
const _data = await requireAPI("POST", "/api/zone/update", {
body,
});
if (_data.ret === -1) {
Toast.show({
icon: "fail",
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 className="flex-1">
<p className="text-base font-medium text-white">
<span className="text-[#F53030]">*</span>
</p>
<TextArea
value={spaceIntro}
onChange={(value) => setSpaceIntro(value)}
placeholder="介绍下你的空间吧~"
className="h-32 bg-[#FFFFFF1A] text-white rounded-2xl mt-2 p-2"
style={{ "--placeholder-color": "#FFFFFF80" }}
/>
<Divider />
<div
onClick={() => router.push("spaceIntroSetting/editStreamerMedia")}
className="flex justify-between py-2"
>
<p className="text-base text-white">
<span className="text-[#F53030]">*</span>
封面相册视频设置
</p>
<FontAwesomeIcon
icon={faAngleRight}
style={{ maxWidth: "12px" }}
size="xl"
/>
</div>
<div className="mt-16">
<Button
shape="rounded"
size="middle"
block
disabled={isSubmitting}
// disabledStyle={tailwind("bg-[#FFFFFF80]")}
onClick={handleSubmit}
style={{ "--background-color": "#FF669E" }}
>
{/* {isSubmitting && <ActivityIndicator size="small" color="white" />} */}
{isSubmitting ? "正在保存..." : "保存设置"}
</Button>
</div>
</div>
</div>
</div>
);
}