1166 lines
37 KiB
JavaScript
1166 lines
37 KiB
JavaScript
"use client";
|
||
|
||
import React, {
|
||
useState,
|
||
useRef,
|
||
useEffect,
|
||
useCallback,
|
||
useMemo,
|
||
Fragment,
|
||
} from "react";
|
||
import {
|
||
Toast,
|
||
Space,
|
||
Radio,
|
||
Button,
|
||
Picker,
|
||
Selector,
|
||
TextArea,
|
||
Avatar,
|
||
Divider,
|
||
Mask,
|
||
SpinLoading,
|
||
Form,
|
||
} from "antd-mobile";
|
||
import { useRouter } from "next/navigation";
|
||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||
import {
|
||
faAngleLeft,
|
||
faSortDown,
|
||
faAngleRight,
|
||
faInfoCircle,
|
||
} from "@fortawesome/free-solid-svg-icons";
|
||
import OwnInput from "@/components/OwnInput";
|
||
import requireAPI from "@/utils/requireAPI";
|
||
import { get } from "@/utils/storeInfo";
|
||
import UploadImgs from "@/components/UploadImgs";
|
||
import { multiUploadImage } from "@/utils/upload";
|
||
import { getVideoBase64 } from "@/utils/tools";
|
||
import OwnImage from "@/components/OwnImage";
|
||
const constellations = [
|
||
{ label: "白羊座", value: "白羊座" },
|
||
{ label: "金牛座", value: "金牛座" },
|
||
{ label: "双子座", value: "双子座" },
|
||
{ label: "巨蟹座", value: "巨蟹座" },
|
||
{ label: "狮子座", value: "狮子座" },
|
||
{ label: "处女座", value: "处女座" },
|
||
{ label: "天秤座", value: "天秤座" },
|
||
{ label: "天蝎座", value: "天蝎座" },
|
||
{ label: "射手座", value: "射手座" },
|
||
{ label: "摩羯座", value: "摩羯座" },
|
||
{ label: "水瓶座", value: "水瓶座" },
|
||
{ label: "双鱼座", value: "双鱼座" },
|
||
];
|
||
const provinces = [
|
||
{ label: "北京市", value: "北京市" },
|
||
{ label: "天津市", value: "天津市" },
|
||
{ label: "河北省", value: "河北省" },
|
||
{ label: "山西省", value: "山西省" },
|
||
{ label: "内蒙古自治区", value: "内蒙古自治区" },
|
||
{ label: "辽宁省", value: "辽宁省" },
|
||
{ label: "吉林省", value: "吉林省" },
|
||
{ label: "黑龙江省", value: "黑龙江省" },
|
||
{ label: "上海市", value: "上海市" },
|
||
{ label: "江苏省", value: "江苏省" },
|
||
{ label: "浙江省", value: "浙江省" },
|
||
{ label: "安徽省", value: "安徽省" },
|
||
{ label: "福建省", value: "福建省" },
|
||
{ label: "江西省", value: "江西省" },
|
||
{ label: "山东省", value: "山东省" },
|
||
{ label: "河南省", value: "河南省" },
|
||
{ label: "湖北省", value: "湖北省" },
|
||
{ label: "湖南省", value: "湖南省" },
|
||
{ label: "广东省", value: "广东省" },
|
||
{ label: "广西壮族自治区", value: "广西壮族自治区" },
|
||
{ label: "海南省", value: "海南省" },
|
||
{ label: "重庆市", value: "重庆市" },
|
||
{ label: "四川省", value: "四川省" },
|
||
{ label: "贵州省", value: "贵州省" },
|
||
{ label: "云南省", value: "云南省" },
|
||
{ label: "西藏自治区", value: "西藏自治区" },
|
||
{ label: "陕西省", value: "陕西省" },
|
||
{ label: "甘肃省", value: "甘肃省" },
|
||
{ label: "青海省", value: "青海省" },
|
||
{ label: "宁夏回族自治区", value: "宁夏回族自治区" },
|
||
{ label: "新疆维吾尔自治区", value: "新疆维吾尔自治区" },
|
||
{ label: "台湾省", value: "台湾省" },
|
||
{ label: "香港特别行政区", value: "香港特别行政区" },
|
||
{ label: "澳门特别行政区", value: "澳门特别行政区" },
|
||
];
|
||
export default function CompleteStreamerInformation() {
|
||
const router = useRouter();
|
||
const ref = useRef(null);
|
||
const [form] = Form.useForm();
|
||
const [hadSubmited, setHadSubmited] = useState(false);
|
||
const [frameImageUrl, setFrameImageUrl] = useState(null);
|
||
const [isWaitingReview, setIsWaitingReview] = useState(false);
|
||
const [showWechatInput, setShowWechatInput] = useState(false);
|
||
const [formData, setFormData] = useState({
|
||
imageAssets: [],
|
||
displayImage: [],
|
||
displayVideo: [],
|
||
});
|
||
|
||
const [spacePriceAble, setSpacePriceAble] = useState(false);
|
||
// const [wechatAddWay, setWechatAddWay] = useState("0");
|
||
const [data, setData] = useState({});
|
||
//正在提交状态
|
||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||
//生成年龄、身高、体重、胸围、腰围、臀围、星座、省份数组
|
||
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 ages = useMemo(() => generateItems(18, 60), []);
|
||
const heights = useMemo(() => generateItems(140, 200), []);
|
||
const weights = useMemo(() => generateItems(35, 100), []);
|
||
//控制填写微信的输入框是否出现1不出现，0出现
|
||
const [wechatInputShow, setWechatInputShow] = useState(1);
|
||
//展示旧相册图片组件
|
||
const [oldPhotos, setOldPhotos] = useState([]);
|
||
useEffect(() => {
|
||
getData();
|
||
}, []);
|
||
useEffect(() => {
|
||
// console.log("setFormData", data?.streamer);
|
||
|
||
if (data?.streamer?.tag) {
|
||
const {
|
||
fans,
|
||
wechat_coin_price,
|
||
gender,
|
||
age,
|
||
height,
|
||
weight,
|
||
constellation,
|
||
city,
|
||
tag,
|
||
bio,
|
||
auto_response_message,
|
||
wechat_lock_type,
|
||
wechat_contact,
|
||
cover,
|
||
shorts,
|
||
} = data?.streamer;
|
||
|
||
const newFormData = {
|
||
fans,
|
||
wechatPrice: wechat_coin_price / 10,
|
||
gender: [`${gender}`],
|
||
age: [`${age}`],
|
||
height: [`${height}`],
|
||
weight: [`${weight}`],
|
||
constellation: [`${constellation}`],
|
||
province: [`${city}`],
|
||
tags: tag,
|
||
info: bio,
|
||
autoResponse: auto_response_message,
|
||
wechatAddWay: wechat_lock_type,
|
||
wechat: wechat_contact,
|
||
|
||
displayImage: [
|
||
{
|
||
notChanged: true,
|
||
image_ids: cover.image_ids,
|
||
url: cover.images[0].urls[0],
|
||
},
|
||
],
|
||
displayVideo: [
|
||
{
|
||
notChanged: true,
|
||
video_ids: shorts?.video_ids,
|
||
url: shorts?.videos[0]?.cover_urls[0],
|
||
},
|
||
],
|
||
};
|
||
setShowWechatInput(wechat_lock_type);
|
||
form.setFieldsValue(newFormData);
|
||
}
|
||
}, [data]);
|
||
useEffect(() => {
|
||
setFormData((old) => ({ ...old, imageAssets: oldPhotos }));
|
||
}, [oldPhotos]);
|
||
const superSingles = [
|
||
{ key: 1, text: "主动添加对方" },
|
||
{ key: 0, text: "向对方展示微信" },
|
||
];
|
||
const [fieldNamesOptions, setFieldNamesOptions] = useState([]);
|
||
const ListItemWithCheckbox = ({ superSingle }) => {
|
||
const checkboxRef = useRef(null);
|
||
return (
|
||
<li
|
||
className="mt-4"
|
||
// onClick={() => {
|
||
// checkboxRef.current?.toggle();
|
||
// }}
|
||
>
|
||
<div onClick={(e) => e.stopPropagation()}>
|
||
<Radio value={superSingle.key}>{superSingle.text}</Radio>
|
||
</div>
|
||
</li>
|
||
);
|
||
};
|
||
const getData = async () => {
|
||
setIsSubmitting(true);
|
||
const account = await get("account");
|
||
try {
|
||
// //获取所有的标签
|
||
const allTags = await requireAPI("POST", "/api/streamer_tag/list", {});
|
||
if (allTags.ret === -1) {
|
||
Toast.show({
|
||
icon: "fail",
|
||
content: allTags.msg,
|
||
position: "top",
|
||
});
|
||
return;
|
||
}
|
||
const tagNamesOptions = Object.values(allTags.data)?.map(
|
||
(item, index) => ({
|
||
labelT: item,
|
||
valueT: item,
|
||
})
|
||
);
|
||
setFieldNamesOptions(tagNamesOptions);
|
||
//获取当前审批状态
|
||
const statusData = await requireAPI(
|
||
"POST",
|
||
"/api/streamer_auth_approval/get_statuses",
|
||
{}
|
||
);
|
||
if (statusData.ret === -1) {
|
||
Toast.show({
|
||
icon: "fail",
|
||
content: statusData.msg,
|
||
position: "top",
|
||
});
|
||
return;
|
||
}
|
||
if (
|
||
statusData?.data?.basic_status === 1 &&
|
||
statusData?.data?.details_status === 1
|
||
) {
|
||
setHadSubmited(true);
|
||
return;
|
||
}
|
||
if (statusData?.data?.details_status === 0) setIsWaitingReview(true);
|
||
if (statusData?.data?.details_status !== 2) {
|
||
setData({ ...account, streamer: {} });
|
||
return;
|
||
}
|
||
//获取已填信息
|
||
const _data = await requireAPI(
|
||
"POST",
|
||
"/api/streamer_auth_approval_his/list_details",
|
||
{}
|
||
);
|
||
if (_data.ret === -1) {
|
||
Toast.show({
|
||
icon: "fail",
|
||
content: _data.msg,
|
||
position: "top",
|
||
});
|
||
return;
|
||
}
|
||
|
||
setData({ ...account, streamer: _data.data.list[0] });
|
||
setWechatInputShow(_data.data.list[0].wechat_lock_type);
|
||
if (_data.data.list[0]) {
|
||
setFormData((old) => ({
|
||
...old,
|
||
displayImage: [
|
||
{
|
||
notChanged: true,
|
||
image_ids: _data.data.list[0].cover.image_ids,
|
||
url: _data.data.list[0].cover.images[0].urls[0],
|
||
},
|
||
],
|
||
displayVideo: [
|
||
{
|
||
notChanged: true,
|
||
video_ids: _data.data.list[0].shorts?.video_ids,
|
||
url: _data.data.list[0].shorts?.videos[0]?.cover_urls[0],
|
||
},
|
||
],
|
||
}));
|
||
setOldPhotos(
|
||
_data.data.list[0].album.images.map((it) => ({
|
||
id: it.id,
|
||
url: it.urls[0],
|
||
}))
|
||
);
|
||
}
|
||
|
||
// setIsloading(false);
|
||
} catch (error) {
|
||
console.error(error);
|
||
} finally {
|
||
setIsSubmitting(false);
|
||
}
|
||
};
|
||
const handleSubmit = async (values) => {
|
||
const account = await get("account");
|
||
const { imageAssets, displayImage, displayVideo } = formData;
|
||
if (displayImage.length === 0 || displayVideo.length === 0) {
|
||
Toast.show({
|
||
icon: "fail",
|
||
content: "请完善信息后提交",
|
||
position: "top",
|
||
});
|
||
return;
|
||
}
|
||
//相册不得低于2张
|
||
if (imageAssets.length < 2) {
|
||
Toast.show({
|
||
icon: "fail",
|
||
content: "相册至少需要上传2张照片哦！",
|
||
position: "top",
|
||
});
|
||
return;
|
||
}
|
||
//相册不得超过9张
|
||
if (imageAssets.length > 9) {
|
||
Toast.show({
|
||
icon: "fail",
|
||
content: "相册最多只能上传9张照片哦！",
|
||
position: "top",
|
||
});
|
||
return;
|
||
}
|
||
setIsSubmitting(true);
|
||
const cover =
|
||
displayImage[0]?.image_ids?.length > 0
|
||
? displayImage[0]
|
||
: await multiUploadImage(displayImage[0].file, 1);
|
||
const shorts =
|
||
displayVideo[0]?.video_ids?.length > 0
|
||
? displayVideo[0]
|
||
: await multiUploadImage(displayVideo[0].file, 2);
|
||
const newMedia = imageAssets.filter((it) => it.id == undefined);
|
||
const media = await multiUploadImage(newMedia, 1);
|
||
const album = {
|
||
image_ids: [
|
||
...imageAssets.filter((it) => it.id != undefined).map((it) => it.id),
|
||
...media.image_ids,
|
||
],
|
||
};
|
||
if (
|
||
!cover.image_ids.length ||
|
||
!shorts.video_ids.length ||
|
||
!album.image_ids.length
|
||
) {
|
||
Toast.show({
|
||
icon: "fail",
|
||
content: "上传失败，请联系客服进行上传",
|
||
position: "top",
|
||
});
|
||
setIsSubmitting(false);
|
||
return;
|
||
}
|
||
const {
|
||
gender,
|
||
wechat,
|
||
info,
|
||
age,
|
||
tags,
|
||
height,
|
||
weight,
|
||
constellation,
|
||
province,
|
||
wechatAddWay,
|
||
fans,
|
||
wechatPrice,
|
||
autoResponse,
|
||
} = values;
|
||
//上传表单
|
||
const body = {
|
||
mid: account?.mid,
|
||
gender: parseInt(gender[0], 10),
|
||
wechat_contact: wechat,
|
||
bio: info,
|
||
album: album,
|
||
age: parseInt(age[0], 10),
|
||
height: parseInt(height[0], 10),
|
||
weight: parseInt(weight[0], 10),
|
||
constellation: constellation[0],
|
||
city: province[0],
|
||
tag: tags,
|
||
wechat_lock_type: wechatAddWay,
|
||
fans: parseInt(fans, 10),
|
||
wechat_coin_price: parseInt(wechatPrice, 10) * 10,
|
||
auto_response_message: autoResponse,
|
||
cover: cover,
|
||
shorts: shorts,
|
||
};
|
||
// console.log("formData", body);
|
||
try {
|
||
const streamerData = await requireAPI(
|
||
"POST",
|
||
"/api/streamer_auth_approval/create_details",
|
||
{
|
||
body,
|
||
},
|
||
false,
|
||
100000
|
||
);
|
||
if (streamerData.ret === -1) {
|
||
Toast.show({
|
||
icon: "fail",
|
||
content: streamerData.msg,
|
||
position: "top",
|
||
});
|
||
return;
|
||
}
|
||
//提交成功后toast提示并返回“我的”页面
|
||
Toast.show({
|
||
icon: "success",
|
||
content: "提交成功，请耐心等待审核",
|
||
position: "top",
|
||
});
|
||
router.back();
|
||
} catch (error) {
|
||
console.error(error);
|
||
} finally {
|
||
setIsSubmitting(false);
|
||
}
|
||
};
|
||
const handleUploadImage = async (e, type) => {
|
||
let file = e.target.files[0];
|
||
if (!file) return;
|
||
if (type == 1) {
|
||
setFormData((old) => ({
|
||
...old,
|
||
displayImage: [
|
||
{
|
||
url: URL.createObjectURL(file),
|
||
file: Array.from(e.target.files),
|
||
},
|
||
],
|
||
}));
|
||
} else {
|
||
const url = URL.createObjectURL(file);
|
||
getVideoBase64(url).then((src) => {
|
||
setFrameImageUrl(src);
|
||
setFormData((old) => ({
|
||
...old,
|
||
displayVideo: [
|
||
{
|
||
url: src,
|
||
file: Array.from(e.target.files),
|
||
},
|
||
],
|
||
}));
|
||
});
|
||
}
|
||
};
|
||
|
||
// 已经通过审核的情况
|
||
if (hadSubmited) {
|
||
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 flex justify-center">
|
||
<div className="flex flex-col items-center p-4 mt-16">
|
||
<FontAwesomeIcon
|
||
icon={faInfoCircle}
|
||
color="#27F5B7"
|
||
style={{ maxWidth: "100px", width: "100px", height: "100px" }}
|
||
// size="xl"
|
||
/>
|
||
<span className="text-2xl mt-4 font-medium text-center">
|
||
您已通过审核，无需再次提交
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
//审核中的情况
|
||
if (isWaitingReview) {
|
||
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 flex justify-center">
|
||
<div className="flex flex-col items-center p-4 mt-16">
|
||
{/* <Icon
|
||
name="information-circle"
|
||
type="ionicon"
|
||
color="#27F5B7"
|
||
size={100}
|
||
/> */}
|
||
<FontAwesomeIcon
|
||
icon={faInfoCircle}
|
||
color="#27F5B7"
|
||
style={{ maxWidth: "100px", width: "100px", height: "100px" }}
|
||
// size="xl"
|
||
/>
|
||
<span className="text-2xl mt-4 font-medium">
|
||
正在审核中，请耐心等待
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
const messageEle = (message) => <p className="text-right">{message}</p>;
|
||
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">
|
||
{data.streamer?.remarks && (
|
||
<div className="mb-4">
|
||
<div className="p-4 rounded-2xl bg-[#FFFFFF1A]">
|
||
<p className="text-sm font-medium">
|
||
<span className="text-[#F53030]">驳回原因：</span>
|
||
{data.streamer?.remarks}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
<div>
|
||
<div className="flex justify-between items-center h-[40px]">
|
||
<p className="text-sm">
|
||
<span>头像（需在“我的”修改）</span>
|
||
<span className="text-[#f00]">*</span>
|
||
</p>
|
||
<Avatar
|
||
src={data?.avatar?.images[0]?.urls[0]}
|
||
fit="cover"
|
||
style={{ "--border-radius": "100px", "--size": "32px" }}
|
||
/>
|
||
</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>
|
||
<span>{data?.name}</span>
|
||
</div>
|
||
</div>
|
||
<Form
|
||
requiredMarkStyle="asterisk"
|
||
layout="vertical"
|
||
form={form}
|
||
onFinish={handleSubmit}
|
||
onFinishFailed={(error) => {
|
||
Toast.show({
|
||
icon: "fail",
|
||
content: "请检查所填内容",
|
||
position: "top",
|
||
});
|
||
}}
|
||
initialValues={formData}
|
||
// hasFeedback={false}
|
||
validateMessages={{
|
||
required: (name) => {
|
||
return <p className="text-right">{`请输入${name}`}</p>;
|
||
},
|
||
}}
|
||
>
|
||
<Form.Item
|
||
name="gender"
|
||
childElementPosition="right"
|
||
label={<span className="text-sm text-white">性别</span>}
|
||
layout="horizontal"
|
||
trigger="onConfirm"
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: messageEle("请选择性别"),
|
||
// validator: (rule, value) => {
|
||
// if (value.length === 0) {
|
||
// return Promise.reject(messageEle("请选择性别"));
|
||
// }
|
||
// },
|
||
},
|
||
]}
|
||
>
|
||
<Picker
|
||
columns={[
|
||
[
|
||
{ label: "女", value: "1" },
|
||
{ label: "男", value: "0" },
|
||
],
|
||
]}
|
||
>
|
||
{(items, { open }) => {
|
||
return (
|
||
<Space
|
||
align="center"
|
||
direction="horizontal"
|
||
justify="center"
|
||
onClick={open}
|
||
>
|
||
<span className="text-sm">
|
||
{items.every((item) => item === null)
|
||
? "未选择"
|
||
: items.map((item) => item?.label ?? "未选择").join("")}
|
||
</span>
|
||
<FontAwesomeIcon
|
||
icon={faSortDown}
|
||
style={{ maxWidth: "12px", marginBottom: 6 }}
|
||
size="lg"
|
||
/>
|
||
</Space>
|
||
);
|
||
}}
|
||
</Picker>
|
||
</Form.Item>
|
||
<Form.Item
|
||
required
|
||
name="age"
|
||
trigger="onConfirm"
|
||
childElementPosition="right"
|
||
label={<span className="text-sm text-white">年龄（岁）</span>}
|
||
layout="horizontal"
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: messageEle("请选择年龄"),
|
||
},
|
||
]}
|
||
>
|
||
<Picker columns={[ages]}>
|
||
{(items, { open }) => {
|
||
return (
|
||
<Space
|
||
align="center"
|
||
direction="horizontal"
|
||
justify="center"
|
||
onClick={open}
|
||
>
|
||
<span className="text-sm text-white">
|
||
{items.every((item) => item === null)
|
||
? "未选择"
|
||
: items.map((item) => item?.label ?? "未选择").join("")}
|
||
</span>
|
||
<FontAwesomeIcon
|
||
icon={faSortDown}
|
||
style={{ maxWidth: "12px", marginBottom: 6 }}
|
||
size="lg"
|
||
/>
|
||
</Space>
|
||
);
|
||
}}
|
||
</Picker>
|
||
</Form.Item>
|
||
<Form.Item
|
||
required
|
||
name="height"
|
||
trigger="onConfirm"
|
||
childElementPosition="right"
|
||
label={<span className="text-sm text-white">身高（cm）</span>}
|
||
layout="horizontal"
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: messageEle("请选择身高"),
|
||
},
|
||
]}
|
||
>
|
||
<Picker columns={[heights]}>
|
||
{(items, { open }) => {
|
||
return (
|
||
<Space
|
||
align="center"
|
||
direction="horizontal"
|
||
justify="center"
|
||
onClick={open}
|
||
>
|
||
<span className="text-sm text-white">
|
||
{items.every((item) => item === null)
|
||
? "未选择"
|
||
: items.map((item) => item?.label ?? "未选择").join("")}
|
||
</span>
|
||
<FontAwesomeIcon
|
||
icon={faSortDown}
|
||
style={{ maxWidth: "12px", marginBottom: 6 }}
|
||
size="lg"
|
||
/>
|
||
</Space>
|
||
);
|
||
}}
|
||
</Picker>
|
||
</Form.Item>
|
||
<Form.Item
|
||
required
|
||
name="weight"
|
||
trigger="onConfirm"
|
||
childElementPosition="right"
|
||
label={<span className="text-sm text-white">体重（kg）</span>}
|
||
layout="horizontal"
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: messageEle("请选择体重"),
|
||
},
|
||
]}
|
||
>
|
||
<Picker columns={[weights]}>
|
||
{(items, { open }) => {
|
||
return (
|
||
<Space
|
||
align="center"
|
||
direction="horizontal"
|
||
justify="center"
|
||
onClick={open}
|
||
>
|
||
<span className="text-sm text-white">
|
||
{items.every((item) => item === null)
|
||
? "未选择"
|
||
: items.map((item) => item?.label ?? "未选择").join("")}
|
||
</span>
|
||
<FontAwesomeIcon
|
||
icon={faSortDown}
|
||
style={{ maxWidth: "12px", marginBottom: 6 }}
|
||
size="lg"
|
||
/>
|
||
</Space>
|
||
);
|
||
}}
|
||
</Picker>
|
||
</Form.Item>
|
||
<Form.Item
|
||
required
|
||
trigger="onConfirm"
|
||
name="constellation"
|
||
childElementPosition="right"
|
||
label={<span className="text-sm text-white">星座</span>}
|
||
layout="horizontal"
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: messageEle("请选择星座"),
|
||
},
|
||
]}
|
||
>
|
||
<Picker columns={[constellations]}>
|
||
{(items, { open }) => {
|
||
return (
|
||
<Space
|
||
align="center"
|
||
direction="horizontal"
|
||
justify="center"
|
||
onClick={open}
|
||
>
|
||
<span className="text-sm text-white">
|
||
{items.every((item) => item === null)
|
||
? "未选择"
|
||
: items.map((item) => item?.label ?? "未选择").join("")}
|
||
</span>
|
||
<FontAwesomeIcon
|
||
icon={faSortDown}
|
||
style={{ maxWidth: "12px", marginBottom: 6 }}
|
||
size="lg"
|
||
/>
|
||
</Space>
|
||
);
|
||
}}
|
||
</Picker>
|
||
</Form.Item>
|
||
<Form.Item
|
||
required
|
||
trigger="onConfirm"
|
||
name="province"
|
||
childElementPosition="right"
|
||
label={<span className="text-sm text-white">所在地</span>}
|
||
layout="horizontal"
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: messageEle("请选择所在地"),
|
||
},
|
||
]}
|
||
>
|
||
<Picker columns={[provinces]}>
|
||
{(items, { open }) => {
|
||
return (
|
||
<Space
|
||
align="center"
|
||
direction="horizontal"
|
||
justify="center"
|
||
onClick={open}
|
||
>
|
||
<span className="text-sm text-white">
|
||
{items.every((item) => item === null)
|
||
? "未选择"
|
||
: items.map((item) => item?.label ?? "未选择").join("")}
|
||
</span>
|
||
<FontAwesomeIcon
|
||
icon={faSortDown}
|
||
style={{ maxWidth: "12px", marginBottom: 6 }}
|
||
size="lg"
|
||
/>
|
||
</Space>
|
||
);
|
||
}}
|
||
</Picker>
|
||
</Form.Item>
|
||
<Form.Item
|
||
required
|
||
name="tags"
|
||
label={<span className="text-sm text-white">添加标签</span>}
|
||
layout="vertical"
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: messageEle("请添加标签"),
|
||
},
|
||
]}
|
||
>
|
||
<Selector
|
||
options={fieldNamesOptions}
|
||
fieldNames={{
|
||
label: "labelT",
|
||
value: "valueT",
|
||
disabled: "disabledT",
|
||
}}
|
||
// defaultValue={["1"]}
|
||
multiple
|
||
// onChange={(arr, extend) => {
|
||
// if (arr.length >= 4) {
|
||
// Toast.show({
|
||
// content: "最多只能选择3个标签",
|
||
// position: "top",
|
||
// });
|
||
// return;
|
||
// }
|
||
// setFormData((old) => ({ ...old, tags: arr }));
|
||
// }}
|
||
showCheckMark={false}
|
||
style={{
|
||
"--border-radius": "100px",
|
||
"--border": "solid #ffffff80 1px",
|
||
"--checked-border": "solid #FF669E 1px",
|
||
"--padding": "4px 12px",
|
||
"--text-color": "#ffffff80",
|
||
"--checked-text-color": "#FF669E",
|
||
"--checked-color": "none",
|
||
}}
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item
|
||
required
|
||
name="wechatAddWay"
|
||
label={<span className="text-sm text-white">添加微信方式</span>}
|
||
layout="vertical"
|
||
// trigger="onConfirm"
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: messageEle("请添加微信方式"),
|
||
},
|
||
]}
|
||
>
|
||
<Radio.Group onChange={setShowWechatInput}>
|
||
<ul>
|
||
{superSingles.map((item) => (
|
||
<Fragment key={item.key}>
|
||
<ListItemWithCheckbox superSingle={item} />
|
||
</Fragment>
|
||
))}
|
||
</ul>
|
||
</Radio.Group>
|
||
</Form.Item>
|
||
|
||
{showWechatInput === 0 && (
|
||
<Form.Item
|
||
label={<span className="text-sm text-white">微信帐号</span>}
|
||
layout="vertical"
|
||
name="wechat"
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: messageEle("请填写正确的微信"),
|
||
pattern: /^[a-zA-Z0-9_-]+$/,
|
||
},
|
||
]}
|
||
>
|
||
<OwnInput
|
||
placeholder="对方付费购买后展示"
|
||
inputClassName="mt-2 px-4 h-12 py-3 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center"
|
||
/>
|
||
</Form.Item>
|
||
)}
|
||
<Form.Item
|
||
required
|
||
name="fans"
|
||
layout="vertical"
|
||
label={<span className="text-sm text-white">全网粉丝量（万）</span>}
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: messageEle(
|
||
"请输入有效的全网粉丝量（大于等于1的整数）"
|
||
),
|
||
// pattern: /^[1-9]+(\.[0-9]{1,2})?$/,
|
||
pattern: /^[1-9]\d*$/,
|
||
},
|
||
]}
|
||
>
|
||
<OwnInput
|
||
type="number"
|
||
placeholder="请输入真实有效数据"
|
||
inputClassName="mt-2 px-4 py-3 h-12 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center"
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item
|
||
layout="vertical"
|
||
name="wechatPrice"
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: messageEle("请输入有效的微信价格（大于等于1的整数）"),
|
||
pattern: /^[1-9]\d*$/,
|
||
},
|
||
]}
|
||
label={<span className="text-sm text-white">加微信价格（元）</span>}
|
||
>
|
||
<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>
|
||
<OwnInput id="addWeChatPrice" type="number" />
|
||
</div>
|
||
<label
|
||
htmlFor="addWeChatPrice"
|
||
className="text-[#ffffffae] text-xs whitespace-nowrap"
|
||
onClick={() => setSpacePriceAble(true)}
|
||
>
|
||
点击编辑
|
||
</label>
|
||
</div>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
required
|
||
name="info"
|
||
layout="vertical"
|
||
label={<span className="text-sm text-white">个性签名</span>}
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: messageEle("请填写个性签名"),
|
||
},
|
||
]}
|
||
>
|
||
<TextArea
|
||
style={{ "--font-size": `16px` }}
|
||
placeholder="点此输入，文案将在“主页”展示"
|
||
className="mt-2 px-4 py-3 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center"
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item
|
||
name="autoResponse"
|
||
layout="vertical"
|
||
label={<span className="text-sm text-white">私信自动回复</span>}
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: messageEle("请填写私信自动回复"),
|
||
},
|
||
]}
|
||
>
|
||
<TextArea
|
||
style={{ "--font-size": `16px` }}
|
||
placeholder="文案将自动发送给点开私信的用户"
|
||
className="mt-2 px-4 py-3 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center"
|
||
/>
|
||
</Form.Item>
|
||
|
||
<Form.Item>
|
||
<div className="flex justify-between items-center">
|
||
<p className="text-sm text-white">
|
||
<span>照片墙</span>
|
||
<span className="text-[#f00]">*</span>
|
||
</p>
|
||
<p className="text-[#ffffffae] text-xs"></p>
|
||
</div>
|
||
<div className=" my-2 py-4 bg-[#FFFFFF1A] px-3 rounded-2xl">
|
||
<ul>
|
||
<li className="flex justify-between items-center">
|
||
<p className="text-base font-medium">
|
||
<span className="text-[#F53030]">*</span>
|
||
封面图
|
||
</p>
|
||
<label htmlFor="uploadBtn1">
|
||
<div className="flex items-center">
|
||
{formData?.displayImage[0] ? (
|
||
<OwnImage
|
||
width={36}
|
||
height={36}
|
||
className="rounded-lg"
|
||
src={formData.displayImage[0]?.url}
|
||
fit="cover"
|
||
/>
|
||
) : (
|
||
<span className="text-xs text-[#FFFFFF80] font-medium whitespace-nowrap">
|
||
请尽量选择横屏照片
|
||
</span>
|
||
)}
|
||
<div className="ml-2">
|
||
<FontAwesomeIcon
|
||
icon={faAngleRight}
|
||
style={{ maxWidth: "12px" }}
|
||
size="xl"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</label>
|
||
<div className="hidden">
|
||
<input
|
||
type="file"
|
||
accept="image/png, image/jpeg, image/jpg"
|
||
ref={ref}
|
||
id="uploadBtn1"
|
||
onChange={(e) => handleUploadImage(e, 1)}
|
||
/>
|
||
</div>
|
||
</li>
|
||
<Divider />
|
||
<li className="flex justify-between items-center">
|
||
<p className="text-base font-medium">
|
||
<span className="text-[#F53030]">*</span>
|
||
展示视频
|
||
</p>
|
||
<label htmlFor="uploadBtn2">
|
||
<div
|
||
// onClick={() => pickDisPlayImage()}
|
||
className="flex items-center"
|
||
>
|
||
{formData?.displayVideo[0] ? (
|
||
<OwnImage
|
||
width={36}
|
||
height={36}
|
||
className="rounded-lg"
|
||
src={frameImageUrl || formData.displayVideo[0]?.url}
|
||
fit="cover"
|
||
/>
|
||
) : (
|
||
<span className="text-xs text-[#FFFFFF80] font-medium whitespace-nowrap">
|
||
请尽量选择竖屏视频
|
||
</span>
|
||
)}
|
||
<div className="ml-2">
|
||
<FontAwesomeIcon
|
||
icon={faAngleRight}
|
||
style={{ maxWidth: "12px" }}
|
||
size="xl"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</label>
|
||
|
||
<div className="hidden">
|
||
<input
|
||
type="file"
|
||
accept="video/*"
|
||
ref={ref}
|
||
id="uploadBtn2"
|
||
onChange={(e) => handleUploadImage(e, 2)}
|
||
/>
|
||
</div>
|
||
</li>
|
||
<Divider />
|
||
<li>
|
||
<div className="flex justify-between items-center">
|
||
<p className="text-base font-medium">
|
||
<span className="text-[#F53030]">*</span>
|
||
相册
|
||
</p>
|
||
<div
|
||
// onClick={() => pickDisPlayImage()}
|
||
>
|
||
<span className="text-xs text-[#FFFFFF80] font-medium">
|
||
请上传2～9张照片
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div className="mt-2">
|
||
<UploadImgs
|
||
type={1}
|
||
existImages={oldPhotos}
|
||
assets={formData.imageAssets}
|
||
getImgs={(imgs) => {
|
||
setFormData((old) => ({ ...old, imageAssets: imgs }));
|
||
}}
|
||
/>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</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>
|
||
<Mask visible={isSubmitting}>
|
||
<div className="w-full h-screen flex justify-center items-center">
|
||
<SpinLoading color="default" />
|
||
</div>
|
||
</Mask>
|
||
</div>
|
||
);
|
||
}
|