248 lines
6.6 KiB
TypeScript
248 lines
6.6 KiB
TypeScript
import React, { useState } from 'react';
|
||
import { Card, Row, Col, Tabs, Table } from 'antd';
|
||
import { useIntl, Link } from 'umi';
|
||
import SpaceBlock from '@/components/SpaceBlock/SpaceBlock';
|
||
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>
|
||
<SpaceBlock />
|
||
<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' }}>
|
||
<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>
|
||
<SpaceBlock />
|
||
|
||
<div>
|
||
<LinkComponent />
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default IndexPage;
|