开发: 成员聊天页面
This commit is contained in:
zhengw
@@ -1,31 +1,55 @@
|
||||
import { post } from '@/services/ajax';
|
||||
import { DownOutlined, UpOutlined } from '@ant-design/icons';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { Form, Input, Tabs } from 'antd';
|
||||
import { Form, Input, Modal, Tabs } from 'antd';
|
||||
import Spin from 'antd/lib/spin';
|
||||
import { stringify } from 'qs';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { IChat, ICustFollow, IStaffsItem } from './ChatLogsType';
|
||||
import { IChat, ICustFollow, IGroup, IGroupMembers, IStaffsItem } from './ChatLogsType';
|
||||
import { ChatBar } from './components/ChatBar';
|
||||
import { ChatTime } from './components/ChatTime';
|
||||
import styles from './index.module.scss';
|
||||
|
||||
interface ISearchWord {
|
||||
'0': string;
|
||||
'1': string;
|
||||
'2': string;
|
||||
}
|
||||
const ChatLogs: React.FC = () => {
|
||||
const [param] = useState({
|
||||
curr_page: 1,
|
||||
page_count: 20,
|
||||
msg_from: '',
|
||||
msg_to_list: '',
|
||||
room_id: '',
|
||||
});
|
||||
const [tabKey, setTabKey] = useState<string>('0');
|
||||
const tabKeyRef = useRef('0');
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
// 员工
|
||||
const [staffsList, setStaffsList] = useState<IStaffsItem[]>([]);
|
||||
const [selectStaff, setSelectStaff] = useState<IStaffsItem>();
|
||||
const selectStaffRef = useRef<IStaffsItem>();
|
||||
const [staffsList, setStaffsList] = useState<IStaffsItem[]>([]);
|
||||
const [custFollowsList, setCustFollowsList] = useState<ICustFollow[]>([]);
|
||||
|
||||
const [selectCustFollow, setCustFollow] = useState<ICustFollow>();
|
||||
// 内部联系人
|
||||
const [innerStaffsList, setInnerStaffsList] = useState<IStaffsItem[]>([]);
|
||||
const selectInnerStaffRef = useRef<IStaffsItem>();
|
||||
const [selectInnerStaff, setSelectInnerStaff] = useState<IStaffsItem>();
|
||||
|
||||
// 外部联系人
|
||||
const [custFollowsList, setCustFollowsList] = useState<ICustFollow[]>([]);
|
||||
const [selectCustFollow, setSelectCustFollow] = useState<ICustFollow>();
|
||||
const selectCustFollowRef = useRef<ICustFollow>();
|
||||
|
||||
// 群聊
|
||||
const [groupList, setGroupList] = useState<IGroup[]>([]);
|
||||
const selectGroupRef = useRef<IGroup>();
|
||||
const [selectGroup, setSelectGroup] = useState<IGroup>();
|
||||
|
||||
// 群成员
|
||||
const [groupMembersList, setGroupMembersList] = useState<IGroupMembers[]>([]);
|
||||
const groupMembersObjRef = useRef<any>({});
|
||||
|
||||
const [chatLogs, setChatLogs] = useState<IChat[]>([]);
|
||||
|
||||
const [tabs] = useState([
|
||||
@@ -46,8 +70,21 @@ const ChatLogs: React.FC = () => {
|
||||
},
|
||||
]);
|
||||
|
||||
const groupStatus = {
|
||||
'0': '跟进人正常',
|
||||
'1': '跟进人离职',
|
||||
'2': '离职继承中',
|
||||
'3': '离职继承完成',
|
||||
};
|
||||
|
||||
const [searchWord, setSearchWord] = useState<ISearchWord>({
|
||||
'0': '',
|
||||
'1': '',
|
||||
'2': '',
|
||||
});
|
||||
|
||||
const [flolowsBoxShow, setFlolowsBox] = useState(false);
|
||||
const timeDiffRef = useRef('');
|
||||
|
||||
const timeShowRef = useRef(false);
|
||||
const chatBoxRef = useRef<any>();
|
||||
const isAllChatRef = useRef(false);
|
||||
@@ -75,9 +112,15 @@ const ChatLogs: React.FC = () => {
|
||||
getStaffsList();
|
||||
|
||||
observer.observe(chatBoxRef.current, { childList: true });
|
||||
const myScript = document.createElement('script');
|
||||
myScript.src = '/public/scripts/amrnb.js';
|
||||
myScript.async = false;
|
||||
document.body.appendChild(myScript);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('click', show, false);
|
||||
observer.disconnect();
|
||||
document.body.removeChild(myScript);
|
||||
};
|
||||
}, []);
|
||||
|
||||
@@ -95,7 +138,9 @@ const ChatLogs: React.FC = () => {
|
||||
}
|
||||
});
|
||||
setStaffsList(res.data);
|
||||
setInnerStaffsList(res.data);
|
||||
getCustFollowsList();
|
||||
getGroupList();
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -104,8 +149,14 @@ const ChatLogs: React.FC = () => {
|
||||
const page = (curr: number) => {
|
||||
param.curr_page = curr;
|
||||
param.msg_from = selectStaffRef.current?.user_id + '';
|
||||
param.msg_to_list = selectCustFollowRef.current?.cust_id + '';
|
||||
timeDiffRef.current = '';
|
||||
if (tabKey == '0') {
|
||||
param.msg_to_list = selectInnerStaffRef.current?.user_id + '';
|
||||
} else if (tabKey == '1') {
|
||||
param.msg_to_list = selectCustFollowRef.current?.cust_id + '';
|
||||
} else {
|
||||
param.room_id = selectGroupRef.current?.group_id + '';
|
||||
}
|
||||
|
||||
timeShowRef.current = false;
|
||||
getChatLogsList();
|
||||
};
|
||||
@@ -114,20 +165,83 @@ const ChatLogs: React.FC = () => {
|
||||
chatLogLoadingRef.current = true;
|
||||
setChatLogLoading(true);
|
||||
post({
|
||||
url: '/ChatLogs/List',
|
||||
url: tabKey == '2' ? '/ChatLogs/GroupList' : '/ChatLogs/List',
|
||||
data: stringify(param),
|
||||
}).then((res) => {
|
||||
const count = res.count || 0;
|
||||
chatLogLoadingRef.current = false;
|
||||
|
||||
setChatLogLoading(false);
|
||||
isAllChatRef.current = count < param.page_count * param.curr_page;
|
||||
if (res.err_code == 0) {
|
||||
if (Array.isArray(res.data)) {
|
||||
if (Array.isArray(res.data) && res.data.length) {
|
||||
let arr: IChat[] = [];
|
||||
const temp = res.data.reverse();
|
||||
const mark = { curr_page: param.curr_page, msg_time: temp[temp.length - 1].msg_time };
|
||||
if (param.curr_page == 1) {
|
||||
setChatLogs([...res.data.reverse(), { curr_page: param.curr_page }]);
|
||||
arr = [...temp, mark];
|
||||
} else {
|
||||
setChatLogs([...res.data.reverse(), { curr_page: param.curr_page }, ...chatLogs]);
|
||||
arr = [...temp, mark, ...chatLogs];
|
||||
}
|
||||
if (arr) {
|
||||
let show_time = '';
|
||||
arr.forEach((el, i) => {
|
||||
el.show_time = false;
|
||||
if (i == 0) {
|
||||
el.show_time = true;
|
||||
} else {
|
||||
if (show_time == '') {
|
||||
show_time = el.msg_time;
|
||||
} else {
|
||||
if (
|
||||
new Date(el.msg_time).getTime() - new Date(show_time).getTime() >
|
||||
5 * 60 * 1000
|
||||
) {
|
||||
el.show_time = true;
|
||||
show_time = el.msg_time;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
setChatLogs(arr);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const getGroupList = () => {
|
||||
post({
|
||||
url: '/Groups/GroupsList',
|
||||
data: stringify({ user_id: selectStaffRef.current?.user_id }),
|
||||
}).then((res) => {
|
||||
if (res.err_code == 0) {
|
||||
if (Array.isArray(res.data)) {
|
||||
setGroupList(res.data);
|
||||
// if (res.data.length) {
|
||||
// setCustFollow(res.data[0]);
|
||||
// selectCustFollowRef.current = res.data[0];
|
||||
// page(1);
|
||||
// }
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 群成员
|
||||
const getGroupMembersList = () => {
|
||||
post({
|
||||
url: '/GroupMembers/GroupMembersList',
|
||||
data: stringify({ group_id: selectGroupRef.current?.group_id }),
|
||||
}).then((res) => {
|
||||
if (res.err_code == 0) {
|
||||
if (Array.isArray(res.data)) {
|
||||
setGroupMembersList(res.data);
|
||||
groupMembersObjRef.current = {};
|
||||
res.data.forEach((item: IGroupMembers) => {
|
||||
groupMembersObjRef.current[item.user_id] = item;
|
||||
});
|
||||
page(1);
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -141,17 +255,195 @@ const ChatLogs: React.FC = () => {
|
||||
if (res.err_code == 0) {
|
||||
if (Array.isArray(res.data)) {
|
||||
setCustFollowsList(res.data);
|
||||
if (res.data.length) {
|
||||
setCustFollow(res.data[0]);
|
||||
selectCustFollowRef.current = res.data[0];
|
||||
page(1);
|
||||
}
|
||||
// if (res.data.length) {
|
||||
// setCustFollow(res.data[0]);
|
||||
// selectCustFollowRef.current = res.data[0];
|
||||
// page(1);
|
||||
// }
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// const { notification } = App.useApp();
|
||||
const tabContent = () => {
|
||||
if (tabKey == '0') {
|
||||
// 内部联系人
|
||||
return (
|
||||
<>
|
||||
{innerStaffsList.length ? (
|
||||
innerStaffsList.map((item) => {
|
||||
if (item.user_id == selectStaff?.user_id) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div
|
||||
key={`${item.user_id}_${item.name}`}
|
||||
className={`${styles.chatB} ${
|
||||
selectInnerStaff?.user_id == item.user_id ? styles.active : ''
|
||||
}`}
|
||||
onClick={() => {
|
||||
tabKeyRef.current = tabKey;
|
||||
|
||||
setSelectCustFollow(undefined);
|
||||
selectCustFollowRef.current = undefined;
|
||||
setSelectGroup(undefined);
|
||||
selectGroupRef.current = undefined;
|
||||
|
||||
setSelectInnerStaff(item);
|
||||
selectInnerStaffRef.current = item;
|
||||
page(1);
|
||||
}}
|
||||
style={{ display: item.name.includes(searchWord['0']) ? '' : 'none' }}
|
||||
>
|
||||
<div className={styles.avatar}>{item.name[0]}</div>
|
||||
<div className={styles.chatAMsg}>
|
||||
<div className={styles.chatAName} title={item.name}>
|
||||
{item.name}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<div style={{ lineHeight: '44px', textAlign: 'center', color: '#999' }}>
|
||||
暂无内部联系人
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
} else if (tabKey == '1') {
|
||||
return (
|
||||
<>
|
||||
{custFollowsList.length ? (
|
||||
custFollowsList.map((item) => {
|
||||
return (
|
||||
<div
|
||||
key={item.cust_id}
|
||||
className={`${styles.chatB} ${item.state == 0 ? styles.state0 : ''} ${
|
||||
selectCustFollow?.cust_id == item.cust_id ? styles.active : ''
|
||||
}`}
|
||||
onClick={() => {
|
||||
tabKeyRef.current = tabKey;
|
||||
|
||||
setSelectInnerStaff(undefined);
|
||||
selectInnerStaffRef.current = undefined;
|
||||
setSelectGroup(undefined);
|
||||
selectGroupRef.current = undefined;
|
||||
|
||||
setSelectCustFollow(item);
|
||||
selectCustFollowRef.current = item;
|
||||
page(1);
|
||||
}}
|
||||
style={{ display: item.name.includes(searchWord['1']) ? '' : 'none' }}
|
||||
>
|
||||
<div className={styles.avatar} style={{ background: item?.avatar ? '#fff' : '' }}>
|
||||
<img
|
||||
src={item.avatar}
|
||||
alt=""
|
||||
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.chatAMsg} style={{ flexDirection: 'column' }}>
|
||||
<div className={styles.chatAName} title={item.name}>
|
||||
{item.name}
|
||||
</div>
|
||||
<div>{item.remark}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<div style={{ lineHeight: '44px', textAlign: 'center', color: '#999' }}>
|
||||
暂无外部联系人
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<>
|
||||
{groupList.length ? (
|
||||
groupList.map((item) => {
|
||||
return (
|
||||
<div
|
||||
key={item.group_id}
|
||||
className={`${styles.chatB} ${item.state == 0 ? styles.state0 : ''} ${
|
||||
selectGroup?.group_id == item.group_id ? styles.active : ''
|
||||
}`}
|
||||
onClick={() => {
|
||||
tabKeyRef.current = tabKey;
|
||||
setSelectCustFollow(undefined);
|
||||
selectCustFollowRef.current = undefined;
|
||||
setSelectInnerStaff(undefined);
|
||||
selectInnerStaffRef.current = undefined;
|
||||
setSelectGroup(item);
|
||||
selectGroupRef.current = item;
|
||||
getGroupMembersList();
|
||||
}}
|
||||
style={{ display: item.name.includes(searchWord['2']) ? '' : 'none' }}
|
||||
>
|
||||
<div className={styles.avatar}>{item.name ? item.name[0] : '群'}</div>
|
||||
<div className={styles.chatAMsg} style={{ flexDirection: 'column' }}>
|
||||
<div className={styles.chatAName} title={item.name}>
|
||||
{item.name || '未定义群名'}
|
||||
</div>
|
||||
<div style={{ color: '#999' }}>{groupStatus[item.status]}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<div style={{ lineHeight: '44px', textAlign: 'center', color: '#999' }}>
|
||||
暂无客户群聊
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const formatTags = () => {
|
||||
if (selectCustFollow?.tags) {
|
||||
try {
|
||||
const tags = JSON.parse(selectCustFollow?.tags);
|
||||
if (Array.isArray(tags)) {
|
||||
return (
|
||||
<>
|
||||
{tags.map((item) => {
|
||||
return (
|
||||
<div key={`${item.group_name}_${item.tag_name}`}>
|
||||
{item.group_name}：{item.tag_name}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
return <></>;
|
||||
};
|
||||
|
||||
function adminList() {
|
||||
if (selectGroupRef.current?.admin_list) {
|
||||
try {
|
||||
const msg = JSON.parse(selectGroupRef.current?.admin_list);
|
||||
if (Array.isArray(msg) && msg.length) {
|
||||
let arr: any = [];
|
||||
msg.forEach((el) => {
|
||||
arr.push(groupMembersObjRef.current[el.userid]?.name);
|
||||
});
|
||||
|
||||
return <div>群管理者：{arr.join('，')}</div>;
|
||||
}
|
||||
} catch (e) {
|
||||
return <></>;
|
||||
}
|
||||
}
|
||||
|
||||
return <></>;
|
||||
}
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
@@ -164,11 +456,21 @@ const ChatLogs: React.FC = () => {
|
||||
key={item.user_id}
|
||||
className={styles.chatB}
|
||||
onClick={(e) => {
|
||||
setSelectCustFollow(undefined);
|
||||
selectCustFollowRef.current = undefined;
|
||||
setSelectInnerStaff(undefined);
|
||||
selectInnerStaffRef.current = undefined;
|
||||
setSelectGroup(undefined);
|
||||
selectGroupRef.current = undefined;
|
||||
isAllChatRef.current = false;
|
||||
setChatLogs([]);
|
||||
setSelectStaff({ ...item });
|
||||
selectStaffRef.current = { ...item };
|
||||
setFlolowsBox(false);
|
||||
getCustFollowsList();
|
||||
getGroupList();
|
||||
}}
|
||||
style={{ background: selectStaff?.user_id == item.user_id ? '#e6f4ff' : '' }}
|
||||
>
|
||||
<div className={styles.avatar}>{item.name[0]}</div>
|
||||
<div className={styles.chatAMsg}>
|
||||
@@ -201,53 +503,186 @@ const ChatLogs: React.FC = () => {
|
||||
</div>
|
||||
<Form autoComplete="off">
|
||||
<Input
|
||||
placeholder="搜索"
|
||||
style={{ margin: '0 12px', width: 'calc(100% - 24px)' }}
|
||||
autoComplete="off"
|
||||
defaultValue={searchWord[tabKey]}
|
||||
key={tabKey}
|
||||
onChange={(e) => {
|
||||
searchWord[tabKey] = e.target.value.trim();
|
||||
setSearchWord({ ...searchWord });
|
||||
}}
|
||||
allowClear
|
||||
></Input>
|
||||
</Form>
|
||||
<Tabs items={tabs} size="small" style={{ padding: '0 12px' }} tabBarGutter={12}></Tabs>
|
||||
<div className={styles.chatBBox}>
|
||||
{custFollowsList.map((item) => {
|
||||
return (
|
||||
<div
|
||||
key={item.cust_id}
|
||||
className={`${styles.chatB} ${
|
||||
selectCustFollow?.cust_id == item.cust_id ? styles.active : ''
|
||||
}`}
|
||||
onClick={() => {
|
||||
setCustFollow(item);
|
||||
selectCustFollowRef.current = item;
|
||||
page(1);
|
||||
}}
|
||||
>
|
||||
<div className={styles.avatar}>
|
||||
<img
|
||||
src={item.cust_info.avatar}
|
||||
alt=""
|
||||
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.chatAMsg}>
|
||||
<div className={styles.chatAName} title={item.cust_info.name}>
|
||||
{item.cust_info.name}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<Tabs
|
||||
items={tabs}
|
||||
size="small"
|
||||
style={{ padding: '0 12px' }}
|
||||
tabBarGutter={12}
|
||||
onChange={(val) => {
|
||||
setTabKey(val);
|
||||
}}
|
||||
></Tabs>
|
||||
<div className={styles.chatBBox}>{tabContent()}</div>
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div className={styles.logTop}>
|
||||
<div>{selectCustFollowRef.current?.cust_info.name}</div>
|
||||
<div
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => {
|
||||
setOpen(true);
|
||||
}}
|
||||
>
|
||||
{tabKeyRef.current == '0' ? (
|
||||
<>{selectInnerStaffRef.current?.name}</>
|
||||
) : tabKeyRef.current == '1' ? (
|
||||
<>{selectCustFollowRef.current?.name}</>
|
||||
) : (
|
||||
<>{selectGroupRef.current ? selectGroupRef.current?.name || '未定义群名' : ''}</>
|
||||
)}
|
||||
</div>
|
||||
<Modal
|
||||
title={
|
||||
tabKeyRef.current == '0' ? (
|
||||
<>{selectInnerStaffRef.current?.name} 详细信息</>
|
||||
) : tabKeyRef.current == '1' ? (
|
||||
<>{selectCustFollowRef.current?.name} 详细信息</>
|
||||
) : (
|
||||
<>{selectGroupRef.current?.name || '未定义群名'} 详细信息</>
|
||||
)
|
||||
}
|
||||
open={open}
|
||||
centered
|
||||
onCancel={() => setOpen(false)}
|
||||
footer={false}
|
||||
>
|
||||
{tabKeyRef.current == '0' ? (
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
borderBottom: '1px solid #ddd',
|
||||
paddingBottom: 12,
|
||||
marginBottom: 12,
|
||||
}}
|
||||
>
|
||||
<div className={styles.modalAvatar}>{selectInnerStaff?.name[0]}</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<div style={{ fontSize: 16 }}>{selectInnerStaff?.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>账号：{selectInnerStaff?.name}</div>
|
||||
<div>手机：{selectInnerStaff?.telephone}</div>
|
||||
<div>职务：{selectInnerStaff?.position}</div>
|
||||
</div>
|
||||
) : tabKeyRef.current == '1' ? (
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
borderBottom: '1px solid #ddd',
|
||||
paddingBottom: 12,
|
||||
marginBottom: 12,
|
||||
}}
|
||||
>
|
||||
<div className={styles.modalAvatar}>
|
||||
<img src={selectCustFollow?.avatar} alt="" />
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<div style={{ fontSize: 16 }}>
|
||||
<span style={{ marginRight: 8 }}>{selectCustFollow?.name}</span>
|
||||
{selectCustFollow?.gender == 1 ? (
|
||||
<svg viewBox="0 0 1024 1024" width="16" height="16">
|
||||
<path
|
||||
d="M828.875 765.657c-191.159-16.86-202.516-102.922-202.516-102.922v-85.997c111.656-43.063 145.76-207.699 145.76-207.699 0-65.457-32.153-67.281-32.153-67.281V195.093c7.486-177.753-100.33-136.61-102.25-136.61-1.791 0-60.466-46.774-60.466-46.774-41.751-31.8-134.499 11.262-134.499 11.262l-3.839 0.064c-104.937 2.751-132.387 78.479-132.387 78.479l1.92 196.437c-54.804 0-47.35 76.719-47.35 76.719 0 84.142 147.616 200.148 147.616 200.148 9.47 110.472-49.174 166.46-49.174 166.46s-100.266 3.711-213.84 37.432c-2.72 0.863-5.344 1.6-7.967 2.463C30.617 817.421 0 920.855 0 920.855v101.033l463.579 1.888 68.465-1.92h491.732V943.25c1.92-115.815-194.901-177.593-194.901-177.593z m-244.65 129.22l-71.25 128.675-69.616-128.676-16.124-64.05 30.68-136.354h111.656l29.178 136.354-14.525 64.05z"
|
||||
fill="#1890ff"
|
||||
></path>
|
||||
</svg>
|
||||
) : (
|
||||
<svg viewBox="0 0 1025 1024" width="16" height="16">
|
||||
<path
|
||||
d="M613.312 626.496v-11.2h151.296V318.08c0-124.736-113.152-225.856-252.608-225.856S259.392 193.344 259.392 318.08v297.216h151.36v11.072h-0.256L115.648 820.16v107.136H908.48v-105.92l-295.168-194.88z m7.68 186.752c-72.192 69.824-109.504-36.416-109.504-36.416s-37.312 106.24-109.568 36.416c0 0-31.744-20.544-35.136-158.208l144.704 121.728L656.192 655.04c-3.392 137.6-35.2 158.208-35.2 158.208z"
|
||||
fill="#1890ff"
|
||||
></path>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ color: '#666' }}>{selectCustFollow?.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>备注名称：{selectCustFollow?.remark}</div>
|
||||
{formatTags()}
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div>
|
||||
群创建者：{groupMembersObjRef.current[selectGroupRef.current?.owner]?.name}
|
||||
</div>
|
||||
<div>{adminList()}</div>
|
||||
<div>创建时间：{selectGroupRef.current?.create_time}</div>
|
||||
<div>群公告：{selectGroupRef.current?.notice}</div>
|
||||
<div style={{ fontWeight: 'bold', marginTop: 8, marginBottom: 8 }}>群成员:</div>
|
||||
{groupMembersList.map((item) => {
|
||||
return (
|
||||
<div
|
||||
key={item.user_id}
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'center',
|
||||
width: 64,
|
||||
flexDirection: 'column',
|
||||
verticalAlign: 'top',
|
||||
marginTop: 12,
|
||||
}}
|
||||
>
|
||||
<div className={styles.avatar}>
|
||||
{item.avatar ? (
|
||||
<img
|
||||
style={{
|
||||
maxWidth: '100%',
|
||||
maxHeight: '100%',
|
||||
objectFit: 'cover',
|
||||
borderRadius: 4,
|
||||
}}
|
||||
src={item.avatar}
|
||||
alt=""
|
||||
/>
|
||||
) : item.name ? (
|
||||
item.name[0]
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
padding: '0 4px',
|
||||
whiteSpace: 'nowrap',
|
||||
minWidth: 0,
|
||||
textOverflow: 'ellipsis',
|
||||
overflow: 'hidden',
|
||||
width: 56,
|
||||
textAlign: 'center',
|
||||
}}
|
||||
title={item.name}
|
||||
>
|
||||
{item.name}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
</div>
|
||||
<Spin spinning={chatLogLoading} style={{ display: 'block' }}>
|
||||
<div
|
||||
className={styles.chatLogBox}
|
||||
ref={chatBoxRef}
|
||||
onScroll={(e) => {
|
||||
onScroll={(e: any) => {
|
||||
if (
|
||||
e.target.scrollTop == 0 &&
|
||||
e.target?.scrollTop == 0 &&
|
||||
!isAllChatRef.current &&
|
||||
!chatLogLoadingRef.current
|
||||
) {
|
||||
@@ -270,29 +705,18 @@ const ChatLogs: React.FC = () => {
|
||||
></div>
|
||||
);
|
||||
} else {
|
||||
// if (timeDiffRef.current == '') {
|
||||
// timeDiffRef.current = item.msg_time;
|
||||
// timeShowRef.current = false;
|
||||
// } else {
|
||||
// if (
|
||||
// new Date(item.msg_time).getTime() - new Date(timeDiffRef.current).getTime() >
|
||||
// 5 * 60 * 1000
|
||||
// ) {
|
||||
// timeDiffRef.current = item.msg_time;
|
||||
// timeShowRef.current = true;
|
||||
// } else {
|
||||
// timeShowRef.current = false;
|
||||
// }
|
||||
// }
|
||||
|
||||
// if (i == 0) {
|
||||
// timeShowRef.current = true;
|
||||
// }
|
||||
|
||||
return (
|
||||
<div key={item.msg_id}>
|
||||
<ChatTime msgtime={item.msg_time}></ChatTime>
|
||||
<ChatBar from={selectStaff} to={selectCustFollow} chat={item}></ChatBar>
|
||||
{item.show_time ? <ChatTime msgtime={item.msg_time}></ChatTime> : null}
|
||||
{tabKey == '2' ? (
|
||||
<ChatBar
|
||||
from={selectStaff}
|
||||
to={groupMembersObjRef.current[item.msg_from]}
|
||||
chat={item}
|
||||
></ChatBar>
|
||||
) : (
|
||||
<ChatBar from={selectStaff} to={selectCustFollow} chat={item}></ChatBar>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user