fe_portal_manage_frontend/src/pages/index/index.tsx

import React, { useState } from 'react';
import { Card, Row, Col, Tabs, Table } from 'antd';
import { useIntl, Link } from 'umi';
import './index.less';
import IconFont from '@/components/IconFont/IconFont';
import LinkComponent from './Link';
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。',
    },
    {
      title: '5月27日系统优化升级通知',
      id: '2',
      content:
        '系统将于2022年5月27日（周五）22:00--2022年5月28日（周六）6:00进行系统优化升级，届时系统将暂停服务。',
    },
    {
      title: '测试标题123123',
      id: '3',
      content: '测试内容124145',
    },
    {
      title: '测试标题45435',
      id: '4',
      content: '测试内容6666',
    },
  ]);
  const tabList = [
    {
      key: '1',
      label: intl.formatMessage({ id: '采购需求公示' }),
    },
    {
      key: '2',
      label: intl.formatMessage({ id: '招标采购公告' }),
    },
    {
      key: '3',
      label: intl.formatMessage({ id: '非招标采购公告' }),
    },
    {
      key: '4',
      label: intl.formatMessage({ id: '资格预审公告' }),
    },
    {
      key: '5',
      label: intl.formatMessage({ id: '招募公告' }),
    },
    {
      key: '6',
      label: intl.formatMessage({ id: '变更公告' }),
    },
    {
      key: '7',
      label: intl.formatMessage({ id: '中标(中选)候选人公示' }),
    },
    {
      key: '8',
      label: intl.formatMessage({ id: '中标(中选)结果公示' }),
    },
    {
      key: '9',
      label: intl.formatMessage({ id: '采购失败(流标)公告' }),
    },
  ];
  //tab 切换事件
  const tabChange = (key: string) => {
    console.log(key);
  };
  const [tableLoading, setTableLoading] = useState(false);
  const dataSource = [
    {
      key: '1',
      title: '中远海运空运北方物流基地标识制作及安装服务',
      address: '西湖区湖底公园1号',
      date: '2025年01月23日',
      lastDate: '剩余3天4小时',
    },
    {
      key: '2',
      title: '中远海运空运北方物流基地标识制作及安装服务',
      address: '西湖区湖底公园1号',
      date: '2025年01月23日',
      lastDate: '剩余3天4小时',
    },
    {
      key: '2',
      title: '中远海运空运北方物流基地标识制作及安装服务',
      address: '西湖区湖底公园1号',
      date: '2025年01月23日',
      lastDate: '剩余3天4小时',
    },
    {
      key: '2',
      title: '中远海运空运北方物流基地标识制作及安装服务',
      address: '西湖区湖底公园1号',
      date: '2025年01月23日',
      lastDate: '剩余3天4小时',
    },
    {
      key: '2',
      title: '中远海运空运北方物流基地标识制作及安装服务',
      address: '西湖区湖底公园1号',
      date: '2025年01月23日',
      lastDate: '剩余3天4小时',
    },
    {
      key: '2',
      title: '中远海运空运北方物流基地标识制作及安装服务',
      address: '西湖区湖底公园1号',
      date: '2025年01月23日',
      lastDate: '剩余3天4小时',
    },
  ];

  const columns = [
    {
      title: '项目所在地',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '公告标题',
      dataIndex: 'title',
      key: 'title',
      render: (text: string, record) => (
        <Link
          to={{
            pathname: '/announce/announceInfo',
            search: '?id=' + record.id,
          }}
        >
          {text}
        </Link>
      ),
    },
    {
      title: '发布时间',
      dataIndex: 'date',
      key: 'date',
    },
    {
      title: '文件购买截止时间',
      dataIndex: 'lastDate',
      key: 'lastDate',
      render: (text: string) => <span className="lastDate">{text}</span>,
    },
  ];

  return (
    <div>
      {/* 通知列表 */}
      <Row gutter={20}>
        {noticeList.map((item) => (
          <Col span={6} key={item.id}>
            <Card
              title={item.title}
              loading={noticeLoading}
              hoverable
              className="card"
              bodyStyle={{ padding: 10 }}
              extra={
                <Link
                  to={{
                    pathname: '/notice/noticeInfo',
                    search: '?id=' + item.id,
                  }}
                >
                  {intl.formatMessage({ id: '查看' })}
                </Link>
              }
            >
              <p className="cardContent">{item.content}</p>
            </Card>
          </Col>
        ))}
      </Row>
      <Tabs onChange={tabChange}>
        {tabList.map((item) => (
          <Tabs.TabPane tab={item.label} key={item.key} />
        ))}
      </Tabs>

      <Table loading={tableLoading} dataSource={dataSource} columns={columns} pagination={false} />

      <div className="tableLoadMore">
        <Link
          to={{
            pathname: '/announce',
          }}
        >
          {intl.formatMessage({ id: '加载更多' })}
        </Link>
      </div>

      <Row style={{ marginTop: '20px', backgroundColor: '#fff' }}>
        <Col span={12}>
          <div className="blockTitle">紧急问题咨询</div>
          <img src="" alt="" />
          <div className="questionItem">
            <IconFont type="icon-dizhi" className="icon" />
            北京市前门大街173号
          </div>
          <div className="questionItem">
            <IconFont type="icon-dianhua" className="icon" />
            17676373746
          </div>
          <div className="questionItem">
            <IconFont type="icon-youxiang" className="icon" />
            i723648723@383.com
          </div>
        </Col>
        <Col span={12}>
          <div className="blockTitle">CA服务</div>
          <Row>
            <Col span={6} offset={6}>
              <span>CA办理</span>
            </Col>
            <Col span={6}>
              <span>CA客服</span>
            </Col>
          </Row>

          <div className="blockTitle">联系方式</div>
          <p style={{ marginTop: 20 }}>客服1: 400-300-9989</p>
          <p>客服1: 400-300-9989</p>
          <p>客服1: 400-300-9989</p>
          <p>客服1: 400-300-9989</p>
        </Col>
      </Row>

      <div>
        <LinkComponent />
      </div>
    </div>
  );
};

export default IndexPage;