tiefen_space_app/screeens/NoticeDetail/components/NoticeItem/index.jsx

import { View, TouchableOpacity, Text, Alert } from "react-native";
import React from "react";
import { Icon } from "@rneui/themed";
import { useTailwind } from "tailwind-rn";
import { formatDate, goToPage } from "../../../../utils/tools";
import { Image } from "expo-image";
import Toast from "react-native-toast-message";
import * as Linking from "expo-linking";
import dayjs from "dayjs";
export default function NoticeItem({ navigation, leftIcon, hasLink, data }) {
  const tailwind = useTailwind();
  // const currentLink = useMemo(() => {
  //   if (hasLink && data?.hyperlinks) {
  //     const hasAppLink = data.hyperlinks.filter(
  //       (it) => it.action === "app_router_path"
  //     )[0];
  //     return hasAppLink ?? null;
  //   }
  // }, [data]);
  //日期格式
  const renderDay = (time) => {
    const now = dayjs();
    if (now.diff(dayjs(time * 1000), "hour") - now.hour() < 1) {
      return dayjs(time * 1000).format("HH:mm");
    } else if (now.diff(dayjs(time * 1000), "hour") - now.hour() < 24) {
      return "昨天" + dayjs(time * 1000).format("HH:mm");
    } else {
      return dayjs(time * 1000).format("MM-DD");
    }
  };
  return (
    <View
      style={{
        ...tailwind("bg-[#FFFFFF1A] rounded-2xl  mb-2"),
        paddingHorizontal: 24,
        paddingVertical: 18,
      }}
    >
      <View style={tailwind("flex flex-row")}>
        <View style={tailwind("flex-1")}>
          {/* 内容 */}
          <View>
            {/* 文本内容 */}
            <View style={{ ...tailwind("flex-row items-center") }}>
              {/* 头像 */}
              <View
                style={{
                  ...tailwind(
                    "flex justify-center items-center rounded-full mr-2"
                  ),
                  width: 28,
                  height: 28,
                }}
              >
                {/* <Icon type="ionicon" name="megaphone" size={24} color="white" /> */}
                {leftIcon}
              </View>
              <Text style={tailwind("text-lg text-white font-medium mr-2")}>
                {data?.title}
              </Text>
            </View>
            <Text style={tailwind("text-base text-white font-medium my-2")}>
              {data?.message}
            </Text>
            {/* 链接跳转 */}
            {!!data?.link_text && (
              <TouchableOpacity
                onPress={() => {
                  console.log("此链接已失效", data.is_valid);
                  if (!data.is_valid) {
                    Toast.show({
                      type: "error",
                      text1: "此链接已失效",
                      topOffset: 60,
                    });
                    return;
                  }
                  if (data?.hyperlinks) {
                    // const linkStr = goToPage(data?.hyperlinks[0]?.params);
                    const links = data?.hyperlinks;
                    let link = null;
                    if (links.length > 1) {
                      link = links.filter((it) => it.action === "inward")[0]
                        ?.params;
                    } else {
                      link = links[0]?.params;
                    }
                    const linkAndParams = goToPage({
                      url: link,
                      action: links[0]?.action,
                    });
                    if (typeof linkAndParams === "string") {
                      if (
                        links[0]?.action === "webViewHeaderInward" ||
                        links[0]?.action === "webViewHeaderOutward"
                      ) {
                        navigation.navigate("WebWithHeader", {
                          title: "",
                          uri: linkAndParams,
                        });
                        return;
                      } else if (
                        links[0]?.action === "webViewWithOutHeaderInward" ||
                        links[0]?.action === "webViewWithOutHeaderOutward"
                      ) {
                        navigation.navigate("WebWithoutHeader", {
                          title: "",
                          uri: linkAndParams,
                        });
                        return;
                      }
                      try {
                        // 尝试启动微信客户端
                        Linking.openURL(linkAndParams).catch(() => {
                          // 启动微信客户端失败，弹出提示安装对话框
                          Alert.alert(
                            "错误提醒",
                            "打开链接失败，请返回重试或者联系在线客服",
                            [{ text: "确认", style: "cancel" }],
                            { cancelable: false }
                          );
                        });
                      } catch (error) {
                        // 启动微信客户端失败，继续加载URL
                        console.error(error);
                      }
                    } else {
                      navigation.navigate(...linkAndParams);
                    }
                    // if (linkAndParams) {
                    //   if (typeof linkAndParams === "object") {
                    //     navigation.navigate(...linkAndParams);
                    //   } else {
                    //     // if (linkAndParams.indexOf("JoinStreamer") != -1) {
                    //     //   navigation.navigate("StreamerVerification", {
                    //     //     screen: "JoinStreamer",
                    //     //   });
                    //     // } else if (
                    //     //   linkAndParams.indexOf(
                    //     //     "CompleteStreamerInformation"
                    //     //   ) != -1
                    //     // ) {
                    //     //   navigation.navigate("StreamerVerification", {
                    //     //     screen: "CompleteStreamerInformation",
                    //     //   });
                    //     //   return;
                    //     // }
                    //     navigation.navigate(linkAndParams);
                    //   }
                    // }
                    // console.log(linkStr);

                    // if (linkStr.indexOf("JoinStreamer") != -1) {
                    //   navigation.navigate("StreamerVerification", {
                    //     screen: "JoinStreamer",
                    //   });
                    //   return;
                    // } else if (
                    //   linkStr.indexOf("CompleteStreamerInformation") != -1
                    // ) {
                    //   navigation.navigate("StreamerVerification", {
                    //     screen: "CompleteStreamerInformation",
                    //   });
                    //   return;
                    // }
                    // navigation.navigate(linkStr);
                  }
                }}
                style={{
                  ...tailwind("rounded-xl p-2 flex flex-row items-center my-2"),
                  backgroundColor: "#FFFFFF1A",
                }}
              >
                <View
                  style={{
                    ...tailwind("mr-2 bg-white rounded-lg"),
                    width: 50,
                    height: 50,
                  }}
                >
                  <Image
                    style={tailwind("h-full rounded-lg")}
                    source={data.thumbnail?.images[0].urls[0]}
                    contentFit="cover"
                    transition={100}
                    cachePolicy="disk"
                  />
                </View>

                <View
                  style={{
                    ...tailwind("flex flex-row justify-between flex-1 px-4"),
                    alignItems: "center",
                  }}
                >
                  <Text
                    style={tailwind("text-base text-white font-medium mr-2")}
                  >
                    {hasLink.text}
                  </Text>
                  <View>
                    <Icon
                      type="ionicon"
                      name="chevron-forward"
                      color="white"
                      size={24}
                    />
                  </View>
                </View>
              </TouchableOpacity>
            )}
          </View>
          {/* 时间 */}
          <View>
            <Text style={{ ...tailwind("text-xs"), color: "#FFFFFF80" }}>
              {renderDay(data?.push_time || data?.ct)}
            </Text>
          </View>
        </View>
      </View>
    </View>
  );
}