239 lines
8.7 KiB
JavaScript
239 lines
8.7 KiB
JavaScript
import {
|
||
View,
|
||
Text,
|
||
ScrollView,
|
||
TextInput,
|
||
KeyboardAvoidingView,
|
||
Platform,
|
||
ActivityIndicator,
|
||
} from "react-native";
|
||
import React, { useState } from "react";
|
||
import { useTailwind } from "tailwind-rn";
|
||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||
import { Divider, Button } from "@rneui/themed";
|
||
import { Formik } from "formik";
|
||
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";
|
||
|
||
export default function JoinStreamer({ navigation, route }) {
|
||
const tailwind = useTailwind();
|
||
const insets = useSafeAreaInsets();
|
||
|
||
//保存账号截图
|
||
const [accountImages, setAccountImages] = useState([]);
|
||
|
||
//正在提交状态
|
||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||
|
||
//是否正在拖动图片，用于禁用ScrollView的滚动
|
||
const [dragging, setDragging] = 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 scrollEnabled={!dragging} style={tailwind("px-4 py-4")}>
|
||
<Formik
|
||
initialValues={{
|
||
name: "",
|
||
platforms: "",
|
||
contact: "",
|
||
}}
|
||
onSubmit={async (values) => {
|
||
if (
|
||
!values.name ||
|
||
!values.platforms ||
|
||
!values.contact ||
|
||
accountImages.length === 0
|
||
) {
|
||
Toast.show({
|
||
type: "error",
|
||
text1: "请完善信息后提交",
|
||
topOffset: 60,
|
||
});
|
||
return;
|
||
}
|
||
setIsSubmitting(true);
|
||
const account = await get("account");
|
||
const account_shot = await multiUpload(accountImages);
|
||
if (!account_shot.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 body = {
|
||
avatar: { image_ids: [account?.avatar.images[0].id] },
|
||
name: values.name,
|
||
contact_way: values.contact,
|
||
account_shot: account_shot,
|
||
main_platform: values.platforms,
|
||
...base,
|
||
};
|
||
const signature = await generateSignature(body);
|
||
try {
|
||
const response = await fetch(
|
||
`${apiUrl}/api/streamer_auth_approval/create_basic?signature=${signature}`,
|
||
{
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify(body),
|
||
}
|
||
);
|
||
const streamerData = await response.json();
|
||
if (streamerData.ret === -1) {
|
||
Toast.show({
|
||
type: "error",
|
||
text1: streamerData.msg,
|
||
topOffset: 60,
|
||
});
|
||
return;
|
||
}
|
||
//提交成功后跳转成功页
|
||
navigation.replace("AfterSubmitStreamerVerification");
|
||
} catch (error) {
|
||
console.error(error);
|
||
} finally {
|
||
setIsSubmitting(false);
|
||
}
|
||
}}
|
||
>
|
||
{({ handleChange, handleSubmit, values }) => (
|
||
<>
|
||
<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 flex-1 justify-end items-center")}
|
||
>
|
||
<TextInput
|
||
placeholder="请输入可搜索到您的昵称"
|
||
placeholderTextColor="#FFFFFF80"
|
||
style={tailwind("text-white flex-1")}
|
||
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 flex-1 justify-end items-center")}
|
||
>
|
||
<TextInput
|
||
placeholder="若有多个，按粉丝从多到少排序"
|
||
placeholderTextColor="#FFFFFF80"
|
||
style={tailwind("text-white flex-1")}
|
||
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 flex-1 justify-end items-center")}
|
||
>
|
||
<TextInput
|
||
placeholder="注明方式，如“电话:xxxxx”"
|
||
placeholderTextColor="#FFFFFF80"
|
||
style={tailwind("text-white flex-1")}
|
||
underlineColorAndroid="transparent"
|
||
textAlign="right"
|
||
onChangeText={handleChange("contact")}
|
||
value={values.contact}
|
||
/>
|
||
</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
|
||
setDragging={setDragging}
|
||
maxCount={9}
|
||
type="image"
|
||
setAssets={setAccountImages}
|
||
/>
|
||
</View>
|
||
</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>
|
||
);
|
||
}
|