对接首页通知公告和友情链接和关于我们

src/pages/index/index.tsx

@@ -3,27 +3,24 @@ import { Card, Row, Col, Tabs, Table, Button, Space } from 'antd';
 import { useIntl, Link, history } from 'umi';
 import './index.less';
 import IconFont from '@/components/IconFont/IconFont';
-import LinkComponent from './Link';
 import Search from '../announce/Search';
 import type { SearchFormData } from '../announce/Search';
+// 获取友情链接
+import { getCoscoPortalsLinksFriendshipConnections } from '@/servers/api';
+// 获取关于我们
+import { getAboutUs } from '@/servers/api/about';
+// 获取通知公告
+import { getNoticeList } from '@/servers/api/notice';
+import { filterHtmlTag } from '@/utils/utils';
 const IndexPage: React.FC = () => {
   const intl = useIntl();
   const [noticeLoading, setNoticeLoading] = useState(false);
-  const [noticeList, setNoticeList] = useState([
-    {
-      title: 'CA使用通知',
-      id: '1',
-      content: '系统将于2022年5月27日期开始对全流程使用CA服务，届时全部投标供应商需办理CA。',
-      time: '2022-05-27',
-    },
-    {
-      title: '5月27日系统优化升级通知',
-      id: '2',
-      content:
-        '系统将于2022年5月27日（周五）22:00--2022年5月28日（周六）6:00进行系统优化升级，届时系统将暂停服务。',
-      time: '2022-05-27',
-    },
-  ]);
+  // 友情链接
+  const [friendshipConnections, setFriendshipConnections] = useState<API.CoscoPortalsLinks[]>([]);
+  // 关于我们
+  const [aboutUs, setAboutUs] = useState<API.AboutUsData>({});
+  // 通知公告
+  const [noticeList, setNoticeList] = useState<API.NoticeRecord[]>([]);
   const typeList = [
     {
       key: '1',
@@ -132,6 +129,24 @@ const IndexPage: React.FC = () => {
     },
   ];
 
+  useEffect(() => {
+    // 友情链接
+    getCoscoPortalsLinksFriendshipConnections().then((res) => {
+      setFriendshipConnections(res.data);
+    });
+    // 关于我们
+    getAboutUs().then((res) => {
+      setAboutUs(res.data);
+    });
+    // 通知公告
+    getNoticeList({
+      pageNo: '1',
+      pageSize: '4',
+    }).then((res) => {
+      setNoticeList(res.data.records);
+    });
+  }, []);
+
   const toSystem = (type: string) => {
     console.log(type);
     history.push({
@@ -171,29 +186,7 @@ const IndexPage: React.FC = () => {
   return (
     <div>
       <img className="banner" src={require('@/assets/img/banner.jpg')} alt="" />
-      {/* 通知列表 */}
-      <div className="noticeList layout-content-main">
-        <div className="noticeName">通知公告</div>
-        {noticeList.map((item) => (
-          <div className="noticeItem" key={item.id}>
-            <div className="cardTitle">
-              <span
-                className="cardTitleText"
-                onClick={() => {
-                  history.push({
-                    pathname: '/announce/announceInfo',
-                    search: '?id=' + item.id,
-                  });
-                }}
-              >
-                {item.title}
-              </span>
-              <span className="cardTitleTime">{item.time}</span>
-            </div>
-            <p className="cardContent">{item.content}</p>
-          </div>
-        ))}
-      </div>
+
       <div className="loginType">
         <div className="layout-content-main">
           <Row gutter={20}>
@@ -248,6 +241,50 @@ const IndexPage: React.FC = () => {
           </Row>
         </div>
       </div>
+
+      {/* 通知列表 */}
+      <div className="noticeList">
+        <div className="layout-content-main">
+          <div className="noticeTitle">
+            通知公告
+          </div>
+          <Row gutter={32}>
+            {noticeList.map((item) => (
+              <Col span={6} key={item.id}>
+                <div className="noticeItem" >
+                  <div className='header'>
+                    <span className='time'>{item.publishTime}</span>
+                    <span className={`type ${item.columnType === 'notice' ? 'primary' : 'danger'}`}>{item.columnType === 'notice' ? '公告' : '通知'}</span>
+                  </div>
+                  <div className='title'>{item[intl.formatMessage({ id: 'notice.data.title' }) as keyof typeof item]}</div>
+                  <div className='content'>{filterHtmlTag(item[intl.formatMessage({ id: 'notice.data.content' }) as keyof typeof item] || '')}</div>
+                  <div className="button" onClick={() => {
+                    history.push({
+                      pathname: '/announce/announceInfo',
+                      search: '?id=' + item.id,
+                    });
+                  }}>{intl.formatMessage({ id: 'notice.detail' })}&gt;</div>
+                  {/* <div className="cardTitle">
+                    <span
+                      className="cardTitleText"
+                      onClick={() => {
+                        history.push({
+                          pathname: '/announce/announceInfo',
+                          search: '?id=' + item.id,
+                        });
+                      }}
+                    >
+                      {item.title}
+                    </span>
+                    <span className="cardTitleTime">{item.time}</span>
+                  </div> */}
+                  {/* <p className="cardContent">{item.content}</p> */}
+                </div>
+              </Col>
+            ))}
+          </Row>
+        </div>
+      </div>
       <div className="layout-content-main announce">
         <Row gutter={40}>
           <Col span={5}>
@@ -293,20 +330,21 @@ const IndexPage: React.FC = () => {
         <div className="layout-content-main">
           <Row gutter={40}>
             <Col span={16}>
-              <div className="blockTitle">问题咨询</div>
+              <div className="blockTitle">问题咨询方式</div>
               <div className="borderBox">
+                {/* addressImg */}
                 <img src={require('@/assets/img/location.png')} alt="" />
                 <div className="questionItem">
                   <IconFont type="icon-dizhi" className="icon" />
-                  北京市前门大街173号
+                  {aboutUs[intl.formatMessage({ id: 'home.data.address' })]}
                 </div>
                 <div className="questionItem">
                   <IconFont type="icon-dianhua" className="icon" />
-                  17676373746
+                  {aboutUs[intl.formatMessage({ id: 'home.data.contactsPhone' })]}
                 </div>
                 <div className="questionItem">
                   <IconFont type="icon-youxiang" className="icon" />
-                  i723648723@383.com
+                  {aboutUs[intl.formatMessage({ id: 'home.data.contactsEmail' })]}
                 </div>
               </div>
             </Col>
@@ -343,9 +381,9 @@ const IndexPage: React.FC = () => {
         <div className="layout-content-main">
           <div className="linkTitle">友情链接</div>
           <Card>
-            {Array.from({ length: 12 }).map((item, index) => (
-              <Card.Grid key={index} style={{ width: '16.6667%', height: '130px' }}>
-                <img src={require('@/assets/img/banner.jpg')} alt="" />
+            {friendshipConnections.map((item, index) => (
+              <Card.Grid key={item.id} style={{ width: '16.6667%', height: '130px' }}>
+                <img src={item.url} alt="" />
               </Card.Grid>
             ))}
           </Card>