feat: 订单列表
This commit is contained in:
90
src/pages/trade/order/detail/component/info/basic-info.tsx
Normal file
90
src/pages/trade/order/detail/component/info/basic-info.tsx
Normal file
@@ -0,0 +1,90 @@
|
||||
import { ProCard } from '@ant-design/pro-components';
|
||||
import { Button, Card, Steps, Typography } from 'antd';
|
||||
import RcResizeObserver from 'rc-resize-observer';
|
||||
import React, { useCallback, useState } from 'react';
|
||||
import styles from './index.module.less';
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
const BasicInfo: React.FC = () => {
|
||||
const [responsive, setResponsive] = useState(false);
|
||||
const renderTitle = useCallback(() => {
|
||||
return <div>标题</div>;
|
||||
}, []);
|
||||
return (
|
||||
<div className={styles['order-info']}>
|
||||
<Card title="基本信息">
|
||||
<ProCard
|
||||
size="small"
|
||||
title={renderTitle()}
|
||||
bordered
|
||||
headerBordered
|
||||
gutter={8}
|
||||
className="order-info-card"
|
||||
>
|
||||
<ProCard colSpan="200px">
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 10,
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Title type="danger" level={4} style={{ margin: 0 }}>
|
||||
等待付款
|
||||
</Title>
|
||||
<span>
|
||||
<Text type="secondary">剩余</Text>
|
||||
<Text>4分30秒</Text>
|
||||
</span>
|
||||
|
||||
<Button type="primary" block>
|
||||
取消订单
|
||||
</Button>
|
||||
<Button block>添加备注</Button>
|
||||
</div>
|
||||
</ProCard>
|
||||
<ProCard layout="center">
|
||||
<RcResizeObserver
|
||||
key="resize-observer"
|
||||
onResize={(offset) => {
|
||||
setResponsive(offset.width < 460);
|
||||
}}
|
||||
>
|
||||
<Steps
|
||||
size="small"
|
||||
progressDot
|
||||
style={{ width: '100%' }}
|
||||
current={1}
|
||||
direction={responsive ? 'vertical' : 'horizontal'}
|
||||
items={[
|
||||
{
|
||||
title: '创建订单',
|
||||
description: 'This is a description.',
|
||||
},
|
||||
{
|
||||
title: '等待付款',
|
||||
},
|
||||
{
|
||||
title: '等待确定',
|
||||
},
|
||||
{
|
||||
title: '等待服务',
|
||||
},
|
||||
{
|
||||
title: '等待验收',
|
||||
},
|
||||
{
|
||||
title: '完成',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</RcResizeObserver>
|
||||
</ProCard>
|
||||
</ProCard>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(BasicInfo);
|
||||
64
src/pages/trade/order/detail/component/info/config.tsx
Normal file
64
src/pages/trade/order/detail/component/info/config.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
import type { ProColumns } from '@ant-design/pro-components';
|
||||
import { Tag } from 'antd';
|
||||
import type { DeptVO } from '@/services/system/dept';
|
||||
|
||||
export const baseOrderColumns: ProColumns<DeptVO>[] = [
|
||||
{
|
||||
title: '商品',
|
||||
dataIndex: 'name',
|
||||
width: '33.33%',
|
||||
render: (_, record) => (
|
||||
<Tag color={record.status === 1 ? 'green' : 'red'}>{record.name}</Tag>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '服务',
|
||||
dataIndex: 'leaderUserId',
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: '财务',
|
||||
dataIndex: 'sort',
|
||||
hideInSearch: true,
|
||||
},
|
||||
];
|
||||
const sharedOnCell = (_: DeptVO, index?: number) => {
|
||||
if (index === 3) {
|
||||
return { colSpan: 0 };
|
||||
}
|
||||
|
||||
return {};
|
||||
};
|
||||
export const surchargeInfoColumns: ProColumns<DeptVO>[] = [
|
||||
{
|
||||
title: '服务附加费',
|
||||
dataIndex: 'name',
|
||||
width: '33.33%',
|
||||
render: (_, record, index) => {
|
||||
if (index === 3) {
|
||||
return 33333;
|
||||
}
|
||||
return (
|
||||
<Tag color={record.status === 1 ? 'green' : 'red'}>{record.name}</Tag>
|
||||
);
|
||||
},
|
||||
onCell: (_, index) => ({
|
||||
colSpan: index === 3 ? 4 : 1,
|
||||
}),
|
||||
},
|
||||
{
|
||||
title: '费用详情',
|
||||
dataIndex: 'leaderUserId',
|
||||
onCell: sharedOnCell,
|
||||
},
|
||||
{
|
||||
title: '付款信息',
|
||||
dataIndex: 'sort',
|
||||
onCell: sharedOnCell,
|
||||
},
|
||||
{
|
||||
title: '退款信息',
|
||||
dataIndex: 'leaderUserId1',
|
||||
onCell: sharedOnCell,
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,25 @@
|
||||
.order-info {
|
||||
:global {
|
||||
.ant-pro-card-header {
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
.ant-pro-card-col {
|
||||
flex: 1 auto;
|
||||
overflow: auto;
|
||||
}
|
||||
.order-info-card {
|
||||
.ant-pro-card-col {
|
||||
flex: 1 auto;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.order-paragraph {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ant-pro-card-body {
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
134
src/pages/trade/order/detail/component/info/prod-info.tsx
Normal file
134
src/pages/trade/order/detail/component/info/prod-info.tsx
Normal file
@@ -0,0 +1,134 @@
|
||||
import { ProCard } from '@ant-design/pro-components';
|
||||
import { Button, Card, Image, Space, Tag, Typography } from 'antd';
|
||||
import React, { useCallback } from 'react';
|
||||
import styles from './index.module.less';
|
||||
|
||||
const { Text, Paragraph } = Typography;
|
||||
const ProdInfo: React.FC = () => {
|
||||
const renderTitle = useCallback(() => {
|
||||
return (
|
||||
<Space style={{ height: '100%' }} size={16}>
|
||||
<Paragraph className="order-paragraph">百业到家</Paragraph>
|
||||
<Paragraph className="order-paragraph">
|
||||
<Text type="secondary"> 商品 ID：</Text>
|
||||
<Text copyable>8877777</Text>
|
||||
</Paragraph>
|
||||
<Paragraph className="order-paragraph">
|
||||
<Text type="secondary">SKU ID：</Text>
|
||||
<Text copyable>8877777</Text>
|
||||
</Paragraph>
|
||||
</Space>
|
||||
);
|
||||
}, []);
|
||||
return (
|
||||
<div className={styles['order-info']}>
|
||||
<Card title="商品信息">
|
||||
<ProCard
|
||||
size="small"
|
||||
title={renderTitle()}
|
||||
bordered
|
||||
headerBordered
|
||||
gutter={8}
|
||||
extra={<Button size="small">交易快照</Button>}
|
||||
>
|
||||
<ProCard
|
||||
layout="default"
|
||||
colSpan={'50%'}
|
||||
style={{ borderRight: '1px solid rgba(5,5,5,0.06)' }}
|
||||
>
|
||||
<Space>
|
||||
<Image
|
||||
width={64}
|
||||
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
/>
|
||||
<div>
|
||||
<Text>商品名称</Text>
|
||||
<Paragraph className="order-paragraph">
|
||||
<Text>规格：</Text>
|
||||
<Text type="secondary"> 标准,单独火化,基础清洁</Text>
|
||||
</Paragraph>
|
||||
<Space wrap size={0} direction="horizontal">
|
||||
<Paragraph
|
||||
className="order-paragraph"
|
||||
style={{ marginRight: 16 }}
|
||||
>
|
||||
<Text type="secondary">数量：</Text>
|
||||
<Text> 1</Text>
|
||||
</Paragraph>
|
||||
<Paragraph
|
||||
className="order-paragraph"
|
||||
style={{ marginRight: 16 }}
|
||||
>
|
||||
<Text type="secondary">单价：</Text>
|
||||
<Text> ¥100 件</Text>
|
||||
</Paragraph>
|
||||
<Paragraph
|
||||
className="order-paragraph"
|
||||
style={{ marginRight: 16 }}
|
||||
>
|
||||
<Text type="secondary">到手价：</Text>
|
||||
<Text> ¥80 件</Text>
|
||||
</Paragraph>
|
||||
<Paragraph className="order-paragraph">
|
||||
<Text type="secondary">成本价：</Text>
|
||||
<Text> ¥50 件/-</Text>
|
||||
</Paragraph>
|
||||
</Space>
|
||||
</div>
|
||||
</Space>
|
||||
<Paragraph style={{ marginTop: 16 }}>
|
||||
<Tag>标签</Tag>
|
||||
<Tag>标签</Tag>
|
||||
<Tag>标签</Tag>
|
||||
<Tag>标签</Tag>
|
||||
<Tag>标签</Tag>
|
||||
</Paragraph>
|
||||
<Paragraph className="order-paragraph">
|
||||
<Text type="secondary">商品描述：</Text>
|
||||
<Paragraph className="order-paragraph">
|
||||
商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品
|
||||
</Paragraph>
|
||||
</Paragraph>
|
||||
</ProCard>
|
||||
<ProCard
|
||||
style={{
|
||||
borderRight: '1px solid rgba(5,5,5,0.06)',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<Space direction="vertical">
|
||||
<Text>付款信息</Text>
|
||||
<Paragraph className="order-paragraph">
|
||||
<Text type="secondary">商品总价：</Text>
|
||||
<Text>¥500</Text>
|
||||
</Paragraph>
|
||||
<Paragraph className="order-paragraph">
|
||||
<Text type="secondary">商品总价：</Text>
|
||||
<Text>¥500</Text>
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
<Text type="secondary">商品总价：</Text>
|
||||
<Text>¥500</Text>
|
||||
</Paragraph>
|
||||
</Space>
|
||||
</ProCard>
|
||||
<ProCard>
|
||||
<Space direction="vertical">
|
||||
<Text>退款信息</Text>
|
||||
<Paragraph className="order-paragraph">
|
||||
<Text type="secondary">累计退款金额：</Text>
|
||||
<Text>¥500</Text>
|
||||
</Paragraph>
|
||||
<Paragraph className="order-paragraph">
|
||||
<Text type="secondary">累计退款数量：</Text>
|
||||
<Text>1</Text>
|
||||
</Paragraph>
|
||||
</Space>
|
||||
</ProCard>
|
||||
</ProCard>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(ProdInfo);
|
||||
76
src/pages/trade/order/detail/component/info/select-info.tsx
Normal file
76
src/pages/trade/order/detail/component/info/select-info.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
import { ProCard } from '@ant-design/pro-components';
|
||||
import { Card, Space } from 'antd';
|
||||
import React from 'react';
|
||||
import EnhancedProTable from '@/components/EnhancedProTable';
|
||||
import {
|
||||
type DeptReqVO,
|
||||
type DeptVO,
|
||||
getDeptPage,
|
||||
} from '@/services/system/dept';
|
||||
import { baseOrderColumns } from '../../../config';
|
||||
import styles from './index.module.less';
|
||||
|
||||
const SelectInfo: React.FC = () => {
|
||||
const onFetch = async (
|
||||
params: DeptReqVO & {
|
||||
pageSize?: number;
|
||||
current?: number;
|
||||
},
|
||||
) => {
|
||||
const data = await getDeptPage({
|
||||
...params,
|
||||
pageNo: params.current,
|
||||
pageSize: params.pageSize,
|
||||
});
|
||||
return {
|
||||
data: data,
|
||||
success: true,
|
||||
total: data.total,
|
||||
};
|
||||
};
|
||||
return (
|
||||
<div className={styles['order-info']}>
|
||||
<Card title="可选服务">
|
||||
<Space direction="vertical" style={{ width: '100%' }} size={16}>
|
||||
<ProCard split="vertical" bordered>
|
||||
<ProCard size="small" title="服务" headerBordered>
|
||||
1111
|
||||
</ProCard>
|
||||
<ProCard size="small" title="付款信息" headerBordered>
|
||||
1111
|
||||
</ProCard>
|
||||
<ProCard size="small" title="退款信息" headerBordered>
|
||||
1111
|
||||
</ProCard>
|
||||
</ProCard>
|
||||
|
||||
<EnhancedProTable<DeptVO>
|
||||
columns={baseOrderColumns}
|
||||
request={onFetch}
|
||||
showIndex={false}
|
||||
size="small"
|
||||
search={false}
|
||||
showActions={false}
|
||||
showSelection={false}
|
||||
bordered
|
||||
pagination={false}
|
||||
/>
|
||||
|
||||
<ProCard split="vertical" bordered>
|
||||
<ProCard size="small" title="纪念品" headerBordered>
|
||||
1111
|
||||
</ProCard>
|
||||
<ProCard size="small" title="付款信息" headerBordered>
|
||||
1111
|
||||
</ProCard>
|
||||
<ProCard size="small" title="退款摘要" headerBordered>
|
||||
1111
|
||||
</ProCard>
|
||||
</ProCard>
|
||||
</Space>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(SelectInfo);
|
||||
98
src/pages/trade/order/detail/component/info/service-info.tsx
Normal file
98
src/pages/trade/order/detail/component/info/service-info.tsx
Normal file
@@ -0,0 +1,98 @@
|
||||
import { ProCard } from '@ant-design/pro-components';
|
||||
import { Button, Card, Image, Space, Typography } from 'antd';
|
||||
import React from 'react';
|
||||
import styles from './index.module.less';
|
||||
|
||||
const { Text, Paragraph } = Typography;
|
||||
const ServiceInfo: React.FC = () => {
|
||||
return (
|
||||
<div className={styles['order-info']}>
|
||||
<Card title="服务信息">
|
||||
<ProCard split="vertical">
|
||||
<ProCard
|
||||
title="遗体信息"
|
||||
extra={<Button size="small">修改记录</Button>}
|
||||
size="small"
|
||||
colSpan="30%"
|
||||
headerBordered
|
||||
>
|
||||
<Paragraph>
|
||||
<Text type="secondary">姓名：</Text>
|
||||
<Text>钱多多</Text>
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
<Text type="secondary">宠物品种：</Text>
|
||||
<Text>钱多多</Text>
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
<Text type="secondary">体型/体重：</Text>
|
||||
<Text>钱多多</Text>
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
<Text type="secondary">离世时间：</Text>
|
||||
<Text>钱多多</Text>
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
<Text type="secondary">离世原因：</Text>
|
||||
<Text>钱多多</Text>
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
<Text type="secondary">遗体照片：</Text>
|
||||
<Space wrap>
|
||||
<Image
|
||||
width={48}
|
||||
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
/>
|
||||
<Image
|
||||
width={48}
|
||||
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
/>
|
||||
<Image
|
||||
width={48}
|
||||
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
/>
|
||||
<Image
|
||||
width={48}
|
||||
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
/>
|
||||
<Image
|
||||
width={48}
|
||||
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
/>
|
||||
</Space>
|
||||
</Paragraph>
|
||||
</ProCard>
|
||||
<ProCard
|
||||
size="small"
|
||||
title="预约信息"
|
||||
headerBordered
|
||||
extra={<Button size="small">修改记录</Button>}
|
||||
>
|
||||
<Paragraph>
|
||||
<Text type="secondary">离世时间：</Text>
|
||||
<Text>钱多多</Text>
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
<Text type="secondary">更改规则：</Text>
|
||||
<Text>钱多多</Text>
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
<Text type="secondary">预约时间：</Text>
|
||||
<Text>钱多多</Text>
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
<Text type="secondary">用户备注：</Text>
|
||||
<Text>钱多多</Text>
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
<Text type="secondary">客服备注：</Text>
|
||||
<Text>钱多多</Text>
|
||||
</Paragraph>
|
||||
</ProCard>
|
||||
</ProCard>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(ServiceInfo);
|
||||
@@ -0,0 +1,49 @@
|
||||
import { Card } from 'antd';
|
||||
import React from 'react';
|
||||
import EnhancedProTable from '@/components/EnhancedProTable';
|
||||
import {
|
||||
type DeptReqVO,
|
||||
type DeptVO,
|
||||
getDeptPage,
|
||||
} from '@/services/system/dept';
|
||||
import { surchargeInfoColumns } from './config';
|
||||
import styles from './index.module.less';
|
||||
|
||||
const SurchargeInfo: React.FC = () => {
|
||||
const onFetch = async (
|
||||
params: DeptReqVO & {
|
||||
pageSize?: number;
|
||||
current?: number;
|
||||
},
|
||||
) => {
|
||||
const data = await getDeptPage({
|
||||
...params,
|
||||
pageNo: params.current,
|
||||
pageSize: params.pageSize,
|
||||
});
|
||||
return {
|
||||
data: data,
|
||||
success: true,
|
||||
total: data.total,
|
||||
};
|
||||
};
|
||||
return (
|
||||
<div className={styles['order-info']}>
|
||||
<Card title="服务信息">
|
||||
<EnhancedProTable<DeptVO>
|
||||
columns={surchargeInfoColumns}
|
||||
request={onFetch}
|
||||
showIndex={false}
|
||||
size="small"
|
||||
search={false}
|
||||
showActions={false}
|
||||
showSelection={false}
|
||||
bordered
|
||||
pagination={false}
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(SurchargeInfo);
|
||||
26
src/pages/trade/order/detail/index.tsx
Normal file
26
src/pages/trade/order/detail/index.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import { Tabs, type TabsProps } from 'antd';
|
||||
import React from 'react';
|
||||
import OrderInfo from './order-info';
|
||||
|
||||
const DetailCom: React.FC = () => {
|
||||
const items: TabsProps['items'] = [
|
||||
{
|
||||
key: '1',
|
||||
label: '订单信息 ',
|
||||
children: <OrderInfo />,
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: '服务履约',
|
||||
children: '服务履约',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: '商品配送',
|
||||
children: '商品配送',
|
||||
},
|
||||
];
|
||||
return <Tabs defaultActiveKey="1" items={items} />;
|
||||
};
|
||||
|
||||
export default React.memo(DetailCom);
|
||||
21
src/pages/trade/order/detail/order-info.tsx
Normal file
21
src/pages/trade/order/detail/order-info.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import { Space } from 'antd';
|
||||
import React from 'react';
|
||||
import BasicInfo from './component/info/basic-info'; //基本信息（通版）
|
||||
import ProdInfo from './component/info/prod-info'; //商品信息（通版）
|
||||
import SelectInfo from './component/info/select-info'; //可选服务（殡葬专属字段）
|
||||
import ServiceInfo from './component/info/service-info';
|
||||
import SurchargeInfo from './component/info/surcharge-info'; //服务附加费（殡葬专属字段）
|
||||
|
||||
const OrderDetail: React.FC = () => {
|
||||
return (
|
||||
<Space direction="vertical" size={24} style={{ width: '100%' }}>
|
||||
<BasicInfo />
|
||||
<ProdInfo />
|
||||
<ServiceInfo />
|
||||
<SelectInfo />
|
||||
<SurchargeInfo />
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(OrderDetail);
|
||||
Reference in New Issue
Block a user