删除 test.jsx
This commit is contained in:
parent
e9a2245ba3
commit
55a599fa90
373
test.jsx
373
test.jsx
|
|
@ -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 (
|
||||
<div
|
||||
className="flex flex-col cursor-pointer"
|
||||
onClick={() => {
|
||||
setModalInfo(item);
|
||||
setIsModalOpen(!isModalOpen);
|
||||
updateMessageStatus();
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-row py-2 items-center justify-between">
|
||||
<div className="flex flex-row">
|
||||
<img
|
||||
className="w-12 h-12 rounded-full"
|
||||
src={item.avatar.images[0].urls[0]}
|
||||
alt=""
|
||||
/>
|
||||
<div className="flex flex-col justify-around ml-2">
|
||||
<p className="text-base font-bold">
|
||||
<span className="text-white font-bold bg-red-400 px-2 rounded-lg">
|
||||
{item.contents.length}条未读
|
||||
</span>
|
||||
{item.name}
|
||||
</p>
|
||||
<p className="text-gray-400 text-sm">
|
||||
{item.contents[0].message}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-400 text-sm">
|
||||
{new Date(item.contents[0].ct * 1000).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
<Divider className="m-0 border-gray-400" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
//保存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 (
|
||||
<Modal
|
||||
title={`与【${modalInfo.name}】的聊天`}
|
||||
footer={null}
|
||||
open={isModalOpen}
|
||||
onCancel={async () => {
|
||||
setIsModalOpen(false);
|
||||
await updateNewMessageToRead();
|
||||
}}
|
||||
>
|
||||
<div
|
||||
ref={modalContentRef}
|
||||
className="flex flex-col h-96 overflow-y-scroll"
|
||||
>
|
||||
{history?.map((item, index) => {
|
||||
if (item.predicate === 1) {
|
||||
return (
|
||||
<div key={index} className="flex flex-row justify-end my-1">
|
||||
<div className="flex flex-col mr-2 p-2 bg-gray-200 rounded-lg">
|
||||
<p className="text-base">{item.message}</p>
|
||||
<p className="text-gray-400 text-sm text-end mt-2">
|
||||
{new Date(item.ct * 1000).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
<img
|
||||
className="w-12 h-12 rounded-full"
|
||||
src="https://s2.loli.net/2023/08/03/mu51haYNUOPXkqR.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div key={index} className="flex flex-row justify-start my-1">
|
||||
<img
|
||||
className="w-12 h-12 rounded-full"
|
||||
src={modalInfo.avatar.images[0].urls[0]}
|
||||
alt=""
|
||||
/>
|
||||
<div className="flex flex-col ml-2 p-2 bg-gray-200 rounded-lg">
|
||||
<p className="text-base">{item.message}</p>
|
||||
<p className="text-gray-400 text-sm text-start mt-2">
|
||||
{new Date(item.ct * 1000).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
<TextArea
|
||||
value={messageContent}
|
||||
onChange={(e) => setMessageContent(e.target.value)}
|
||||
className="mt-2"
|
||||
rows={2}
|
||||
/>
|
||||
<div className="flex flex-col mt-2">
|
||||
<Button
|
||||
onClick={() => sendMessage(messageContent)}
|
||||
className="w-24 self-end"
|
||||
type="primary"
|
||||
>
|
||||
发送
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="p-4">
|
||||
<div>
|
||||
{unreadMessageList.length === 0 && <h1>暂无未读消息</h1>}
|
||||
{unreadMessageList?.map((item, index) => (
|
||||
<MassageItem key={index} item={item} />
|
||||
))}
|
||||
</div>
|
||||
<MessageModal />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue