完善空间功能

2024-04-24 16:33:47 +08:00 · 2024-04-24 16:33:47 +08:00 · 616415e667
parent 096d30cd2f
commit 616415e667
8 changed files with 299 additions and 166 deletions
--- a/components/GetWechatModal/index.jsx
+++ b/components/GetWechatModal/index.jsx
@ -101,8 +101,9 @@ export default function GetWechatModal({ visible, setVisible, streamerMid }) {
      }
    };
    if (!streamerMid) return;
+    if (!visible) return;
    getInitData();
-  }, [streamerMid]);
+  }, [streamerMid, visible]);

  //点击解锁微信按钮
  const unlockWechat = async () => {
--- a/components/ImageViewer/index.jsx
+++ b/components/ImageViewer/index.jsx
@ -17,20 +17,22 @@ import { get } from "../../utils/storeInfo";
 import { useNavigation } from "@react-navigation/native";
 import MyModal from "../MyModal";
 import { Image } from "expo-image";
-import { LinearProgress, Button } from "@rneui/themed";
+import { Button } from "@rneui/themed";
 import { LinearGradient } from "expo-linear-gradient";

 //imageUrls      [{ url: string }]
 //index          int
+//lockedStartIndex    int
+//onPressUnlockBtn  () => void

 export function ImageViewer({
  isShow,
  onClose,
+  onChange,
  imageUrls,
  index,
  lockedStartIndex,
-  unlockUrl,
-  onChange,
+  onPressUnlockBtn,
 }) {
  const tailwind = useTailwind();
  const insets = useSafeAreaInsets();
@ -135,7 +137,7 @@ export function ImageViewer({
    }
    if (isSaving) return;
    setIsSaving(true);
-    const isSuccess = await saveImage(imageUrls[index].url);
+    await saveImage(imageUrls[index].url);
    setIsSaving(false);
  };

@ -146,7 +148,7 @@ export function ImageViewer({
        index={index}
        onClick={closeImageViewer}
        onSwipeDown={closeImageViewer}
-        onChange={(index) => onChange(index)}
+        onChange={onChange ? (index) => onChange(index) : () => null}
        enableSwipeDown
        backgroundColor="#07050A"
        renderImage={(props) => {
@ -165,9 +167,7 @@ export function ImageViewer({
                  <Button
                    onPress={() => {
                      closeImageViewer();
-                      navigation.navigate("WebWithoutHeader", {
-                        uri: unlockUrl,
-                      });
+                      onPressUnlockBtn();
                    }}
                    ViewComponent={LinearGradient}
                    radius="999"
@ -178,7 +178,7 @@ export function ImageViewer({
                      end: { x: 1, y: 0.5 },
                    }}
                    titleStyle={tailwind("text-base font-medium")}
-                    containerStyle={tailwind("w-full px-4")}
+                    containerStyle={tailwind("w-3/4 px-4")}
                  >
                    立即解锁
                  </Button>
@ -188,36 +188,32 @@ export function ImageViewer({
          }
          return <Image {...props} />;
        }}
-        renderFooter={
-          Platform.OS === "android"
-            ? (index) => (
-                <TouchableOpacity
-                  onPress={() => hanldSaveImage(index)}
-                  style={{
-                    marginLeft: 20,
-                    marginBottom: insets.bottom,
-                    ...tailwind(
-                      "flex justify-center items-center w-12 h-12 bg-[#FFFFFF1A] rounded-full"
-                    ),
-                  }}
-                >
-                  {isSaving && <ActivityIndicator size="small" />}
-                  {!isSaving && (
-                    <Icon
-                      type="ionicon"
-                      name="save-outline"
-                      size={20}
-                      color="white"
-                    />
-                  )}
-                </TouchableOpacity>
-              )
-            : () => <></>
-        }
-        onSave={async (url) => {
-          const isSuccess = await saveImage(url);
+        renderFooter={(index) => (
+          <TouchableOpacity
+            onPress={() => hanldSaveImage(index)}
+            style={{
+              marginLeft: 20,
+              marginBottom: insets.bottom,
+              ...tailwind(
+                "flex justify-center items-center w-12 h-12 bg-[#FFFFFF1A] rounded-full"
+              ),
+            }}
+          >
+            {isSaving && <ActivityIndicator size="small" />}
+            {!isSaving && (
+              <Icon
+                type="ionicon"
+                name="save-outline"
+                size={20}
+                color="white"
+              />
+            )}
+          </TouchableOpacity>
+        )}
+        onSave={(url) => {
+          saveImage(url);
        }}
-        saveToLocalByLongPress={Platform.OS === "android"}
+        saveToLocalByLongPress
        menus={MenusComponent}
        loadingRender={() => <ActivityIndicator size="large" />}
      />
--- a/components/SpacePost/index.jsx
+++ b/components/SpacePost/index.jsx
@ -201,6 +201,7 @@ export default function SpacePost({ data }) {
              data.media_component.video_ids === null ? (
                <ImageDisplay
                  data={data}
+                  isCreator={isCreator}
                  isUnlocked={data.is_zone_moment_unlocked}
                  visibleRange={data.media_visible_range}
                  mediaAmount={data.media_amount}
@ -321,6 +322,86 @@ export default function SpacePost({ data }) {
                )}
              </TouchableOpacity>
            )}
+            {/* 用户已解锁时展示 */}
+            {data.c_type === 1 &&
+              data.is_zone_moment_unlocked === 1 &&
+              !isCreator && (
+                <TouchableOpacity
+                  activeOpacity={1}
+                  style={{
+                    backgroundColor:
+                      data.is_ironfan_visible === 1 ? "#301024" : "#331F0B",
+                    ...tailwind("flex flex-col py-2.5 px-3 mr-10 rounded-lg"),
+                  }}
+                >
+                  <View
+                    style={tailwind(
+                      "flex flex-row justify-between items-center"
+                    )}
+                  >
+                    <View style={tailwind("flex flex-row items-center")}>
+                      <NativeImage
+                        source={
+                          data.is_ironfan_visible === 1
+                            ? require("../../assets/icon/others/money_pink.png")
+                            : require("../../assets/icon/others/money_gold.png")
+                        }
+                      />
+                      <Text
+                        style={{
+                          color:
+                            data.is_ironfan_visible === 1
+                              ? "#FF669E"
+                              : "#FFD685",
+                          ...tailwind("text-base font-semibold ml-1"),
+                        }}
+                      >
+                        {data.price / 100}
+                      </Text>
+                      <Text
+                        style={{
+                          color:
+                            data.is_ironfan_visible === 1
+                              ? "#FF669E"
+                              : "#FFD685",
+                          ...tailwind("text-sm font-medium"),
+                        }}
+                      >
+                        元
+                      </Text>
+                    </View>
+                    <View style={tailwind("flex flex-row items-center")}>
+                      <Text
+                        style={{
+                          color:
+                            data.is_ironfan_visible === 1
+                              ? "#FF669E"
+                              : "#FFD685",
+                          ...tailwind("text-sm font-medium"),
+                        }}
+                      >
+                        {data.is_ironfanship_unlocked === 1 &&
+                          data.is_ironfan_visible === 1 &&
+                          "已使用铁粉特权解锁"}
+                        {data.is_superfanship_unlocked === 1 &&
+                          data.is_ironfan_visible === 0 &&
+                          "已使用超粉特权解锁"}
+                        {data.is_superfanship_unlocked === 0 &&
+                          data.is_ironfanship_unlocked === 0 &&
+                          "已付费解锁"}
+                      </Text>
+                      <Icon
+                        type="ionicon"
+                        name="chevron-forward"
+                        size={16}
+                        color={
+                          data.is_ironfan_visible === 1 ? "#FF669E" : "#FFD685"
+                        }
+                      />
+                    </View>
+                  </View>
+                </TouchableOpacity>
+              )}
            {/* 仅对发帖人展示 */}
            {data.c_type === 1 && isCreator && (
              <TouchableOpacity
@ -455,8 +536,16 @@ export default function SpacePost({ data }) {
 }

 //媒体为图片时展示内容的组件
-function ImageDisplay({ data, isUnlocked, visibleRange, mediaAmount, media }) {
+function ImageDisplay({
+  data,
+  isCreator,
+  isUnlocked,
+  visibleRange,
+  mediaAmount,
+  media,
+}) {
  const tailwind = useTailwind();
+  const navigation = useNavigation();

  //如果图片数量与服务端图片数量不一致，则填充第一张图片url使数量与服务端数量一致
  const displayMedia = media.concat(
@ -484,13 +573,16 @@ function ImageDisplay({ data, isUnlocked, visibleRange, mediaAmount, media }) {
              showImageViewer({
                imageUrls: images,
                index: index,
-                lockedStartIndex: visibleRange,
-                unlockUrl:
-                  process.env.EXPO_PUBLIC_WEB_URL +
-                  "/zone/pay/" +
-                  data?.zid +
-                  "/h5_zone_moment/" +
-                  data?.id,
+                lockedStartIndex: isUnlocked ? 999 : visibleRange,
+                onPressUnlockBtn: () =>
+                  navigation.navigate("WebWithoutHeader", {
+                    uri:
+                      process.env.EXPO_PUBLIC_WEB_URL +
+                      "/zone/pay/" +
+                      data?.zid +
+                      "/h5_zone_moment/" +
+                      data?.id,
+                  }),
              });
            }}
            style={
@ -526,6 +618,23 @@ function ImageDisplay({ data, isUnlocked, visibleRange, mediaAmount, media }) {
              transition={100}
              cachePolicy="disk"
            />
+            {isCreator && visibleRange < index + 1 && (
+              <View
+                style={{
+                  marginLeft: 2,
+                  marginBottom: 2,
+                  borderBottomRightRadius: 4,
+                  borderBottomLeftRadius: 4,
+                  ...tailwind(
+                    "absolute flex flex-row justify-center w-full bottom-0 bg-[#00000080]"
+                  ),
+                }}
+              >
+                <Text style={tailwind("text-xs text-white font-medium")}>
+                  不可预览
+                </Text>
+              </View>
+            )}
            {index === 8 && isCollapsed && (
              <TouchableOpacity
                activeOpacity={1}
--- a/components/SubmitWechatModal/index.jsx
+++ b/components/SubmitWechatModal/index.jsx
@ -6,6 +6,7 @@ import {
  TextInput,
  Keyboard,
  Alert,
+  KeyboardAvoidingView,
 } from "react-native";
 import React, { useState, useEffect } from "react";
 import { useTailwind } from "tailwind-rn";
@ -115,8 +116,9 @@ export default function SubmitWechatModal({
      }
    };
    if (!streamerMid) return;
+    if (!visible) return;
    getInitData();
-  }, [streamerMid]);
+  }, [streamerMid, visible]);

  //点击解锁微信按钮
  const unlockWechat = async () => {
@ -174,12 +176,13 @@ export default function SubmitWechatModal({
        const apiUrl = process.env.EXPO_PUBLIC_API_URL;
        const base = await baseRequest();
        //提交用户微信和备注
-        const signature2 = await generateSignature({
+        const body = {
          order_id: order_id,
          wechat: userWechat,
          note: remarks,
          ...base,
-        });
+        };
+        const signature2 = await generateSignature(body);
        try {
          const submitWechatResponse = await fetch(
            `${apiUrl}/api/vas/consumer_fill_contact?signature=${signature2}`,
@ -188,12 +191,7 @@ export default function SubmitWechatModal({
              headers: {
                "Content-Type": "application/json",
              },
-              body: JSON.stringify({
-                order_id: unlockData.data.order_id,
-                wechat: userWechat,
-                note: remarks,
-                ...base,
-              }),
+              body: JSON.stringify(body),
            }
          );
          const submitWechatData = await submitWechatResponse.json();
@ -245,116 +243,133 @@ export default function SubmitWechatModal({
        onPress={() => setVisible(false)}
        style={{
          backgroundColor: "#00000080",
-          ...tailwind("flex-1 justify-center items-center"),
+          ...tailwind("flex flex-1 justify-center items-center"),
        }}
      >
-        <TouchableOpacity
-          activeOpacity={1}
-          onPress={() => Keyboard.dismiss()}
-          style={tailwind("p-4 rounded-2xl bg-[#1E1C29] items-center w-3/4")}
+        <KeyboardAvoidingView
+          style={tailwind("flex flex-col items-center w-full")}
+          behavior="padding"
        >
-          {isMoneyEnough ? (
-            <>
-              <View style={tailwind("items-center")}>
-                <Image
-                  style={tailwind("w-16 h-16 rounded-full absolute -top-12")}
-                  source={streamerData?.avatar?.images[0]?.urls[0]}
-                  placeholder={blurhash}
-                  contentFit="cover"
-                  transition={1000}
-                  cachePolicy="disk"
-                />
-              </View>
-              <Text style={tailwind("text-2xl text-white font-medium mt-4")}>
-                {streamerData?.name}
-              </Text>
-              {/* 提交微信区 */}
-              {isWechatUnlocked && streamerData?.wechat_order_status !== 2 ? (
-                <View>
-                  <Text style={tailwind("text-sm text-white mt-2")}>
-                    {(streamerData?.wechat_order_status === 0 ||
-                      streamerData?.wechat_order_status === 3) &&
-                      "已成功提交您的微信，请耐心等待"}
-                    {(streamerData?.wechat_order_status === 4 ||
-                      streamerData?.wechat_order_status === 5) &&
-                      "已确认添加，订单完成"}
-                  </Text>
-                </View>
-              ) : (
-                <View style={tailwind("flex flex-col items-start w-full")}>
-                  <Text style={tailwind("text-base text-white font-medium")}>
-                    <Text style={tailwind("text-[#F53030]")}>*</Text>您的微信
-                  </Text>
-                  <TextInput
-                    placeholder="填写您的微信，以便Ta主动联系您"
-                    placeholderTextColor="#FFFFFF80"
-                    style={tailwind(
-                      "text-white border border-[#2c2b2f] rounded-xl p-2 my-1 w-full"
-                    )}
-                    underlineColorAndroid="transparent"
-                    onChangeText={(value) => setUserWechat(value)}
-                    value={userWechat}
-                  />
-                  <Text style={tailwind("text-base text-white font-medium")}>
-                    备注
-                  </Text>
-                  <TextInput
-                    placeholder="如添加好友需填写验证信息，请将相应答案填写在此处"
-                    placeholderTextColor="#FFFFFF80"
-                    multiline
-                    textAlignVertical="top"
-                    style={tailwind(
-                      "text-white border border-[#2c2b2f] rounded-xl p-2 my-1 w-full"
-                    )}
-                    underlineColorAndroid="transparent"
-                    onChangeText={(value) => setRemarks(value)}
-                    value={remarks}
+          <TouchableOpacity
+            activeOpacity={1}
+            onPress={() => Keyboard.dismiss()}
+            style={tailwind(
+              "flex flex-col p-4 rounded-2xl bg-[#1E1C29] items-center w-3/4"
+            )}
+          >
+            {isMoneyEnough ? (
+              <>
+                <View style={tailwind("items-center")}>
+                  <Image
+                    style={tailwind("w-16 h-16 rounded-full absolute -top-12")}
+                    source={streamerData?.avatar?.images[0]?.urls[0]}
+                    placeholder={blurhash}
+                    contentFit="cover"
+                    transition={1000}
+                    cachePolicy="disk"
                  />
                </View>
-              )}
-              <Text style={tailwind("text-xs text-[#F53030] font-medium my-2")}>
-                若解锁后72小时未通过好友，请联系客服
-              </Text>
-              {(!isWechatUnlocked ||
-                streamerData?.wechat_order_status === 2) && (
+                <Text style={tailwind("text-2xl text-white font-medium mt-4")}>
+                  {streamerData?.name}
+                </Text>
+                {/* 提交微信区 */}
+                {isWechatUnlocked && streamerData?.wechat_order_status !== 2 ? (
+                  <View>
+                    <Text style={tailwind("text-sm text-white mt-2")}>
+                      {(streamerData?.wechat_order_status === 0 ||
+                        streamerData?.wechat_order_status === 3) &&
+                        "已成功提交您的微信，请耐心等待"}
+                      {(streamerData?.wechat_order_status === 4 ||
+                        streamerData?.wechat_order_status === 5) &&
+                        "已确认添加，订单完成"}
+                    </Text>
+                  </View>
+                ) : (
+                  <View style={tailwind("flex flex-col items-start w-full")}>
+                    <Text style={tailwind("text-base text-white font-medium")}>
+                      <Text style={tailwind("text-[#F53030]")}>*</Text>您的微信
+                    </Text>
+                    <TextInput
+                      placeholder="填写您的微信，以便Ta主动联系您"
+                      placeholderTextColor="#FFFFFF80"
+                      style={tailwind(
+                        "text-white border border-[#2c2b2f] rounded-xl p-2 my-1 w-full"
+                      )}
+                      underlineColorAndroid="transparent"
+                      onChangeText={(value) => setUserWechat(value)}
+                      value={userWechat}
+                    />
+                    <Text style={tailwind("text-base text-white font-medium")}>
+                      备注
+                    </Text>
+                    <TextInput
+                      placeholder="如添加好友需填写验证信息，请将相应答案填写在此处"
+                      placeholderTextColor="#FFFFFF80"
+                      multiline
+                      textAlignVertical="top"
+                      style={tailwind(
+                        "text-white border border-[#2c2b2f] rounded-xl p-2 my-1 w-full"
+                      )}
+                      underlineColorAndroid="transparent"
+                      onChangeText={(value) => setRemarks(value)}
+                      value={remarks}
+                    />
+                  </View>
+                )}
+                <Text
+                  style={tailwind("text-xs text-[#F53030] font-medium my-2")}
+                >
+                  若解锁后72小时未通过好友，请联系客服
+                </Text>
+                {(!isWechatUnlocked ||
+                  streamerData?.wechat_order_status === 2) && (
+                  <TouchableOpacity
+                    onPress={unlockWechat}
+                    style={tailwind(
+                      "px-4 py-2 bg-[#FF669E] rounded-full items-center justify-center"
+                    )}
+                  >
+                    {!isWechatUnlocked && (
+                      <Text
+                        style={tailwind(
+                          "text-white text-base font-medium px-4"
+                        )}
+                      >
+                        提交并支付（{streamerData?.wechat_coin_price}金币）
+                      </Text>
+                    )}
+                    {streamerData?.wechat_order_status === 2 && (
+                      <Text
+                        style={tailwind(
+                          "text-white text-base font-medium px-4"
+                        )}
+                      >
+                        提交微信
+                      </Text>
+                    )}
+                  </TouchableOpacity>
+                )}
+              </>
+            ) : (
+              <>
+                <Text style={tailwind("text-2xl text-white font-medium mb-4")}>
+                  余额不足
+                </Text>
                <TouchableOpacity
-                  onPress={unlockWechat}
+                  onPress={() => {
+                    navigation.navigate("Wallet");
+                    setVisible(false);
+                  }}
                  style={tailwind(
                    "px-4 py-2 bg-[#FF669E] rounded-full items-center justify-center"
                  )}
                >
-                  {!isWechatUnlocked && (
-                    <Text style={tailwind("text-white text-base font-medium")}>
-                      提交并支付（{streamerData?.wechat_coin_price}金币）
-                    </Text>
-                  )}
-                  {streamerData?.wechat_order_status === 2 && (
-                    <Text style={tailwind("text-white text-base font-medium")}>
-                      提交微信）
-                    </Text>
-                  )}
+                  <Text style={tailwind("text-white text-base")}>前往充值</Text>
                </TouchableOpacity>
-              )}
-            </>
-          ) : (
-            <>
-              <Text style={tailwind("text-2xl text-white font-medium mb-4")}>
-                余额不足
-              </Text>
-              <TouchableOpacity
-                onPress={() => {
-                  navigation.navigate("Wallet");
-                  setVisible(false);
-                }}
-                style={tailwind(
-                  "px-4 py-2 bg-[#FF669E] rounded-full items-center justify-center"
-                )}
-              >
-                <Text style={tailwind("text-white text-base")}>前往充值</Text>
-              </TouchableOpacity>
-            </>
-          )}
-        </TouchableOpacity>
+              </>
+            )}
+          </TouchableOpacity>
+        </KeyboardAvoidingView>
      </TouchableOpacity>
    </Modal>
  );
--- a/screeens/SpaceSetting/SpaceMember/AllSpaceMember/index.jsx
+++ b/screeens/SpaceSetting/SpaceMember/AllSpaceMember/index.jsx
@ -5,7 +5,7 @@ import {
  RefreshControl,
  Image as NativeImage,
 } from "react-native";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { useTailwind } from "tailwind-rn";
 import Toast from "react-native-toast-message";
 import Empty from "../../../../components/Empty";
@ -57,6 +57,10 @@ export default function AllSpaceMember({ zid }) {
    }
  };

+  useEffect(() => {
+    getData();
+  }, []);
+
  //下拉刷新
  const [refreshing, setRefreshing] = useState(false);

@ -143,7 +147,6 @@ export default function AllSpaceMember({ zid }) {
            onRefresh={() => handleRefresh()}
          />
        }
-        onEndReached={getData}
        ListEmptyComponent={<Empty type="nodata" />}
      />
    </View>
--- a/screeens/SpaceSetting/SpaceMember/IronfanSpaceMember/index.jsx
+++ b/screeens/SpaceSetting/SpaceMember/IronfanSpaceMember/index.jsx
@ -5,7 +5,7 @@ import {
  RefreshControl,
  Image as NativeImage,
 } from "react-native";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { useTailwind } from "tailwind-rn";
 import Toast from "react-native-toast-message";
 import Empty from "../../../../components/Empty";
@ -57,6 +57,10 @@ export default function IronfanSpaceMember({ zid }) {
    }
  };

+  useEffect(() => {
+    getData();
+  }, []);
+
  //下拉刷新
  const [refreshing, setRefreshing] = useState(false);

@ -143,7 +147,6 @@ export default function IronfanSpaceMember({ zid }) {
            onRefresh={() => handleRefresh()}
          />
        }
-        onEndReached={getData}
        ListEmptyComponent={<Empty type="nodata" />}
      />
    </View>
--- a/screeens/SpaceSetting/SpaceMember/SuperFanSpaceMember/index.jsx
+++ b/screeens/SpaceSetting/SpaceMember/SuperFanSpaceMember/index.jsx
@ -5,7 +5,7 @@ import {
  RefreshControl,
  Image as NativeImage,
 } from "react-native";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { useTailwind } from "tailwind-rn";
 import Toast from "react-native-toast-message";
 import Empty from "../../../../components/Empty";
@ -57,6 +57,10 @@ export default function SuperFanSpaceMember({ zid }) {
    }
  };

+  useEffect(() => {
+    getData();
+  }, []);
+
  //下拉刷新
  const [refreshing, setRefreshing] = useState(false);

@ -143,7 +147,6 @@ export default function SuperFanSpaceMember({ zid }) {
            onRefresh={() => handleRefresh()}
          />
        }
-        onEndReached={getData}
        ListEmptyComponent={<Empty type="nodata" />}
      />
    </View>
--- a/screeens/SpaceSetting/SpaceMember/index.jsx
+++ b/screeens/SpaceSetting/SpaceMember/index.jsx
@ -27,11 +27,14 @@ export default function SpaceMember({ navigation, route }) {
    { key: "superFan", title: "空间超粉" },
  ]);

-  const renderScene = SceneMap({
-    all: () => <AllSpaceMember zid={route.params.data.id} />,
-    ironFan: () => <IronfanSpaceMember zid={route.params.data.id} />,
-    superFan: () => <SuperFanSpaceMember zid={route.params.data.id} />,
-  });
+  const renderScene = useCallback(
+    SceneMap({
+      all: () => <AllSpaceMember zid={route.params.data.id} />,
+      ironFan: () => <IronfanSpaceMember zid={route.params.data.id} />,
+      superFan: () => <SuperFanSpaceMember zid={route.params.data.id} />,
+    }),
+    [route]
+  );

  const renderIndicator = useCallback((props) => {
    const { position, navigationState, getTabWidth } = props;