442 lines
13 KiB
JavaScript
442 lines
13 KiB
JavaScript
"use client";
|
||
|
||
import React, { useState, useRef, useEffect, useCallback } from "react";
|
||
|
||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||
import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
|
||
import { Input, Button, Toast, Avatar, DotLoading } from "antd-mobile";
|
||
import { useRouter } from "next/navigation";
|
||
import { get } from "@/utils/storeInfo";
|
||
import requireAPI from "@/utils/requireAPI";
|
||
import { formatDeadline } from "@/utils/tools";
|
||
/*
|
||
params格式：
|
||
{
|
||
mid: item.mid,
|
||
}
|
||
*/
|
||
|
||
export default function MessageDetail({}) {
|
||
// const [hasMore, setHasMore] = useState(true);
|
||
const router = useRouter();
|
||
const [oldMessages, setOldMessages] = useState([]);
|
||
const [messages, setMessages] = useState([]);
|
||
const [handledmessages, setHandledmessages] = useState([]);
|
||
const [sessionId, setSessionId] = useState();
|
||
const [userInfo, setUserInfo] = useState(null);
|
||
const [newMessage, setNewMessage] = useState("");
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
const [offset, setOffset] = useState(0);
|
||
const [more, setMore] = useState(1);
|
||
const scrollBox = useRef();
|
||
const toScrollBottom = useRef(0);
|
||
useEffect(() => {
|
||
const userData = get("account");
|
||
setUserInfo(userData);
|
||
getSession(userData.mid);
|
||
}, []);
|
||
useEffect(() => {
|
||
const intervalId = setInterval(() => {
|
||
// console.log("oldMessages[0]", oldMessages[0]);
|
||
if (oldMessages[0]) {
|
||
updateMessages(oldMessages[0]?.id, 0, oldMessages);
|
||
// toScrollBottom.current = 1;
|
||
|
||
}
|
||
}, 3000); // 间隔时间为3秒
|
||
|
||
// 在组件卸载时清除定时器
|
||
return () => {
|
||
clearInterval(intervalId);
|
||
};
|
||
}, [oldMessages]);
|
||
useEffect(() => {
|
||
if (toScrollBottom.current) {
|
||
|
||
scrollBox.current?.scrollTo(0, scrollBox.current.scrollHeight+50);
|
||
toScrollBottom.current = 0;
|
||
}
|
||
}, [messages]);
|
||
// useEffect(() => {
|
||
// if (offset == 12) {
|
||
// console.log("offset--------", offset);
|
||
|
||
// scrollBox.current?.scrollTo(0, scrollBox.current.scrollHeight);
|
||
|
||
// // console.log("scrollBox.current",scrollBox.current.scrollHeight,scrollBox.current.scrollTop)
|
||
// }
|
||
// }, [offset]);
|
||
useEffect(() => {
|
||
if (sessionId && userInfo.mid) {
|
||
loadEarlierHistory().then((res) => {
|
||
setMessages((old) => {
|
||
toScrollBottom.current = 1;
|
||
return res;
|
||
});
|
||
});
|
||
}
|
||
}, [sessionId]);
|
||
//查询session
|
||
const getSession = async (mid) => {
|
||
setLoading(true)
|
||
try {
|
||
const data =
|
||
await requireAPI("POST", "/api/contact_customer_service_session/list_by_mid", {
|
||
body: {
|
||
mid: Number(mid),
|
||
},
|
||
});
|
||
if (data.ret === -1) {
|
||
Toast.show({
|
||
icon: "fail",
|
||
content: data.msg,
|
||
position: "top",
|
||
});
|
||
}
|
||
setLoading(false)
|
||
if (data.data.session) {
|
||
setSessionId(data.data.session.id);
|
||
return;
|
||
}
|
||
} catch (error) {
|
||
console.error(error);
|
||
}
|
||
};
|
||
//创建session
|
||
const createSession = async () => {
|
||
setLoading(true)
|
||
try {
|
||
const data =
|
||
await requireAPI("POST", "/api/contact_customer_service_session/create", {
|
||
body: {
|
||
sub_mid: Number(mid),
|
||
obj_mid: 0,
|
||
},
|
||
});
|
||
if (data.ret === -1) {
|
||
Toast.show({
|
||
icon: "fail",
|
||
content: data.msg,
|
||
position: "top",
|
||
});
|
||
}
|
||
setSessionId(data.data.session_id);
|
||
setLoading(false)
|
||
} catch (error) {
|
||
console.error(error);
|
||
}
|
||
};
|
||
//请求历史记录
|
||
const loadEarlierHistory = async () => {
|
||
if (!more) return;
|
||
try {
|
||
setLoading(true)
|
||
const data =
|
||
await requireAPI("POST", "/api/contact_customer_service/list_by_session_id", {
|
||
body: {
|
||
session_id: sessionId,
|
||
offset: offset,
|
||
limit: 12,
|
||
},
|
||
});
|
||
if (data.ret === -1) {
|
||
Toast.show({
|
||
icon: "fail",
|
||
content: data.msg,
|
||
position: "top",
|
||
});
|
||
return;
|
||
}
|
||
setOffset(data.data.offset);
|
||
setMore(data.data.more);
|
||
let mathNewMessages = handleData([...oldMessages,...data.data.list]);
|
||
// setMessages((prev) => [...prev, ...temMessages]);
|
||
setLoading(false)
|
||
return mathNewMessages;
|
||
} catch (error) {
|
||
console.error(error);
|
||
}
|
||
};
|
||
//发送私信功能
|
||
const onSend = useCallback(
|
||
async (message, lastId, oldArr) => {
|
||
if (message == "") {
|
||
Toast.show({
|
||
icon: "error",
|
||
content: "不可发送空内容",
|
||
position: "top",
|
||
});
|
||
return;
|
||
}
|
||
|
||
//如果是第一次发送，需要创建session
|
||
if (!sessionId) await createSession();
|
||
|
||
//查询历史记录的时候后移一位，防止记录重复
|
||
setOffset((prev) => prev + 1);
|
||
//请求接口发送私信
|
||
try {
|
||
const data =
|
||
await requireAPI("POST", "/api/contact_customer_service/create", {
|
||
body: {
|
||
session_id: sessionId,
|
||
predicate: 0,
|
||
message,
|
||
},
|
||
});
|
||
if (data.ret === -1) {
|
||
Toast.show({
|
||
icon: "error",
|
||
content: data.msg,
|
||
position: "top",
|
||
});
|
||
return;
|
||
}
|
||
// updateLatestHistory();
|
||
// console.log("oldArr", oldArr);
|
||
updateMessages(lastId, 0, oldArr).then(res=>{
|
||
setNewMessage("");
|
||
toScrollBottom.current = 1;
|
||
});
|
||
} catch (error) {
|
||
console.error(error);
|
||
}
|
||
// //每次发送都缓存信息到本地
|
||
// addArr(`${selfData.mid}_to_${params.mid}_messages`, messages);
|
||
},
|
||
[userInfo, sessionId]
|
||
);
|
||
// async function doRefresh() {
|
||
// await sleep(1000);
|
||
// Toast.show({
|
||
// icon: "fail",
|
||
// content: "刷新失败",
|
||
// });
|
||
// throw new Error("刷新失败");
|
||
// }
|
||
async function loadMore() {
|
||
if (sessionId && userInfo.mid && offset && more) {
|
||
const append = await loadEarlierHistory();
|
||
if (append) {
|
||
// setMessages((val) => [...val, ...append]);
|
||
setMessages(append);
|
||
// setHasMore(append.length > 0);
|
||
}
|
||
}
|
||
}
|
||
|
||
const handleData = (list) => {
|
||
// console.log("list", list);
|
||
const account = get("account");
|
||
const temMessages = list.map((item) => {
|
||
if (item.predicate === 0) {
|
||
return {
|
||
predicate: item.predicate,
|
||
_id: item.id,
|
||
// createdAt: new Date(item.ct * 1000).toISOString(),
|
||
createdAt: item.ct,
|
||
text: item.message,
|
||
user: {
|
||
_id: account?.mid,
|
||
name: account?.name,
|
||
avatar: account?.avatar?.images[0]?.urls[0],
|
||
},
|
||
};
|
||
} else {
|
||
return {
|
||
predicate: item.predicate,
|
||
_id: item.id,
|
||
createdAt: item.ct,
|
||
text: item.message,
|
||
user: {
|
||
_id: 0,
|
||
name: "客服",
|
||
avatar: "images/icon.png",
|
||
},
|
||
};
|
||
}
|
||
});
|
||
// console.log("handledmessages......", handledmessages);
|
||
// console.log("[...messages, ...temMessages]", temMessages);
|
||
setHandledmessages(temMessages);
|
||
setOldMessages(list);
|
||
let newMessages = temMessages.reverse();
|
||
let mathNewMessages = newMessages.reduce(
|
||
(accumulator, currentValue, index, sourceArray) => {
|
||
// console.log(
|
||
// accumulator.time,
|
||
// "----",
|
||
// currentValue.createdAt,
|
||
// "---",
|
||
// index
|
||
// );
|
||
if (accumulator.time > currentValue.createdAt) {
|
||
let newData = {
|
||
...accumulator,
|
||
time: accumulator.time,
|
||
messages: [...accumulator.messages, currentValue],
|
||
totalArr:
|
||
index == sourceArray.length - 1
|
||
? [
|
||
...accumulator.totalArr,
|
||
[...accumulator.messages, currentValue],
|
||
]
|
||
: [...accumulator.totalArr],
|
||
};
|
||
return newData;
|
||
} else {
|
||
let newData = {
|
||
...accumulator,
|
||
time: currentValue.createdAt + 60 * 3,
|
||
messages: [currentValue],
|
||
totalArr:
|
||
index == sourceArray.length - 1
|
||
? [
|
||
...accumulator.totalArr,
|
||
accumulator.messages,
|
||
[currentValue],
|
||
]
|
||
: [...accumulator.totalArr, accumulator.messages],
|
||
};
|
||
return newData;
|
||
}
|
||
},
|
||
{ time: newMessages[0]?.createdAt + 60 * 3, messages: [], totalArr: [] }
|
||
);
|
||
return mathNewMessages.totalArr;
|
||
};
|
||
|
||
const updateMessages = async (lastId, currentOffset, oldArr) => {
|
||
// console.log("lastId", lastId);
|
||
try {
|
||
const data =
|
||
await requireAPI("POST", "/api/contact_customer_service/list_by_session_id", {
|
||
body: {
|
||
session_id: sessionId,
|
||
offset: currentOffset,
|
||
limit: 12,
|
||
},
|
||
});
|
||
if (data.ret === -1) {
|
||
Toast.show({
|
||
icon: "fail",
|
||
content: data.msg,
|
||
position: "top",
|
||
});
|
||
return;
|
||
}
|
||
let newData = data.data.list.filter((element) => {
|
||
return element.id > lastId;
|
||
});
|
||
// console.log("[...messages,...newData]", [...newData]);
|
||
let mathNewMessages = handleData([...newData,...oldArr]);
|
||
setMessages((old) => {
|
||
toScrollBottom.current = 1;
|
||
return mathNewMessages;
|
||
});
|
||
return
|
||
} catch (error) {
|
||
console.error(error);
|
||
}
|
||
};
|
||
return (
|
||
<div className="bg-[#13121F] h-screen overflow-y-auto" ref={scrollBox}>
|
||
<div className="p-4 fixed top-0 z-10 w-full bg-black">
|
||
<div className="flex items-center justify-center absolute">
|
||
<FontAwesomeIcon
|
||
icon={faAngleLeft}
|
||
size="xl"
|
||
onClick={() => {
|
||
router.back();
|
||
}}
|
||
/>
|
||
</div>
|
||
<p className="text-base text-center">在线客服</p>
|
||
</div>
|
||
<div>
|
||
<div className="my-[57px]">
|
||
<div className="flex justify-center py-2">
|
||
<div
|
||
className="px-3 py-2 rounded-full bg-[#FFFFFF1A]"
|
||
|
||
>
|
||
{loading? <DotLoading /> : more ? <span onClick={loadMore}>查看更早</span>:<span>无更早消息</span>}
|
||
</div>
|
||
</div>
|
||
<ul className="py-2">
|
||
{messages?.map((item, index) => (
|
||
<li key={index}>
|
||
<p className="my-2 text-center">
|
||
{formatDeadline(item[0].createdAt)}
|
||
</p>
|
||
<ul className="px-4 overflow-y-auto scrollbarBox_hidden">
|
||
{item.map((it) => (
|
||
<li key={it?._id} className="py-3 rounded-lg ">
|
||
<div className="flex w-full">
|
||
{it?.predicate == 1 ? (
|
||
<div className="flex justify-start w-full items-center">
|
||
<Avatar
|
||
className="mr-2"
|
||
style={{ "--border-radius": "50px" }}
|
||
width={32}
|
||
height={32}
|
||
src={it?.user.avatar}
|
||
/>
|
||
<div
|
||
className="block rounded-lg py-2 px-3 bg-blue-500"
|
||
style={{ borderTopLeftRadius: 0 }}
|
||
>
|
||
{it?.text}
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="flex justify-end w-full items-center">
|
||
<div
|
||
className="block rounded-lg py-2 px-3 bg-blue-500"
|
||
style={{ borderTopRightRadius: 0 }}
|
||
>
|
||
{it?.text}
|
||
</div>
|
||
<Avatar
|
||
className="ml-2"
|
||
style={{ "--border-radius": "50px" }}
|
||
width={32}
|
||
height={32}
|
||
src={it?.user?.avatar}
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</li>
|
||
))}
|
||
{}
|
||
{/* <InfiniteScroll loadMore={loadMore} hasMore={more} /> */}
|
||
</ul>
|
||
</div>
|
||
<div className="w-full h-16 fixed bottom-0 grid grid-cols-[1fr_68px] bg-black items-center p-2 border-t-2 border-[#ffffff2a]">
|
||
<div className="rounded bg-[#222036] px-4 py-2 mr-2">
|
||
<Input
|
||
placeholder="输入新消息"
|
||
className=""
|
||
value={newMessage}
|
||
onChange={setNewMessage}
|
||
/>
|
||
</div>
|
||
<Button
|
||
size="middle"
|
||
block
|
||
onClick={() => onSend(newMessage, oldMessages[0].id, oldMessages)}
|
||
style={{ "--background-color": "#FF669E", color: "#FFFFFF" }}
|
||
>
|
||
发送
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|