circle_xcx/src/pages/message/list/index.tsx

import { Text, View } from "@tarojs/components";
import { useLoad, setNavigationBarTitle, navigateTo } from "@tarojs/taro";
import { timeFormat } from "../../../utils";
import { Image } from "@nutui/nutui-react-taro";
import { Message } from "@nutui/icons-react-taro";
import { useEffect, useState } from "react";
import CommentInput from "../../../components/comment-list/comment-input";
import {
  getNotificationListApi,
  markAsReadByTypeApi,
} from "../../../api/notifications";
const MessageList = () => {
  const [showCommentInput, setShowCommentInput] = useState(false);
  const [notificationList, setNotificationList] = useState<any[]>([]);
  const [CommentPostId, setCommentPostId] = useState(0);
  const [CommentParentCommentId, setCommentParentCommentId] = useState(0);
  const [type, setType] = useState("");
  const [typeId, setTypeId] = useState("0");
  useLoad((options) => {
    setType(options.type);
    switch (options.type) {
      case "like":
        setTypeId("4,5");
        handleReadNotification("4,5");
        setNavigationBarTitle({
          title: "收到的点赞",
        });
        break;
      case "comment":
        setTypeId("1,2,3");
        handleReadNotification("1,2,3");
        setNavigationBarTitle({
          title: "评论和@",
        });
        break;
      case "follow":
        setTypeId("6,7");
        handleReadNotification("6,7");
        setNavigationBarTitle({
          title: "关注和分享",
        });
        break;

      default:
        break;
    }
  });

  // 标记消息类型通知为已读
  const handleReadNotification = async (type_id) => {
    markAsReadByTypeApi({ type_id });
  };

  const getNotificationList = async () => {
    const res: any = await getNotificationListApi({
      type_id: typeId,
      page: 1,
      page_size: 10,
    });
    if (res.code === 200) {
      setNotificationList(res.data.list);
    }
  };
  useEffect(() => {
    getNotificationList();
  }, [typeId]);
  return (
    <View className="bg-[#f8f8f8]">
      {notificationList.map((item) => {
        return (
          <View className="p-[10px] text-[14px] flex mb-[2px] bg-[#fff]">
            <View className="w-[50px] h-[50px] bg-[#000] rounded-[50%] overflow-hidden">
              <Image
                width={50}
                height={50}
                src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg"
                mode="aspectFill"
              />
            </View>
            <View className="flex-1 ml-[10px]">
              <View className="text-[14px] font-[800] mb-[3px]">
                {item.nickname || item.username}
              </View>
              <View className="text-[12px] text-[#949494] mb-[3px]">
                {timeFormat(item.created_at)}
              </View>
              <View className="text-[14px] text-[#3d3d3d]">
                {item.type_id === 4 ? "点赞了你的动态" : ""}
                {item.type_id === 5 ? "点赞了你的评论" : ""}
                {item.type_id === 2 ? "评论了你的动态" : ""}
                {item.type_id === 3 ? item.reply_comment_info.content : ""}
                {item.type_id === 1
                  ? `${
                      item.source_type === "post" ? "在动态中" : "在评论中"
                    }刚刚@了你 `
                  : ""}
                {item.type_id === 6 ? "关注了你" : ""}
                {item.type_id === 7 ? "分享了你的动态" : ""}
              </View>

              <View
                className="text-[#858585] text-[14px] pl-[5px] mt-[10px]"
                style={{ borderLeft: "4rpx solid #e2e2e2" }}
              >
                {item.source_type === "comment" ? item.sourse_info.content : ""}
                {item.source_type === "post" && item.type_id === 2
                  ? item.reply_comment_info.content
                  : ""}
              </View>
              {/* 回复/评论 */}
              {item.type_id === 2 ||
              item.type_id === 3 ||
              (item.type_id === 1 && item.source_type === "comment") ? (
                <View
                  className="flex mt-[10px]"
                  onClick={() => {
                    setShowCommentInput(true);
                    setCommentPostId(item.source_post_info.id);
                    setCommentParentCommentId(item.reply_comment_info.id);
                  }}
                >
                  <View className="pt-[5px] pb-[5px] pl-[10px] pr-[10px] bg-[#f8f8f8] flex items-center rounded-[20px]">
                    <Message size={16} color="#949494" />
                    <Text className="text-[12px] ml-[5px]">回复</Text>
                  </View>
                </View>
              ) : (
                <></>
              )}
            </View>
            {item.source_post_info ? (
              <View
                className="text-[12px] text-[#333]"
                onClick={() => {
                  navigateTo({
                    url: `/pages/detail/index?id=${item.source_post_info.id}`,
                  });
                }}
              >
                <Image
                  width={50}
                  height={50}
                  src={
                    item.source_post_info.media_url
                      ? item.source_post_info.media_url.split(",")[0]
                      : ""
                  }
                  mode="aspectFill"
                />
              </View>
            ) : (
              <></>
            )}
          </View>
        );
      })}

      {showCommentInput ? (
        <CommentInput
          postId={CommentPostId}
          parentCommentId={CommentParentCommentId}
          onClose={() => setShowCommentInput(false)}
          onOK={() => {
            setShowCommentInput(false);
            getNotificationList();
          }}
        />
      ) : null}
    </View>
  );
};

export default MessageList;