diff --git a/src/actions/ConversationActions.js b/src/actions/ConversationActions.js index 3db9841..b3744c3 100644 --- a/src/actions/ConversationActions.js +++ b/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 } diff --git a/src/views/Conversations/Components/ConversationsList.jsx b/src/views/Conversations/Components/ConversationsList.jsx index 276d422..7037a12 100644 --- a/src/views/Conversations/Components/ConversationsList.jsx +++ b/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 { diff --git a/src/views/Conversations/Components/MessagesList.jsx b/src/views/Conversations/Components/MessagesList.jsx index 5cd1f82..8a48e9b 100644 --- a/src/views/Conversations/Components/MessagesList.jsx +++ b/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: () =>
发消息
, + }, { onClickButton: () => { navigator.clipboard.writeText(message.text); diff --git a/src/views/Conversations/Components/MessagesWrapper.jsx b/src/views/Conversations/Components/MessagesWrapper.jsx index 4988aa6..529a51b 100644 --- a/src/views/Conversations/Components/MessagesWrapper.jsx +++ b/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 ( <> - + + setContactsModalVisible(false)} footer={null} > + {contactListData.map((contact) => ( + + ))} + ); };