359 lines
11 KiB
TypeScript
359 lines
11 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
||
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';
|
||
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 typeList = [
|
||
{
|
||
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 = (item: any) => {
|
||
console.log(item);
|
||
};
|
||
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: '3',
|
||
title: '中远海运空运北方物流基地标识制作及安装服务',
|
||
address: '西湖区湖底公园1号',
|
||
date: '2025年01月23日',
|
||
lastDate: '剩余3天4小时',
|
||
},
|
||
{
|
||
key: '4',
|
||
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>,
|
||
},
|
||
];
|
||
|
||
const toSystem = (type: string) => {
|
||
console.log(type);
|
||
history.push({
|
||
pathname: '/login',
|
||
query: {
|
||
type: type,
|
||
},
|
||
});
|
||
};
|
||
|
||
const toRegister = (type: string) => {
|
||
history.push({
|
||
pathname: '/register/supplier',
|
||
query: {
|
||
type: type,
|
||
},
|
||
});
|
||
console.log(type);
|
||
};
|
||
|
||
const [searchFormData, setSearchFormData] = useState<SearchFormData>({
|
||
searchKeyword: '',
|
||
announceType: '全部',
|
||
projectUnit: '',
|
||
projectLocation: '中国',
|
||
publishTime: '不限',
|
||
projectType: '全部',
|
||
currentProvince: '全部',
|
||
});
|
||
const handleFormChange = (formData: SearchFormData) => {
|
||
setSearchFormData(formData);
|
||
};
|
||
const handleSearch = (formData: SearchFormData) => {
|
||
console.log(formData);
|
||
};
|
||
|
||
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}>
|
||
<Col span={8}>
|
||
<div className="loginTypeItem">
|
||
<img src={require('@/assets/img/loginType1.png')} alt="" />
|
||
<div className="loginTypeItemTitle">供应商入口</div>
|
||
<div className="loginTypeItemContent">
|
||
供应商注册、投标、合同管理、结算等全流程服务
|
||
</div>
|
||
<div className="btns">
|
||
<Button type="primary" onClick={() => toSystem('supplier')}>
|
||
立即进入
|
||
</Button>
|
||
<Button type="primary" ghost onClick={() => toRegister('supplier')}>
|
||
立即注册
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
<Col span={8}>
|
||
<div className="loginTypeItem">
|
||
<img src={require('@/assets/img/loginType2.png')} alt="" />
|
||
<div className="loginTypeItemTitle">采购专家入口</div>
|
||
<div className="loginTypeItemContent">
|
||
采购需求发布、评审、合同签订、供应商管理等服务
|
||
</div>
|
||
<div className="btns">
|
||
<Button type="primary" ghost onClick={() => toSystem('expert')}>
|
||
立即进入
|
||
</Button>
|
||
<Button type="primary" ghost onClick={() => toRegister('expert')}>
|
||
立即注册
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
<Col span={8}>
|
||
<div className="loginTypeItem">
|
||
<img src={require('@/assets/img/loginType3.png')} alt="" />
|
||
<div className="loginTypeItemTitle">招标代理入口</div>
|
||
<div className="loginTypeItemContent">
|
||
招标文件编制、公告发布、开标评标等专业服务
|
||
</div>
|
||
<div className="btns">
|
||
<Button type="primary" ghost onClick={() => toSystem('agent')}>
|
||
立即进入
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
</div>
|
||
<div className="layout-content-main announce">
|
||
<Row gutter={40}>
|
||
<Col span={5}>
|
||
<div className="types bg">
|
||
<div className="announceTitle">采购类型</div>
|
||
{typeList.map((item) => (
|
||
<div
|
||
className={`typeItem ${item.key === '1' ? 'active' : ''}`}
|
||
key={item.key}
|
||
onClick={() => {
|
||
tabChange(item);
|
||
}}
|
||
>
|
||
{item.label}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</Col>
|
||
<Col span={19}>
|
||
<div className="search bg">
|
||
<Search
|
||
isShowAnnounceType={false}
|
||
isShowSearch={false}
|
||
isShowProjectUnit={false}
|
||
initialValues={searchFormData}
|
||
onChange={handleFormChange}
|
||
onSearch={handleSearch}
|
||
/>
|
||
<Table
|
||
loading={tableLoading}
|
||
dataSource={dataSource}
|
||
columns={columns}
|
||
pagination={{
|
||
pageSize: 10,
|
||
total: 100,
|
||
}}
|
||
/>
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
<div className="about">
|
||
<div className="layout-content-main">
|
||
<Row gutter={40}>
|
||
<Col span={16}>
|
||
<div className="blockTitle">问题咨询</div>
|
||
<div className="borderBox">
|
||
<img src={require('@/assets/img/location.png')} 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>
|
||
</div>
|
||
</Col>
|
||
<Col span={8} className="caBox">
|
||
<div>
|
||
<div className="blockTitle">CA服务</div>
|
||
<Row className="caRow">
|
||
<Col span={6} offset={6} className="caItem">
|
||
<img src={require('@/assets/img/ca1.png')} alt="" />
|
||
<span>CA办理</span>
|
||
</Col>
|
||
<Col span={6} className="caItem">
|
||
<img src={require('@/assets/img/ca2.png')} alt="" />
|
||
<span>CA客服</span>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
|
||
<div className="contactBox">
|
||
<div className="blockTitle mt20">联系方式</div>
|
||
<div className="contact">
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="firendLink">
|
||
<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="" />
|
||
</Card.Grid>
|
||
))}
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default IndexPage;
|