xinadmin/school2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
liu
2026-07-13 15:23:29 +08:00
commit 50885a98c8
473 changed files with 33772 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/pages/page-layout/descriptions.tsx
+339
View File
@@ -0,0 +1,339 @@
import {
Descriptions,
Card,
Row,
Col,
Button,
Space,
Typography,
Flex,
Tag,
Divider,
Steps,
Timeline,
Table,
Avatar,
} from 'antd';
import {
ShoppingOutlined,
PrinterOutlined,
DownloadOutlined,
CheckCircleOutlined,
ClockCircleOutlined,
UserOutlined,
} from '@ant-design/icons';
const { Title, Text } = Typography;
const Layout = () => {
// 订单商品数据
const productColumns = [
{
title: '商品名称',
dataIndex: 'name',
key: 'name',
},
{
title: '商品编号',
dataIndex: 'code',
key: 'code',
},
{
title: '数量',
dataIndex: 'quantity',
key: 'quantity',
},
{
title: '单价',
dataIndex: 'price',
key: 'price',
render: (price: number) => `¥${price.toFixed(2)}`,
},
{
title: '小计',
dataIndex: 'total',
key: 'total',
render: (total: number) => `¥${total.toFixed(2)}`,
},
];
const productData = [
{
key: '1',
name: 'iPhone 15 Pro Max',
code: 'IP15PM-256-BLK',
quantity: 2,
price: 9999,
total: 19998,
},
{
key: '2',
name: 'AirPods Pro 2',
code: 'APP2-WHT',
quantity: 1,
price: 1899,
total: 1899,
},
{
key: '3',
name: 'MacBook Pro 16"',
code: 'MBP16-M3-SLV',
quantity: 1,
price: 25999,
total: 25999,
},
];
// 物流信息
const logisticsData = [
{
time: '2026-01-01 15:30:00',
status: '已签收',
description: '您的订单已由本人签收,感谢您的购买',
},
{
time: '2026-01-01 09:20:00',
status: '派送中',
description: '快递员正在为您派送 [北京市朝阳区] 快递员:李师傅 13800138000',
},
{
time: '2025-12-31 18:45:00',
status: '运输中',
description: '您的包裹已到达 [北京分拨中心]',
},
{
time: '2025-12-30 14:20:00',
status: '已发货',
description: '您的订单已从 [上海仓库] 发出,物流单号: SF1234567890',
},
{
time: '2025-12-30 10:00:00',
status: '已支付',
description: '订单支付成功,等待商家发货',
},
];
return (
<div style={{ minHeight: '100vh' }}>
{/* 页面头部 */}
<Card variant={'borderless'} style={{ marginBottom: 20 }}>
<Flex justify="space-between" align="center">
<div>
<Title level={3} style={{ marginBottom: 4 }}>
<ShoppingOutlined style={{ marginRight: 8 }} />
订单详情
</Title>
<Text type="secondary">订单号: OD2026010100001 · 创建时间: 2025-12-30 09:45:32</Text>
</div>
<Space style={{ height: '100%' }}>
<Button icon={<PrinterOutlined />}>打印订单</Button>
<Button icon={<DownloadOutlined />}>导出订单</Button>
<Button type="primary">联系客服</Button>
</Space>
</Flex>
</Card>
{/* 订单状态 */}
<Card variant={'borderless'} style={{ marginBottom: 20 }}>
<Steps
current={4}
items={[
{
title: '提交订单',
description: '2025-12-30 09:45',
icon: <CheckCircleOutlined />,
},
{
title: '支付完成',
description: '2025-12-30 10:00',
icon: <CheckCircleOutlined />,
},
{
title: '商家发货',
description: '2025-12-30 14:20',
icon: <CheckCircleOutlined />,
},
{
title: '运输中',
description: '2025-12-31 18:45',
icon: <CheckCircleOutlined />,
},
{
title: '已签收',
description: '2026-01-01 15:30',
icon: <CheckCircleOutlined />,
},
]}
/>
</Card>
{/* 主内容区域 */}
<Row gutter={[16, 16]}>
{/* 订单基本信息 */}
<Col xs={24} lg={16}>
<Card
variant={'borderless'}
title="订单基本信息"
style={{ marginBottom: 16 }}
>
<Descriptions column={{ xs: 1, sm: 2 }} bordered>
<Descriptions.Item label="订单号">OD2026010100001</Descriptions.Item>
<Descriptions.Item label="订单状态">
<Tag color="success" icon={<CheckCircleOutlined />}>
已完成
</Tag>
</Descriptions.Item>
<Descriptions.Item label="下单时间">2025-12-30 09:45:32</Descriptions.Item>
<Descriptions.Item label="支付时间">2025-12-30 10:00:15</Descriptions.Item>
<Descriptions.Item label="发货时间">2025-12-30 14:20:00</Descriptions.Item>
<Descriptions.Item label="完成时间">2026-01-01 15:30:00</Descriptions.Item>
<Descriptions.Item label="支付方式">
<Tag color="blue">微信支付</Tag>
</Descriptions.Item>
<Descriptions.Item label="配送方式">顺丰速运</Descriptions.Item>
<Descriptions.Item label="发票类型">电子发票</Descriptions.Item>
<Descriptions.Item label="发票抬头">北京科技有限公司</Descriptions.Item>
</Descriptions>
</Card>
{/* 收货信息 */}
<Card
variant={'borderless'}
title="收货信息"
style={{ marginBottom: 16 }}
>
<Descriptions column={{ xs: 1, sm: 2 }} bordered>
<Descriptions.Item label="收货人">张三</Descriptions.Item>
<Descriptions.Item label="联系电话">138****8888</Descriptions.Item>
<Descriptions.Item label="收货地址" span={2}>
北京市朝阳区建国路88号SOHO现代城A座2106室
</Descriptions.Item>
</Descriptions>
</Card>
{/* 商品信息 */}
<Card variant={'borderless'} title="商品信息">
<Table
columns={productColumns}
dataSource={productData}
pagination={false}
summary={() => (
<Table.Summary>
<Table.Summary.Row>
<Table.Summary.Cell index={0} colSpan={4}>
<Text strong>合计</Text>
</Table.Summary.Cell>
<Table.Summary.Cell index={1}>
<Text strong style={{ color: '#f5222d', fontSize: 16 }}>
¥47,896.00
</Text>
</Table.Summary.Cell>
</Table.Summary.Row>
<Table.Summary.Row>
<Table.Summary.Cell index={0} colSpan={4}>
<Text>运费</Text>
</Table.Summary.Cell>
<Table.Summary.Cell index={1}>
<Text>¥0.00</Text>
</Table.Summary.Cell>
</Table.Summary.Row>
<Table.Summary.Row>
<Table.Summary.Cell index={0} colSpan={4}>
<Text>优惠</Text>
</Table.Summary.Cell>
<Table.Summary.Cell index={1}>
<Text style={{ color: '#52c41a' }}>-¥500.00</Text>
</Table.Summary.Cell>
</Table.Summary.Row>
<Table.Summary.Row>
<Table.Summary.Cell index={0} colSpan={4}>
<Text strong style={{ fontSize: 16 }}>实付金额</Text>
</Table.Summary.Cell>
<Table.Summary.Cell index={1}>
<Text strong style={{ color: '#f5222d', fontSize: 18 }}>
¥47,396.00
</Text>
</Table.Summary.Cell>
</Table.Summary.Row>
</Table.Summary>
)}
/>
</Card>
</Col>
{/* 侧边栏信息 */}
<Col xs={24} lg={8}>
{/* 买家信息 */}
<Card
variant={'borderless'}
title="买家信息"
style={{ marginBottom: 16 }}
>
<Flex align="center" style={{ marginBottom: 16 }}>
<Avatar size={48} icon={<UserOutlined />} />
<div style={{ marginLeft: 12 }}>
<Text strong>张三</Text>
<br />
<Text type="secondary" style={{ fontSize: 12 }}>
会员等级: VIP金卡
</Text>
</div>
</Flex>
<Divider style={{ margin: '12px 0' }} />
<Descriptions column={1} size="small">
<Descriptions.Item label="用户ID">U202512300001</Descriptions.Item>
<Descriptions.Item label="手机号">138****8888</Descriptions.Item>
<Descriptions.Item label="邮箱">zhangsan@example.com</Descriptions.Item>
<Descriptions.Item label="历史订单">156 笔</Descriptions.Item>
<Descriptions.Item label="累计消费">¥358,960</Descriptions.Item>
</Descriptions>
</Card>
{/* 物流信息 */}
<Card variant={'borderless'} title="物流追踪">
<Text type="secondary" style={{ fontSize: 12 }}>
物流公司: 顺丰速运
</Text>
<br />
<Text type="secondary" style={{ fontSize: 12 }}>
快递单号: SF1234567890
</Text>
<Divider style={{ margin: '12px 0' }} />
<Timeline
items={logisticsData.map((item) => ({
color: item.status === '已签收' ? 'green' : 'blue',
children: (
<div>
<Text strong>{item.status}</Text>
<br />
<Text type="secondary" style={{ fontSize: 12 }}>
{item.description}
</Text>
<br />
<Text type="secondary" style={{ fontSize: 12 }}>
<ClockCircleOutlined style={{ marginRight: 4 }} />
{item.time}
</Text>
</div>
),
}))}
/>
</Card>
</Col>
</Row>
{/* 备注信息 */}
<Card variant={'borderless'} title="订单备注" style={{ marginTop: 16 }}>
<Text type="secondary">
买家留言: 请在工作日配送,周末家里没人。如有问题请提前电话联系。
</Text>
<Divider />
<Text type="secondary">
商家备注: 已按照买家要求在工作日配送,客户体验良好。
</Text>
</Card>
</div>
);
};
export default Layout;