WEB/src/pages/Track/index.tsx

import {
  logisticscontrollerGetlistbytrackingid,
  logisticscontrollerGettrackingnumber,
} from '@/servers/api/logistics';
import { SearchOutlined } from '@ant-design/icons';
import { PageContainer, ProFormSelect } from '@ant-design/pro-components';
import { useState } from 'react';

const TrackPage: React.FC = () => {
  const [id, setId] = useState<string>();
  const [data, setData] = useState([]);
  return (
    <PageContainer>
      <ProFormSelect
        showSearch={true}
        debounceTime={500}
        request={async ({ keyWords }) => {
          if (!keyWords || keyWords.length < 3) return [];
          const { data: trackList } =
            await logisticscontrollerGettrackingnumber({ number: keyWords });
          return trackList?.map((v) => {
            return {
              label: v.siteName + ' ' + v.externalOrderId,
              value: v.id,
            };
          });
        }}
        fieldProps={{
          prefix: '订单号',
          onChange(value: string) {
            setId(value);
          },
          allowClear: false,
          suffixIcon: (
            <SearchOutlined
              onClick={async (e) => {
                if (!id) {
                  return;
                }
                const { data } = await logisticscontrollerGetlistbytrackingid({
                  shipment_id: id,
                });
                setData(data);
              }}
            />
          ),
        }}
      />
      <div>
        {data.map((item) => (
          <div>
            <h4>
              {item.name} * {item.quantity}
            </h4>
            <div style={{ paddingLeft: 20, color: 'blue' }}>
              {item.constitution.map((v) => (
                <div>
                  {v.name} * {v.quantity * item.quantity}
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </PageContainer>
  );
};

export default TrackPage;