“联系客服”增加session接口；图片审核加入“机审失败”tab
This commit is contained in:
parent
97a3e498b4
commit
e9a2245ba3
1
.env
1
.env
|
|
@ -1,2 +1 @@
|
|||
REACT_APP_API_URL=https://api.wishpal.cn
|
||||
REACT_APP_RSA_KEY=-----BEGIN PUBLIC KEY-----MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAMXPIjKV6CMi5O9tIXJWNIfnqXjqOZ1KmRByRAP073DU+gzMLygzEsrztJzbz/K/Julkz6XhheZ8vdz+boAl1HsCAwEAAQ==-----END PUBLIC KEY-----
|
||||
|
|
@ -47,5 +47,5 @@
|
|||
"devDependencies": {
|
||||
"tailwindcss": "^3.3.5"
|
||||
},
|
||||
"proxy": "https://api.tiefen.fun"
|
||||
"proxy": "https://api.wishpal.cn"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,27 @@
|
|||
import React, { useState, useEffect, useRef } from "react";
|
||||
import { Divider, Modal, Input, Button } from "antd";
|
||||
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 ContactContent = (props) => {
|
||||
const current = props.current;
|
||||
//请求未读消息队列
|
||||
const [unreadMessageList, setUnreadMessageList] = useState([]);
|
||||
const getUnreadMessages = async () => {
|
||||
if (isModalOpen) return;
|
||||
if (current !== "unread") return;
|
||||
try {
|
||||
//获取全部未读信息
|
||||
const base = baseRequest();
|
||||
//查询所有未读信息的session
|
||||
const response = await fetch(
|
||||
"/op/contact_customer_service/list_unread_group_by_mid",
|
||||
"/op/contact_customer_service/list_unread_group_by_session_id",
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
|
|
@ -28,7 +38,7 @@ export default function Contact() {
|
|||
return;
|
||||
}
|
||||
//获取用户头像、昵称
|
||||
const userMids = data.data.list.map((item) => item.mid);
|
||||
const userMids = data.data.list.map((item) => item.sub_mid);
|
||||
if (userMids.length === 0) {
|
||||
setUnreadMessageList([]);
|
||||
return;
|
||||
|
|
@ -51,7 +61,7 @@ export default function Contact() {
|
|||
//合并未读信息和用户资料数组
|
||||
const combinedArray = data.data.list.map((item1) => {
|
||||
const matchingItem = userData.data.list.find(
|
||||
(item2) => item2.mid === item1.mid
|
||||
(item2) => item2.mid === item1.sub_mid
|
||||
);
|
||||
return { ...item1, ...matchingItem };
|
||||
});
|
||||
|
|
@ -66,6 +76,7 @@ export default function Contact() {
|
|||
|
||||
//轮询更新未读消息队列
|
||||
useEffect(() => {
|
||||
if (current !== "unread") return;
|
||||
getUnreadMessages();
|
||||
// 设置轮询请求，每隔一定时间执行一次
|
||||
const intervalId = setInterval(() => {
|
||||
|
|
@ -80,6 +91,7 @@ export default function Contact() {
|
|||
|
||||
const { TextArea } = Input;
|
||||
|
||||
//对话列表的单个组件
|
||||
const MassageItem = ({ item }) => {
|
||||
//设置消息为已读
|
||||
const ids = item.contents?.map((temItem) => temItem.id);
|
||||
|
|
@ -109,7 +121,6 @@ export default function Contact() {
|
|||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col cursor-pointer"
|
||||
|
|
@ -128,9 +139,11 @@ export default function Contact() {
|
|||
/>
|
||||
<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>
|
||||
{current === "unread" && (
|
||||
<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">
|
||||
|
|
@ -155,20 +168,20 @@ export default function Contact() {
|
|||
//获取聊天记录，并设置为已读
|
||||
const getHistory = async () => {
|
||||
try {
|
||||
//获取全部未读信息
|
||||
//获取最新100条信息
|
||||
const base = baseRequest();
|
||||
if (!modalInfo.mid) return;
|
||||
const response = await fetch(
|
||||
"/op/contact_customer_service/list_by_mid",
|
||||
"/op/contact_customer_service/list_by_session_id",
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
mid: modalInfo.mid,
|
||||
session_id: modalInfo.session_id,
|
||||
offset: 0,
|
||||
limit: 30,
|
||||
limit: 100,
|
||||
...base,
|
||||
}),
|
||||
}
|
||||
|
|
@ -252,8 +265,7 @@ export default function Contact() {
|
|||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
sub_mid: modalInfo.mid,
|
||||
obj_mid: base.b_mid,
|
||||
session_id: modalInfo.session_id,
|
||||
predicate: 1,
|
||||
message: message,
|
||||
...base,
|
||||
|
|
@ -352,15 +364,134 @@ export default function Contact() {
|
|||
);
|
||||
};
|
||||
|
||||
//获取所有对话
|
||||
const [allMessageList, setAllMessageList] = useState([]);
|
||||
useEffect(() => {
|
||||
if (current !== "all") return;
|
||||
const getAllMessages = async () => {
|
||||
try {
|
||||
const base = baseRequest();
|
||||
const response = await fetch(
|
||||
`/op/contact_customer_service_session/list`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
offset: 0,
|
||||
limit: 1000,
|
||||
...base,
|
||||
}),
|
||||
}
|
||||
);
|
||||
const data = await response.json();
|
||||
if (data.ret === -1) {
|
||||
alert(data.msg);
|
||||
return;
|
||||
}
|
||||
//获取用户头像、昵称
|
||||
const userMids = data.data.list.map((item) => item.sub_mid);
|
||||
if (userMids.length === 0) {
|
||||
setAllMessageList([]);
|
||||
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.sub_mid
|
||||
);
|
||||
return { ...item1, ...matchingItem };
|
||||
});
|
||||
//处理数据格式
|
||||
const processedArray = combinedArray.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
session_id: item.id,
|
||||
contents: [{ message: item.recent_message, ct: item.ut }],
|
||||
};
|
||||
});
|
||||
setAllMessageList(processedArray);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
getAllMessages();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="p-4">
|
||||
<div>
|
||||
{unreadMessageList.length === 0 && <h1>暂无未读消息</h1>}
|
||||
{unreadMessageList?.map((item, index) => (
|
||||
<MassageItem key={index} item={item} />
|
||||
))}
|
||||
</div>
|
||||
{current === "unread" && (
|
||||
<div>
|
||||
{unreadMessageList.length === 0 && <h1>暂无未读消息</h1>}
|
||||
{unreadMessageList?.map((item, index) => (
|
||||
<MassageItem key={index} item={item} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{current === "all" && (
|
||||
<div>
|
||||
{allMessageList?.map((item, index) => (
|
||||
<MassageItem key={index} item={item} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<MessageModal />
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default function Contact() {
|
||||
const navigate = useNavigate();
|
||||
//当前tab
|
||||
const location = useLocation();
|
||||
const pathname = location.pathname.split("/")[2] || "unread";
|
||||
const [current, setCurrent] = useState(pathname);
|
||||
//tab名称
|
||||
const items = [
|
||||
{
|
||||
label: "未读消息",
|
||||
key: "unread",
|
||||
},
|
||||
{
|
||||
label: "全部消息",
|
||||
key: "all",
|
||||
},
|
||||
];
|
||||
const onClick = (e) => {
|
||||
setCurrent(e.key);
|
||||
navigate(e.key);
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Menu
|
||||
onClick={onClick}
|
||||
selectedKeys={[current]}
|
||||
mode="horizontal"
|
||||
items={items}
|
||||
/>
|
||||
<Routes>
|
||||
<Route path="/" element={<Navigate to="/contact/unread" />} />
|
||||
<Route path="/unread" element={<ContactContent current="unread" />} />
|
||||
<Route path="/all" element={<ContactContent current="all" />} />
|
||||
</Routes>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,12 +45,20 @@ const ImageMachineReviewContent = (props) => {
|
|||
render: (data) => (
|
||||
<div>
|
||||
{data?.map((item, index) => {
|
||||
if (item.status === 2 || item.status === 5)
|
||||
if (item.status === 2 || item.status === 5) {
|
||||
return (
|
||||
<p key={index} className="text-green-400">
|
||||
图{index + 1}无违规
|
||||
</p>
|
||||
);
|
||||
}
|
||||
if (item.status === 10) {
|
||||
return (
|
||||
<p key={index} className="text-green-400">
|
||||
图{index + 1}审核失败
|
||||
</p>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div key={index}>
|
||||
<p className="text-red-400">图{index + 1}违规情况：</p>
|
||||
|
|
@ -125,9 +133,10 @@ const ImageMachineReviewContent = (props) => {
|
|||
<div>
|
||||
<Space>
|
||||
<Space.Compact direction="vertical">
|
||||
{current === "rollbackbymachine" && (
|
||||
{(current === "rollbackbymachine" ||
|
||||
current === "machinereviewfail") && (
|
||||
<Button type="primary" onClick={() => onClickSubmit(record)}>
|
||||
{current === "rollbackbymachine" && "通过"}
|
||||
通过
|
||||
</Button>
|
||||
)}
|
||||
</Space.Compact>
|
||||
|
|
@ -183,6 +192,9 @@ const ImageMachineReviewContent = (props) => {
|
|||
case "rollbackbymachine":
|
||||
querryStatus = 4;
|
||||
break;
|
||||
case "machinereviewfail":
|
||||
querryStatus = 10;
|
||||
break;
|
||||
case "passbymachine":
|
||||
querryStatus = 2;
|
||||
break;
|
||||
|
|
@ -287,6 +299,10 @@ export default function ImageMachineReview() {
|
|||
label: "机审回退",
|
||||
key: "rollbackbymachine",
|
||||
},
|
||||
{
|
||||
label: "机审失败",
|
||||
key: "machinereviewfail",
|
||||
},
|
||||
{
|
||||
label: "机审通过",
|
||||
key: "passbymachine",
|
||||
|
|
@ -319,6 +335,10 @@ export default function ImageMachineReview() {
|
|||
path="/rollbackbymachine"
|
||||
element={<ImageMachineReviewContent current="rollbackbymachine" />}
|
||||
/>
|
||||
<Route
|
||||
path="/machinereviewfail"
|
||||
element={<ImageMachineReviewContent current="machinereviewfail" />}
|
||||
/>
|
||||
<Route
|
||||
path="/passbymachine"
|
||||
element={<ImageMachineReviewContent current="passbymachine" />}
|
||||
|
|
|
|||
643
test.jsx
643
test.jsx
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useState, useRef, useEffect } from "react";
|
||||
import { Form, Input, Button, Space, Table, Menu, Image } from "antd";
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import { Divider, Modal, Input, Button, Menu } from "antd";
|
||||
import {
|
||||
Routes,
|
||||
Route,
|
||||
|
|
@ -9,334 +9,365 @@ import {
|
|||
} from "react-router-dom";
|
||||
import baseRequest from "../../utils/baseRequest";
|
||||
|
||||
const ImageReviewContent = (props) => {
|
||||
const { TextArea } = Input;
|
||||
const current = props.current;
|
||||
//表头
|
||||
const columns = [
|
||||
{
|
||||
title: "新内容",
|
||||
dataIndex: "newMedia",
|
||||
key: "newMedia",
|
||||
render: (data) => (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{data?.map((item, index) => (
|
||||
<Image key={index} src={item.urls[0]} width={100} />
|
||||
))}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "旧内容",
|
||||
dataIndex: "oldMedia",
|
||||
key: "oldMedia",
|
||||
render: (data) => (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{data?.map((item, index) => (
|
||||
<Image key={index} src={item.urls[0]} width={100} />
|
||||
))}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "审核结果",
|
||||
dataIndex: "info",
|
||||
key: "info",
|
||||
render: (data) => (
|
||||
<div>
|
||||
{data?.map((item, index) => {
|
||||
if (item.status === 2 || item.status === 5)
|
||||
return (
|
||||
<p key={index} className="text-green-400">
|
||||
图{index + 1}无违规
|
||||
</p>
|
||||
);
|
||||
return (
|
||||
<div key={index}>
|
||||
<p className="text-red-400">图{index + 1}违规情况：</p>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
<div className="border-2 border-black bg-gray-200">
|
||||
<p>色情审核：</p>
|
||||
<ul>
|
||||
<li>建议：{item.porn_scene_suggestion}</li>
|
||||
<li>结果：{item.porn_scene_label}</li>
|
||||
<li>结果：{item.porn_scene_rate.toFixed(1)}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="border-2 border-black bg-gray-200">
|
||||
<p>暴恐审核：</p>
|
||||
<ul>
|
||||
<li>建议：{item.terrorism_scene_suggestion}</li>
|
||||
<li>结果：{item.terrorism_scene_label}</li>
|
||||
<li>结果：{item.terrorism_scene_rate.toFixed(1)}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="border-2 border-black bg-gray-200">
|
||||
<p>广告审核：</p>
|
||||
<ul>
|
||||
<li>建议：{item.ad_scene_suggestion}</li>
|
||||
<li>结果：{item.ad_scene_label}</li>
|
||||
<li>结果：{item.ad_scene_rate.toFixed(1)}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="border-2 border-black bg-gray-200">
|
||||
<p>不良审核：</p>
|
||||
<ul>
|
||||
<li>建议：{item.live_scene_suggestion}</li>
|
||||
<li>结果：{item.live_scene_label}</li>
|
||||
<li>结果：{item.live_scene_rate.toFixed(1)}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="border-2 border-black bg-gray-200">
|
||||
<p>logo审核：</p>
|
||||
<ul>
|
||||
<li>建议：{item.logo_scene_suggestion}</li>
|
||||
<li>结果：{item.logo_scene_label}</li>
|
||||
<li>结果：{item.logo_scene_rate.toFixed(1)}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "提交时间",
|
||||
dataIndex: "submitTime",
|
||||
key: "submitTime",
|
||||
},
|
||||
{
|
||||
title: "备注",
|
||||
dataIndex: "remarks",
|
||||
key: "remarks",
|
||||
render: (_, record) => (
|
||||
<Form.Item name={record.id} initialValue={record.remarks}>
|
||||
<TextArea disabled rows={4} />
|
||||
</Form.Item>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "opeartion",
|
||||
key: "opeartion",
|
||||
render: (_, record) => (
|
||||
<div>
|
||||
<Space>
|
||||
<Space.Compact direction="vertical">
|
||||
{current === "rollbackbymachine" && (
|
||||
<Button type="primary" onClick={() => onClickSubmit(record)}>
|
||||
{current === "rollbackbymachine" && "通过"}
|
||||
</Button>
|
||||
)}
|
||||
</Space.Compact>
|
||||
</Space>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
//给表单绑定ref
|
||||
const formRef = useRef(null);
|
||||
//点击修改状态按钮
|
||||
const onClickSubmit = (record) => {
|
||||
formRef.current.record = record;
|
||||
formRef.current.btn = "submit";
|
||||
formRef.current.submit();
|
||||
};
|
||||
//提交表单
|
||||
const handleSubmit = async () => {
|
||||
//提交数据
|
||||
export default function Contact() {
|
||||
//请求未读消息队列
|
||||
const [unreadMessageList, setUnreadMessageList] = useState([]);
|
||||
const getUnreadMessages = async () => {
|
||||
if (isModalOpen) return;
|
||||
try {
|
||||
//获取全部未读信息
|
||||
const base = baseRequest();
|
||||
const response = await fetch("/op/image_audit_task/pass_batch", {
|
||||
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({
|
||||
tasks: [formRef.current.record.others],
|
||||
mids: userMids,
|
||||
...base,
|
||||
}),
|
||||
});
|
||||
const approveData = await response.json();
|
||||
if (approveData.ret === -1) {
|
||||
alert(approveData.msg);
|
||||
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);
|
||||
}
|
||||
//取消数据展示
|
||||
setShowData(
|
||||
showData.filter((item) => item.id !== formRef.current.record.others.id)
|
||||
};
|
||||
|
||||
//控制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>
|
||||
);
|
||||
};
|
||||
//获取数据
|
||||
const [data, setData] = useState([]);
|
||||
const [offset, setOffset] = useState(0);
|
||||
const [more, setMore] = useState(1);
|
||||
const getData = async () => {
|
||||
if (!more) return;
|
||||
let querryStatus;
|
||||
switch (current) {
|
||||
case "rollbackbymachine":
|
||||
querryStatus = 4;
|
||||
break;
|
||||
case "passbymachine":
|
||||
querryStatus = 2;
|
||||
break;
|
||||
case "passbyoperator":
|
||||
querryStatus = 5;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
try {
|
||||
const base = baseRequest();
|
||||
const response = await fetch("/op/image_audit_task/list", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
status: querryStatus,
|
||||
offset: offset,
|
||||
limit: 20,
|
||||
...base,
|
||||
}),
|
||||
});
|
||||
const temData = await response.json();
|
||||
console.log(
|
||||
JSON.stringify({
|
||||
status: querryStatus,
|
||||
offset: offset,
|
||||
limit: 20,
|
||||
...base,
|
||||
})
|
||||
);
|
||||
console.log(temData);
|
||||
if (temData.ret === -1) {
|
||||
alert(temData.msg);
|
||||
return;
|
||||
|
||||
//保存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);
|
||||
}
|
||||
//匹配表格格式
|
||||
const structedData = temData.data.list.map((item, index) => {
|
||||
return {
|
||||
key: index,
|
||||
id: item.id,
|
||||
newMedia: item?.audited_media?.images,
|
||||
oldMedia: item?.old_media?.images,
|
||||
info: item.image_audits,
|
||||
submitTime: new Date(item.ct * 1000).toLocaleString(),
|
||||
remarks: item.remarks,
|
||||
others: {
|
||||
id: item.id,
|
||||
audited_media: item.audited_media,
|
||||
associative_database: item.associative_database,
|
||||
associative_table_name: item.associative_table_name,
|
||||
associative_table_id: item.associative_table_id,
|
||||
associative_table_column: item.associative_table_column,
|
||||
};
|
||||
|
||||
//轮询更新聊天记录
|
||||
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",
|
||||
},
|
||||
};
|
||||
});
|
||||
setData([...data, ...structedData]);
|
||||
setOffset(temData.data.offset);
|
||||
setMore(temData.data.more);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
getData();
|
||||
}, [current]);
|
||||
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 [showData, setShowData] = useState([]);
|
||||
useEffect(() => {
|
||||
setShowData(data);
|
||||
}, [data]);
|
||||
//表单提交失败
|
||||
const onFinishFailed = (errorInfo) => {
|
||||
console.log("Failed:", errorInfo);
|
||||
};
|
||||
return (
|
||||
<div style={{ marginLeft: 20, marginRight: 20 }}>
|
||||
<p>
|
||||
{current === "rollbackbymachine" && `机审核违规${showData.length}条`}
|
||||
{current === "passbymachine" && `机审核通过${showData.length}条`}
|
||||
{current === "passbyoperator" && `运营通过${showData.length}条`}
|
||||
</p>
|
||||
<Form
|
||||
ref={formRef}
|
||||
name="remarks"
|
||||
onFinish={handleSubmit}
|
||||
onFinishFailed={onFinishFailed}
|
||||
//保存输入框内容
|
||||
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();
|
||||
}}
|
||||
>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={showData}
|
||||
pagination={{ pageSize: 20 }}
|
||||
scroll={{ y: window.innerHeight - 300 }}
|
||||
<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}
|
||||
/>
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default function ImageReview() {
|
||||
const navigate = useNavigate();
|
||||
//当前tab
|
||||
const location = useLocation();
|
||||
const pathname = location.pathname.split("/")[2] || "rollbackbymachine";
|
||||
const [current, setCurrent] = useState(pathname);
|
||||
//tab名称
|
||||
const items = [
|
||||
{
|
||||
label: "机审回退",
|
||||
key: "rollbackbymachine",
|
||||
},
|
||||
{
|
||||
label: "机审通过",
|
||||
key: "passbymachine",
|
||||
},
|
||||
{
|
||||
label: "运营通过",
|
||||
key: "passbyoperator",
|
||||
},
|
||||
];
|
||||
const onClick = (e) => {
|
||||
setCurrent(e.key);
|
||||
navigate(e.key);
|
||||
window.location.reload();
|
||||
<div className="flex flex-col mt-2">
|
||||
<Button
|
||||
onClick={() => sendMessage(messageContent)}
|
||||
className="w-24 self-end"
|
||||
type="primary"
|
||||
>
|
||||
发送
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Menu
|
||||
onClick={onClick}
|
||||
selectedKeys={[current]}
|
||||
mode="horizontal"
|
||||
items={items}
|
||||
/>
|
||||
<Routes>
|
||||
<Route
|
||||
path="/"
|
||||
element={<Navigate to="/imageReview/rollbackbymachine" />}
|
||||
/>
|
||||
<Route
|
||||
path="/rollbackbymachine"
|
||||
element={<ImageReviewContent current="rollbackbymachine" />}
|
||||
/>
|
||||
<Route
|
||||
path="/passbymachine"
|
||||
element={<ImageReviewContent current="passbymachine" />}
|
||||
/>
|
||||
<Route
|
||||
path="/passbyoperator"
|
||||
element={<ImageReviewContent current="passbyoperator" />}
|
||||
/>
|
||||
</Routes>
|
||||
</div>
|
||||
<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