tiefen_space_app/screeens/StreamerVerification/StreamerVerificationForm/index.jsx

909 lines
37 KiB
React
Raw Normal View History

2023-12-29 00:27:44 +08:00
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 { StackActions } from "@react-navigation/native";
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 StreamerVerificationForm({ 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([]);
const [wechatInputShow, setWechatInputShow] = useState(1);
//保存相册
const [photos, setPhotos] = useState([]);
//保存主播标签
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 [accountImages, setAccountImages] = useState([]);
//生成年龄、身高、体重、胸围、腰围、臀围、星座、省份数组
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: {} });
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({
...base,
});
try {
const response = await fetch(
`${apiUrl}/api/streamer_tag/list?signature=${signature}`,
{
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, tag: tagData.data });
} catch (error) {
console.error(error);
}
};
getData();
}, []);
//正在提交状态
const [isSubmitting, setIsSubmitting] = useState(false);
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={{
name: "",
fans: "",
platforms: "",
gender: "",
contact: "",
wechat_add_way: "1",
wechat: "",
price: "",
info: "",
age: "",
height: "",
weight: "",
constellation: "",
location: "",
inviters: "",
auto_response_message: "",
}}
onSubmit={async (values) => {
if (
!values.name ||
!values.fans ||
!values.gender ||
!values.platforms ||
!values.contact ||
accountImages.length === 0 ||
!values.wechat_add_way ||
!values.price ||
!values.info ||
displayImage.length === 0 ||
displayVideo.length === 0 ||
photos.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;
}
const price = parseInt(values.price, 10);
if (isNaN(price) || price < 1) {
Toast.show({
type: "error",
text1: "请输入有效的微信价格大于等于1的整数",
topOffset: 60,
2023-12-29 00:27:44 +08:00
});
return;
}
if (values.wechat_add_way === "0" && !values.wechat) {
Toast.show({
type: "error",
text1: "请填写微信号",
topOffset: 60,
});
return;
}
setIsSubmitting(true);
const account = await get("account");
const cover = await multiUpload(displayImage);
const shorts = await multiUpload(displayVideo);
const album = await multiUpload(photos);
const account_shot = await multiUpload(accountImages);
if (
!cover.image_ids.length ||
!shorts.video_ids.length ||
!album.image_ids.length ||
!account_shot.image_ids.length
) {
Toast.show({
type: "error",
text1: "上传失败,请联系客服进行上传",
topOffset: 60,
});
return;
}
//获取环境变量
const apiUrl = process.env.EXPO_PUBLIC_API_URL;
//上传表单
const base = await baseRequest();
const signature = await generateSignature({
mid: account?.mid,
avatar: { image_ids: [account?.avatar.images[0].id] },
name: values.name,
gender: parseInt(values.gender, 10),
contact_way: values.contact,
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),
account_shot: account_shot,
fans: parseInt(values.fans, 10),
main_platform: values.platforms,
wechat_coin_price: parseInt(values.price, 10) * 10,
inviters: values.inviters ? [parseInt(values.inviters, 10)] : [],
auto_response_message: values.auto_response_message,
...base,
});
try {
const response = await fetch(
`${apiUrl}/api/streamer_auth_approval/create?signature=${signature}`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
mid: account?.mid,
avatar: { image_ids: [account?.avatar.images[0].id] },
name: values.name,
gender: parseInt(values.gender, 10),
contact_way: values.contact,
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),
account_shot: account_shot,
fans: parseInt(values.fans, 10),
main_platform: values.platforms,
wechat_coin_price: parseInt(values.price, 10) * 10,
inviters: values.inviters
? [parseInt(values.inviters, 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;
}
//提交成功后跳转成功页
navigation.dispatch(
StackActions.replace("AfterSubmitStreamerVerification")
);
} catch (error) {
console.error(error);
} finally {
setIsSubmitting(false);
}
}}
>
{({ handleChange, handleSubmit, values, setFieldValue }) => (
<>
<Text style={tailwind("text-base text-white font-medium")}>
<Text style={tailwind("text-[#F53030]")}>*</Text>
审核资料仅用于审核不对外展示
</Text>
<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>
<View style={tailwind("flex-row items-center")}>
<TextInput
placeholder="请输入可搜索到您的昵称"
placeholderTextColor="#FFFFFF80"
style={tailwind("text-white")}
underlineColorAndroid="transparent"
textAlign="right"
onChangeText={handleChange("name")}
value={values.name}
/>
</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"
style={tailwind("text-white")}
underlineColorAndroid="transparent"
textAlign="right"
onChangeText={handleChange("platforms")}
value={values.platforms}
/>
</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="注明方式,如“电话:xxxxx”"
placeholderTextColor="#FFFFFF80"
style={tailwind("text-white")}
underlineColorAndroid="transparent"
textAlign="right"
onChangeText={handleChange("contact")}
value={values.contact}
/>
</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")}>
邀请人ID选填
</Text>
<View style={tailwind("flex-row items-center")}>
<TextInput
placeholder="请输入邀请人ID"
placeholderTextColor="#FFFFFF80"
keyboardType="numeric"
style={tailwind("text-white")}
underlineColorAndroid="transparent"
textAlign="right"
onChangeText={handleChange("inviters")}
value={values.inviters}
/>
</View>
</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>
<MediaPicker
maxCount={9}
type="image"
setAssets={setAccountImages}
/>
</View>
</View>
<Text style={tailwind("text-base text-white font-medium mt-2")}>
<Text style={tailwind("text-[#F53030]")}>*</Text>
展示资料将在个人主页大厅展示
</Text>
<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" },
]}
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(0);
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>
<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} 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} 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} 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}
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}
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>
);
}