tiefen_space_app/screeens/Posts/FeedPosts/index.jsx

import {
  View,
  RefreshControl,
  ActivityIndicator,
  Image as NativeImage,
  Text,
  TouchableOpacity,
  FlatList,
} from "react-native";
import React, { useState, useEffect } from "react";
import Empty from "../../../components/Empty";
import { useTailwind } from "tailwind-rn";
import baseRequest from "../../../utils/baseRequest";
import Toast from "react-native-toast-message";
import { generateSignature } from "../../../utils/crypto";
import Post from "../../../components/Post";
import { useNavigation } from "@react-navigation/native";
import { get } from "../../../utils/storeInfo";

export default function FeedPosts({ blur }) {
  const navigation = useNavigation();

  //获取会员价格
  const [vipPrice, setVipPrice] = useState();
  const getVipPrice = async () => {
    try {
      const apiUrl = process.env.EXPO_PUBLIC_API_URL;
      const base = await baseRequest();
      const signature = await generateSignature({
        ...base,
      });
      const _response = await fetch(
        `${apiUrl}/api/vas/get_membership_product_list?signature=${signature}`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            ...base,
          }),
        }
      );
      const _data = await _response.json();
      if (_data.ret === -1) {
        Toast.show({
          type: "error",
          text1: _data.msg,
          topOffset: 60,
        });
        return;
      }
      setVipPrice(_data.data.product.real_price / 100);
    } catch (error) {
      console.error(error);
    }
  };

  //获取置顶动态数据
  const getTopPostsData = async () => {
    const account = await get("account");
    const role = account.role;
    const isVip = account.is_a_member;
    if (role !== 0 || isVip === 1) {
      return [];
    }
    try {
      const apiUrl = process.env.EXPO_PUBLIC_API_URL;
      const base = await baseRequest();
      //查询动态id
      const signature = await generateSignature({
        config_key: "free_moment_ids",
        ...base,
      });
      const _response = await fetch(
        `${apiUrl}/api/app_config/list_by_key?signature=${signature}`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            config_key: "free_moment_ids",
            ...base,
          }),
        }
      );
      const _data = await _response.json();
      if (_data.ret === -1) {
        Toast.show({
          type: "error",
          text1: _data.msg,
          topOffset: 60,
        });
        return [];
      }

      //用动态id查动态数据
      if (!_data.data.app_config.config_value) return [];
      const intIds = _data.data.app_config.config_value?.map((item) =>
        parseInt(item, 10)
      );
      const signature2 = await generateSignature({
        ids: intIds,
        ...base,
      });
      const _response2 = await fetch(
        `${apiUrl}/api/moment/list_by_ids?signature=${signature2}`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            ids: intIds,
            ...base,
          }),
        }
      );
      const _data2 = await _response2.json();
      if (_data2.ret === -1) {
        Toast.show({
          type: "error",
          text1: _data2.msg,
          topOffset: 60,
        });
        return [];
      }
      const topPostsData = _data2.data.list.map((item) => {
        return { ...item, top: true };
      });
      return topPostsData;
    } catch (error) {
      console.error(error);
      return [];
    }
  };

  //获取新数据
  const [data, setData] = useState([]);
  const [isActivityIndicatorShow, setIsActivityIndicatorShow] = useState(true);
  const [isFetching, setIsFetching] = useState(false);
  const getData = async (type = 0) => {
    //type 0-上滑  1-下拉  2-初始化
    if (isFetching) return;
    const apiUrl = process.env.EXPO_PUBLIC_API_URL;
    setIsFetching(true);
    try {
      const base = await baseRequest();
      const signature = await generateSignature({
        op_type: type,
        ...base,
      });
      const _response = await fetch(
        `${apiUrl}/api/moment/recomm_list?signature=${signature}`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            op_type: type,
            ...base,
          }),
        }
      );
      const _data = await _response.json();
      if (_data.ret === -1) {
        Toast.show({
          type: "error",
          text1: _data.msg,
          topOffset: 60,
        });
        return;
      }
      if (type === 1 || type === 2) {
        const topPosts = await getTopPostsData();
        setData((prev) => [...topPosts, ..._data.data.recomm_list]);
        setIsActivityIndicatorShow(true);
      } else {
        setData((prev) => [...prev, ..._data.data.recomm_list]);
        if (_data.data.recomm_list.length === 0)
          setIsActivityIndicatorShow(false);
      }
    } catch (error) {
      console.error(error);
    } finally {
      setIsFetching(false);
    }
  };

  //初始化加载
  useEffect(() => {
    getVipPrice();
    getData(2);
  }, [blur]);

  const tailwind = useTailwind();
  const renderItem = ({ item }) => <Post isBlur={blur} data={item} />;
  const [refreshing, setRefreshing] = useState(false);
  //下拉刷新
  const handleRefresh = async () => {
    setRefreshing(true);
    await getData(1);
    setRefreshing(false);
  };

  return (
    <View style={tailwind("flex-1")}>
      <FlatList
        data={data}
        extraData={blur}
        renderItem={renderItem}
        initialNumToRender={4}
        refreshControl={
          <RefreshControl
            colors={["#FF669E"]}
            tintColor="white"
            refreshing={refreshing}
            onRefresh={() => handleRefresh()}
          />
        }
        onEndReached={() => getData(0)}
        ListEmptyComponent={<Empty type="nodata" />}
        ListFooterComponent={
          <View>
            {isActivityIndicatorShow && data.length !== 0 && (
              <ActivityIndicator style={tailwind("my-4")} size="large" />
            )}
          </View>
        }
      />
      {blur && (
        <TouchableOpacity
          activeOpacity={1}
          onPress={() =>
            navigation.navigate("WebWithoutHeader", {
              uri: process.env.EXPO_PUBLIC_WEB_URL + "/vip",
            })
          }
          style={tailwind(
            "flex flex-row items-center justify-between h-12 bg-[#301024] px-4"
          )}
        >
          <View style={tailwind("flex flex-row items-center")}>
            <NativeImage
              source={require("../../../assets/icon/others/vipbig.png")}
            />
            <Text
              numberOfLines={1}
              ellipsizeMode="tail"
              style={tailwind("text-[#FF669E] text-base font-medium ml-1")}
            >
              即刻订阅全部精选内容
            </Text>
          </View>
          <View
            style={tailwind(
              "flex justify-center items-center h-9 bg-[#FF669E] rounded-full px-4"
            )}
          >
            <Text style={tailwind("text-white text-sm font-medium")}>
              ¥{vipPrice}/永久
            </Text>
          </View>
        </TouchableOpacity>
      )}
    </View>
  );
}