修改消息中心数据问题

src/layouts/components/RightContent.tsx

-import { Tooltip } from 'antd';
+import { Tooltip, Badge } from 'antd';
 import { BellOutlined, CustomerServiceOutlined } from '@ant-design/icons';
 import React, { useCallback, useRef, useLayoutEffect } from 'react';
-// import { connect, ConnectProps } from 'umi';
-// import { ConnectState } from '@/models/connect';
 import Avatar from './AvatarDropdown';
 import SelectLang from './SelectLang';
 import Location from './Location';
@@ -18,7 +16,7 @@ import { getAuth } from '@/utils/auth'
 // }
 
 
-const GlobalHeaderRight: React.SFC<{}> = (props) => {
+const GlobalHeaderRight: React.FC<{}> = (props) => {
   // const { theme, layout } = props;
   let className = styles.right;
 
@@ -62,14 +60,14 @@ const GlobalHeaderRight: React.SFC<{}> = (props) => {
       <Location />
       <SelectLang />
       <Tooltip title="消息">
-        <a
-          target="_blank"
-          href=""
-          rel="noopener noreferrer"
-          className={styles.action}
-        >
-          <BellOutlined />
-        </a>
+          <a
+            href="/memberCenter/systemSetting/message"
+            className={styles.action}
+          >
+            <Badge count={5} size={"small"}>
+              <BellOutlined />
+            </Badge>
+          </a>
       </Tooltip>
       <Tooltip title="服务">
         <a

src/pages/systemSetting/message/index.less

@@ -8,11 +8,13 @@
     font-size: 14px;
     font-weight: 400;
     color: #606266;
+    cursor: pointer;
   }
   .messageTitle{
-    margin: 0 30px;
+    margin: 0px 0px 0px 30px;
     font-size: 14px;
     font-weight: 500;
     color: #303133;
+    display: inline-block;
   }
 }
\ No newline at end of file

src/pages/systemSetting/message/index.tsx

@@ -8,7 +8,8 @@ import StatusTag from '@/components/StatusTag';
 import { PublicApi } from '@/services/api';
 import moment from 'moment';
 import msg_system from '@/assets/imgs/msg_system.png'
-import msg_platform from '@/assets/imgs/msg_platform.png'
+import msg_platform from '@/assets/imgs/msg_platform.png';
+import cx from 'classnames';
 
 const Message: React.FC<{}> = () => {
   const [dataSource, setDataSource] = useState<any>([])
@@ -40,19 +41,35 @@ const Message: React.FC<{}> = () => {
   }
 
   const handlePaginationChange = (page, pageSize) => {
+    console.log(page,pageSize);
     getList({page, pageSize})
     .then((data) => {
+      console.log(data);
       setDataSource(data);
     })
   }
 
-  const renderMessage = (data) => {
+  const handleRead = (id, url: string) => {
+    console.log(url);
+    // /report/message/member/read
+    PublicApi.getReportMessageMemberRead({id: id})
+    .then((data) => {
+      if(url) {
+        history.push(url);
+      }
+    })
+  }
 
+  const renderMessage = (data) => {
+    const isRead = cx({
+      [styles.messageTitle]: !data.status,
+      [styles.messageText]: data.status
+    })
     return (
       <>
-        <StatusTag type={data.status} title={data.type} />
-        <span className={styles.messageTitle}>{data.title}</span>
-        <span className={styles.messageText}>{data.message}</span>
+        <StatusTag type={data.type == 1 ? 'primary' : 'success'} title={data.type == 1 ? '系统消息': '平台消息'} />
+        <span className={isRead} style={{minWidth: '100px'}}>{data.title}</span>
+        <span className={isRead}  onClick={() => handleRead(data.id, data.url)}>{data.content}</span>
       </>
     )
   }
@@ -78,13 +95,13 @@ const Message: React.FC<{}> = () => {
             total: dataSource.totalCount,
             showTotal: showTotal
           }}
-          renderItem={item => (
+          renderItem={(item: any) => (
             <List.Item>
               <List.Item.Meta
-                avatar={<Avatar src={msg_system} />}
+                avatar={<Avatar src={item.type == 1 ? msg_system : msg_platform} />}
                 title={renderMessage(item)}
               />
-              <div>{moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')}</div>
+              <div>{moment(item.sendTime).format('YYYY-MM-DD HH:mm:ss')}</div>
             </List.Item>
           )}
         />