开发: 添加表情匹配, 添加客群中心页面,修复弹框关闭

2023-04-20 17:38:19 +08:00
parent 21c1790dc4
commit 2156976a8c
19 changed files with 1135 additions and 123 deletions
--- a/src/pages/GroupList/components/GroupDetailContent.tsx
+++ b/src/pages/GroupList/components/GroupDetailContent.tsx
@@ -0,0 +1,128 @@
+import { IGroup, IGroupMembers } from '@/pages/ChatLogs/ChatLogsType';
+import { post } from '@/services/ajax';
+import { useEffect, useRef, useState } from 'react';
+
+import {
+  adminList,
+  getAdminList,
+  groupMembersCount,
+  groupMembersCount2,
+  groupMembersListItem,
+} from '@/pages/ChatLogs/ChatUtils';
+import { Spin } from 'antd';
+import { stringify } from 'qs';
+
+type Iprops = {
+  record: IGroup;
+};
+export const GroupDetailContent: React.FC<Iprops> = (props) => {
+  const { record } = props;
+
+  const [groupMembersList, setGroupMembersList] = useState<IGroupMembers[]>([]);
+  const [loading, setLoading] = useState(false);
+  const groupMembersObjRef = useRef<any>({});
+
+  useEffect(() => {
+    record.adminUserIDs = getAdminList(record.admin_list);
+    getList();
+  }, [props.record]);
+
+  const getList = () => {
+    setLoading(true);
+    post({
+      url: '/GroupMembers/GroupMembersList',
+      data: stringify({ group_id: props.record.group_id }),
+    }).then((res) => {
+      setLoading(false);
+      if (res.err_code == 0) {
+        if (Array.isArray(res.data)) {
+          groupMembersObjRef.current = {};
+          let owner: IGroupMembers[] = [];
+          let admin_list: IGroupMembers[] = [];
+          let other: IGroupMembers[] = [];
+          res.data.forEach((item: IGroupMembers) => {
+            item.avatar = item.staff_avatar || item.avatar;
+            groupMembersObjRef.current[item.user_id] = item;
+            if (item.user_id == record?.owner) {
+              owner.push(item);
+            } else if (record?.adminUserIDs.includes(item.user_id)) {
+              admin_list.push(item);
+            } else {
+              other.push(item);
+            }
+          });
+          // 对群员 创建者 > 管理员 > 普通成员 排序
+          setGroupMembersList([...owner, ...admin_list, ...other]);
+        }
+      }
+    });
+  };
+
+  return (
+    <Spin spinning={loading} style={{ minHeight: 400, display: 'block' }}>
+      {groupMembersList.length ? (
+        <div>
+          <div style={{ marginBottom: 8, textIndent: '2em' }}>
+            群主：
+            {groupMembersObjRef.current[record?.owner as string]?.name}
+          </div>
+          <div style={{ marginBottom: 8 }}>
+            {adminList(record?.admin_list, groupMembersObjRef.current)}
+          </div>
+          <div style={{ marginBottom: 8 }}>创建时间：{record?.create_time}</div>
+          <div style={{ textIndent: '1em' }}>群公告：{record?.notice}</div>
+          <div
+            style={{
+              fontWeight: 'bold',
+              marginTop: 24,
+              marginBottom: 8,
+              borderBottom: '1px solid #ddd',
+              paddingBottom: 8,
+            }}
+          >
+            群成员 • {groupMembersList.length}
+          </div>
+          {groupMembersList.map((item) => {
+            return item.group_members_type == '2' || item.state == 0
+              ? null
+              : groupMembersListItem(item, record);
+          })}
+          {groupMembersCount2(groupMembersList, '2', 1) != 0 ? (
+            <div
+              style={{
+                fontWeight: 'bold',
+                marginTop: 24,
+                marginBottom: 8,
+                borderBottom: '1px solid #ddd',
+                paddingBottom: 8,
+              }}
+            >
+              微信：
+            </div>
+          ) : null}
+          {groupMembersList.map((item) => {
+            return item.group_members_type == '1' || item.state == 0
+              ? null
+              : groupMembersListItem(item, record);
+          })}
+          {groupMembersCount(groupMembersList, 0) != 0 ? (
+            <div
+              style={{
+                fontWeight: 'bold',
+                marginTop: 24,
+                marginBottom: 8,
+                borderBottom: '1px solid #ddd',
+                paddingBottom: 8,
+              }}
+            >
+              已离群：
+            </div>
+          ) : null}
+          {groupMembersList.map((item) => {
+            return item.state == 1 ? null : groupMembersListItem(item, record);
+          })}
+        </div>
+      ) : null}
+    </Spin>
+  );
+};