import React, { useState, useEffect } from 'react';
|
import { Modal, Descriptions, Image, Typography, message, Table } from 'antd';
|
import { getPhysicalGoodsOrderDetail } from '../service';
|
|
const OrderDetailModal = ({ orderId, visible, onClose }) => {
|
const [orderDetail, setOrderDetail] = useState(null);
|
const [loading, setLoading] = useState(false);
|
|
useEffect(() => {
|
const fetchDetail = async () => {
|
setLoading(true);
|
try {
|
const res = await getPhysicalGoodsOrderDetail(orderId);
|
if (res.code === 200) {
|
setOrderDetail(res.data);
|
} else {
|
message.error(res.message || '获取订单详情失败');
|
}
|
} catch (error) {
|
message.error('获取订单详情失败');
|
}
|
setLoading(false);
|
};
|
if (visible && orderId) {
|
fetchDetail();
|
}
|
}, [visible, orderId]);
|
|
// 渲染商品信息表格
|
const renderProductTable = () => {
|
const columns = [
|
{
|
title: '商品名称',
|
dataIndex: 'physicalGoodsName',
|
width: 200,
|
},
|
{
|
title: '封面图',
|
dataIndex: 'physicalGoodsCover',
|
width: 100,
|
render: (text) => (
|
<Image
|
width={60}
|
height={60}
|
src={text ? IMAGE_URL + text : null}
|
style={{ objectFit: 'cover' }}
|
placeholder={<div style={{ width: 60, height: 60, background: '#f5f5f5' }} />}
|
fallback="/images/default-image.png"
|
/>
|
),
|
},
|
{
|
title: '商品价格',
|
dataIndex: 'physicalGoodsPrice',
|
width: 120,
|
render: (text) => `¥${text || 0}`,
|
},
|
{
|
title: '商品简介',
|
dataIndex: 'physicalGoodsIntro',
|
ellipsis: true,
|
},
|
{
|
title: '销量',
|
dataIndex: 'physicalGoodsSales',
|
width: 80,
|
},
|
];
|
|
const dataSource = [{
|
key: orderDetail?.id,
|
...orderDetail,
|
}];
|
|
return (
|
<Table
|
columns={columns}
|
dataSource={dataSource}
|
pagination={false}
|
size="small"
|
/>
|
);
|
};
|
|
if (!visible) return null;
|
|
const statusMap = {
|
1: { text: '待付款', color: '#faad14' },
|
2: { text: '完成支付', color: '#52c41a' },
|
3: { text: '确认收货', color: '#1890ff' },
|
4: { text: '已退款', color: '#722ed1' },
|
};
|
|
const currentStatus = statusMap[orderDetail?.status] || { text: '未知', color: '#d9d9d9' };
|
|
return (
|
<Modal
|
title="订单详情"
|
width='60%'
|
visible={visible}
|
onCancel={onClose}
|
footer={null}
|
destroyOnHidden
|
>
|
{loading ? (
|
<div style={{ textAlign: 'center', padding: '50px' }}>加载中...</div>
|
) : orderDetail ? (
|
<>
|
<Descriptions column={2} bordered>
|
{orderDetail.status === 1 ? (
|
<>
|
<Descriptions.Item label="订单编号">{orderDetail.code}</Descriptions.Item>
|
<Descriptions.Item label="下单时间">{orderDetail.createTime}</Descriptions.Item>
|
{/* <Descriptions.Item label="订单价格">¥{orderDetail.orderPrice || 0}</Descriptions.Item> */}
|
<Descriptions.Item label="用户昵称">{orderDetail.userName}</Descriptions.Item>
|
<Descriptions.Item label="用户手机号">{orderDetail.phone}</Descriptions.Item>
|
</>
|
) : (
|
<>
|
<Descriptions.Item label="订单编号">{orderDetail.code}</Descriptions.Item>
|
<Descriptions.Item label="下单时间">{orderDetail.createTime}</Descriptions.Item>
|
<Descriptions.Item label="用户昵称">{orderDetail.userName}</Descriptions.Item>
|
<Descriptions.Item label="当前状态">
|
<span style={{ color: currentStatus.color }}>{currentStatus.text}</span>
|
</Descriptions.Item>
|
<Descriptions.Item label="用户手机号">{orderDetail.phone}</Descriptions.Item>
|
<Descriptions.Item label="已支付">¥{orderDetail.paymentPrice || 0}</Descriptions.Item>
|
<Descriptions.Item label="支付时间">{orderDetail.paymentTime}</Descriptions.Item>
|
<Descriptions.Item label="支付方式">微信支付</Descriptions.Item>
|
</>
|
)}
|
</Descriptions>
|
|
{/* 商品信息 */}
|
<div style={{ marginTop: 24 }}>
|
<div style={{ marginTop: 8 }}>
|
{renderProductTable()}
|
</div>
|
</div>
|
<Descriptions column={2} bordered style={{ marginTop: 24 }}>
|
<>
|
<Descriptions.Item label="当前状态">
|
<span style={{ color: currentStatus.color }}>{currentStatus.text}</span>
|
</Descriptions.Item>
|
<Descriptions.Item label="订单金额">¥{orderDetail.orderPrice || 0}</Descriptions.Item>
|
{
|
orderDetail.status === 2 && <>
|
<Descriptions.Item label="已支付">¥{orderDetail.paymentPrice || 0}</Descriptions.Item>
|
<Descriptions.Item label="支付时间">{orderDetail.paymentTime}</Descriptions.Item>
|
<Descriptions.Item label="支付方式">微信支付</Descriptions.Item>
|
</>
|
}
|
</>
|
|
</Descriptions>
|
</>
|
) : (
|
<div style={{ textAlign: 'center', padding: '50px' }}>暂无数据</div>
|
)
|
}
|
</Modal >
|
);
|
};
|
|
export default OrderDetailModal;
|
