917 lines
35 KiB
React
917 lines
35 KiB
React
|
import {
|
|||
|
|
View,
|
|||
|
|
Text,
|
|||
|
|
ScrollView,
|
|||
|
|
TouchableOpacity,
|
|||
|
|
TextInput,
|
|||
|
|
KeyboardAvoidingView,
|
|||
|
|
Platform,
|
|||
|
|
ActivityIndicator,
|
|||
|
|
} from "react-native";
|
|||
|
|
import React, { useState, useMemo, useCallback, useEffect } from "react";
|
|||
|
|
import { useTailwind } from "tailwind-rn";
|
|||
|
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|||
|
|
import { Divider, Icon, Button, CheckBox } from "@rneui/themed";
|
|||
|
|
import { Image } from "expo-image";
|
|||
|
|
import { Formik } from "formik";
|
|||
|
|
import Picker from "../../components/Picker";
|
|||
|
|
import MediaPickerModal from "../../components/MediaPickerModal";
|
|||
|
|
import MediaPicker from "../../components/MediaPicker";
|
|||
|
|
import Toast from "react-native-toast-message";
|
|||
|
|
import { get } from "../../utils/storeInfo";
|
|||
|
|
import { multiUpload } from "../../utils/upload";
|
|||
|
|
import baseRequest from "../../utils/baseRequest";
|
|||
|
|
import { generateSignature } from "../../utils/crypto";
|
|||
|
|
|
|||
|
|
const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";
|
|||
|
|
|
|||
|
|
export default function EditStreamerProfile({ navigation, route }) {
|
|||
|
|
const tailwind = useTailwind();
|
|||
|
|
const insets = useSafeAreaInsets();
|
|||
|
|
|
|||
|
|
//保存封面图以及控制上传封面图Modal出现
|
|||
|
|
const [displayImagePickerModalVisible, setDisplayImagePickerModalVisible] =
|
|||
|
|
useState(false);
|
|||
|
|
const [displayImage, setDisplayImage] = useState([]);
|
|||
|
|
|
|||
|
|
//保存展示视频以及控制上传展示视频Modal出现
|
|||
|
|
const [displayVideoPickerModalVisible, setDisplayVideoPickerModalVisible] =
|
|||
|
|
useState(false);
|
|||
|
|
const [displayVideo, setDisplayVideo] = useState([]);
|
|||
|
|
|
|||
|
|
//控制填写微信的输入框是否出现1不出现，0出现
|
|||
|
|
const [wechatInputShow, setWechatInputShow] = useState(1);
|
|||
|
|
|
|||
|
|
//保存新添加的相册图片
|
|||
|
|
const [photos, setPhotos] = useState([]);
|
|||
|
|
//展示旧相册图片组件
|
|||
|
|
const [oldPhotos, setOldPhotos] = useState([]);
|
|||
|
|
const DisplayOldPhotos = ({ url, index }) => {
|
|||
|
|
const handleDelete = () => {
|
|||
|
|
const updatedAssets = [...oldPhotos];
|
|||
|
|
updatedAssets.splice(index, 1);
|
|||
|
|
setOldPhotos(updatedAssets);
|
|||
|
|
};
|
|||
|
|
return (
|
|||
|
|
<View
|
|||
|
|
style={{
|
|||
|
|
aspectRatio: 1,
|
|||
|
|
...tailwind("w-1/4 p-1"),
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Image
|
|||
|
|
style={tailwind("w-full h-full rounded-lg")}
|
|||
|
|
source={url}
|
|||
|
|
contentFit="cover"
|
|||
|
|
cachePolicy="disk"
|
|||
|
|
/>
|
|||
|
|
<View style={tailwind("absolute top-2 right-2")}>
|
|||
|
|
<Icon
|
|||
|
|
type="ionicon"
|
|||
|
|
name="close"
|
|||
|
|
color="white"
|
|||
|
|
size={18}
|
|||
|
|
onPress={handleDelete}
|
|||
|
|
style={tailwind("bg-black rounded-full opacity-70")}
|
|||
|
|
/>
|
|||
|
|
</View>
|
|||
|
|
</View>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
//保存主播标签
|
|||
|
|
const [tags, setTags] = useState([]);
|
|||
|
|
//点击标签
|
|||
|
|
const handlePressTag = (tag, isChecked) => {
|
|||
|
|
if (isChecked) {
|
|||
|
|
setTags(tags.filter((item) => item !== tag));
|
|||
|
|
} else {
|
|||
|
|
if (tags.length >= 3) {
|
|||
|
|
Toast.show({
|
|||
|
|
type: "error",
|
|||
|
|
text1: "最多只能选择3个标签",
|
|||
|
|
topOffset: 60,
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setTags([...tags, tag]);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
//标签组件
|
|||
|
|
const TagItem = ({ tag, label }) => {
|
|||
|
|
const isChecked = tags.includes(tag);
|
|||
|
|
return (
|
|||
|
|
<TouchableOpacity
|
|||
|
|
activeOpacity={1}
|
|||
|
|
onPress={() => handlePressTag(tag, isChecked)}
|
|||
|
|
style={
|
|||
|
|
isChecked
|
|||
|
|
? tailwind("border border-[#FF669E] rounded-full px-2 py-1 m-1")
|
|||
|
|
: tailwind("border border-gray-400 rounded-full px-2 py-1 m-1")
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
<Text
|
|||
|
|
style={
|
|||
|
|
isChecked
|
|||
|
|
? tailwind("text-[#FF669E] text-sm font-medium")
|
|||
|
|
: tailwind("text-[#FFFFFF80] text-sm font-medium")
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
{label}
|
|||
|
|
</Text>
|
|||
|
|
</TouchableOpacity>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
//生成年龄、身高、体重、胸围、腰围、臀围、星座、省份数组
|
|||
|
|
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), []);
|
|||
|
|
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: "澳门特别行政区" },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
//基本资料
|
|||
|
|
const [data, setData] = useState({ tag: {} });
|
|||
|
|
//正在加载数据
|
|||
|
|
const [isLoading, setIsloading] = useState(true);
|
|||
|
|
useEffect(() => {
|
|||
|
|
const getData = async () => {
|
|||
|
|
const account = await get("account");
|
|||
|
|
const apiUrl = process.env.EXPO_PUBLIC_API_URL;
|
|||
|
|
const base = await baseRequest();
|
|||
|
|
const signature = await generateSignature({
|
|||
|
|
mid: account?.mid,
|
|||
|
|
...base,
|
|||
|
|
});
|
|||
|
|
try {
|
|||
|
|
//获取主播数据
|
|||
|
|
const streamerResponse = await fetch(
|
|||
|
|
`${apiUrl}/api/streamer/list_by_mid?signature=${signature}`,
|
|||
|
|
{
|
|||
|
|
method: "POST",
|
|||
|
|
headers: {
|
|||
|
|
"Content-Type": "application/json",
|
|||
|
|
},
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
mid: account?.mid,
|
|||
|
|
...base,
|
|||
|
|
}),
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
const streamerData = await streamerResponse.json();
|
|||
|
|
if (streamerData.ret === -1) {
|
|||
|
|
Toast.show({
|
|||
|
|
type: "error",
|
|||
|
|
text1: streamerData.msg,
|
|||
|
|
topOffset: 60,
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
//获取所有的标签
|
|||
|
|
const signature2 = await generateSignature({
|
|||
|
|
...base,
|
|||
|
|
});
|
|||
|
|
const response = await fetch(
|
|||
|
|
`${apiUrl}/api/streamer_tag/list?signature=${signature2}`,
|
|||
|
|
{
|
|||
|
|
method: "POST",
|
|||
|
|
headers: {
|
|||
|
|
"Content-Type": "application/json",
|
|||
|
|
},
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
...base,
|
|||
|
|
}),
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
const tagData = await response.json();
|
|||
|
|
if (tagData.ret === -1) {
|
|||
|
|
Toast.show({
|
|||
|
|
type: "error",
|
|||
|
|
text1: tagData.msg,
|
|||
|
|
topOffset: 60,
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setData({ ...account, ...streamerData.data, tag: tagData.data });
|
|||
|
|
setWechatInputShow(streamerData.data.streamer.wechat_lock_type);
|
|||
|
|
setTags(streamerData.data.streamer.tag);
|
|||
|
|
setDisplayImage([
|
|||
|
|
{
|
|||
|
|
notChanged: true,
|
|||
|
|
id: { image_ids: streamerData.data.streamer.cover.image_ids },
|
|||
|
|
uri: streamerData.data.streamer.cover.images[0].urls[0],
|
|||
|
|
},
|
|||
|
|
]);
|
|||
|
|
setDisplayVideo([
|
|||
|
|
{
|
|||
|
|
notChanged: true,
|
|||
|
|
id: { video_ids: streamerData.data.streamer.shorts.video_ids },
|
|||
|
|
//todo:将下方uri改为视频封面图片
|
|||
|
|
uri: streamerData?.data?.streamer?.shorts?.videos[0]?.urls[0],
|
|||
|
|
},
|
|||
|
|
setOldPhotos(streamerData.data.streamer.album.images),
|
|||
|
|
]);
|
|||
|
|
setIsloading(false);
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error(error);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
getData();
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
//正在提交状态
|
|||
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|||
|
|
|
|||
|
|
//loading时展示加载中
|
|||
|
|
if (isLoading) {
|
|||
|
|
return (
|
|||
|
|
<ActivityIndicator style={tailwind("mt-32")} size="large" color="white" />
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<KeyboardAvoidingView
|
|||
|
|
behavior={Platform.OS == "ios" ? "padding" : "height"}
|
|||
|
|
keyboardVerticalOffset={insets.bottom + 60}
|
|||
|
|
style={{
|
|||
|
|
paddingLeft: insets.left,
|
|||
|
|
paddingRight: insets.right,
|
|||
|
|
...tailwind("flex-1"),
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<ScrollView style={tailwind("px-4 py-4")}>
|
|||
|
|
<Formik
|
|||
|
|
initialValues={{
|
|||
|
|
fans: data?.streamer?.fans?.toString(),
|
|||
|
|
gender: data?.streamer?.gender?.toString(),
|
|||
|
|
wechat_add_way: data?.streamer?.wechat_lock_type?.toString(),
|
|||
|
|
wechat: data?.streamer?.wechat_contact?.toString(),
|
|||
|
|
price: (data?.streamer?.wechat_coin_price / 10)?.toString(),
|
|||
|
|
info: data?.streamer?.bio?.toString(),
|
|||
|
|
age: data?.streamer?.age?.toString(),
|
|||
|
|
height: data?.streamer?.height?.toString(),
|
|||
|
|
weight: data?.streamer?.weight?.toString(),
|
|||
|
|
constellation: data?.streamer?.constellation?.toString(),
|
|||
|
|
location: data?.streamer?.city?.toString(),
|
|||
|
|
auto_response_message:
|
|||
|
|
data?.streamer?.auto_response_message?.toString(),
|
|||
|
|
}}
|
|||
|
|
enableReinitialize
|
|||
|
|
onSubmit={async (values) => {
|
|||
|
|
if (
|
|||
|
|
!values.fans ||
|
|||
|
|
!values.gender ||
|
|||
|
|
!values.wechat_add_way ||
|
|||
|
|
!values.price ||
|
|||
|
|
!values.info ||
|
|||
|
|
displayImage.length === 0 ||
|
|||
|
|
displayVideo.length === 0 ||
|
|||
|
|
!values.age ||
|
|||
|
|
!values.height ||
|
|||
|
|
!values.weight ||
|
|||
|
|
!values.constellation ||
|
|||
|
|
!values.location ||
|
|||
|
|
!values.auto_response_message ||
|
|||
|
|
tags.length === 0
|
|||
|
|
) {
|
|||
|
|
Toast.show({
|
|||
|
|
type: "error",
|
|||
|
|
text1: "请完善信息后提交",
|
|||
|
|
topOffset: 60,
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (values.wechat_add_way === "0" && !values.wechat) {
|
|||
|
|
Toast.show({
|
|||
|
|
type: "error",
|
|||
|
|
text1: "请填写微信号",
|
|||
|
|
topOffset: 60,
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (photos.length === 0 && oldPhotos.length === 0) {
|
|||
|
|
Toast.show({
|
|||
|
|
type: "error",
|
|||
|
|
text1: "请确保相册中至少有一张图片",
|
|||
|
|
topOffset: 60,
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setIsSubmitting(true);
|
|||
|
|
const account = await get("account");
|
|||
|
|
const cover = displayImage[0].notChanged
|
|||
|
|
? displayImage[0].id
|
|||
|
|
: await multiUpload(displayImage);
|
|||
|
|
const shorts = displayVideo[0].notChanged
|
|||
|
|
? displayVideo[0].id
|
|||
|
|
: await multiUpload(displayVideo);
|
|||
|
|
const newPhotosIds = await multiUpload(photos);
|
|||
|
|
const oldPhotosIds = oldPhotos.map((item) => item.id);
|
|||
|
|
const album = {
|
|||
|
|
image_ids: [...oldPhotosIds, ...newPhotosIds?.image_ids],
|
|||
|
|
};
|
|||
|
|
//相册不得超过9张
|
|||
|
|
if (album.image_ids.length > 9) {
|
|||
|
|
Toast.show({
|
|||
|
|
type: "error",
|
|||
|
|
text1: "相册最多只能上传9张照片哦！",
|
|||
|
|
topOffset: 60,
|
|||
|
|
});
|
|||
|
|
setIsSubmitting(false);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (
|
|||
|
|
!cover.image_ids.length ||
|
|||
|
|
!shorts.video_ids.length ||
|
|||
|
|
!album.image_ids.length
|
|||
|
|
) {
|
|||
|
|
Toast.show({
|
|||
|
|
type: "error",
|
|||
|
|
text1: "上传失败，请联系客服进行上传",
|
|||
|
|
topOffset: 60,
|
|||
|
|
});
|
|||
|
|
setIsSubmitting(false);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//获取环境变量
|
|||
|
|
const apiUrl = process.env.EXPO_PUBLIC_API_URL;
|
|||
|
|
|
|||
|
|
//上传表单
|
|||
|
|
const base = await baseRequest();
|
|||
|
|
const signature = await generateSignature({
|
|||
|
|
mid: account?.mid,
|
|||
|
|
gender: parseInt(values.gender, 10),
|
|||
|
|
wechat_contact: values.wechat,
|
|||
|
|
bio: values.info,
|
|||
|
|
cover: cover,
|
|||
|
|
shorts: shorts,
|
|||
|
|
album: album,
|
|||
|
|
age: parseInt(values.age, 10),
|
|||
|
|
height: parseInt(values.height, 10),
|
|||
|
|
weight: parseInt(values.weight, 10),
|
|||
|
|
constellation: values.constellation,
|
|||
|
|
city: values.location,
|
|||
|
|
tag: tags,
|
|||
|
|
wechat_lock_type: parseInt(values.wechat_add_way, 10),
|
|||
|
|
fans: parseInt(values.fans, 10),
|
|||
|
|
wechat_coin_price: parseInt(values.price, 10) * 10,
|
|||
|
|
auto_response_message: values.auto_response_message,
|
|||
|
|
...base,
|
|||
|
|
});
|
|||
|
|
try {
|
|||
|
|
const response = await fetch(
|
|||
|
|
`${apiUrl}/api/streamer/update?signature=${signature}`,
|
|||
|
|
{
|
|||
|
|
method: "POST",
|
|||
|
|
headers: {
|
|||
|
|
"Content-Type": "application/json",
|
|||
|
|
},
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
mid: account?.mid,
|
|||
|
|
gender: parseInt(values.gender, 10),
|
|||
|
|
wechat_contact: values.wechat,
|
|||
|
|
bio: values.info,
|
|||
|
|
cover: cover,
|
|||
|
|
shorts: shorts,
|
|||
|
|
album: album,
|
|||
|
|
age: parseInt(values.age, 10),
|
|||
|
|
height: parseInt(values.height, 10),
|
|||
|
|
weight: parseInt(values.weight, 10),
|
|||
|
|
constellation: values.constellation,
|
|||
|
|
city: values.location,
|
|||
|
|
tag: tags,
|
|||
|
|
wechat_lock_type: parseInt(values.wechat_add_way, 10),
|
|||
|
|
fans: parseInt(values.fans, 10),
|
|||
|
|
wechat_coin_price: parseInt(values.price, 10) * 10,
|
|||
|
|
auto_response_message: values.auto_response_message,
|
|||
|
|
...base,
|
|||
|
|
}),
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
const streamerData = await response.json();
|
|||
|
|
if (streamerData.ret === -1) {
|
|||
|
|
Toast.show({
|
|||
|
|
type: "error",
|
|||
|
|
text1: streamerData.msg,
|
|||
|
|
topOffset: 60,
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
//提交成功后弹窗提示并返回上级
|
|||
|
|
Toast.show({
|
|||
|
|
type: "success",
|
|||
|
|
text1: "更改成功",
|
|||
|
|
topOffset: 60,
|
|||
|
|
});
|
|||
|
|
navigation.goBack();
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error(error);
|
|||
|
|
} finally {
|
|||
|
|
setIsSubmitting(false);
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{({ handleChange, handleSubmit, values, setFieldValue }) => (
|
|||
|
|
<>
|
|||
|
|
<View style={tailwind("my-2 bg-[#FFFFFF1A] p-2 rounded-2xl")}>
|
|||
|
|
<View style={tailwind("flex-row justify-between items-center")}>
|
|||
|
|
<Text style={tailwind("text-base text-white font-medium")}>
|
|||
|
|
<Text style={tailwind("text-[#F53030]")}>*</Text>
|
|||
|
|
头像(需在“我的”修改)
|
|||
|
|
</Text>
|
|||
|
|
<Image
|
|||
|
|
style={tailwind("w-12 h-12 rounded-full")}
|
|||
|
|
source={data?.avatar?.images[0]?.urls[0]}
|
|||
|
|
placeholder={blurhash}
|
|||
|
|
contentFit="cover"
|
|||
|
|
transition={1000}
|
|||
|
|
cachePolicy="disk"
|
|||
|
|
/>
|
|||
|
|
</View>
|
|||
|
|
<Divider style={tailwind("my-2")} />
|
|||
|
|
<View style={tailwind("flex-row justify-between items-center")}>
|
|||
|
|
<Text style={tailwind("text-base text-white font-medium")}>
|
|||
|
|
<Text style={tailwind("text-[#F53030]")}>*</Text>
|
|||
|
|
昵称(需在“我的”修改)
|
|||
|
|
</Text>
|
|||
|
|
<Text style={tailwind("text-base text-white font-medium")}>
|
|||
|
|
{data?.name}
|
|||
|
|
</Text>
|
|||
|
|
</View>
|
|||
|
|
<Divider style={tailwind("my-2")} />
|
|||
|
|
<View style={tailwind("flex-row justify-between items-center")}>
|
|||
|
|
<Text style={tailwind("text-base text-white font-medium")}>
|
|||
|
|
<Text style={tailwind("text-[#F53030]")}>*</Text>
|
|||
|
|
全网粉丝量（万）
|
|||
|
|
</Text>
|
|||
|
|
<View style={tailwind("flex-row items-center")}>
|
|||
|
|
<TextInput
|
|||
|
|
placeholder="请输入真实有效数据"
|
|||
|
|
placeholderTextColor="#FFFFFF80"
|
|||
|
|
keyboardType="numeric"
|
|||
|
|
style={tailwind("text-white")}
|
|||
|
|
underlineColorAndroid="transparent"
|
|||
|
|
textAlign="right"
|
|||
|
|
onChangeText={handleChange("fans")}
|
|||
|
|
value={values.fans}
|
|||
|
|
/>
|
|||
|
|
<Text
|
|||
|
|
style={tailwind("text-base text-white font-medium ml-1")}
|
|||
|
|
>
|
|||
|
|
万
|
|||
|
|
</Text>
|
|||
|
|
</View>
|
|||
|
|
</View>
|
|||
|
|
<Divider style={tailwind("my-2")} />
|
|||
|
|
<View style={tailwind("flex-row justify-between items-center")}>
|
|||
|
|
<Text style={tailwind("text-base text-white font-medium")}>
|
|||
|
|
<Text style={tailwind("text-[#F53030]")}>*</Text>
|
|||
|
|
性别
|
|||
|
|
</Text>
|
|||
|
|
<View style={tailwind("w-1/2")}>
|
|||
|
|
<Picker
|
|||
|
|
items={[
|
|||
|
|
{
|
|||
|
|
label: "女",
|
|||
|
|
value: "1",
|
|||
|
|
},
|
|||
|
|
{ label: "男", value: "0" },
|
|||
|
|
]}
|
|||
|
|
value={values.gender}
|
|||
|
|
onChange={handleChange("gender")}
|
|||
|
|
/>
|
|||
|
|
</View>
|
|||
|
|
</View>
|
|||
|
|
<Divider style={tailwind("my-2")} />
|
|||
|
|
<View style={tailwind("flex-col justify-between")}>
|
|||
|
|
<Text style={tailwind("text-base text-white font-medium")}>
|
|||
|
|
<Text style={tailwind("text-[#F53030]")}>*</Text>
|
|||
|
|
添加标签
|
|||
|
|
</Text>
|
|||
|
|
<View style={tailwind("flex-row flex-wrap")}>
|
|||
|
|
{Object.entries(data?.tag).map(([tag, label]) => {
|
|||
|
|
return <TagItem key={tag} tag={label} label={label} />;
|
|||
|
|
})}
|
|||
|
|
</View>
|
|||
|
|
</View>
|
|||
|
|
<Divider style={tailwind("my-2")} />
|
|||
|
|
<View style={tailwind("flex-col justify-between")}>
|
|||
|
|
<Text style={tailwind("text-base text-white font-medium")}>
|
|||
|
|
<Text style={tailwind("text-[#F53030]")}>*</Text>
|
|||
|
|
添加微信方式
|
|||
|
|
</Text>
|
|||
|
|
<View
|
|||
|
|
style={tailwind("flex-row items-center justify-around")}
|
|||
|
|
>
|
|||
|
|
<TouchableOpacity
|
|||
|
|
activeOpacity={1}
|
|||
|
|
onPress={() => {
|
|||
|
|
setWechatInputShow(1);
|
|||
|
|
setFieldValue("wechat_add_way", "1");
|
|||
|
|
}}
|
|||
|
|
style={tailwind("flex-row items-center")}
|
|||
|
|
>
|
|||
|
|
<CheckBox
|
|||
|
|
checked={values.wechat_add_way === "1"}
|
|||
|
|
onPress={() => {
|
|||
|
|
setWechatInputShow(1);
|
|||
|
|
setFieldValue("wechat_add_way", "1");
|
|||
|
|
}}
|
|||
|
|
iconType="material-community"
|
|||
|
|
checkedIcon="checkbox-marked"
|
|||
|
|
uncheckedIcon="checkbox-blank-outline"
|
|||
|
|
checkedColor="#FF669E"
|
|||
|
|
containerStyle={tailwind("p-0 m-0 bg-transparent")}
|
|||
|
|
size={18}
|
|||
|
|
/>
|
|||
|
|
<Text
|
|||
|
|
style={tailwind("text-base text-white font-medium")}
|
|||
|
|
>
|
|||
|
|
主动添加对方
|
|||
|
|
</Text>
|
|||
|
|
</TouchableOpacity>
|
|||
|
|
<TouchableOpacity
|
|||
|
|
activeOpacity={1}
|
|||
|
|
onPress={() => {
|
|||
|
|
setWechatInputShow(0);
|
|||
|
|
setFieldValue("wechat_add_way", "0");
|
|||
|
|
}}
|
|||
|
|
style={tailwind("flex-row items-center")}
|
|||
|
|
>
|
|||
|
|
<CheckBox
|
|||
|
|
checked={values.wechat_add_way === "0"}
|
|||
|
|
onPress={() => {
|
|||
|
|
setWechatInputShow(1);
|
|||
|
|
setFieldValue("wechat_add_way", "0");
|
|||
|
|
}}
|
|||
|
|
iconType="material-community"
|
|||
|
|
checkedIcon="checkbox-marked"
|
|||
|
|
uncheckedIcon="checkbox-blank-outline"
|
|||
|
|
checkedColor="#FF669E"
|
|||
|
|
containerStyle={tailwind("p-0 m-0 bg-transparent")}
|
|||
|
|
size={18}
|
|||
|
|
/>
|
|||
|
|
<Text
|
|||
|
|
style={tailwind("text-base text-white font-medium")}
|
|||
|
|
>
|
|||
|
|
向对方展示微信
|
|||
|
|
</Text>
|
|||
|
|
</TouchableOpacity>
|
|||
|
|
</View>
|
|||
|
|
</View>
|
|||
|
|
<Divider style={tailwind("my-2")} />
|
|||
|
|
{wechatInputShow === 0 && (
|
|||
|
|
<>
|
|||
|
|
<View
|
|||
|
|
style={tailwind("flex-row justify-between items-center")}
|
|||
|
|
>
|
|||
|
|
<Text
|
|||
|
|
style={tailwind("text-base text-white font-medium")}
|
|||
|
|
>
|
|||
|
|
<Text style={tailwind("text-[#F53030]")}>*</Text>
|
|||
|
|
微信号
|
|||
|
|
</Text>
|
|||
|
|
<View style={tailwind("flex-row items-center")}>
|
|||
|
|
<TextInput
|
|||
|
|
placeholder="对方付费购买后展示"
|
|||
|
|
placeholderTextColor="#FFFFFF80"
|
|||
|
|
style={tailwind("text-white")}
|
|||
|
|
underlineColorAndroid="transparent"
|
|||
|
|
textAlign="right"
|
|||
|
|
maxLength={20}
|
|||
|
|
onChangeText={handleChange("wechat")}
|
|||
|
|
value={values.wechat}
|
|||
|
|
/>
|
|||
|
|
</View>
|
|||
|
|
</View>
|
|||
|
|
<Divider style={tailwind("my-2")} />
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
<View style={tailwind("flex-row justify-between items-center")}>
|
|||
|
|
<Text style={tailwind("text-base text-white font-medium")}>
|
|||
|
|
<Text style={tailwind("text-[#F53030]")}>*</Text>
|
|||
|
|
加微信价格（元）
|
|||
|
|
</Text>
|
|||
|
|
<View style={tailwind("flex-row items-center")}>
|
|||
|
|
<TextInput
|
|||
|
|
placeholder="请输入心仪价格"
|
|||
|
|
placeholderTextColor="#FFFFFF80"
|
|||
|
|
keyboardType="numeric"
|
|||
|
|
style={tailwind("text-white")}
|
|||
|
|
underlineColorAndroid="transparent"
|
|||
|
|
textAlign="right"
|
|||
|
|
onChangeText={handleChange("price")}
|
|||
|
|
value={values.price}
|
|||
|
|
/>
|
|||
|
|
<Text
|
|||
|
|
style={tailwind("text-base text-white font-medium ml-1")}
|
|||
|
|
>
|
|||
|
|
元
|
|||
|
|
</Text>
|
|||
|
|
</View>
|
|||
|
|
</View>
|
|||
|
|
<Divider style={tailwind("my-2")} />
|
|||
|
|
<View style={tailwind("flex-col")}>
|
|||
|
|
<Text style={tailwind("text-base text-white font-medium")}>
|
|||
|
|
<Text style={tailwind("text-[#F53030]")}>*</Text>
|
|||
|
|
个性签名
|
|||
|
|
</Text>
|
|||
|
|
<View style={tailwind("flex-row items-center")}>
|
|||
|
|
<TextInput
|
|||
|
|
multiline
|
|||
|
|
scrollEnabled={false}
|
|||
|
|
placeholder="点此输入，文案将在“主页”展示"
|
|||
|
|
placeholderTextColor="#FFFFFF80"
|
|||
|
|
style={tailwind("text-white")}
|
|||
|
|
underlineColorAndroid="transparent"
|
|||
|
|
textAlign="top"
|
|||
|
|
onChangeText={handleChange("info")}
|
|||
|
|
value={values.info}
|
|||
|
|
/>
|
|||
|
|
</View>
|
|||
|
|
</View>
|
|||
|
|
<Divider style={tailwind("my-2")} />
|
|||
|
|
<View style={tailwind("flex-row justify-between items-center")}>
|
|||
|
|
<Text style={tailwind("text-base text-white font-medium")}>
|
|||
|
|
<Text style={tailwind("text-[#F53030]")}>*</Text>
|
|||
|
|
封面图
|
|||
|
|
</Text>
|
|||
|
|
<TouchableOpacity
|
|||
|
|
onPress={() => setDisplayImagePickerModalVisible(true)}
|
|||
|
|
style={tailwind("flex-row items-center")}
|
|||
|
|
>
|
|||
|
|
{displayImage.length !== 0 ? (
|
|||
|
|
<Image
|
|||
|
|
style={tailwind("w-12 h-12 rounded-lg")}
|
|||
|
|
source={displayImage[0].uri}
|
|||
|
|
placeholder={blurhash}
|
|||
|
|
contentFit="cover"
|
|||
|
|
transition={1000}
|
|||
|
|
cachePolicy="disk"
|
|||
|
|
/>
|
|||
|
|
) : (
|
|||
|
|
<Text
|
|||
|
|
style={tailwind("text-xs text-[#FFFFFF80] font-medium")}
|
|||
|
|
>
|
|||
|
|
将在“发现”和“主页”展示
|
|||
|
|
</Text>
|
|||
|
|
)}
|
|||
|
|
<Icon
|
|||
|
|
name="chevron-forward-outline"
|
|||
|
|
type="ionicon"
|
|||
|
|
color="white"
|
|||
|
|
/>
|
|||
|
|
</TouchableOpacity>
|
|||
|
|
<MediaPickerModal
|
|||
|
|
visible={displayImagePickerModalVisible}
|
|||
|
|
setVisible={setDisplayImagePickerModalVisible}
|
|||
|
|
type="image"
|
|||
|
|
maxCount={1}
|
|||
|
|
setAssets={setDisplayImage}
|
|||
|
|
/>
|
|||
|
|
</View>
|
|||
|
|
<Divider style={tailwind("my-2")} />
|
|||
|
|
<View style={tailwind("flex-row justify-between items-center")}>
|
|||
|
|
<Text style={tailwind("text-base text-white font-medium")}>
|
|||
|
|
<Text style={tailwind("text-[#F53030]")}>*</Text>
|
|||
|
|
展示视频
|
|||
|
|
</Text>
|
|||
|
|
<TouchableOpacity
|
|||
|
|
onPress={() => setDisplayVideoPickerModalVisible(true)}
|
|||
|
|
style={tailwind("flex-row items-center")}
|
|||
|
|
>
|
|||
|
|
{displayVideo.length !== 0 ? (
|
|||
|
|
<Image
|
|||
|
|
style={tailwind("w-12 h-16 rounded-lg")}
|
|||
|
|
source={displayVideo[0].old_uri}
|
|||
|
|
placeholder={blurhash}
|
|||
|
|
contentFit="cover"
|
|||
|
|
transition={1000}
|
|||
|
|
cachePolicy="disk"
|
|||
|
|
/>
|
|||
|
|
) : (
|
|||
|
|
<Text
|
|||
|
|
style={tailwind("text-xs text-[#FFFFFF80] font-medium")}
|
|||
|
|
>
|
|||
|
|
将在“发现”和“主页”展示
|
|||
|
|
</Text>
|
|||
|
|
)}
|
|||
|
|
<Icon
|
|||
|
|
name="chevron-forward-outline"
|
|||
|
|
type="ionicon"
|
|||
|
|
color="white"
|
|||
|
|
/>
|
|||
|
|
</TouchableOpacity>
|
|||
|
|
<MediaPickerModal
|
|||
|
|
visible={displayVideoPickerModalVisible}
|
|||
|
|
setVisible={setDisplayVideoPickerModalVisible}
|
|||
|
|
type="video"
|
|||
|
|
maxCount={1}
|
|||
|
|
setAssets={setDisplayVideo}
|
|||
|
|
/>
|
|||
|
|
</View>
|
|||
|
|
<Divider style={tailwind("my-2")} />
|
|||
|
|
<View>
|
|||
|
|
<View
|
|||
|
|
style={tailwind("flex-row justify-between items-center")}
|
|||
|
|
>
|
|||
|
|
<Text style={tailwind("text-base text-white font-medium")}>
|
|||
|
|
<Text style={tailwind("text-[#F53030]")}>*</Text>
|
|||
|
|
相册
|
|||
|
|
</Text>
|
|||
|
|
<Text
|
|||
|
|
style={tailwind("text-xs text-[#FFFFFF80] font-medium")}
|
|||
|
|
>
|
|||
|
|
将在“主页”展示（最多9张）
|
|||
|
|
</Text>
|
|||
|
|
</View>
|
|||
|
|
<View style={tailwind("flex-row flex-wrap")}>
|
|||
|
|
{oldPhotos.map((item, index) => (
|
|||
|
|
<DisplayOldPhotos
|
|||
|
|
key={index}
|
|||
|
|
url={item?.urls[0]}
|
|||
|
|
index={index}
|
|||
|
|
/>
|
|||
|
|
))}
|
|||
|
|
</View>
|
|||
|
|
<MediaPicker
|
|||
|
|
maxCount={9}
|
|||
|
|
type="image"
|
|||
|
|
setAssets={setPhotos}
|
|||
|
|
/>
|
|||
|
|
</View>
|
|||
|
|
<Divider style={tailwind("my-2")} />
|
|||
|
|
<View style={tailwind("flex-row justify-between items-center")}>
|
|||
|
|
<Text style={tailwind("text-base text-white font-medium")}>
|
|||
|
|
<Text style={tailwind("text-[#F53030]")}>*</Text>
|
|||
|
|
年龄（岁）
|
|||
|
|
</Text>
|
|||
|
|
<View style={tailwind("w-1/2")}>
|
|||
|
|
<Picker
|
|||
|
|
items={ages}
|
|||
|
|
value={values.age}
|
|||
|
|
onChange={handleChange("age")}
|
|||
|
|
/>
|
|||
|
|
</View>
|
|||
|
|
</View>
|
|||
|
|
<Divider style={tailwind("my-2")} />
|
|||
|
|
<View style={tailwind("flex-row justify-between items-center")}>
|
|||
|
|
<Text style={tailwind("text-base text-white font-medium")}>
|
|||
|
|
<Text style={tailwind("text-[#F53030]")}>*</Text>
|
|||
|
|
身高（cm）
|
|||
|
|
</Text>
|
|||
|
|
<View style={tailwind("w-1/2")}>
|
|||
|
|
<Picker
|
|||
|
|
items={heights}
|
|||
|
|
value={values.height}
|
|||
|
|
onChange={handleChange("height")}
|
|||
|
|
/>
|
|||
|
|
</View>
|
|||
|
|
</View>
|
|||
|
|
<Divider style={tailwind("my-2")} />
|
|||
|
|
<View style={tailwind("flex-row justify-between items-center")}>
|
|||
|
|
<Text style={tailwind("text-base text-white font-medium")}>
|
|||
|
|
<Text style={tailwind("text-[#F53030]")}>*</Text>
|
|||
|
|
体重（kg）
|
|||
|
|
</Text>
|
|||
|
|
<View style={tailwind("w-1/2")}>
|
|||
|
|
<Picker
|
|||
|
|
items={weights}
|
|||
|
|
value={values.weight}
|
|||
|
|
onChange={handleChange("weight")}
|
|||
|
|
/>
|
|||
|
|
</View>
|
|||
|
|
</View>
|
|||
|
|
<Divider style={tailwind("my-2")} />
|
|||
|
|
<View style={tailwind("flex-row justify-between items-center")}>
|
|||
|
|
<Text style={tailwind("text-base text-white font-medium")}>
|
|||
|
|
<Text style={tailwind("text-[#F53030]")}>*</Text>星座
|
|||
|
|
</Text>
|
|||
|
|
<View style={tailwind("w-1/2")}>
|
|||
|
|
<Picker
|
|||
|
|
items={constellations}
|
|||
|
|
value={values.constellation}
|
|||
|
|
onChange={handleChange("constellation")}
|
|||
|
|
/>
|
|||
|
|
</View>
|
|||
|
|
</View>
|
|||
|
|
<Divider style={tailwind("my-2")} />
|
|||
|
|
<View style={tailwind("flex-row justify-between items-center")}>
|
|||
|
|
<Text style={tailwind("text-base text-white font-medium")}>
|
|||
|
|
<Text style={tailwind("text-[#F53030]")}>*</Text>所在地
|
|||
|
|
</Text>
|
|||
|
|
<View style={tailwind("w-1/2")}>
|
|||
|
|
<Picker
|
|||
|
|
items={provinces}
|
|||
|
|
value={values.location}
|
|||
|
|
onChange={handleChange("location")}
|
|||
|
|
/>
|
|||
|
|
</View>
|
|||
|
|
</View>
|
|||
|
|
<Divider style={tailwind("my-2")} />
|
|||
|
|
<View style={tailwind("flex-col")}>
|
|||
|
|
<Text style={tailwind("text-base text-white font-medium")}>
|
|||
|
|
<Text style={tailwind("text-[#F53030]")}>*</Text>
|
|||
|
|
私信自动回复文案
|
|||
|
|
</Text>
|
|||
|
|
<View style={tailwind("flex-row items-center")}>
|
|||
|
|
<TextInput
|
|||
|
|
multiline
|
|||
|
|
scrollEnabled={false}
|
|||
|
|
placeholder="点此输入，文案将自动发送给点开私信的用户"
|
|||
|
|
placeholderTextColor="#FFFFFF80"
|
|||
|
|
style={tailwind("text-white")}
|
|||
|
|
underlineColorAndroid="transparent"
|
|||
|
|
textAlign="top"
|
|||
|
|
onChangeText={handleChange("auto_response_message")}
|
|||
|
|
value={values.auto_response_message}
|
|||
|
|
/>
|
|||
|
|
</View>
|
|||
|
|
</View>
|
|||
|
|
<Divider style={tailwind("my-2")} />
|
|||
|
|
</View>
|
|||
|
|
<Button
|
|||
|
|
color="#FF669E"
|
|||
|
|
radius="999"
|
|||
|
|
size="md"
|
|||
|
|
disabled={isSubmitting}
|
|||
|
|
disabledStyle={tailwind("bg-[#FFFFFF80]")}
|
|||
|
|
disabledTitleStyle={tailwind("text-white")}
|
|||
|
|
onPress={(e) => {
|
|||
|
|
handleSubmit(e);
|
|||
|
|
}}
|
|||
|
|
titleStyle={tailwind("text-base")}
|
|||
|
|
containerStyle={{
|
|||
|
|
marginBottom: insets.bottom + 60,
|
|||
|
|
...tailwind("mt-4"),
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{isSubmitting && (
|
|||
|
|
<ActivityIndicator size="small" color="white" />
|
|||
|
|
)}
|
|||
|
|
{isSubmitting ? "正在提交..." : "确认修改"}
|
|||
|
|
</Button>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</Formik>
|
|||
|
|
</ScrollView>
|
|||
|
|
</KeyboardAvoidingView>
|
|||
|
|
);
|
|||
|
|
}
|