tiefen_space_app/screeens/StreamerVerification/JoinStreamer/index.jsx

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>
  );
}