通知

src/api/notifications/index.ts

@@ -11,3 +11,16 @@ export const getUnreadCountApi = () => {
     method: "POST",
   });
 };
+
+/**
+ * 获取通知列表
+ * @param
+ * @returns
+ */
+export const getNotificationListApi = (params) => {
+  return request({
+    url: `/notifications/`,
+    method: "POST",
+    data: params,
+  });
+};

src/app.config.ts

@@ -1,5 +1,6 @@
 export default defineAppConfig({
   pages: [
+    "pages/message/list/index",
     "pages/message/index",
     "pages/self/index",
     "pages/index/index",

src/components/comment-list/comment-input.tsx

@@ -1,11 +1,34 @@
 import { Button, Form, TextArea } from "@nutui/nutui-react-taro";
 import { View } from "@tarojs/components";
-import { useLayoutEffect, useRef } from "react";
+import { useLayoutEffect, useRef, useState, useEffect } from "react";
 import { createCommentApi } from "../../api/comment";
+import Taro from "@tarojs/taro";
 
 const CommentInput = ({ postId, parentCommentId, onClose, onOK }) => {
   const textAreaRef = useRef<any>(null);
   const [form] = Form.useForm();
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  const [isKeyboardShow, setIsKeyboardShow] = useState(false);
+  const [isInputFocused, setIsInputFocused] = useState(false);
+  const [isInitialized, setIsInitialized] = useState(false);
+  // 监听键盘高度变化
+  useEffect(() => {
+    const handleKeyboardHeightChange = (res) => {
+      setKeyboardHeight(res.height);
+      setIsKeyboardShow(res.height > 0);
+      if (res.height > 0) {
+        setIsInitialized(true);
+      }
+    };
+
+    // 监听键盘高度变化
+    Taro.onKeyboardHeightChange(handleKeyboardHeightChange);
+
+    return () => {
+      Taro.offKeyboardHeightChange(handleKeyboardHeightChange);
+    };
+  }, []);
+
   // 当评论输入框显示时，自动聚焦
   useLayoutEffect(() => {
     const timer = setTimeout(() => {
@@ -39,7 +62,12 @@ const CommentInput = ({ postId, parentCommentId, onClose, onOK }) => {
   };
 
   return (
-    <View className="p-[10px] fixed bottom-[0px] left-[0] right-[0] z-[1000] h-[220px] text-[14px] text-[#949494] bg-[#f8f8f8] rounded-[10rpx]">
+    <View
+      className="pd-[100px] fixed left-[0] right-[0] z-[1000] text-[14px] text-[#949494] bg-[#f8f8f8] rounded-[10rpx]"
+      style={{
+        bottom: isInputFocused && isInitialized ? `${keyboardHeight}px` : "0px",
+      }}
+    >
       {/* 使用原生 Taro Textarea 作为备用方案 */}
       <Form form={form} onFinish={(data) => sendComment(data)}>
         <Form.Item name="content">
@@ -47,23 +75,28 @@ const CommentInput = ({ postId, parentCommentId, onClose, onOK }) => {
             id="comment-textarea"
             placeholder="说点什么..."
             ref={textAreaRef}
-            autoFocus={true}
+            showConfirmBar={false}
+            auto-focus
+            auto-height
+            fixed
             style={{
-              width: "93%",
-              height: "120px",
-              padding: "10px",
-              border: "1px solid #ddd",
-              borderRadius: "8px",
-              fontSize: "14px",
-              backgroundColor: "#fff",
+              backgroundColor: "#f5f5f5",
+              borderRadius: "20rpx",
+              width: "calc(100% - 40rpx)",
+              fontSize: "28rpx",
+              padding: "20rpx",
+            }}
+            onFocus={() => {
+              setIsInputFocused(true);
             }}
             onBlur={() => {
+              setIsInputFocused(false);
               onClose(false);
             }}
           />
         </Form.Item>
         <Form.Item>
-          <View className="flex justify-end mt-[10px]">
+          <View className="flex justify-end">
             <Button
               type="primary"
               onClick={() => {

src/pages/message/index.tsx

@@ -1,15 +1,43 @@
 import { Badge, Cell } from "@nutui/nutui-react-taro";
 import { ArrowRight } from "@nutui/icons-react-taro";
 import { View } from "@tarojs/components";
+import { useEffect, useState } from "react";
+import { getUnreadCountApi } from "../../api/notifications";
+import { navigateTo } from "@tarojs/taro";
 
 const Message = () => {
+  const [unreadCount, setUnreadCount] = useState({
+    1: 0,
+    2: 0,
+    3: 0,
+    4: 0,
+    5: 0,
+    6: 0,
+  });
+  const getUnreadCount = async () => {
+    const res: any = await getUnreadCountApi();
+    if (res.code === 200) {
+      setUnreadCount(res.data[0]);
+    }
+  };
+  useEffect(() => {
+    getUnreadCount();
+  }, []);
   return (
     <>
       <Cell
+        onClick={() => {
+          navigateTo({
+            url: "/pages/message/list/index?type=like",
+          });
+        }}
         title={
           <>
-            <Badge right="0" dot>
-              赞和收藏
+            <Badge
+              right="0"
+              value={Number(unreadCount[4] || 0) + Number(unreadCount[5] || 0)}
+            >
+              获得赞
             </Badge>
           </>
         }
@@ -19,7 +47,46 @@ const Message = () => {
           </View>
         }
       />
-      <Cell title="评论" extra={<ArrowRight />} />
+      <Cell
+        onClick={() => {
+          navigateTo({
+            url: "/pages/message/list/index?type=comment",
+          });
+        }}
+        title={
+          <>
+            <Badge
+              right="0"
+              value={
+                Number(unreadCount[1] || 0) +
+                Number(unreadCount[2] || 0) +
+                Number(unreadCount[3] || 0)
+              }
+            >
+              评论和@
+            </Badge>
+          </>
+        }
+        extra={<ArrowRight />}
+      />
+      <Cell
+        onClick={() => {
+          navigateTo({
+            url: "/pages/message/list/index?type=follow",
+          });
+        }}
+        title={
+          <>
+            <Badge
+              right="0"
+              value={Number(unreadCount[6] || 0) + Number(unreadCount[7] || 0)}
+            >
+              关注和分享
+            </Badge>
+          </>
+        }
+        extra={<ArrowRight />}
+      />
     </>
   );
 };

src/pages/message/list/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: "收到的点赞",
+};

src/pages/message/list/index.tsx

@@ -0,0 +1,159 @@
+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 } 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");
+        setNavigationBarTitle({
+          title: "收到的点赞",
+        });
+        break;
+      case "comment":
+        setTypeId("1,2,3");
+        setNavigationBarTitle({
+          title: "评论和@",
+        });
+        break;
+      case "follow":
+        setTypeId("6,7");
+        setNavigationBarTitle({
+          title: "关注和分享",
+        });
+        break;
+
+      default:
+        break;
+    }
+  });
+  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 === 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.source_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);
+          }}
+        />
+      ) : null}
+    </View>
+  );
+};
+
+export default MessageList;