修复帐号切换，滚动消息等问题 (#31)

Co-authored-by: al <al@cdhncy.com> Reviewed-on: https://git.wishpal.cn/wishpal_ironfan/tiefen_space_app/pulls/31
2025-01-23 17:32:48 +08:00 · 2025-01-23 17:32:48 +08:00 · 7eda5e4fd6
parent b42f908049
commit 7eda5e4fd6
4 changed files with 163 additions and 141 deletions
--- a/screeens/NoticeDetail/components/MessageList/index.jsx
+++ b/screeens/NoticeDetail/components/MessageList/index.jsx
@ -3,6 +3,9 @@ import {
  TouchableOpacity,
  Image as NativeImage,
  Text,
+  Platform,
+  ScrollView,
+  KeyboardAvoidingView,
 } from "react-native";
 import React, {
  useState,
@ -20,14 +23,17 @@ import requireAPI from "../../../../utils/requireAPI";
 import { Image } from "expo-image";
 import { connect } from "react-redux";
 import dayjs from "dayjs";
+import { useFocusEffect } from "@react-navigation/native";
 import ScrollNotice from "../ScrollNotice";
 import { goToPage } from "../../../../utils/tools";
+import { get } from "../../../../utils/storeInfo";
 const MessageList = ({ navigation, noticeCount, refInstance }) => {
  const dispatch = useDispatch();
  const [data, setData] = useState([]);
  const [scollNotice, setScollNotice] = useState({});
  const tailwind = useTailwind();
  const insets = useSafeAreaInsets();
+  const [account, setAccount] = useState(null);
  const [infoItems, setInfoItems] = useState([
    {
      title: "系统通知",
@ -100,10 +106,17 @@ const MessageList = ({ navigation, noticeCount, refInstance }) => {
      }
    },
  }));
+  useFocusEffect(() => {
+    const getAccount = async () => {
+      const account = await get("account");
+      setAccount(account?.mid);
+    };
+    getAccount();
+  });
  useEffect(() => {
    getData();
    getActiveNotice();
-  }, [noticeCount]);
+  }, [noticeCount, account]);
  const getData = async () => {
    try {
      const base = await baseRequest();
@ -129,6 +142,7 @@ const MessageList = ({ navigation, noticeCount, refInstance }) => {
        return;
      }
      const noticeObj = _data.data.result;
+
      const noticeCount = Object.values(noticeObj).reduce(
        (acc, cur) => acc + cur.unread_cnt,
        0
@ -146,6 +160,9 @@ const MessageList = ({ navigation, noticeCount, refInstance }) => {
            );
            newInfoItems[parseInt(it)]["subtitle"] =
              noticeObj[it].most_recent_notif.title;
+          } else {
+            newInfoItems[parseInt(it)]["time"] = "";
+            newInfoItems[parseInt(it)]["subtitle"] = "暂无新消息";
          }
        });
        return newInfoItems;
@ -262,120 +279,130 @@ const MessageList = ({ navigation, noticeCount, refInstance }) => {
  //     }),
  //   });
  return (
-    <View
+    <KeyboardAvoidingView
+      behavior={Platform.OS == "ios" ? "padding" : "height"}
+      keyboardVerticalOffset={insets.bottom + 60}
      style={{
-        paddingTop: insets.top,
        paddingLeft: insets.left,
        paddingRight: insets.right,
-        ...tailwind("flex flex-1 p-4"),
+        ...tailwind("flex-1"),
      }}
    >
-      {/* 广告轮播 */}
-      {!!scollNotice?.content && (
-        <ScrollNotice
-          navigation={navigation}
-          content={scollNotice?.content}
-          length={scollNotice?.content.length}
-          url={(() => {
-            const links = scollNotice?.hyperlinks;
-            let link = null;
-            if (links.length > 1) {
-              link = links.filter((it) => it.action === "inward")[0]?.url;
-            } else {
-              link = links[0]?.url;
-            }
-            const linkAndParams = goToPage({
-              action: links[0]?.action,
-              url: link,
-            });
-            return linkAndParams;
-          })()}
-          action={scollNotice?.hyperlinks[0]?.action}
-        />
-      )}
-
-      {/* 官方消息 */}
-      <View
-        style={{
-          ...tailwind("flex flex-col rounded-2xl mt-3.5"),
-          // backgroundColor: "#ffffff6d",
-        }}
-      >
-        {infoItems.map((it, index) => renderSystemItem(it, index, navigation))}
-      </View>
-      {/* 私聊消息 */}
-      <View
-        style={{
-          ...tailwind("flex flex-col rounded-2xl mt-2 border-2"),
-        }}
-      >
-        <TouchableOpacity
-          onPress={() =>
-            navigation.navigate("MessageDetail", {
-              mid: 1,
-            })
-          }
-          style={{
-            ...tailwind("flex flex-row items-center py-4 mb-2 rounded-xl"),
-          }}
-        >
-          <View style={tailwind("px-4")}>
-            <Image
-              width={54}
-              height={54}
-              source={require("../../../../assets/images/icon_border.png")}
+      <ScrollView style={tailwind("px-4")}>
+        <View style={tailwind("my-2")}>
+          {/* 广告轮播 */}
+          {!!scollNotice?.content && (
+            <ScrollNotice
+              navigation={navigation}
+              content={scollNotice?.content}
+              length={4}
+              url={(() => {
+                const links = scollNotice?.hyperlinks;
+                let link = null;
+                if (links.length > 1) {
+                  link = links.filter((it) => it.action === "inward")[0]?.url;
+                } else {
+                  link = links[0]?.url;
+                }
+                const linkAndParams = goToPage({
+                  action: links[0]?.action,
+                  url: link,
+                });
+                return linkAndParams;
+              })()}
+              action={scollNotice?.hyperlinks[0]?.action}
            />
-          </View>
+          )}
+
+          {/* 官方消息 */}
          <View
-            style={tailwind(
-              "flex flex-row justify-between items-center flex-1"
-            )}
+            style={{
+              ...tailwind("flex flex-col rounded-2xl mt-3.5"),
+              // backgroundColor: "#ffffff6d",
+            }}
          >
-            <View style={tailwind("flex flex-col")}>
-              <View style={tailwind("flex flex-row items-center mb-2")}>
-                <Text
-                  style={tailwind("text-base text-white  font-medium mr-2")}
-                >
-                  铁粉空间官网
-                </Text>
-                <View
-                  style={{
-                    ...tailwind("font-medium mr-2 px-1 rounded"),
-                    backgroundColor: "#FF669E",
-                  }}
-                >
-                  <Text style={tailwind("text-xs text-white")}>官方</Text>
+            {infoItems.map((it, index) =>
+              renderSystemItem(it, index, navigation)
+            )}
+          </View>
+          {/* 私聊消息 */}
+          <View
+            style={{
+              ...tailwind("flex flex-col rounded-2xl mt-2 border-2"),
+            }}
+          >
+            <TouchableOpacity
+              onPress={() =>
+                navigation.navigate("MessageDetail", {
+                  mid: 1,
+                })
+              }
+              style={{
+                ...tailwind("flex flex-row items-center py-4 mb-2 rounded-xl"),
+              }}
+            >
+              <View style={tailwind("px-4")}>
+                <Image
+                  width={54}
+                  height={54}
+                  source={require("../../../../assets/images/icon_border.png")}
+                />
+              </View>
+              <View
+                style={tailwind(
+                  "flex flex-row justify-between items-center flex-1"
+                )}
+              >
+                <View style={tailwind("flex flex-col")}>
+                  <View style={tailwind("flex flex-row items-center mb-2")}>
+                    <Text
+                      style={tailwind("text-base text-white  font-medium mr-2")}
+                    >
+                      铁粉空间官网
+                    </Text>
+                    <View
+                      style={{
+                        ...tailwind("font-medium mr-2 px-1 rounded"),
+                        backgroundColor: "#FF669E",
+                      }}
+                    >
+                      <Text style={tailwind("text-xs text-white")}>官方</Text>
+                    </View>
+                  </View>
+                  <Text style={{ ...tailwind("text-xs"), color: "#FFFFFFB2" }}>
+                    {data?.recent_contact_cs_msg || "暂无新消息"}
+                  </Text>
+                </View>
+                <View style={{ ...tailwind("w-12"), width: 60 }}>
+                  <Text
+                    style={{ ...tailwind("text-xs mb-2"), color: "#FFFFFF80" }}
+                  ></Text>
+                  {!!data.contact_cs_urc && (
+                    <View
+                      style={{
+                        ...tailwind("relative rounded-full"),
+                      }}
+                    >
+                      <Badge
+                        status="error"
+                        value={
+                          data.contact_cs_urc > 99 ? "99+" : data.contact_cs_urc
+                        }
+                        // containerStyle={{ position: "absolute", top: 0, right: 40 }}
+                        badgeStyle={{
+                          borderWidth: 0,
+                          backgroundColor: "#FF669E",
+                        }}
+                      />
+                    </View>
+                  )}
                </View>
              </View>
-              <Text style={{ ...tailwind("text-xs"), color: "#FFFFFFB2" }}>
-                {data?.recent_contact_cs_msg || "暂无新消息"}
-              </Text>
-            </View>
-            <View style={{ ...tailwind("w-12"), width: 60 }}>
-              <Text
-                style={{ ...tailwind("text-xs mb-2"), color: "#FFFFFF80" }}
-              ></Text>
-              {!!data.contact_cs_urc && (
-                <View
-                  style={{
-                    ...tailwind("relative rounded-full"),
-                  }}
-                >
-                  <Badge
-                    status="error"
-                    value={
-                      data.contact_cs_urc > 99 ? "99+" : data.contact_cs_urc
-                    }
-                    // containerStyle={{ position: "absolute", top: 0, right: 40 }}
-                    badgeStyle={{ borderWidth: 0, backgroundColor: "#FF669E" }}
-                  />
-                </View>
-              )}
-            </View>
+            </TouchableOpacity>
          </View>
-        </TouchableOpacity>
-      </View>
-    </View>
+        </View>
+      </ScrollView>
+    </KeyboardAvoidingView>
  );
 };

--- a/screeens/NoticeDetail/components/ScrollNotice/index.js
+++ b/screeens/NoticeDetail/components/ScrollNotice/index.js
@ -19,13 +19,13 @@ export default function ScrollNotice({
  action,
 }) {
  const tailwind = useTailwind();
-  const [fadeAnim] = useState(new Animated.Value(300)); // 透明度初始值为0
+  const [fadeAnim] = useState(new Animated.Value(length * 75 + 4));
  let animation = Animated.timing(fadeAnim, {
-    toValue: -(length * 60),
-    duration: 4000,
-    delay: 500,
+    toValue: -(length * 75),
+    duration: 15000,
+    delay: 0,
    easing: Easing.linear,
-    useNativeDriver: false,
+    useNativeDriver: true,
    useNativeDriverForTransform: true, // 如果动画涉及transform属性，则需要此设置
  });
  useEffect(() => {
@ -39,13 +39,13 @@ export default function ScrollNotice({
    animation &&
      animation.start(() => {
        // 动画完成时的回调，重置动画值并再次运行动画以实现循环
-        fadeAnim.setValue(length * 80); // 重置动画值（如果需要）
+        fadeAnim.setValue(length * 75); // 重置动画值（如果需要）
        runAnimation(); // 再次运行动画
      });
  };

  useEffect(() => {
-    runAnimation(); // 组件挂载时开始动画
+    content.length > 10 && runAnimation(); // 组件挂载时开始动画
    // 注意：这里没有清理函数，因为动画是无限循环的。
    // 如果你需要在组件卸载时停止动画，你需要实现一个机制来跟踪组件的状态，并在适当时调用`stopAnimation`。
  }, [fadeAnim]);
@ -58,7 +58,7 @@ export default function ScrollNotice({
    >
      <View
        style={{
-          ...tailwind("mr-2"),
+          ...tailwind("mr-2 "),
        }}
      >
        <NativeImage
@ -68,32 +68,19 @@ export default function ScrollNotice({
      <TouchableOpacity
        onPress={() => {
          if (typeof url === "string") {
-            try {
-              // 尝试启动微信客户端
-              Linking.openURL(url).catch(() => {
-                // 启动微信客户端失败，弹出提示安装对话框
-                Alert.alert(
-                  "错误提醒",
-                  "打开链接失败，请返回重试或者联系在线客服",
-                  [{ text: "确认", style: "cancel" }],
-                  { cancelable: false }
-                );
-              });
-            } catch (error) {
-              // 启动微信客户端失败，继续加载URL
-              console.error(error);
-            }
-          } else {
-            navigation.navigate(...url);
-          }
-          if (typeof url === "string") {
-            if (action === "webViewHeader") {
+            if (
+              action === "webViewHeaderInward" ||
+              action === "webViewHeaderOutward"
+            ) {
              navigation.navigate("WebWithHeader", {
                title: "",
                uri: url,
              });
              return;
-            } else if (action === "webViewWithOutHeader") {
+            } else if (
+              action === "webViewWithOutHeaderInward" ||
+              action === "webViewWithOutHeaderOutward"
+            ) {
              navigation.navigate("WebWithoutHeader", {
                title: "",
                uri: url,
@ -126,17 +113,27 @@ export default function ScrollNotice({
      >
        <Animated.View
          style={{
-            width: `${100}%`,
+            width: length * 75,
            // opacity: fadeAnim,
            transform: [
              {
-                translateX: fadeAnim,
+                translateX: content.length > 10 ? fadeAnim : 0,
              },
            ],
-            paddingBottom: 5,
+            // transform: [
+            //   {
+            //     translateX: -(length * 75),
+            //   },
+            // ],
+            // paddingBottom: 5,
          }}
        >
-          <Text style={{ ...tailwind("text-white ml-2 text-[#FF669E]") }}>
+          <Text
+            numberOfLines={1}
+            style={{
+              ...tailwind("text-white text-[#FF669E]"),
+            }}
+          >
            {content}
          </Text>
        </Animated.View>
--- a/screeens/Refund/RefundDetail/index.jsx
+++ b/screeens/Refund/RefundDetail/index.jsx
@ -20,7 +20,6 @@ export default function RefundDetail({ navigation, route }) {
  const tailwind = useTailwind();
  const insets = useSafeAreaInsets();
  const [data, setData] = useState(null);
-  const [dragging, setDragging] = useState(true);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [selectedIndex, setIndex] = useState(2);
  const [checkAble, setCheckAble] = useState(true);
@ -119,7 +118,7 @@ export default function RefundDetail({ navigation, route }) {
        ...tailwind("flex-1"),
      }}
    >
-      <ScrollView scrollEnabled={!dragging} style={tailwind("px-4")}>
+      <ScrollView style={tailwind("px-4")}>
        <View style={tailwind("my-2")}>
          <View style={tailwind("bg-[#FFFFFF1A] px-4 py-2 my-2 rounded-2xl")}>
            <View
--- a/screeens/Refund/RefundList/Reviewed/index.jsx
+++ b/screeens/Refund/RefundList/Reviewed/index.jsx
@ -92,7 +92,6 @@ export default function Reviewed({ navigation, zid }) {
                    <Text
                      style={tailwind("mr-2 text-base text-white font-medium")}
                      numberOfLines={1}
-                      ellipsizeMode="tail"
                    >
                      {item.account.name}
                    </Text>
@ -149,7 +148,7 @@ export default function Reviewed({ navigation, zid }) {
              </View>
              {item?.refunds_status === 3 && (
                <Text
-                  style={tailwind("mt-2 text-white text-xs text-[#F53030]")}
+                  style={tailwind("mt-2 text-white text-xs text-[#FFFFFF80]")}
                >
                  2小时无条件
                </Text>