下载中心和关于我们模块

This commit is contained in:
linxd
2025-06-17 08:50:38 +08:00
parent 95797bbbac
commit cd844a3231
10 changed files with 679 additions and 36 deletions

View File

@ -5,6 +5,20 @@ export default {
'menu.通知中心': 'Notifications',
'menu.下载中心': 'Download Center',
'menu.关于我们': 'About Us',
// About page
'about.title': 'About Us',
'about.company.title': 'Company Profile',
'about.advantages.title': 'Platform Advantages',
'about.history.title': 'Development History',
'about.contact.title': 'Contact Us',
'about.address': 'Headquarters Address',
'about.phone': 'Phone',
'about.hotline': 'Service Hotline',
'about.email': 'Email',
'about.worktime': 'Working Hours',
'about.copyright': '© 2024 COSCO SHIPPING E-Bidding Platform. All Rights Reserved.',
"查看":"Info",
"采购需求公示":"Procurement Demand Announcement",
"招标采购公告":"Bidding Procurement Announcement",

View File

@ -5,6 +5,20 @@ export default {
'menu.通知中心': '通知中心',
'menu.下载中心': '下载中心',
'menu.关于我们': '关于我们',
// 关于我们页面
'about.title': '关于我们',
'about.company.title': '公司简介',
'about.advantages.title': '平台优势',
'about.history.title': '发展历程',
'about.contact.title': '联系我们',
'about.address': '总部地址',
'about.phone': '联系电话',
'about.hotline': '服务热线',
'about.email': '电子邮箱',
'about.worktime': '工作时间',
'about.copyright': '© 2024 中远海运电子招投标平台 版权所有',
"查看":"查看",
"采购需求公示":"采购需求公示",
"招标采购公告":"招标采购公告",

View File

@ -0,0 +1,3 @@
export default {
'menu.下载中心': '下载中心',
};

View File

@ -0,0 +1,78 @@
@import '~antd/es/style/themes/default.less';
.aboutContainer {
padding: 24px;
background-color: #fff;
}
.aboutContent {
max-width: 1000px;
margin: 0 auto;
}
.aboutTitle {
text-align: center;
margin-bottom: 40px;
}
.aboutSection {
margin-bottom: 48px;
}
.sectionTitle {
position: relative;
margin-bottom: 24px;
padding-left: 12px;
&::before {
content: '';
position: absolute;
left: 0;
top: 4px;
height: 20px;
width: 4px;
background-color: #1890ff;
}
}
.sectionContent {
color: #333;
line-height: 2;
font-size: 15px;
}
.imageWrapper {
margin: 24px 0;
text-align: center;
}
.aboutImage {
max-width: 100%;
height: auto;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.companyInfo {
background-color: #f5f5f5;
padding: 24px;
border-radius: 4px;
margin-top: 24px;
}
.infoItem {
margin-bottom: 12px;
display: flex;
.label {
font-weight: 500;
margin-right: 8px;
min-width: 80px;
}
}
.aboutFooter {
text-align: center;
margin-top: 48px;
color: rgba(0, 0, 0, 0.45);
}

View File

@ -1,5 +1,193 @@
import React from 'react';
import { Typography, Divider, Row, Col } from 'antd';
import { useIntl } from 'umi';
import styles from './about.less';
const { Title, Paragraph } = Typography;
const AboutPage: React.FC = () => {
return <>AboutPage</>;
const intl = useIntl();
return (
<div className={styles.aboutContainer}>
<div className={styles.aboutContent}>
<div className={styles.aboutTitle}>
<Title level={2}>{intl.formatMessage({ id: 'about.title' })}</Title>
</div>
<div className={styles.aboutSection}>
<Title level={3} className={styles.sectionTitle}>
{intl.formatMessage({ id: 'about.company.title' })}
</Title>
<div className={styles.sectionContent}>
<Paragraph>
</Paragraph>
<div className={styles.imageWrapper}>
<img
src="/home_bg.png"
alt="公司总部"
className={styles.aboutImage}
/>
</div>
<Paragraph>
&ldquo;&rdquo;
</Paragraph>
</div>
</div>
<Divider />
<div className={styles.aboutSection}>
<Title level={3} className={styles.sectionTitle}>
{intl.formatMessage({ id: 'about.advantages.title' })}
</Title>
<div className={styles.sectionContent}>
<Row gutter={[24, 24]}>
<Col xs={24} md={8}>
<div>
<Title level={4}></Title>
<Paragraph>
线
</Paragraph>
</div>
</Col>
<Col xs={24} md={8}>
<div>
<Title level={4}></Title>
<Paragraph>
</Paragraph>
</div>
</Col>
<Col xs={24} md={8}>
<div>
<Title level={4}></Title>
<Paragraph>
</Paragraph>
</div>
</Col>
</Row>
<div className={styles.imageWrapper}>
<img
src="/home_bg.png"
alt="平台功能展示"
className={styles.aboutImage}
/>
</div>
<Row gutter={[24, 24]}>
<Col xs={24} md={8}>
<div>
<Title level={4}></Title>
<Paragraph>
</Paragraph>
</div>
</Col>
<Col xs={24} md={8}>
<div>
<Title level={4}></Title>
<Paragraph>
</Paragraph>
</div>
</Col>
<Col xs={24} md={8}>
<div>
<Title level={4}></Title>
<Paragraph>
</Paragraph>
</div>
</Col>
</Row>
</div>
</div>
<Divider />
<div className={styles.aboutSection}>
<Title level={3} className={styles.sectionTitle}>
{intl.formatMessage({ id: 'about.history.title' })}
</Title>
<div className={styles.sectionContent}>
<Paragraph>
<strong>2018</strong> -
</Paragraph>
<Paragraph>
<strong>2019</strong> - 线
</Paragraph>
<Paragraph>
<strong>2020</strong> -
</Paragraph>
<Paragraph>
<strong>2021</strong> -
</Paragraph>
<Paragraph>
<strong>2022</strong> - ERP系统的深度集成
</Paragraph>
<Paragraph>
<strong>2023</strong> -
</Paragraph>
<Paragraph>
<strong>2024</strong> - 3.0
</Paragraph>
</div>
</div>
<Divider />
<div className={styles.aboutSection}>
<Title level={3} className={styles.sectionTitle}>
{intl.formatMessage({ id: 'about.contact.title' })}
</Title>
<div className={styles.sectionContent}>
<div className={styles.companyInfo}>
<div className={styles.infoItem}>
<span className={styles.label}>{intl.formatMessage({ id: 'about.address' })}</span>
<span>666</span>
</div>
<div className={styles.infoItem}>
<span className={styles.label}>{intl.formatMessage({ id: 'about.phone' })}</span>
<span>021-65966666</span>
</div>
<div className={styles.infoItem}>
<span className={styles.label}>{intl.formatMessage({ id: 'about.hotline' })}</span>
<span>400-888-9999</span>
</div>
<div className={styles.infoItem}>
<span className={styles.label}>{intl.formatMessage({ id: 'about.email' })}</span>
<span>service@ebidding.cosco.com</span>
</div>
<div className={styles.infoItem}>
<span className={styles.label}>{intl.formatMessage({ id: 'about.worktime' })}</span>
<span> 9:00-17:30</span>
</div>
</div>
</div>
</div>
<div className={styles.aboutFooter}>
<Paragraph>{intl.formatMessage({ id: 'about.copyright' })}</Paragraph>
</div>
</div>
</div>
);
};
export default AboutPage;

View File

@ -0,0 +1,68 @@
@import '~antd/es/style/themes/default.less';
.downloadContainer {
padding: 24px;
background-color: #fff;
}
.downloadRow {
width: 100%;
}
.menuCol {
margin-bottom: 24px;
}
.downloadMenu {
border-right: none;
}
.downloadContent {
width: 100%;
}
.downloadCardList {
margin-top: 16px;
}
.downloadCard {
margin-bottom: 24px;
transition: all 0.3s;
display: flex;
flex-direction: column;
&:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
}
.cardTitle {
color: #333;
font-weight: 500;
font-size: 16px;
line-height: 22px;
margin-bottom: 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
align-items: center;
}
.cardDate {
color: rgba(0, 0, 0, 0.45);
margin-bottom: 12px;
font-size: 12px;
}
.downloadIcon {
font-size: 24px;
margin-right: 8px;
color: #1890ff;
}
.downloadButton {
margin-top: 12px;
width: 100%;
}

View File

@ -1,5 +1,240 @@
import React from 'react';
import React, { useState, useEffect } from 'react';
import { Card, Menu, Row, Col, Pagination, Button, Typography, Space, message } from 'antd';
import { FileOutlined, BookOutlined, DownloadOutlined } from '@ant-design/icons';
import styles from './download.less';
import { downloadFile } from './service';
const { Title, Text } = Typography;
// 模拟模板文件数据
const mockTemplateFiles = [
{
id: '1',
title: '公开招标操作手册',
description: '公开招标各角色操作手册',
publishDate: '2025年2月3日',
type: 'template',
icon: <FileOutlined />,
fileName: '公开招标操作手册.pdf',
},
{
id: '2',
title: '询价采购模板',
description: '标准询价采购流程文档模板',
publishDate: '2025年1月15日',
type: 'template',
icon: <FileOutlined />,
fileName: '询价采购模板.docx',
},
{
id: '3',
title: '竞争性谈判模板',
description: '竞争性谈判标准文档模板',
publishDate: '2024年12月20日',
type: 'template',
icon: <FileOutlined />,
fileName: '竞争性谈判模板.docx',
},
{
id: '4',
title: '单一来源采购模板',
description: '单一来源采购申请及实施模板',
publishDate: '2024年12月5日',
type: 'template',
icon: <FileOutlined />,
fileName: '单一来源采购模板.docx',
},
{
id: '5',
title: '供应商评估表格',
description: '供应商资质与能力评估标准表格',
publishDate: '2024年11月18日',
type: 'template',
icon: <FileOutlined />,
fileName: '供应商评估表格.xlsx',
},
{
id: '6',
title: '合同范本模板',
description: '标准采购合同范本',
publishDate: '2024年11月1日',
type: 'template',
icon: <FileOutlined />,
fileName: '合同范本模板.docx',
},
];
// 模拟操作手册数据
const mockManuals = [
{
id: '7',
title: '供应商注册指南',
description: '供应商平台注册及资质提交操作指南',
publishDate: '2025年1月25日',
type: 'manual',
icon: <BookOutlined />,
fileName: '供应商注册指南.pdf',
},
{
id: '8',
title: '投标操作指南',
description: '电子投标全流程操作手册',
publishDate: '2025年1月10日',
type: 'manual',
icon: <BookOutlined />,
fileName: '投标操作指南.pdf',
},
{
id: '9',
title: '在线开标指南',
description: '在线开标会议参与指南',
publishDate: '2024年12月15日',
type: 'manual',
icon: <BookOutlined />,
fileName: '在线开标指南.pdf',
},
{
id: '10',
title: '评标专家操作手册',
description: '评标专家系统使用指南',
publishDate: '2024年11月28日',
type: 'manual',
icon: <BookOutlined />,
fileName: '评标专家操作手册.pdf',
},
{
id: '11',
title: '合同签署指南',
description: '电子合同签署流程指南',
publishDate: '2024年11月10日',
type: 'manual',
icon: <BookOutlined />,
fileName: '合同签署指南.pdf',
},
];
const DownloadPage: React.FC = () => {
return <>DownloadPage</>;
const [activeMenu, setActiveMenu] = useState<string>('template');
const [downloadData, setDownloadData] = useState<any[]>([]);
const [loading, setLoading] = useState<boolean>(true);
const [pagination, setPagination] = useState({
current: 1,
pageSize: 6,
total: 0,
});
// 根据当前选中的菜单加载对应的下载数据
useEffect(() => {
setLoading(true);
// 模拟API请求
setTimeout(() => {
const data = activeMenu === 'template' ? mockTemplateFiles : mockManuals;
setDownloadData(data);
setPagination((prevPagination) => ({
...prevPagination,
total: data.length,
current: 1,
}));
setLoading(false);
}, 500);
}, [activeMenu]);
// 处理菜单切换
const handleMenuClick = (e: any) => {
setActiveMenu(e.key);
};
// 处理分页变化
const handlePageChange = (page: number, pageSize?: number) => {
setPagination({
...pagination,
current: page,
pageSize: pageSize || pagination.pageSize,
});
};
// 处理下载按钮点击
const handleDownload = async (id: string, fileName: string) => {
try {
await downloadFile(id, fileName);
} catch (error) {
message.error('下载失败,请稍后重试');
}
};
// 计算当前页显示的数据
const getCurrentPageData = () => {
const { current, pageSize } = pagination;
const startIndex = (current - 1) * pageSize;
const endIndex = startIndex + pageSize;
return downloadData.slice(startIndex, endIndex);
};
return (
<div className={styles.downloadContainer}>
<Row gutter={16} className={styles.downloadRow}>
<Col span={4} className={styles.menuCol}>
<Menu
mode="vertical"
selectedKeys={[activeMenu]}
onClick={handleMenuClick}
className={styles.downloadMenu}
>
<Menu.Item key="template" icon={<FileOutlined />}>
</Menu.Item>
<Menu.Item key="manual" icon={<BookOutlined />}>
</Menu.Item>
</Menu>
</Col>
<Col span={20}>
<div className={styles.downloadContent}>
<Title level={4}>{activeMenu === 'template' ? '模板文件' : '操作手册'}</Title>
<Row gutter={[16, 16]} className={styles.downloadCardList}>
{getCurrentPageData().map((item) => (
<Col xs={24} sm={12} md={8} key={item.id}>
<Card
hoverable
className={styles.downloadCard}
loading={loading}
>
<Space direction="vertical" size="small" style={{ width: '100%' }}>
<div className={styles.cardTitle}>
<span className={styles.downloadIcon}>{item.icon}</span>
{item.title}
</div>
<div className={styles.cardDate}>{item.publishDate}</div>
<Text type="secondary" ellipsis={{ tooltip: true }}>{item.description}</Text>
<Button
type="primary"
icon={<DownloadOutlined />}
className={styles.downloadButton}
onClick={() => handleDownload(item.id, item.fileName)}
>
</Button>
</Space>
</Card>
</Col>
))}
</Row>
<Pagination
current={pagination.current}
pageSize={pagination.pageSize}
total={pagination.total}
onChange={handlePageChange}
showTotal={(total) => `${total} 条记录`}
style={{ marginTop: 24, textAlign: 'right' }}
/>
</div>
</Col>
</Row>
</div>
);
};
export default DownloadPage;

View File

@ -0,0 +1,75 @@
import { message } from 'antd';
import request from '@/utils/request';
/**
* 获取下载中心文件列表
* @param params 查询参数
*/
export async function getDownloadList(params: {
type: string;
current: number;
pageSize: number;
}) {
try {
// 实际项目中应该通过API获取数据
// return request('/api/download/list', {
// method: 'GET',
// params,
// });
// 模拟API请求返回数据
return Promise.resolve({
success: true,
data: {
list: [],
total: 0,
},
});
} catch (error) {
message.error('获取下载列表失败');
return {
success: false,
data: {
list: [],
total: 0,
},
};
}
}
/**
* 下载文件
* @param fileId 文件ID
* @param fileName 文件名称
*/
export async function downloadFile(fileId: string, fileName: string) {
try {
// 实际项目中应该通过API下载文件
// const response = await request(`/api/download/file/${fileId}`, {
// method: 'GET',
// responseType: 'blob',
// });
// 创建下载链接
// const blob = new Blob([response]);
// const url = window.URL.createObjectURL(blob);
// const link = document.createElement('a');
// link.href = url;
// link.download = fileName;
// document.body.appendChild(link);
// link.click();
// window.URL.revokeObjectURL(url);
// document.body.removeChild(link);
// 模拟下载成功
message.success(`文件"${fileName}"开始下载`);
return {
success: true,
};
} catch (error) {
message.error(`下载文件"${fileName}"失败`);
return {
success: false,
};
}
}

View File

@ -6,17 +6,6 @@
background-color: #fff;
}
.noticeHeader {
margin-bottom: 24px;
}
.pageTitle {
margin-bottom: 24px;
color: rgb(0, 79, 142);
font-weight: 500;
text-align: center;
}
.noticeRow {
width: 100%;
}
@ -25,35 +14,14 @@
margin-bottom: 24px;
}
.menuTitle {
margin-bottom: 16px;
padding: 0 16px;
color: rgb(0, 79, 142);
font-weight: 500;
text-align: center;
}
.noticeMenu {
border-right: none;
}
.contentCard {
border-radius: 4px;
}
.noticeContent {
width: 100%;
}
.tableHeader {
margin-bottom: 16px;
}
.tableTitle {
color: rgb(0, 79, 142);
font-weight: 500;
}
.noticeTitle {
color: #333;
transition: color 0.3s;

View File

@ -145,7 +145,7 @@ const SupplierRegister: React.FC = () => {
okText="我知道了"
cancelButtonProps={{ style: { display: 'none' } }}
destroyOnClose
maskClosable={false}
// maskClosable={false}
>
<div style={{ maxHeight: '60vh', overflow: 'auto' }}>
<p></p>