diff --git a/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/TransmitModal/TransmitModal.module.scss b/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/TransmitModal/TransmitModal.module.scss index 57e2796f3..eba7bd819 100644 --- a/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/TransmitModal/TransmitModal.module.scss +++ b/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/TransmitModal/TransmitModal.module.scss @@ -73,7 +73,9 @@ margin-bottom: 0; } } - +.paginationContainer { + padding: 20px; +} .selectedItem { justify-content: space-between; } @@ -93,6 +95,10 @@ overflow: hidden; text-overflow: ellipsis; } +.conRemark { + font-size: 12px; + color: #8c8c8c; +} .groupIcon { color: #1890ff; diff --git a/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/TransmitModal/index.tsx b/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/TransmitModal/index.tsx index 1184bca65..d8aaf4406 100644 --- a/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/TransmitModal/index.tsx +++ b/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/TransmitModal/index.tsx @@ -8,6 +8,7 @@ import { Empty, Spin, message, + Pagination, } from "antd"; import { SearchOutlined, @@ -33,6 +34,8 @@ const TransmitModal: React.FC = ({ onConfirm }) => { (ContractData | weChatGroup)[] >([]); const [loading, setLoading] = useState(false); + const [page, setPage] = useState(1); + const pageSize = 20; // 从 Zustand store 获取更新方法 const openTransmitModal = useWeChatStore(state => state.openTransmitModal); @@ -65,6 +68,7 @@ const TransmitModal: React.FC = ({ onConfirm }) => { if (openTransmitModal) { setSearchValue(""); setSelectedWechatFriend([]); + setPage(1); loadContacts(); } }, [openTransmitModal]); @@ -74,18 +78,29 @@ const TransmitModal: React.FC = ({ onConfirm }) => { if (!searchValue.trim()) return allContacts; const keyword = searchValue.toLowerCase(); - return allContacts.filter( - contact => - contact.nickname.toLowerCase().includes(keyword) || - contact.pinyin?.toLowerCase().includes(keyword), - ); + return allContacts.filter(contact => { + const name = (contact.nickname || "").toLowerCase(); + const quanPin = (contact as any).quanPin?.toLowerCase?.() || ""; + const pinyin = (contact as any).pinyin?.toLowerCase?.() || ""; + return ( + name.includes(keyword) || + quanPin.includes(keyword) || + pinyin.includes(keyword) + ); + }); }, [allContacts, searchValue]); + const paginatedContacts = useMemo(() => { + const start = (page - 1) * pageSize; + const end = start + pageSize; + return filteredContacts.slice(start, end); + }, [filteredContacts, page]); + // 处理联系人选择 const handleContactSelect = (contact: ContractData | weChatGroup) => { setSelectedWechatFriend(prev => { if (isContactSelected(contact.id)) { - return prev.filter(contact => contact.id !== contact.id); + return prev.filter(item => item.id !== contact.id); } return [...prev, contact]; }); @@ -160,15 +175,11 @@ const TransmitModal: React.FC = ({ onConfirm }) => { 加载联系人中... ) : filteredContacts.length > 0 ? ( - filteredContacts.map(contact => ( -
handleContactSelect(contact)} - > + paginatedContacts.map(contact => ( +
handleContactSelect(contact)} >
= ({ onConfirm }) => { ) } /> - - {contact.nickname} - {contact.conRemark && `-(${contact.conRemark})`} - +
+
{contact.nickname}
+ {contact.conRemark && ( +
+ {contact.conRemark} +
+ )} +
{contact.type === "group" && ( )} @@ -202,6 +217,18 @@ const TransmitModal: React.FC = ({ onConfirm }) => { /> )}
+ {filteredContacts.length > 0 && ( +
+ setPage(p)} + showSizeChanger={false} + /> +
+ )}
{/* 右侧已选择列表 */} @@ -225,10 +252,14 @@ const TransmitModal: React.FC = ({ onConfirm }) => { ) } /> - - {contact.nickname} - {contact.conRemark && `-(${contact.conRemark})`} - +
+
{contact.nickname}
+ {contact.conRemark && ( +
+ {contact.conRemark} +
+ )} +
{contact.type === "group" && ( )}