74 lines
1.9 KiB
TypeScript
74 lines
1.9 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import axios from 'axios';
|
|
import { Spin, Alert } from 'antd';
|
|
|
|
interface LogisticsDetail {
|
|
_id: string;
|
|
物流单号: string;
|
|
是否查询: boolean;
|
|
客户尾号: string;
|
|
更新时间: string;
|
|
关联记录: string;
|
|
类型: string;
|
|
createdAt: string;
|
|
updatedAt: string;
|
|
__v: number;
|
|
物流详情: string;
|
|
}
|
|
|
|
interface LogisticsQueryProps {
|
|
id: string;
|
|
}
|
|
|
|
const LogisticsQuery: React.FC<LogisticsQueryProps> = ({ id }) => {
|
|
const [data, setData] = useState<LogisticsDetail | null>(null);
|
|
const [loading, setLoading] = useState<boolean>(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
const response = await axios.get(`/api/tools/logistics/detail/${id}`);
|
|
if (response.data && response.data.length > 0) {
|
|
setData(response.data[0]);
|
|
} else {
|
|
setError('No data found');
|
|
}
|
|
} catch (err) {
|
|
setError('Error fetching data');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchData();
|
|
}, [id]);
|
|
|
|
if (loading) {
|
|
return (
|
|
<Spin size="large">
|
|
<div style={{ padding: '50px', textAlign: 'center' }}>Loading...</div>
|
|
</Spin>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return <Alert message="Error" description={error} type="error" showIcon />;
|
|
}
|
|
|
|
if (!data) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<h3>物流单号: {data.物流单号}</h3>
|
|
<p>更新时间: {new Date(data.更新时间).toLocaleString()}</p>
|
|
<h4>物流详情:</h4>
|
|
<pre>{data.物流详情}</pre>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LogisticsQuery;
|