From b9bc0a71a9ef4901ec5d1a172c48ab86909e66cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B9=98=E9=A3=8E?= Date: Mon, 1 Dec 2025 10:56:05 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9C=A8MessageRecord=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E4=B8=AD=E5=A2=9E=E5=8A=A0=E5=BE=AE=E4=BF=A1=E8=BD=AC=E8=B4=A6?= =?UTF-8?q?=E6=B6=88=E6=81=AF=E6=94=AF=E6=8C=81=EF=BC=8C=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E6=B6=88=E6=81=AF=E8=BF=87=E6=BB=A4=E9=80=BB=E8=BE=91=E3=80=82?= =?UTF-8?q?=E8=B0=83=E6=95=B4RedPacketMessage=E6=A0=B7=E5=BC=8F=E4=BB=A5?= =?UTF-8?q?=E8=8E=B7=E5=BE=97=E6=9B=B4=E5=A5=BD=E7=9A=84=E5=B8=83=E5=B1=80?= =?UTF-8?q?=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../RedPacketMessage.module.scss | 2 +- .../TransferMessage.module.scss | 124 ++++++++++++++++++ .../components/TransferMessage/index.tsx | 71 ++++++++++ .../components/MessageRecord/index.tsx | 9 ++ Touchkebao/src/utils/filter.ts | 7 + 5 files changed, 212 insertions(+), 1 deletion(-) create mode 100644 Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/TransferMessage/TransferMessage.module.scss create mode 100644 Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/TransferMessage/index.tsx diff --git a/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/RedPacketMessage/RedPacketMessage.module.scss b/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/RedPacketMessage/RedPacketMessage.module.scss index 1d8603b03..11aa32a0b 100644 --- a/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/RedPacketMessage/RedPacketMessage.module.scss +++ b/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/RedPacketMessage/RedPacketMessage.module.scss @@ -2,7 +2,7 @@ .redPacketMessage { background: transparent; box-shadow: none; - max-width: 300px; + width: 260px; } .redPacketCard { diff --git 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 new file mode 100644 index 000000000..1f5aa75f8 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/TransferMessage/TransferMessage.module.scss @@ -0,0 +1,124 @@ +// 转账消息样式 +.transferMessage { + background: transparent; + box-shadow: none; + width: 260px; + max-width: 260px; +} + +.transferCard { + position: relative; + display: flex; + flex-direction: column; + padding: 12px; + background: #ff9500; // 橙色背景 + border-radius: 8px; + cursor: pointer; + transition: all 0.2s ease; + box-shadow: 0 2px 8px rgba(255, 149, 0, 0.2); + + &:hover { + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(255, 149, 0, 0.3); + } + + &:active { + transform: translateY(0); + } +} + +.transferHeader { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 5px; +} + +.transferIcon { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + background: #ffffff; + border-radius: 50%; + flex-shrink: 0; + font-size: 18px; + color: #ff9500; +} + +.transferAmount { + font-size: 20px; + font-weight: 600; + color: #ffffff; + line-height: 1.2; + flex: 1; +} + +.transferStatus { + font-size: 13px; + color: #ffffff; + margin-bottom: 5px; + opacity: 0.95; +} + +.transferDivider { + height: 1px; + background: rgba(255, 255, 255, 0.3); + margin-bottom: 6px; +} + +.transferFooter { + display: flex; + align-items: center; + justify-content: flex-start; +} + +.transferLabel { + font-size: 12px; + color: rgba(255, 255, 255, 0.9); + font-weight: 400; + line-height: 1.4; +} + +// 消息文本样式（用于错误提示） +.messageText { + line-height: 1.4; + white-space: pre-wrap; + word-break: break-word; + color: #8c8c8c; + font-size: 13px; +} + +// 响应式设计 +@media (max-width: 768px) { + .transferMessage { + max-width: 200px; + } + + .transferCard { + padding: 12px; + } + + .transferIcon { + width: 28px; + height: 28px; + + svg { + width: 18px; + height: 18px; + } + } + + .transferAmount { + font-size: 18px; + } + + .transferStatus { + font-size: 12px; + } + + .transferLabel { + font-size: 11px; + } +} diff --git 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 new file mode 100644 index 000000000..c46c39261 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/TransferMessage/index.tsx @@ -0,0 +1,71 @@ +import React from "react"; +import { SwapOutlined } from "@ant-design/icons"; +import styles from "./TransferMessage.module.scss"; + +interface TransferData { + title?: string; + feedesc?: string; + payMemo?: string; + transferid?: string; + transcationid?: string; + invalidtime?: string; + paysubtype?: string; + [key: string]: any; +} + +interface TransferMessageProps { + content: string; +} + +const TransferMessage: React.FC = ({ content }) => { + const renderErrorMessage = (fallbackText: string) => ( +
{fallbackText}
+ ); + + if (typeof content !== "string" || !content.trim()) { + return renderErrorMessage("[转账消息 - 无效内容]"); + } + + try { + const trimmedContent = content.trim(); + const jsonData: TransferData = JSON.parse(trimmedContent); + + // 验证是否为转账消息 + const isTransfer = + jsonData.title === "微信转账" || + (jsonData.transferid && jsonData.feedesc); + + if (!isTransfer) { + return renderErrorMessage("[转账消息 - 格式错误]"); + } + + const amount = jsonData.feedesc || "￥0.00"; + const memo = jsonData.payMemo || ""; + // 根据转账状态显示不同的提示文字 + // 可以根据实际业务逻辑判断状态，这里默认显示"待朋友确认收钱" + const statusText = "待朋友确认收钱"; + + return ( +
+
+
+
+ +
+
{amount}
+
+
{statusText}
+
+
+ 微信转账 +
+
+
+ ); + } catch (e) { + console.warn("转账消息解析失败:", e); + return renderErrorMessage("[转账消息 - 解析失败]"); + } +}; + +export default TransferMessage; diff --git 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 index ccd4759b4..ad11cec54 100644 --- 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 @@ -8,6 +8,7 @@ import ClickMenu from "./components/ClickMeau"; import LocationMessage from "./components/LocationMessage"; import SystemRecommendRemarkMessage from "./components/SystemRecommendRemarkMessage/index"; import RedPacketMessage from "./components/RedPacketMessage"; +import TransferMessage from "./components/TransferMessage"; import { ChatRecord, ContractData, weChatGroup } from "@/pages/pc/ckbox/data"; import { formatWechatTime } from "@/utils/common"; import { getEmojiPath } from "@/components/EmojiSeclection/wechatEmoji"; @@ -274,6 +275,14 @@ const MessageRecord: React.FC = ({ contract }) => { return ; } + // 判断是否为转账消息 + if ( + jsonData.title === "微信转账" || + (jsonData.transferid && jsonData.feedesc) + ) { + return ; + } + if (jsonData.type === "file" && msg && contract) { return ( { ? `[微信红包] ${parsed.sendertitle}` : "[微信红包]"; + // 微信转账消息：包含 title="微信转账" 或 transferid + feedesc + case !!( + parsed.title === "微信转账" || + (parsed.transferid && parsed.feedesc) + ): + return parsed.feedesc ? `[微信转账] ${parsed.feedesc}` : "[微信转账]"; + // 文本消息：包含 text 或 content case !!(parsed.text || parsed.content): return parsed.text || parsed.content;