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

2025-07-11 09:59:16 +08:00
parent 20145e4c51
commit 56c2af09c2
24 changed files with 194 additions and 89 deletions
--- a/src/pages/announce/announceInfo.tsx
+++ b/src/pages/announce/announceInfo.tsx
@ -121,7 +121,7 @@ const AnnounceInfo: React.FC = () => {
  }

  return (
-    <div className={styles.announceInfoContainer}>
+    <div className={`${styles.announceInfoContainer} layout-content-main`}>
      <div className={styles.announceInfoHeader}>
        <Button
          type="link"
--- a/src/pages/download/download.tsx
+++ b/src/pages/download/download.tsx
@ -104,7 +104,7 @@ const DownloadPage: React.FC = () => {
  };

  return (
-    <div className={styles.downloadContainer}>
+    <div className={`${styles.downloadContainer} layout-content-main`}>
      <Row gutter={16} className={styles.downloadRow}>
        <Col span={4} className={styles.menuCol}>
          <Menu
--- a/src/pages/help/help.less
+++ b/src/pages/help/help.less
@ -2,7 +2,7 @@
  width: 100%;
  min-height: calc(100vh - 200px);
  padding: 40px;
-  background-color: #f5f5f5;
+  // background-color: #f5f5f5;

  .help-header {
    display: flex;
--- a/src/pages/help/help.tsx
+++ b/src/pages/help/help.tsx
@ -108,7 +108,7 @@ const HelpPage: React.FC = () => {
  ];

  return (
-    <div className="help-container">
+    <div className="help-container layout-content-main">
      <div className="help-header">
        <Title level={2}>{intl.formatMessage({ id: 'help.title' })}</Title>
        <Button
--- a/src/pages/help/helpQuestion.tsx
+++ b/src/pages/help/helpQuestion.tsx
@ -123,7 +123,7 @@ const HelpQuestionPage: React.FC = () => {
  };

  return (
-    <div className={styles.helpQuestionContainer}>
+    <div className={`${styles.helpQuestionContainer} layout-content-main`}>
      <div className={styles.header}>
        <Button
          type="link"
--- a/src/pages/index/index.less
+++ b/src/pages/index/index.less
@ -31,43 +31,70 @@
 }
 .noticeList {
  padding: 10px 0;
-  display: flex;
-  gap: 20px;
-  align-items: center;
-  .noticeName {
-    font-size: 18px;
+  .noticeTitle {
+    font-size: 22px;
    font-weight: 600;
-    color: @main-danger-color;
-    width: 50px;
-    line-height: 20px;
-    text-align: center;
+    color: @main-color;
+    padding: 10px 7px;
  }
  .noticeItem {
-    margin-right: 20px;
-    flex: 1;
-    width: 0;
-    .cardTitle {
+    background-color: #fff;
+    padding: 24px;
+    border-radius: 16px;
+    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
+    height: 249px;
+    .title {
+      margin: 14px 0;
+      font-size: 20px;
+      font-weight: 600;
+      // 超过两行显示省略号
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      height: 63px;
+    }
+    .content{
+      font-size: 16px;
+      color: @main-text-color-2;
+      // 超过两行显示省略号
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .button{
+      color: @main-color;
+      font-size: 16px;
+      margin-top: 14px;
+      cursor: pointer;
+    }
+    .header {
      display: flex;
      justify-content: space-between;
-      .cardTitleText {
-        font-size: 18px;
-        font-weight: 600;
-        color: @main-color;
-        cursor: pointer;
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-      .cardTitleTime {
+      align-items: center;
+      .time {
+        font-size: 14px;
        color: @main-text-color-2;
      }
-    }
-    .cardContent {
-      color: @main-text-color-2;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      margin-bottom: 0;
+      .type {
+        display: inline-block;
+        background-color: @main-color;
+        color: #fff;
+        font-size: 12px;
+        padding: 4px 8px;
+        border-radius: 20px;
+        &.primary {
+          background-color: rgba(59, 130, 246, 0.1);
+          color: #3b82f6;
+        }
+        &.danger {
+          background-color: rgba(255, 77, 77, 0.1);
+          color: #ff4d4d;
+        }
+      }
    }
  }
 }
@ -136,7 +163,7 @@
      }
    }
  }
-  .search{
+  .search {
    height: 100%;
  }
 }
--- a/src/pages/index/index.tsx
+++ b/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>
--- a/src/pages/notice/notice.tsx
+++ b/src/pages/notice/notice.tsx
@ -120,7 +120,7 @@ const NoticePage: React.FC = () => {
  ];

  return (
-    <div className={styles.noticeContainer}>
+    <div className={`${styles.noticeContainer} layout-content-main`}>
      <Row gutter={10} className={styles.noticeRow}>
        <Col span={3} className={styles.menuCol}>
          <Menu
--- a/src/pages/policy/policy.tsx
+++ b/src/pages/policy/policy.tsx
@ -93,7 +93,7 @@ const PolicyPage: React.FC = () => {
  ];

  return (
-    <div className={styles.policyContainer}>
+    <div className={`${styles.policyContainer} layout-content-main`}>
      <div className={styles.policyTable}>
        <ConfigProvider
          renderEmpty={() => (