增强MessageRecord组件以支持RedPacketMessage和TransferMessage的额外道具，从而更好地处理单击事件和套接字请求。更新禁用的转接消息的样式以改善用户体验。

2025-12-01 12:23:19 +08:00
parent 1ca5b30c15
commit 8659049ae9
4 changed files with 148 additions and 11 deletions
--- a/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/RedPacketMessage/index.tsx
+++ b/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/RedPacketMessage/index.tsx
@@ -1,4 +1,6 @@
 import React from "react";
+import { useWebSocketStore } from "@/store/module/websocket/websocket";
+import { ChatRecord, ContractData, weChatGroup } from "@/pages/pc/ckbox/data";
 import styles from "./RedPacketMessage.module.scss";

 interface RedPacketData {
@@ -10,9 +12,15 @@ interface RedPacketData {

 interface RedPacketMessageProps {
  content: string;
+  msg?: ChatRecord;
+  contract?: ContractData | weChatGroup;
 }

-const RedPacketMessage: React.FC<RedPacketMessageProps> = ({ content }) => {
+const RedPacketMessage: React.FC<RedPacketMessageProps> = ({
+  content,
+  msg,
+  contract,
+}) => {
  const renderErrorMessage = (fallbackText: string) => (
    <div className={styles.messageText}>{fallbackText}</div>
  );
@@ -39,10 +47,42 @@ const RedPacketMessage: React.FC<RedPacketMessageProps> = ({ content }) => {

    const title = jsonData.sendertitle || "恭喜发财，大吉大利";
    const paymsgid = jsonData.paymsgid || "";
+    const nativeurl = jsonData.nativeurl || "";
+
+    // 处理红包点击事件，发送 socket 请求
+    const handleRedPacketClick = () => {
+      if (!contract || !paymsgid || !nativeurl) {
+        console.warn("红包点击失败：缺少必要参数", {
+          contract,
+          paymsgid,
+          nativeurl,
+        });
+        return;
+      }
+
+      const isGroup = !!contract.chatroomId;
+      const wechatFriendId = isGroup ? 0 : contract.id;
+
+      // 发送 socket 请求
+      useWebSocketStore.getState().sendCommand("CmdOpenLuckyMoney", {
+        wechatAccountId: contract.wechatAccountId,
+        wechatFriendId: wechatFriendId,
+        paymsgid: paymsgid,
+        nativeurl: nativeurl,
+      });
+
+      console.log("发送红包打开请求:", {
+        cmdType: "CmdOpenLuckyMoney",
+        wechatAccountId: contract.wechatAccountId,
+        wechatFriendId: wechatFriendId,
+        paymsgid: paymsgid,
+        nativeurl: nativeurl,
+      });
+    };

    return (
      <div className={styles.redPacketMessage}>
-        <div className={styles.redPacketCard}>
+        <div className={styles.redPacketCard} onClick={handleRedPacketClick}>
          <div className={styles.redPacketHeader}>
            <div className={styles.redPacketIcon}>🧧</div>
            <div className={styles.redPacketTitle}>{title}</div>
--- a/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/TransferMessage/TransferMessage.module.scss
+++ b/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/TransferMessage/TransferMessage.module.scss
@@ -25,6 +25,16 @@
  &:active {
    transform: translateY(0);
  }
+
+  &.transferDisabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+
+    &:hover {
+      transform: none;
+      box-shadow: 0 2px 8px rgba(255, 149, 0, 0.2);
+    }
+  }
 }

 .transferHeader {
--- a/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/TransferMessage/index.tsx
+++ b/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/TransferMessage/index.tsx
@@ -1,5 +1,7 @@
 import React from "react";
 import { SwapOutlined } from "@ant-design/icons";
+import { useWebSocketStore } from "@/store/module/websocket/websocket";
+import { ChatRecord, ContractData, weChatGroup } from "@/pages/pc/ckbox/data";
 import styles from "./TransferMessage.module.scss";

 interface TransferData {
@@ -15,9 +17,16 @@ interface TransferData {

 interface TransferMessageProps {
  content: string;
+  msg?: ChatRecord;
+  contract?: ContractData | weChatGroup;
 }

-const TransferMessage: React.FC<TransferMessageProps> = ({ content }) => {
+const TransferMessage: React.FC<TransferMessageProps> = ({
+  content,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  msg, // 保留参数以保持与 RedPacketMessage 组件的一致性，未来可能会用到
+  contract,
+}) => {
  const renderErrorMessage = (fallbackText: string) => (
    <div className={styles.messageText}>{fallbackText}</div>
  );
@@ -40,14 +49,85 @@ const TransferMessage: React.FC<TransferMessageProps> = ({ content }) => {
    }

    const amount = jsonData.feedesc || "￥0.00";
-    const memo = jsonData.payMemo || "";
-    // 根据转账状态显示不同的提示文字
-    // 可以根据实际业务逻辑判断状态，这里默认显示"待朋友确认收钱"
-    const statusText = "待朋友确认收钱";
+
+    // 判断转账状态
+    const getTransferStatus = (
+      data: TransferData,
+    ): { text: string; canClick: boolean } => {
+      const paySubType = data.paysubtype || "";
+
+      switch (paySubType) {
+        case "1":
+          return { text: "待朋友确认收钱", canClick: true };
+        case "2":
+          return { text: "已过期", canClick: false };
+        case "3":
+          return { text: "已领取", canClick: false };
+        case "4":
+          return { text: "已退回", canClick: false };
+        default:
+          // 默认情况：可能是待领取
+          return { text: "待朋友确认收钱", canClick: true };
+      }
+    };
+
+    const { text: statusText, canClick } = getTransferStatus(jsonData);
+
+    // 处理转账点击事件，发送 socket 请求
+    const handleTransferClick = () => {
+      // 如果状态不允许点击，直接返回
+      if (!canClick) {
+        console.log("转账状态不允许点击:", statusText);
+        return;
+      }
+
+      if (
+        !contract ||
+        !jsonData.transferid ||
+        !jsonData.transcationid ||
+        !jsonData.invalidtime ||
+        !jsonData.paysubtype
+      ) {
+        console.warn("转账点击失败：缺少必要参数", {
+          contract,
+          transferid: jsonData.transferid,
+          transcationid: jsonData.transcationid,
+          invalidtime: jsonData.invalidtime,
+          paysubtype: jsonData.paysubtype,
+        });
+        return;
+      }
+
+      const isGroup = !!contract.chatroomId;
+      const wechatFriendId = isGroup ? 0 : contract.id;
+
+      // 发送 socket 请求
+      useWebSocketStore.getState().sendCommand("CmdReceiveTransMoney", {
+        wechatAccountId: contract.wechatAccountId,
+        wechatFriendId: wechatFriendId,
+        transcationid: jsonData.transcationid,
+        transferid: jsonData.transferid,
+        invalidtime: jsonData.invalidtime,
+        paysubtype: jsonData.paysubtype,
+      });
+
+      console.log("发送转账接收请求:", {
+        cmdType: "CmdReceiveTransMoney",
+        wechatAccountId: contract.wechatAccountId,
+        wechatFriendId: wechatFriendId,
+        transcationid: jsonData.transcationid,
+        transferid: jsonData.transferid,
+        invalidtime: jsonData.invalidtime,
+        paysubtype: jsonData.paysubtype,
+      });
+    };

    return (
      <div className={styles.transferMessage}>
-        <div className={styles.transferCard}>
+        <div
+          className={`${styles.transferCard} ${!canClick ? styles.transferDisabled : ""}`}
+          onClick={handleTransferClick}
+        >
          <div className={styles.transferHeader}>
            <div className={styles.transferIcon}>
              <SwapOutlined style={{ fontSize: 20 }} />
--- a/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/index.tsx
+++ b/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/index.tsx
@@ -256,7 +256,6 @@ const MessageRecord: React.FC<MessageRecordProps> = ({ contract }) => {
    msg?: ChatRecord,
    contract?: ContractData | weChatGroup,
  ) => {
-    console.log("红包");
    if (isLegacyEmojiContent(trimmedContent)) {
      return renderEmojiContent(rawContent);
    }
@@ -272,7 +271,13 @@ const MessageRecord: React.FC<MessageRecordProps> = ({ contract }) => {
          "wxpay://c2cbizmessagehandler/hongbao/receivehongbao",
        )
      ) {
-        return <RedPacketMessage content={rawContent} />;
+        return (
+          <RedPacketMessage
+            content={rawContent}
+            msg={msg}
+            contract={contract}
+          />
+        );
      }

      // 判断是否为转账消息
@@ -280,7 +285,9 @@ const MessageRecord: React.FC<MessageRecordProps> = ({ contract }) => {
        jsonData.title === "微信转账" ||
        (jsonData.transferid && jsonData.feedesc)
      ) {
-        return <TransferMessage content={rawContent} />;
+        return (
+          <TransferMessage content={rawContent} msg={msg} contract={contract} />
+        );
      }

      if (jsonData.type === "file" && msg && contract) {