tiefen_space_app/screeens/CreateImagePost/index.jsx

import {
  View,
  Text,
  TextInput,
  ScrollView,
  Modal,
  TouchableOpacity,
  KeyboardAvoidingView,
  ActivityIndicator,
} from "react-native";
import React, { useState, useEffect } from "react";
import { useTailwind } from "tailwind-rn";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import MediaPicker from "../../components/MediaPicker";
import { Button, Switch } from "@rneui/themed";
import Toast from "react-native-toast-message";
import { multiUpload } from "../../utils/upload";
import baseRequest from "../../utils/baseRequest";
import { generateSignature } from "../../utils/crypto";
import MyModal from "../../components/MyModal";

//todo:使用更新后的MyModal组件，禁止关闭弹窗
export default function CreateImagePost({ navigation, route }) {
  const tailwind = useTailwind();
  const insets = useSafeAreaInsets();

  //文案
  const [content, setContent] = useState();

  //图片
  const [imageAssets, setImageAssets] = useState([]);

  //付费设置弹窗是否展示
  const [isModalVisible, setIsModalVisible] = useState(false);

  //价格
  const [price, setPrice] = useState();

  //可预览文案行数
  const [textVisibleRange, setTextVisibleRange] = useState("999");

  //可预览图片张数
  const [imageVisibleRange, setImageVisibleRange] = useState("1");

  //是否铁粉免费查看
  const [isFreeForIronfan, setIsFreeForIronfan] = useState(false);

  //正在提交
  const [isSubmitting, setIsSubmitting] = useState(false);

  //保存付费设置
  const handleSavePaymentSetting = () => {
    if (parseFloat(price) < 0) {
      Toast.show({
        type: "error",
        text1: "请输入正确区间的价格",
        topOffset: 60,
      });
      return;
    }
    if (parseFloat(price) > 0 && parseInt(parseFloat(price) * 100, 10) < 100) {
      Toast.show({
        type: "error",
        text1: "请输入正确区间的价格",
        topOffset: 60,
      });
      return;
    }
    if (parseInt(parseFloat(price) * 100, 10) > 300000) {
      Toast.show({
        type: "error",
        text1: "请输入正确区间的价格",
        topOffset: 60,
      });
      return;
    }
    if (parseInt(textVisibleRange, 10) < 1) {
      Toast.show({
        type: "error",
        text1: "请输入正确区间的可预览文案行数",
        topOffset: 60,
      });
      return;
    }
    if (
      parseInt(imageVisibleRange, 10) < 0 ||
      parseInt(imageVisibleRange, 10) > 3
    ) {
      Toast.show({
        type: "error",
        text1: "请输入正确区间的可预览图片张数",
        topOffset: 60,
      });
      return;
    }
    setIsModalVisible(false);
  };

  //发布内容
  const handleSubmit = async () => {
    if (!content) {
      Toast.show({
        type: "error",
        text1: "动态内容不能为空",
        topOffset: 60,
      });
      return;
    }
    if (imageAssets.length === 0) {
      Toast.show({
        type: "error",
        text1: "请上传至少一张图片",
        topOffset: 60,
      });
      return;
    }
    if (
      parseFloat(price) &&
      imageAssets.length <= parseInt(imageVisibleRange, 10)
    ) {
      Toast.show({
        type: "error",
        text1: "预览图片数不得大于等于上传图片数",
        topOffset: 60,
      });
      return;
    }
    //提交数据
    if (isSubmitting) return;
    setIsSubmitting(true);
    const media = await multiUpload(imageAssets);
    const apiUrl = process.env.EXPO_PUBLIC_API_URL;
    try {
      const base = await baseRequest();
      const body = {
        ...base,
        c_type: parseFloat(price) ? 1 : 0,
        is_ironfan_visible: isFreeForIronfan ? 1 : 0,
        m_type: 1,
        text: content,
        media_component: media,
        text_visible_range: textVisibleRange
          ? parseInt(textVisibleRange, 10)
          : 999,
        media_visible_range: imageVisibleRange
          ? parseInt(imageVisibleRange, 10)
          : 1,
        price: parseFloat(price) ? parseInt(parseFloat(price) * 100, 10) : null,
      };
      const signature = await generateSignature(body);
      const response = await fetch(
        `${apiUrl}/api/zone_moment/create?signature=${signature}`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(body),
        }
      );
      const data = await response.json();
      if (data.ret === -1) {
        Toast.show({
          type: "error",
          text1: data.msg,
          topOffset: 60,
        });
        return;
      }
      //提交成功后显示Toast并返回上一页
      Toast.show({
        type: "success",
        text1: "发布成功",
        topOffset: 60,
      });
      navigation.goBack();
    } catch (error) {
      console.error(error);
    } finally {
      setIsSubmitting(false);
    }
  };

  //查询已发布空间内免费帖数量、付费帖数量、发布付费帖剩余额度、审核未通过帖数量
  const [postCount, setPostCount] = useState();
  const [isBlockModalVisible, setIsBlockModalVisible] = useState(false);
  useEffect(() => {
    const getPostCountData = async () => {
      const apiUrl = process.env.EXPO_PUBLIC_API_URL;
      try {
        const base = await baseRequest();
        const body = {
          ...base,
        };
        const signature = await generateSignature(body);
        const _response = await fetch(
          `${apiUrl}/api/zone_moment/list_statistics_by_creater_mid?signature=${signature}`,
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify(body),
          }
        );
        const _data = await _response.json();
        if (_data.ret === -1) {
          Toast.show({
            type: "error",
            text1: _data.msg,
            topOffset: 60,
          });
          return;
        }
        setPostCount(_data.data);
        if (_data.data.rejected_count >= 5) setIsBlockModalVisible(true);
      } catch (error) {
        console.error(error);
      }
    };
    getPostCountData();
  }, []);

  //发布按钮
  useEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Text
          onPress={handleSubmit}
          style={tailwind("text-[#FF669E] text-base font-medium")}
        >
          {isSubmitting ? "" : "发布"}
          {isSubmitting && <ActivityIndicator size="small" color="white" />}
        </Text>
      ),
    });
  }, [navigation, handleSubmit, isSubmitting]);

  return (
    <ScrollView
      style={{
        paddingBottom: insets.bottom,
        paddingLeft: insets.left,
        paddingRight: insets.right,
        ...tailwind("flex-1"),
      }}
    >
      <MyModal
        visible={isBlockModalVisible}
        setVisible={setIsBlockModalVisible}
        title="当前无法发帖"
        content="您当前审核未通过动态过多，请修改后再试"
        cancel={() => {
          setIsBlockModalVisible(false);
        }}
        confirm={() => {
          setIsBlockModalVisible(false);
          setTimeout(
            () => navigation.replace("VisibleToOneselfSpacePosts"),
            500
          );
        }}
      />
      <View style={tailwind("p-4")}>
        <View style={tailwind("mb-4")}>
          <Text style={tailwind("text-sm font-medium text-[#27F5B7] mb-2")}>
            为了空间良性发展，请保持免费/付费比例为1/1
          </Text>
          <View
            style={tailwind(
              "flex flex-row flex-wrap justify-between p-4 rounded-2xl bg-[#FFFFFF1A]"
            )}
          >
            <Text style={tailwind("text-xs font-medium text-white basis-1/2")}>
              已发布免费动态：{postCount?.free_count}条
            </Text>
            <Text style={tailwind("text-xs font-medium text-white basis-1/2")}>
              已发布付费动态：{postCount?.paid_count}条
            </Text>
            <Text style={tailwind("text-xs font-medium text-white basis-1/2")}>
              <Text style={tailwind("text-[#27F5B7]")}>可发布付费动态：</Text>
              {postCount?.paid_limit}条
            </Text>
            <Text style={tailwind("text-xs font-medium text-white basis-1/2")}>
              <Text style={tailwind("text-[#F53030]")}>审核未通过动态：</Text>
              {postCount?.rejected_count}条
            </Text>
          </View>
        </View>
        <Text style={tailwind("text-base font-medium text-white")}>
          动态内容
        </Text>
        <TextInput
          placeholder="请遵守平台准则，严禁发布违规内容"
          placeholderTextColor="#FFFFFF80"
          underlineColorAndroid="transparent"
          multiline
          textAlignVertical="top"
          onChangeText={(value) => setContent(value)}
          value={content}
          style={tailwind(
            "h-32 bg-[#FFFFFF1A] text-white rounded-2xl mt-2 mb-4 p-2"
          )}
        />
        <MediaPicker maxCount={30} type="image" setAssets={setImageAssets} />
        <Button
          color="#FF669E"
          radius="999"
          size="md"
          onPress={() => setIsModalVisible(!isModalVisible)}
          titleStyle={tailwind("text-base")}
          containerStyle={tailwind("mt-4 w-28")}
        >
          付费设置
        </Button>
        <Modal
          visible={isModalVisible}
          transparent={true}
          statusBarTranslucent
          animationType="slide"
        >
          <TouchableOpacity
            activeOpacity={1}
            style={{
              paddingBottom: insets.bottom,
              paddingLeft: insets.left,
              paddingRight: insets.right,
              ...tailwind("flex flex-1 bg-[#00000080] px-4"),
            }}
            onPress={handleSavePaymentSetting}
          >
            <KeyboardAvoidingView style={tailwind("flex-1")} behavior="padding">
              <TouchableOpacity
                activeOpacity={1}
                style={{
                  gap: 8,
                  ...tailwind(
                    "flex flex-col mt-auto mb-2 bg-[#17171A] rounded-3xl"
                  ),
                }}
              >
                <View
                  style={{
                    gap: 8,
                    ...tailwind("flex flex-col px-6 pt-6 pb-2"),
                  }}
                >
                  <View style={tailwind("flex flex-row items-center")}>
                    <Text style={tailwind("text-white text-base font-medium")}>
                      价格：¥
                    </Text>
                    <TextInput
                      placeholder="¥1～3000"
                      placeholderTextColor="#FFFFFF80"
                      keyboardType="numeric"
                      underlineColorAndroid="transparent"
                      onChangeText={(value) => setPrice(value)}
                      value={price}
                      style={tailwind(
                        "flex-1 bg-[#FFFFFF1A] text-white rounded-2xl px-4 h-8 mx-2"
                      )}
                    />
                    <Text
                      onPress={() => setPrice("0")}
                      style={tailwind("text-[#FF669E] text-base font-medium")}
                    >
                      免费
                    </Text>
                  </View>
                  {parseFloat(price) > 0 && (
                    <>
                      <View style={tailwind("flex flex-row items-center")}>
                        <Text
                          style={tailwind(
                            "text-white text-base font-medium mr-2"
                          )}
                        >
                          可预览文案：
                        </Text>
                        <Text
                          style={tailwind("text-white text-base font-medium")}
                        >
                          前
                        </Text>
                        <TextInput
                          placeholder="1~10"
                          placeholderTextColor="#FFFFFF80"
                          keyboardType="numeric"
                          underlineColorAndroid="transparent"
                          onChangeText={(value) => setTextVisibleRange(value)}
                          value={textVisibleRange}
                          style={tailwind(
                            "bg-[#FFFFFF1A] text-white rounded-2xl px-4 mx-2 h-8"
                          )}
                        />
                        <Text
                          style={tailwind("text-white text-base font-medium")}
                        >
                          行
                        </Text>
                        <Text
                          onPress={() => setTextVisibleRange("999")}
                          style={tailwind(
                            "text-[#FF669E] text-base font-medium ml-auto"
                          )}
                        >
                          全部可见
                        </Text>
                      </View>
                      <View style={tailwind("flex flex-row items-center")}>
                        <Text
                          style={tailwind(
                            "text-white text-base font-medium mr-2"
                          )}
                        >
                          可预览图片：
                        </Text>
                        <Text
                          style={tailwind("text-white text-base font-medium")}
                        >
                          前
                        </Text>
                        <TextInput
                          placeholder="0~3"
                          placeholderTextColor="#FFFFFF80"
                          keyboardType="numeric"
                          underlineColorAndroid="transparent"
                          onChangeText={(value) => setImageVisibleRange(value)}
                          value={imageVisibleRange}
                          style={tailwind(
                            "bg-[#FFFFFF1A] text-white rounded-2xl px-4 mx-2 h-8"
                          )}
                        />
                        <Text
                          style={tailwind("text-white text-base font-medium")}
                        >
                          张
                        </Text>
                        <Text
                          onPress={() => setImageVisibleRange("0")}
                          style={tailwind(
                            "text-[#FF669E] text-base font-medium ml-auto"
                          )}
                        >
                          不可预览
                        </Text>
                      </View>
                      <View style={tailwind("flex flex-row items-center")}>
                        <Text
                          style={tailwind(
                            "text-white text-base font-medium mr-2"
                          )}
                        >
                          铁粉免费查看：
                        </Text>
                        <Switch
                          value={isFreeForIronfan}
                          onValueChange={(value) => setIsFreeForIronfan(value)}
                          thumbColor="#ffffff"
                          trackColor={{ true: "#FF669E", false: "#FFFFFF1A" }}
                        />
                      </View>
                    </>
                  )}
                </View>
                <TouchableOpacity
                  onPress={handleSavePaymentSetting}
                  style={{
                    height: 52,
                    ...tailwind(
                      "flex justify-center items-center border-t border-[#FFFFFF14]"
                    ),
                  }}
                >
                  <Text style={tailwind("text-white text-base font-medium")}>
                    保存
                  </Text>
                </TouchableOpacity>
              </TouchableOpacity>
            </KeyboardAvoidingView>
          </TouchableOpacity>
          <Toast />
        </Modal>
      </View>
    </ScrollView>
  );
}