refactor: 移除触客宝相关代码及功能模块

feat: 为朋友圈功能添加点赞和评论交互区域样式 style: 优化朋友圈组件代码结构，增加类型定义
2025-09-16 17:40:02 +08:00
parent 1d94368579
commit a7124c800e
13 changed files with 263 additions and 1764 deletions
--- a/Touchkebao/src/pages/pc/ckbox/weChat/components/SidebarMenu/FriendsCicle/index.module.scss
+++ b/Touchkebao/src/pages/pc/ckbox/weChat/components/SidebarMenu/FriendsCicle/index.module.scss
@@ -218,6 +218,63 @@
            }
          }
        }
+
+        // 点赞和评论交互区域
+        .interactionArea {
+          margin-top: 8px;
+          padding: 8px 12px;
+          background-color: #f7f7f7;
+          border-radius: 4px;
+          font-size: 13px;
+
+          .likeArea {
+            display: flex;
+            align-items: center;
+            margin-bottom: 4px;
+
+            .likeIcon {
+              color: #ff6b6b;
+              margin-right: 6px;
+              font-size: 12px;
+            }
+
+            .likeList {
+              color: #576b95;
+              
+              span {
+                cursor: pointer;
+                
+                &:hover {
+                  text-decoration: underline;
+                }
+              }
+            }
+          }
+
+          .commentArea {
+            .commentItem {
+              margin-bottom: 2px;
+              line-height: 1.4;
+
+              .commentUser {
+                color: #576b95;
+                cursor: pointer;
+                
+                &:hover {
+                  text-decoration: underline;
+                }
+              }
+
+              .commentSeparator {
+                color: #666;
+              }
+
+              .commentContent {
+                color: #333;
+              }
+            }
+          }
+        }
      }
    }

--- a/Touchkebao/src/pages/pc/ckbox/weChat/components/SidebarMenu/FriendsCicle/index.tsx
+++ b/Touchkebao/src/pages/pc/ckbox/weChat/components/SidebarMenu/FriendsCicle/index.tsx
@@ -10,16 +10,47 @@ import {
 import { InfiniteScroll } from "antd-mobile";
 import styles from "./index.module.scss";

+// 评论数据类型
+interface CommentItem {
+  commentArg: number;
+  commentId1: number;
+  commentId2: number;
+  commentTime: number;
+  content: string;
+  nickName: string;
+  wechatId: string;
+}
+
+// 点赞数据类型
+interface LikeItem {
+  createTime: number;
+  nickName: string;
+  wechatId: string;
+}
+
+// 朋友圈实体数据类型
+interface MomentEntity {
+  content: string;
+  createTime: number;
+  lat: number;
+  lng: number;
+  location: string;
+  objectType: number;
+  picSize: number;
+  resUrls: string[];
+  snsId: string;
+  urls: string[];
+  userName: string;
+}
+
 // 朋友圈数据类型定义
 interface FriendsCircleItem {
-  id: string;
-  avatar: string;
-  username: string;
-  content: string;
-  images?: string[];
-  time: string;
-  likes?: number;
-  comments?: number;
+  commentList: CommentItem[];
+  createTime: number;
+  likeList: LikeItem[];
+  momentEntity: MomentEntity;
+  snsId: string;
+  type: number;
 }

 // API响应类型
@@ -39,60 +70,83 @@ interface PaginationParams {
 // 模拟朋友圈数据
 const mockFriendsCircleData: FriendsCircleItem[] = [
  {
-    id: "1",
-    avatar: "",
-    username: "我的朋友圈",
-    content: "",
-    time: "",
+    commentList: [
+      {
+        commentArg: 2,
+        commentId1: 0,
+        commentId2: 35,
+        commentTime: 1758011325,
+        content: "测试评论",
+        nickName: "老坑爹- 解放双手，释放时间",
+        wechatId: "wxid_480es52qsj2812",
+      },
+    ],
+    createTime: 1757258659,
+    likeList: [
+      {
+        createTime: 1757315556,
+        nickName: "老坑爹- 解放双手，释放时间",
+        wechatId: "wxid_480es52qsj2812",
+      },
+    ],
+    momentEntity: {
+      content: "没看到血月[旺柴]",
+      createTime: 1757258659,
+      lat: 0,
+      lng: 0,
+      location: "",
+      objectType: 1,
+      picSize: 0,
+      resUrls: [
+        "https://ac-weremote-s2.oss-cn-shenzhen.aliyuncs.com/weremote/chat-logs/5E2C38F5A275450D935F3ECEC076124E/aa6d4c2f7b1fe24d04d34f4f409883e6/sns/wxid_480es52qsj2812/-3705790026851937712/-3705790026851937712-14740954047910318662.jpg",
+      ],
+      snsId: "-3705790026851937712",
+      urls: ["/sns/3/3/snst_14740954047910318662"],
+      userName: "wxid_dlhi90odctcl22",
+    },
+    snsId: "-3705790026851937712",
+    type: 1,
  },
  {
-    id: "2",
-    avatar: "",
-    username: "朋友圈广场",
-    content: "",
-    time: "",
+    commentList: [],
+    createTime: 1757258600,
+    likeList: [],
+    momentEntity: {
+      content:
+        "🎉🎊🎈欢迎小伙伴加入单群聊客宝地盘思慕斯蛋糕的小伙伴们的支持与信任！！！",
+      createTime: 1757258600,
+      lat: 0,
+      lng: 0,
+      location: "",
+      objectType: 1,
+      picSize: 0,
+      resUrls: ["/public/assets/face/1.png"],
+      snsId: "-3705790026851937713",
+      urls: ["/sns/3/3/snst_14740954047910318663"],
+      userName: "wxid_dlhi90odctcl23",
+    },
+    snsId: "-3705790026851937713",
+    type: 1,
  },
  {
-    id: "3",
-    avatar: "/public/assets/face/1.png",
-    username: "老坑爹-解放双手，释放时间",
-    content:
-      "🎉🎊🎈欢迎小伙伴加入单群聊客宝地盘思慕斯蛋糕的小伙伴们的支持与信任！！！",
-    images: ["/public/assets/face/1.png"],
-    time: "2025年9月16日 13:48",
-    likes: 0,
-    comments: 0,
-  },
-  {
-    id: "4",
-    avatar: "/public/assets/face/1.png",
-    username: "老坑爹-解放双手，释放时间",
-    content: "一整年卡1好的产品有用户的好评是买卖说的再多不如用户的有说服力",
-    images: ["/public/assets/face/1.png"],
-    time: "2025年9月16日 11:33",
-    likes: 0,
-    comments: 0,
-  },
-  {
-    id: "5",
-    avatar: "/public/assets/face/1.png",
-    username: "老坑爹-解放双手，释放时间",
-    content:
-      "两个小时637朵卡今天的努力也是给我自己最好的礼物🎁坚持就是胜利第二年开干。",
-    images: ["/public/assets/face/1.png"],
-    time: "2025年9月16日 11:03",
-    likes: 0,
-    comments: 0,
-  },
-  {
-    id: "6",
-    avatar: "/public/assets/face/1.png",
-    username: "老坑爹-解放双手，释放时间",
-    content: "老坑爹如果不幸苦，没有品质保障，客户会无限复购？",
-    images: ["/public/assets/face/1.png"],
-    time: "2025年9月16日 10:33",
-    likes: 0,
-    comments: 0,
+    commentList: [],
+    createTime: 1757258500,
+    likeList: [],
+    momentEntity: {
+      content: "一整年卡1好的产品有用户的好评是买卖说的再多不如用户的有说服力",
+      createTime: 1757258500,
+      lat: 0,
+      lng: 0,
+      location: "",
+      objectType: 1,
+      picSize: 0,
+      resUrls: ["/public/assets/face/1.png"],
+      snsId: "-3705790026851937714",
+      urls: ["/sns/3/3/snst_14740954047910318664"],
+      userName: "wxid_dlhi90odctcl24",
+    },
+    snsId: "-3705790026851937714",
+    type: 1,
  },
 ];

@@ -118,9 +172,9 @@ const FriendsCircle: React.FC = () => {
    const { pageNum, pageSize, type } = params;
    const startIndex = (pageNum - 1) * pageSize;

-    // 使用原有的模拟数据
-    const allData = mockFriendsCircleData.slice(2); // 排除前两个特殊项
-    const typeData = type === "my" ? allData.slice(0, 2) : allData.slice(2);
+    // 使用模拟数据
+    const allData = mockFriendsCircleData;
+    const typeData = type === "my" ? allData.slice(0, 1) : allData;
    const paginatedData = typeData.slice(startIndex, startIndex + pageSize);

    return {
@@ -222,26 +276,57 @@ const FriendsCircle: React.FC = () => {
    console.log("评论:", id);
  };

+  // 格式化时间戳
+  const formatTime = (timestamp: number) => {
+    const date = new Date(timestamp * 1000);
+    return date.toLocaleString("zh-CN", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  };
+
+  // 获取用户昵称
+  const getUserNickName = (item: FriendsCircleItem) => {
+    // 优先从点赞列表或评论列表中获取昵称
+    if (item.likeList.length > 0) {
+      return item.likeList[0].nickName;
+    }
+    if (item.commentList.length > 0) {
+      return item.commentList[0].nickName;
+    }
+    return item.momentEntity.userName;
+  };
+
  const renderNormalItem = (item: FriendsCircleItem, isNotMy?: boolean) => {
+    const nickName = getUserNickName(item);
+    const content = item.momentEntity.content;
+    const images = item.momentEntity.resUrls;
+    const time = formatTime(item.createTime);
+    const likesCount = item.likeList.length;
+    const commentsCount = item.commentList.length;
+
    return (
      <div className={styles.circleItem}>
        {isNotMy && (
          <div className={styles.avatar}>
-            <Avatar size={36} shape="square" src={item.avatar} />
+            <Avatar size={36} shape="square" src="/public/assets/face/1.png" />
          </div>
        )}
        <div className={styles.itemWrap}>
          <div className={styles.itemHeader}>
            <div className={styles.userInfo}>
-              <div className={styles.username}>{item.username}</div>
+              <div className={styles.username}>{nickName}</div>
            </div>
          </div>

          <div className={styles.itemContent}>
-            <div className={styles.contentText}>{item.content}</div>
-            {item.images && item.images.length > 0 && (
+            <div className={styles.contentText}>{content}</div>
+            {images && images.length > 0 && (
              <div className={styles.imageContainer}>
-                {item.images.map((image, index) => (
+                {images.map((image, index) => (
                  <img
                    key={index}
                    src={image}
@@ -251,28 +336,74 @@ const FriendsCircle: React.FC = () => {
              </div>
            )}

-            <div className={styles.blueLink}>查看图片</div>
+            {images && images.length > 0 && (
+              <div className={styles.blueLink}>查看图片</div>
+            )}
          </div>

          <div className={styles.itemFooter}>
-            <div className={styles.timeInfo}>{item.time}</div>
+            <div className={styles.timeInfo}>{time}</div>
            <div className={styles.actions}>
              <Button
                type="text"
                size="small"
                icon={<HeartOutlined />}
-                onClick={() => handleLike(item.id)}
+                onClick={() => handleLike(item.snsId)}
                className={styles.actionButton}
-              />
+              >
+                {likesCount > 0 && <span>{likesCount}</span>}
+              </Button>
              <Button
                type="text"
                size="small"
                icon={<MessageOutlined />}
-                onClick={() => handleComment(item.id)}
+                onClick={() => handleComment(item.snsId)}
                className={styles.actionButton}
-              />
+              >
+                {commentsCount > 0 && <span>{commentsCount}</span>}
+              </Button>
            </div>
          </div>
+
+          {/* 点赞和评论区域 */}
+          {(item.likeList.length > 0 || item.commentList.length > 0) && (
+            <div className={styles.interactionArea}>
+              {/* 点赞列表 */}
+              {item.likeList.length > 0 && (
+                <div className={styles.likeArea}>
+                  <HeartOutlined className={styles.likeIcon} />
+                  <span className={styles.likeList}>
+                    {item.likeList.map((like, index) => (
+                      <span key={like.wechatId}>
+                        {like.nickName}
+                        {index < item.likeList.length - 1 && "、"}
+                      </span>
+                    ))}
+                  </span>
+                </div>
+              )}
+
+              {/* 评论列表 */}
+              {item.commentList.length > 0 && (
+                <div className={styles.commentArea}>
+                  {item.commentList.map(comment => (
+                    <div
+                      key={`${comment.wechatId}-${comment.commentTime}`}
+                      className={styles.commentItem}
+                    >
+                      <span className={styles.commentUser}>
+                        {comment.nickName}
+                      </span>
+                      <span className={styles.commentSeparator}>: </span>
+                      <span className={styles.commentContent}>
+                        {comment.content}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
        </div>
      </div>
    );
@@ -284,7 +415,7 @@ const FriendsCircle: React.FC = () => {
        {myCircleData.length > 0 ? (
          <>
            {myCircleData.map(item => (
-              <div key={item.id} className={styles.itemWrapper}>
+              <div key={item.snsId} className={styles.itemWrapper}>
                {renderNormalItem(item, false)}
              </div>
            ))}
@@ -317,7 +448,7 @@ const FriendsCircle: React.FC = () => {
        {squareData.length > 0 ? (
          <>
            {squareData.map(item => (
-              <div key={item.id} className={styles.itemWrapper}>
+              <div key={item.snsId} className={styles.itemWrapper}>
                {renderNormalItem(item, true)}
              </div>
            ))}