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

config/proxy.ts

@@ -7,7 +7,7 @@ export default {
     // },
     '/api': {
     //   target: 'http://10.0.0.125:18012',//测试环境
-      target: 'http://10.0.0.10:18012',//连接天宫的ng
+      target: 'http://10.0.0.10:18013',//连接天宫的ng
       changeOrigin: true,
       pathRewrite: { '^/api': '' },
     },

src/global.less

@@ -24,7 +24,7 @@ body,
   // height: calc(100% - 60px);
   // overflow: auto;
   // padding: 15px 0;
-  background: rgba(@gray, 0.3);
+  background: #F9FAFB;
   .layout-content-main {
     width: @width;
     margin: 0 auto;

src/layouts/Footer.tsx

@@ -41,7 +41,7 @@ const Footer: React.FC = () => {
       <Divider style={{ borderColor: 'rgb(0,78,145)' }} />
       <div className="footer-content">
         <div className="copyright">
-          <img src={require('@/assets/logo.svg')} className="footerLogo" alt="" />
+          <img src={require('@/assets/img/logoWhite.png')} className="footerLogo" alt="" />
           <div className="copyright-text">
             <div className="copyright-text-item">
               <span>网站首页</span>

src/layouts/Header.less

@@ -65,7 +65,7 @@
       align-items: center;
       justify-content: space-between;
       .footerLogo{
-        width: 80px;
+        height: 48px;
       }
       .copyright-text{
         text-align: right;

src/locales/en-US.ts

@@ -3,6 +3,7 @@ import notice from './en-US/notice';
 import help from './en-US/help';
 import policy from './en-US/policy';
 import register from './en-US/register';
+import home from './en-US/home';
 
 export default {
    'menu.首页': 'Home',
@@ -66,4 +67,7 @@ export default {
 
   // Registration module
   ...register,
+
+  // Home module
+  ...home,
 };

src/locales/en-US/home.ts

@@ -0,0 +1,6 @@
+export default {
+  'home.data.contactsPhone': 'contactsPhoneEn',
+  'home.data.contactsEmail': 'contactsEmailEn',
+  'home.data.address': 'addressEn',
+  'home.data.addressEn': 'address',
+};

src/locales/en-US/notice.ts

@@ -26,4 +26,9 @@ export default {
   'notice.message.getDetailFailed': 'Failed to get notification detail',
   'notice.message.getDetailError': 'Error getting notification detail, please try again later',
   'notice.message.idNotExist': 'Notice ID cannot be empty',
+
+  "notice.data.content": "contentEn",
+  "notice.data.title": "titleEn",
+  "notice.detail": "View Details",
+
 };

src/locales/zh-CN.ts

@@ -3,6 +3,7 @@ import notice from './zh-CN/notice';
 import help from './zh-CN/help';
 import policy from './zh-CN/policy';
 import register from './zh-CN/register';
+import home from './zh-CN/home';
 
 export default {
   'menu.首页': '首页',
@@ -66,4 +67,7 @@ export default {
 
   // 注册模块
   ...register,
+
+  // Home module
+  ...home,
 };

src/locales/zh-CN/home.ts

@@ -0,0 +1,6 @@
+export default {
+  'home.data.contactsPhone': 'contactsPhone',
+  'home.data.contactsEmail': 'contactsEmail',
+  'home.data.address': 'address',
+  'home.data.addressEn': 'addressEn',
+};

src/locales/zh-CN/notice.ts

@@ -26,4 +26,7 @@ export default {
   'notice.message.getDetailFailed': '获取通知详情失败',
   'notice.message.getDetailError': '获取通知详情出错，请稍后重试',
   'notice.message.idNotExist': '通知ID不能为空',
+  "notice.data.content": "content",
+  "notice.data.title": "title",
+  "notice.detail": "查看详情",
 };

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"

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

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;

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

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"

src/pages/index/index.less

@@ -31,43 +31,70 @@
 }
 .noticeList {
   padding: 10px 0;
-  display: flex;
+  .noticeTitle {
-  gap: 20px;
+    font-size: 22px;
-  align-items: center;
-  .noticeName {
-    font-size: 18px;
     font-weight: 600;
-    color: @main-danger-color;
+    color: @main-color;
-    width: 50px;
+    padding: 10px 7px;
-    line-height: 20px;
-    text-align: center;
   }
   .noticeItem {
-    margin-right: 20px;
+    background-color: #fff;
-    flex: 1;
+    padding: 24px;
-    width: 0;
+    border-radius: 16px;
-    .cardTitle {
+    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 {
+      align-items: center;
-        font-size: 18px;
+      .time {
-        font-weight: 600;
+        font-size: 14px;
-        color: @main-color;
-        cursor: pointer;
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-      .cardTitleTime {
         color: @main-text-color-2;
       }
-    }
+      .type {
-    .cardContent {
+        display: inline-block;
-      color: @main-text-color-2;
+        background-color: @main-color;
-      text-overflow: ellipsis;
+        color: #fff;
-      overflow: hidden;
+        font-size: 12px;
-      white-space: nowrap;
+        padding: 4px 8px;
-      margin-bottom: 0;
+        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%;
   }
 }

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([
+  // 友情链接
-    {
+  const [friendshipConnections, setFriendshipConnections] = useState<API.CoscoPortalsLinks[]>([]);
-      title: 'CA使用通知',
+  // 关于我们
-      id: '1',
+  const [aboutUs, setAboutUs] = useState<API.AboutUsData>({});
-      content: '系统将于2022年5月27日期开始对全流程使用CA服务，届时全部投标供应商需办理CA。',
+  // 通知公告
-      time: '2022-05-27',
+  const [noticeList, setNoticeList] = useState<API.NoticeRecord[]>([]);
-    },
-    {
-      title: '5月27日系统优化升级通知',
-      id: '2',
-      content:
-        '系统将于2022年5月27日（周五）22:00--2022年5月28日（周六）6:00进行系统优化升级，届时系统将暂停服务。',
-      time: '2022-05-27',
-    },
-  ]);
   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) => (
+            {friendshipConnections.map((item, index) => (
-              <Card.Grid key={index} style={{ width: '16.6667%', height: '130px' }}>
+              <Card.Grid key={item.id} style={{ width: '16.6667%', height: '130px' }}>
-                <img src={require('@/assets/img/banner.jpg')} alt="" />
+                <img src={item.url} alt="" />
               </Card.Grid>
             ))}
           </Card>

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

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={() => (

src/servers/api/about.ts

@@ -3,6 +3,6 @@ import request from '@/utils/request';
 /**
  * 获取关于我们信息
  */
-export async function getAboutUs(): Promise<API.Response<API.AboutUsData>> {
+export async function getAboutUs(): Promise<API.APIResponse<API.AboutUsData>> {
   return request('/homePage/getAboutUs');
 }

src/servers/api/index.ts

@@ -1,8 +1,16 @@
 // 首页api
 
+// 查询友情链接分类及链接
 import request from '@/utils/request';
 export async function getCoscoPortalsLinksClassification() {
   return request<API.APIResponse<API.CoscoPortalsLinksClassification>>('/homePage/coscoPortalsLinksClassification/getAll', {
     method: 'get',
   });
 }
+
+// 查询友情链接12个 /homePage/coscoPortalsLinks/friendshipConnections
+export async function getCoscoPortalsLinksFriendshipConnections() {
+  return request<API.APIResponse<API.CoscoPortalsLinks[]>>('/homePage/coscoPortalsLinks/friendshipConnections', {
+    method: 'get',
+  });
+}

src/utils/utils.ts

@@ -33,3 +33,7 @@ export const validateFileSize = (file: File, maxSize: number,type: string[]) =>
   }
   return isValidFormat && isLtMaxSize;
 };
+// 过滤html标签正则工具
+export const filterHtmlTag = (html: string) => {
+  return html.replace(/<[^>]*>?/g, '');
+};