diff --git a/test.jsx b/test.jsx deleted file mode 100644 index 1ab0161..0000000 --- a/test.jsx +++ /dev/null @@ -1,373 +0,0 @@ -import React, { useState, useEffect, useRef } from "react"; -import { Divider, Modal, Input, Button, Menu } from "antd"; -import { - Routes, - Route, - Navigate, - useNavigate, - useLocation, -} from "react-router-dom"; -import baseRequest from "../../utils/baseRequest"; - -export default function Contact() { - //请求未读消息队列 - const [unreadMessageList, setUnreadMessageList] = useState([]); - const getUnreadMessages = async () => { - if (isModalOpen) return; - try { - //获取全部未读信息 - const base = baseRequest(); - const response = await fetch( - "/op/contact_customer_service/list_unread_group_by_mid", - { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - ...base, - }), - } - ); - const data = await response.json(); - if (data.ret === -1) { - alert(data.msg); - return; - } - //获取用户头像、昵称 - const userMids = data.data.list.map((item) => item.mid); - if (userMids.length === 0) { - setUnreadMessageList([]); - return; - } - const userResponse = await fetch("/op/account/list_others_by_mids", { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - mids: userMids, - ...base, - }), - }); - const userData = await userResponse.json(); - if (userData.ret === -1) { - alert(userData.msg); - return; - } - //合并未读信息和用户资料数组 - const combinedArray = data.data.list.map((item1) => { - const matchingItem = userData.data.list.find( - (item2) => item2.mid === item1.mid - ); - return { ...item1, ...matchingItem }; - }); - setUnreadMessageList(combinedArray); - } catch (error) { - console.error(error); - } - }; - - //控制modal是否出现 - const [isModalOpen, setIsModalOpen] = useState(false); - - //轮询更新未读消息队列 - useEffect(() => { - getUnreadMessages(); - // 设置轮询请求,每隔一定时间执行一次 - const intervalId = setInterval(() => { - getUnreadMessages(); - }, 3000); // 间隔时间为3秒 - - // 在组件卸载时清除定时器 - return () => { - clearInterval(intervalId); - }; - }, [isModalOpen]); - - const { TextArea } = Input; - - const MassageItem = ({ item }) => { - //设置消息为已读 - const ids = item.contents?.map((temItem) => temItem.id); - const updateMessageStatus = async () => { - try { - const base = baseRequest(); - const response = await fetch( - `/op/contact_customer_service/update_by_ids`, - { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - is_read: 1, - ids: ids, - ...base, - }), - } - ); - const data = await response.json(); - if (data.ret === -1) { - alert(data.msg); - return; - } - } catch (error) { - console.error(error); - } - }; - - return ( -
{ - setModalInfo(item); - setIsModalOpen(!isModalOpen); - updateMessageStatus(); - }} - > -
-
- -
-

- - {item.contents.length}条未读 - - {item.name} -

-

- {item.contents[0].message} -

-
-
-

- {new Date(item.contents[0].ct * 1000).toLocaleString()} -

-
- -
- ); - }; - - //保存modal中用户的mid和昵称和历史记录 - const [modalInfo, setModalInfo] = useState({}); - const MessageModal = () => { - //获取并保存用户聊天历史记录 - const [history, setHistory] = useState([]); - //获取聊天记录,并设置为已读 - const getHistory = async () => { - try { - //获取全部未读信息 - const base = baseRequest(); - if (!modalInfo.mid) return; - const response = await fetch( - "/op/contact_customer_service/list_by_mid", - { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - mid: modalInfo.mid, - offset: 0, - limit: 100, - ...base, - }), - } - ); - const data = await response.json(); - if (data.ret === -1) { - alert(data.msg); - return; - } - setHistory((prev) => { - const temData = [...data.data.list].reverse(); - if ( - prev.length === 0 || - temData[temData.length - 1].id !== prev[prev.length - 1].id - ) { - return temData; - } else { - return prev; - } - }); - } catch (error) { - console.error(error); - } - }; - - //轮询更新聊天记录 - useEffect(() => { - getHistory(); - // 设置轮询请求,每隔一定时间执行一次 - const intervalId = setInterval(() => { - getHistory(); - }, 3000); // 间隔时间为3秒 - - // 在组件卸载时清除定时器 - return () => { - clearInterval(intervalId); - }; - }, [modalInfo]); - - //将最新发送的信息设置为已读 - const updateNewMessageToRead = async () => { - try { - //设置消息为已读 - const base = baseRequest(); - const ids = history.map((item) => { - if (item.is_read === 1) return; - return item.id; - }); - if (ids.length === 0) return; - const updateResponse = await fetch( - `/op/contact_customer_service/update_by_ids`, - { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - is_read: 1, - ids: ids, - ...base, - }), - } - ); - const updateData = await updateResponse.json(); - if (updateData.ret === -1) { - alert(updateData.msg); - return; - } - } catch (error) { - console.error(error); - } - }; - - const sendMessage = async (message) => { - //请求接口发送私信 - try { - const base = baseRequest(); - const response = await fetch(`/op/contact_customer_service/create`, { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - sub_mid: modalInfo.mid, - obj_mid: base.b_mid, - predicate: 1, - message: message, - ...base, - }), - }); - const data = await response.json(); - if (data.ret === -1) { - alert(data.msg); - return; - } - setMessageContent(""); - getHistory(); - } catch (error) { - console.error(error); - } - }; - - //保存输入框内容 - const [messageContent, setMessageContent] = useState(""); - - //自动滚动到聊天记录底部 - const modalContentRef = useRef(); - useEffect(() => { - if (modalContentRef.current) { - modalContentRef.current.scrollTop = - modalContentRef.current.scrollHeight; - } - }, [history]); - - return ( - { - setIsModalOpen(false); - await updateNewMessageToRead(); - }} - > -
- {history?.map((item, index) => { - if (item.predicate === 1) { - return ( -
-
-

{item.message}

-

- {new Date(item.ct * 1000).toLocaleString()} -

-
- -
- ); - } else { - return ( -
- -
-

{item.message}

-

- {new Date(item.ct * 1000).toLocaleString()} -

-
-
- ); - } - })} -
-