联系人名片: 点击开启会话

src/actions/ConversationActions.js

@@ -22,6 +22,19 @@ export const fetchConversationsList = async (params) => {
   return list;
 };
 
+/**
+ *
+ * @param {object} params { opisn, whatsappid, colisn }
+ * * opisn, colisn : 用于查询
+ * * whatsappid: 用于创建会话
+ */
+export const fetchOrderConversationsList = async (params) => {
+  const { errcode, result: data } = await fetchJSON(`${API_HOST}/getorderconversation`, params);
+  if (errcode !== 0) return [];
+  const list = data.map((ele) => ({ ...ele, customer_name: `${ele.whatsapp_name || ''}`.trim(), whatsapp_name: `${ele.whatsapp_name || ''}`.trim() }));
+  return list;
+};
+
 export const MESSAGE_PAGE_SIZE = 100;
 /**
  *
@@ -38,17 +51,6 @@ export const fetchMessages = async (params) => {
   return errcode !== 0 ? [] : parseRenderMessageList((result || []).reverse());
 }
 
-/**
- *
- * @param {object} params { opisn, whatsappid, colisn }
- */
-export const fetchOrderConversationsList = async (params) => {
-  const { errcode, result: data } = await fetchJSON(`${API_HOST}/getorderconversation`, params);
-  if (errcode !== 0) return [];
-  const list = data.map((ele) => ({ ...ele, customer_name: ele.whatsapp_name.trim() }));
-  return list;
-};
-
 /**
  *
  * @param {object} body { opisn, conversationid }

src/views/Conversations/Components/ConversationsList.jsx

@@ -64,7 +64,7 @@ const Conversations = () => {
       }
     }
     if (findCurrentIndex >= 0) {
-      switchConversation(findCurrent);
+      setCurrentConversation(findCurrent);
     } else {
       // reset chat window
       setCurrentConversation({ sn: '', customer_name: '', coli_sn: order_sn });
@@ -80,16 +80,19 @@ const Conversations = () => {
     const loadNextPage = !(data.length === 0 || data.length < MESSAGE_PAGE_SIZE);
     updateCurrentConversation({ lasttime: thisLastTime, loadNextPage });
   };
-  const switchConversation = async (item) => {
-    setCurrentConversation(item);
-    const messagesList = activeConversations[`${item.sn}`] || [];
+
+  useEffect(() => {
+    const messagesList = activeConversations[`${currentConversation.sn}`] || [];
     if (messagesList.length < 20) {
-      getMessages(item);
+      getMessages(currentConversation);
     }
-  };
+
+    return () => {};
+  }, [currentConversation.sn]);
+
 
   const onSwitchConversation = async (item) => {
-    switchConversation(item);
+    setCurrentConversation(item);
     if (isEmpty(item.coli_sn)) {
       navigate(`/order/chat`, { replace: true });
     } else {

src/views/Conversations/Components/MessagesList.jsx

@@ -6,7 +6,7 @@ import { useShallow } from 'zustand/react/shallow';
 import useConversationStore from '@/stores/ConversationStore';
 import { isEmpty, } from '@/utils/utils';
 
-const MessagesList = ({ messages, handlePreview, reference, longListLoading, getMoreMessages, shouldScrollBottom, loadNextPage, ...props }) => {
+const MessagesList = ({ messages, handlePreview, reference, longListLoading, getMoreMessages, shouldScrollBottom, loadNextPage, handleContactClick, ...props }) => {
   const setReferenceMsg = useConversationStore(useShallow((state) => state.setReferenceMsg));
 
   // const messagesEndRef = useRef(null);
@@ -103,6 +103,10 @@ const MessagesList = ({ messages, handlePreview, reference, longListLoading, get
             {...(message.type === 'meetingLink'
               ? {
                   actionButtons: [
+                    {
+                      onClickButton: () => handleContactClick(message.data),
+                      Component: () => <div>发消息</div>,
+                    },
                     {
                       onClickButton: () => {
                         navigator.clipboard.writeText(message.text);

src/views/Conversations/Components/MessagesWrapper.jsx

@@ -1,13 +1,17 @@
 import { useRef, useState, useEffect } from 'react';
 import useConversationStore from '@/stores/ConversationStore';
 import { useShallow } from 'zustand/react/shallow';
-import { Image, } from 'antd';
+import { Image, Modal, Button } from 'antd';
 import MessagesList from './MessagesList';
 import { fetchCleanUnreadMsgCount, fetchMessages, MESSAGE_PAGE_SIZE } from '@/actions/ConversationActions';
+import { fetchOrderConversationsList,  } from '@/actions/ConversationActions';
+import { isEmpty } from '@/utils/utils';
 
 const MessagesWrapper = () => {
-  const [currentConversation, updateCurrentConversation] = useConversationStore(useShallow((state) => [state.currentConversation, state.updateCurrentConversation]));
+  const [currentConversation, updateCurrentConversation, setCurrentConversation] = useConversationStore(useShallow((state) => [state.currentConversation, state.updateCurrentConversation, state.setCurrentConversation]));
+  const conversationsList = useConversationStore(useShallow((state) => state.conversationsList));
   const activeMessages = useConversationStore(useShallow((state) => (state.currentConversation.sn && state.activeConversations[state.currentConversation.sn] ? state.activeConversations[state.currentConversation.sn]: [])));
+  const addToConversationList = useConversationStore((state) => state.addToConversationList);
 
   const [longList, setLongList] = useState([]);
   const [longListLoading, setLongListLoading] = useState(false);
@@ -57,10 +61,55 @@ const MessagesWrapper = () => {
         return false;
     }
   };
+
+  const openContactConversation = async (whatsappID) => {
+    const {coli_sn, opi_sn} = currentConversation;
+    let findCurrentOrderChats = conversationsList.filter((item) => `${item.coli_sn}` === `${coli_sn}` && `${item.opi_sn}` === `${opi_sn}` && `${item.whatsapp_phone_number}` === `${whatsappID}`);
+    let findCurrentIndex = isEmpty(findCurrentOrderChats) ? -1 : 0; // findCurrentOrderChats.length-1;
+    let findCurrent = findCurrentOrderChats[findCurrentIndex];
+    if (findCurrentIndex !== -1) {
+      addToConversationList(findCurrentOrderChats);
+    } else if (!isEmpty(whatsappID)) {
+      const data = await fetchOrderConversationsList({ opisn: opi_sn, colisn: coli_sn, whatsappid: whatsappID });
+      if (!isEmpty(data)) {
+        addToConversationList(data);
+        findCurrentIndex = data.findIndex((item) => `${item.coli_sn}` === `${coli_sn}` && `${item.opi_sn}` === `${opi_sn}` && `${item.whatsapp_phone_number}` === `${whatsappID}`);
+        findCurrentIndex = findCurrentIndex >= 0 ? findCurrentIndex : 0;
+        findCurrent = data[findCurrentIndex];
+      }
+    }
+    if (findCurrentIndex >= 0) {
+      setCurrentConversation(findCurrent);
+    }
+    setContactsModalVisible(false);
+    return false;
+  };
+  const [contactsModalVisible, setContactsModalVisible] = useState(false);
+  const [contactListData, setContactListData] = useState([]);
+  const handleContactItemClick = (contact) => {
+    openContactConversation(contact.wa_id);
+  }
+  const handleContactListClick = (data) => {
+    setContactListData(data);
+    setContactsModalVisible(true);
+  }
+  const handleContactClick = (data) => {
+    return data.length > 1 ? handleContactListClick(data) : handleContactItemClick(data[0]);
+  }
   return (
     <>
-      <MessagesList messages={longList} dataSourceLen={longList.length} {...{ reference, handlePreview, longListLoading, setLongListLoading, getMoreMessages, shouldScrollBottom, loadNextPage: currentConversation?.loadNextPage ?? true }} />
+      <MessagesList messages={longList} dataSourceLen={longList.length} {...{
+        reference, shouldScrollBottom,
+        handlePreview, handleContactClick,
+        longListLoading, setLongListLoading, getMoreMessages, loadNextPage: currentConversation?.loadNextPage ?? true
+        }}
+      />
       <Image width={0} height={0} src={null} preview={{ visible: previewVisible, src: previewSrc, onClose: onPreviewClose }} />
+      <Modal title="联系人" closable open={contactsModalVisible} onOk={handleContactItemClick} onCancel={() => setContactsModalVisible(false)} footer={null} >
+        {contactListData.map((contact) => (
+          <Button onClick={() => handleContactItemClick(contact)} type='link' key={contact.id}>{contact.name}: <span>{contact.wa_id}</span></Button>
+        ))}
+      </Modal>
     </>
   );
 };