改善会员成员功能

App.jsx

@@ -47,6 +47,8 @@ import SpaceIntroduce from "./screeens/SpaceIntroduce";
 import StreamerSpace from "./screeens/StreamerSpace";
 import CreateSpace from "./screeens/CreateSpace";
 import SpaceSetting from "./screeens/SpaceSetting";
+import NoticeDetail from "./screeens/Message/NoticeDetail";
+import SpaceSearch from "./screeens/SpaceSetting/SpaceSearch";
 import ShareSpace from "./screeens/ShareSpace";
 import EditSpacePost from "./screeens/EditSpacePost";
 import VisibleToOneselfSpacePosts from "./screeens/VisibleToOneselfSpacePosts";
@@ -521,6 +523,11 @@ const App = () => {
                         component={Search}
                         options={{ headerShown: false }}
                       />
+                      <RootStack.Screen
+                        name="SpaceSearch"
+                        component={SpaceSearch}
+                        options={{ headerShown: false }}
+                      />
                       <RootStack.Screen
                         name="CreatePost"
                         component={CreatePost}
@@ -680,6 +687,11 @@ const App = () => {
                         component={SpaceSetting}
                         options={{ headerShown: false }}
                       />
+                      <RootStack.Screen
+                        name="NoticeDetail"
+                        component={NoticeDetail}
+                        options={{ headerShown: false }}
+                      />
                       <RootStack.Screen
                         name="ShareSpace"
                         component={ShareSpace}

screeens/SpaceSetting/SpaceMember/AllSpaceMember/index.jsx

@@ -19,21 +19,24 @@ export default function AllSpaceMember({ zid }) {
   const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";
 
   const tailwind = useTailwind();
-
+  const [offset, setOffset] = useState(0);
+  const [more, setMore] = useState(1);
   const [data, setData] = useState([]);
   const getData = async () => {
-    if (zid === undefined) return;
+    if (zid === undefined || !more) return;
     const apiUrl = process.env.EXPO_PUBLIC_API_URL;
     try {
       const base = await baseRequest();
       const body = {
         zid: zid,
         member_type: 1,
+        offset: offset,
+        limit: 20,
         ...base,
       };
       const signature = await generateSignature(body);
       const _response = await fetch(
-        `${apiUrl}/api/zone/member_list?signature=${signature}`,
+        `${apiUrl}/api/zone/member_list_v2?signature=${signature}`,
         {
           method: "POST",
           headers: {
@@ -52,6 +55,8 @@ export default function AllSpaceMember({ zid }) {
         return;
       }
       setData(_data.data.list);
+      setOffset(_data.data.offset);
+      setMore(_data.data.more);
     } catch (error) {
       console.error(error);
     }
@@ -147,6 +152,7 @@ export default function AllSpaceMember({ zid }) {
             onRefresh={() => handleRefresh()}
           />
         }
+        ononEndReached={() => getData()}
         ListEmptyComponent={<Empty type="nodata" />}
         ListHeaderComponent={() => (
           <View

screeens/SpaceSetting/SpaceMember/IronfanSpaceMember/index.jsx

@@ -19,16 +19,19 @@ export default function IronfanSpaceMember({ zid }) {
   const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";
 
   const tailwind = useTailwind();
-
+  const [offset, setOffset] = useState(0);
+  const [more, setMore] = useState(1);
   const [data, setData] = useState([]);
   const getData = async () => {
-    if (zid === undefined) return;
+    if (zid === undefined || !more) return;
     const apiUrl = process.env.EXPO_PUBLIC_API_URL;
     try {
       const base = await baseRequest();
       const body = {
         zid: zid,
         member_type: 2,
+        offset: offset,
+        limit: 20,
         ...base,
       };
       const signature = await generateSignature(body);
@@ -52,6 +55,8 @@ export default function IronfanSpaceMember({ zid }) {
         return;
       }
       setData(_data.data.list);
+      setOffset(_data.data.offset);
+      setMore(_data.data.more);
     } catch (error) {
       console.error(error);
     }
@@ -147,6 +152,7 @@ export default function IronfanSpaceMember({ zid }) {
             onRefresh={() => handleRefresh()}
           />
         }
+        ononEndReached={() => getData()}
         ListEmptyComponent={<Empty type="nodata" />}
         ListHeaderComponent={() => (
           <View

screeens/SpaceSetting/SpaceMember/SuperFanSpaceMember/index.jsx

@@ -19,16 +19,19 @@ export default function SuperFanSpaceMember({ zid }) {
   const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";
 
   const tailwind = useTailwind();
-
+  const [offset, setOffset] = useState(0);
+  const [more, setMore] = useState(1);
   const [data, setData] = useState([]);
   const getData = async () => {
-    if (zid === undefined) return;
+    if (zid === undefined || !more) return;
     const apiUrl = process.env.EXPO_PUBLIC_API_URL;
     try {
       const base = await baseRequest();
       const body = {
         zid: zid,
         member_type: 3,
+        offset: offset,
+        limit: 20,
         ...base,
       };
       const signature = await generateSignature(body);
@@ -52,6 +55,8 @@ export default function SuperFanSpaceMember({ zid }) {
         return;
       }
       setData(_data.data.list);
+      setOffset(_data.data.offset);
+      setMore(_data.data.more);
     } catch (error) {
       console.error(error);
     }
@@ -147,6 +152,7 @@ export default function SuperFanSpaceMember({ zid }) {
             onRefresh={() => handleRefresh()}
           />
         }
+        ononEndReached={() => getData()}
         ListEmptyComponent={<Empty type="nodata" />}
         ListHeaderComponent={() => (
           <View

screeens/SpaceSetting/SpaceSearch/index.jsx

@@ -0,0 +1,245 @@
+import {
+  View,
+  Text,
+  FlatList,
+  ScrollView,
+  Image as NativeImage,
+} from "react-native";
+import React, { useState, useEffect, useRef } from "react";
+import { useTailwind } from "tailwind-rn";
+import Toast from "react-native-toast-message";
+import Empty from "../../../components/Empty";
+import { ListItem, Icon, SearchBar } from "@rneui/themed";
+import { Image } from "expo-image";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import baseRequest from "../../../utils/baseRequest";
+import { generateSignature } from "../../../utils/crypto";
+import formatTimestamp from "../../../utils/formatTimestamp";
+export default function SpaceSearch({ navigation }) {
+  const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";
+
+  const tailwind = useTailwind();
+  const insets = useSafeAreaInsets();
+  const [data, setData] = useState([]);
+  const [search, setSearch] = useState("");
+  const [isloading, setIsloading] = useState(false);
+  const searchRef = useRef(null);
+  const getData = async (searchValue) => {
+    if (searchValue.length != 6) {
+      setIsloading(false);
+      return;
+    }
+    const apiUrl = process.env.EXPO_PUBLIC_API_URL;
+    try {
+      const base = await baseRequest();
+      const body = {
+        member_user_id: Number(searchValue),
+        ...base,
+      };
+      console.log(body);
+      const signature = await generateSignature(body);
+      const _response = await fetch(
+        `${apiUrl}/api/zone/search_zone_member?signature=${signature}`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(body),
+        }
+      );
+
+      const _data = await _response.json();
+      if (_data.ret === -1) {
+        console.log("_data", _data);
+        setIsloading(false);
+        Toast.show({
+          type: "error",
+          text1: _data.msg,
+          topOffset: 60,
+        });
+        return;
+      }
+      setData(_data.data.list);
+      setIsloading(false);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+  //进入页面默认focus
+  useEffect(() => {
+    searchRef.current.focus();
+    getData();
+  }, []);
+  //搜索框文本变化时进行搜索
+  useEffect(() => {
+    if (!search) {
+      setData([]);
+      return;
+    }
+    let ignore = false;
+    getData(search);
+    return () => {
+      ignore = true;
+    };
+  }, [search]);
+  const updateSearch = (search) => {
+    setSearch(search);
+    if (!search) return;
+    setIsloading(true);
+  };
+  //单个成员组件
+  const RenderItem = ({ item }) => {
+    return (
+      <ListItem bottomDivider containerStyle={tailwind("p-0 bg-transparent")}>
+        <View style={tailwind("flex-1")}>
+          <View style={tailwind("flex flex-row items-center py-3")}>
+            <Image
+              style={tailwind("w-12 h-12 rounded-full")}
+              source={item?.account?.avatar?.images[0]?.urls[0]}
+              placeholder={blurhash}
+              contentFit="cover"
+              transition={1000}
+              cachePolicy="disk"
+            />
+            <View style={tailwind("ml-2 justify-around flex-1")}>
+              <View style={tailwind("flex flex-row w-full mb-2")}>
+                <Text
+                  style={tailwind("text-base text-white font-medium")}
+                  numberOfLines={1}
+                  ellipsizeMode="tail"
+                >
+                  {item?.account?.name}
+                </Text>
+                <View style={tailwind("flex flex-row ml-2")}>
+                  {item?.is_ironfan != 1 && (
+                    <View
+                      style={{
+                        ...tailwind(
+                          "flex flex-row items-center mr-2 bg-[#FF669E] rounded-full px-2"
+                        ),
+                        borderRadius: "50px",
+                      }}
+                      numberOfLines={1}
+                      ellipsizeMode="tail"
+                    >
+                      <Text
+                        style={{
+                          ...tailwind("text-xs text-white"),
+                          borderRadius: "50px",
+                        }}
+                      >
+                        空间铁粉
+                      </Text>
+                    </View>
+                  )}
+                  {item?.is_superfan != 1 && (
+                    <View
+                      style={{
+                        ...tailwind(
+                          "flex flex-row items-center mr-2 rounded-full px-2"
+                        ),
+                        backgroundColor: "#FFD685",
+                        borderRadius: "50px",
+                      }}
+                      numberOfLines={1}
+                      ellipsizeMode="tail"
+                    >
+                      <Text
+                        style={{
+                          ...tailwind("text-xs"),
+                          borderRadius: "50px",
+                        }}
+                      >
+                        超级粉丝
+                      </Text>
+                    </View>
+                  )}
+                </View>
+              </View>
+              <View style={tailwind("flex-row flex-wrap")}>
+                <View
+                  style={tailwind(
+                    "flex-row items-center py-0.5 px-2 mr-2 bg-[#FFFFFF1A] rounded-full"
+                  )}
+                >
+                  <NativeImage
+                    source={require("../../../assets/icon/12DP/ID.png")}
+                  />
+                  <Text
+                    style={tailwind("text-white text-xs font-medium ml-0.5")}
+                  >
+                    {item?.account?.user_id}
+                  </Text>
+                </View>
+                <View
+                  style={tailwind(
+                    "flex-row items-center py-0.5 px-2 mr-2 bg-[#FFFFFF1A] rounded-full"
+                  )}
+                >
+                  <Icon
+                    type="ionicon"
+                    name="calendar-outline"
+                    size={12}
+                    color="white"
+                  />
+                  <Text
+                    style={tailwind("text-white text-xs font-medium ml-0.5")}
+                  >
+                    {formatTimestamp(item?.join_ct)}
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+      </ListItem>
+    );
+  };
+
+  return (
+    <View
+      style={{
+        paddingTop: insets.top,
+        paddingBottom: insets.bottom,
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+        ...tailwind("flex-1"),
+      }}
+    >
+      <View style={tailwind("flex-row px-2 items-center")}>
+        <Icon
+          type="ionicon"
+          name="chevron-back"
+          size={32}
+          color="white"
+          onPress={() => navigation.goBack()}
+        />
+        <SearchBar
+          ref={searchRef}
+          containerStyle={tailwind("flex-1 bg-[#07050A]")}
+          inputContainerStyle={tailwind("h-10 bg-[#FFFFFF1A]")}
+          inputStyle={tailwind("text-white")}
+          inputMode="numeric"
+          placeholder="搜索Ta的昵称或id"
+          platform="ios"
+          cancelButtonProps={tailwind("text-[#FF669E]")}
+          cancelButtonTitle="清空"
+          clearIcon={() => <></>}
+          searchIcon={() => <></>}
+          showLoading={isloading}
+          onChangeText={updateSearch}
+          value={search}
+        />
+      </View>
+      <ScrollView style={tailwind("flex-1")}>
+        <View style={tailwind("flex-1 px-4")}>
+          {data?.map((item, index) => (
+            <RenderItem key={index} item={item} />
+          ))}
+          {data.length === 0 && <Empty type={search ? "search" : "nodata"} />}
+        </View>
+      </ScrollView>
+    </View>
+  );
+}

screeens/SpaceSetting/index.jsx

@@ -101,6 +101,15 @@ export default function SpaceSetting({ navigation, route }) {
               onPress={() => navigation.goBack()}
             />
           ),
+          headerRight: () => (
+            <Icon
+              type="ionicon"
+              name="search"
+              size={26}
+              color="white"
+              onPress={() => navigation.navigate("SpaceSearch")}
+            />
+          ),
           title: "空间成员",
           headerTitleStyle: { color: "white" },
           headerStyle: { backgroundColor: "#07050A" },