Skip to content

A
admin-ci-test
提交 c6ec679e 作者: ZhangLingKun
操作

功能：商城订单详情

上级 b855706d
正在显示 包含 431 行增加 和 217 行删除
src/api/interface/orderManageType.ts
......@@ -498,3 +498,107 @@ export type listPageManagerVerOne = InterListFunction<
userName: string;
}
>;
// v1.0.0订单管理-详情（改版后）
export type getMallOrderDetailById = InterFunction<
{
orderId: number;
},
{
archiveDate: string;
companyName: string;
contractNo: string;
contractSignedWay: number;
cooperationTagId: number;
couponDiscountAmount: number;
createTime: string;
creditPeriod: string;
deductAmount: number;
deliveryTime: string;
discountAmount: number;
exp: {
orderId: number;
sendExpCode: string;
sendExpNo: string;
takeAddress: string;
takeName: string;
takePhone: string;
takeRegion: string;
};
goodsNum: number;
id: number;
kdn: {
logisticCode: string;
shipperCode: string;
stateEx: string;
traces: Array<{
acceptStation: string;
acceptTime: string;
action: string;
location: string;
}>;
};
mallOrderProdListDTOList: Array<{
id: number;
goodsInfoId: number;
productName: string;
model: string;
prodSkuSpecName: string;
prodSkuSpecImage: string;
partNo: string;
versionDesc: string;
buyNum: number;
unitPrice: number;
skuSpecAmount: number;
}>;
manualDiscountAmount: number;
mremark: string;
nickName: string;
ogSkuSpecDTOList: Array<{
id: number;
directoryId: number;
shopCarId: null;
skuSpecName: string;
}>;
operationId: number;
operationName: string;
orderAmount: number;
orderCouponDTOS: Array<{
couponName: string;
couponType: number;
couponUserId: number;
createTime: string;
id: number;
orderId: number;
useAmount: number;
useType: number;
}>;
orderName: string;
orderNo: string;
payErrInfo: string;
payMethod: number;
phoneNum: string;
realityAmount: number;
recMallUserName: string;
remark: string;
serviceNames: Array<string>;
shareId: number;
shareStatus: number;
shopCarAmount: number;
shutReason: string;
signStatus: number;
statusCode: number;
tagName: string;
uid: string;
userAccountId: number;
userAddress: {
id: number;
takeAddress: string;
takeName: string;
takePhone: string;
takeRegion: string;
type: number;
};
userAddressId: number;
userName: string;
}
>;
src/api/modules/orderManage.ts
import axios from '../request';
import {
getMallOrderDetailById,
listExpressInfoType,
listOfRentalOrdersType,
listPageManagerVerOne,
......@@ -68,6 +69,10 @@ export class OrderManageAPI {
// v1.0.0订单管理-分页查询（改版后）
static listPageManagerVerOne: listPageManagerVerOne = (params) =>
axios.post('/oms/pmorderVerOne/listPageManagerVerOne', params);
// v1.0.0订单管理-详情（改版后）
static getMallOrderDetailById: getMallOrderDetailById = (params) =>
axios.get('/oms/pmorderVerOne/getMallOrderDetailById', { params });
// 服务-订单
static getServiceOrderList: serviceOrderType = (data) =>
axios.post('/oms/serviceOrderTask/queryOrderTaskList', data);
......
src/pages/orderManage/equipmentOrder/comp/detailDelivery/index.tsx
import React from 'react';
import React, { useEffect, useState } from 'react';
import { Image } from 'antd';
import { orderDetailType, orderImageDetailType } from '~/api/interface/orderManageType';
import { InterDataType } from '~/api/interface';
import { OrderManageAPI } from '~/api';
function DetailDelivery() {
// 接口返回的类型
type DataType = InterDataType<orderDetailType>;
// 参数类型
type PropsType = {
detail: DataType;
};
// 列表的类型
type ListType = InterDataType<orderImageDetailType>;
// 设备状态列表
const vcuSatusList = [
{ label: '正常', value: 0 },
{ label: '故障', value: 1 },
];
// 0:发货 1:收货 2:归还 3:平台收货
const vcuTypeList = [
{ label: '发货验收', value: 0 },
{ label: '收货验收', value: 1 },
{ label: '归还验收', value: 2 },
{ label: '平台收货', value: 3 },
{ label: '退货申请', value: 4 },
];
const DetailDelivery: React.FC<PropsType> = (props) => {
const { detail } = props;
// 验收信息列表
const [orderImageList, setOrderImageList] = useState<ListType>([]);
// 获取订单验收信息
const getOrderImageDetail = async () => {
const res = await OrderManageAPI.orderImageDetail({ orderInfoId: detail?.id });
if (res && res.code === '200') {
setOrderImageList(res.result);
console.log('获取订单验收信息 --->', res.result);
}
};
// 转换设备状态
const getVcuSatus = (code: number) => {
return vcuSatusList.find((item) => item.value === code)?.label || code;
};
// 转换标题
const getVcuType = (code: number) => {
return vcuTypeList.find((item) => item.value === code)?.label || code;
};
// componentDidMount
useEffect(() => {
if (!detail) return;
getOrderImageDetail().then();
}, [detail]);
return (
<div className={'detail-delivery detail-half'}>
<div className={'detail-title'}>收货信息</div>
<div className={'detail-text'}>收货人：测试</div>
<div className={'detail-text'}>手机号：15889328503</div>
<div className={'detail-text'}>
收货地址：广东省深圳市南山区仙鼓路(南山区万科云城(仙鼓路西50米))
</div>
<div className={'detail-title'}>物流信息</div>
<div className={'detail-text'}>物流单号：YT6732436785799</div>
<div className={'detail-text'}>物流进度：--</div>
<div className={'detail-title'}>验收信息</div>
<div className={'detail-text'}>验收状态：已验收</div>
<div className={'detail-text'}>验收凭证：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
</div>
{orderImageList.map((i, j) => (
<div key={j}>
<div className={'detail-title'}>{getVcuType(i.vcuType)}</div>
<div className={'detail-text'}>验收状态：{getVcuSatus(i.vcuSatus)}</div>
<div className={'detail-text'}>验收描述：{i.remark || '无'}</div>
<div className={'detail-text'}>验收凭证：</div>
<div className={'detail-image'}>
{i.imgs?.map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
{!i.imgs && <div style={{ height: '30px' }}></div>}
</div>
</div>
))}
</div>
);
}
};
export default DetailDelivery;
src/pages/orderManage/equipmentOrder/comp/detailInformation/index.tsx
import { useState } from 'react';
import React, { useEffect, useState } from 'react';
import { Table } from 'antd';
import { ColumnsType } from 'antd/es/table';
import { InterDataType } from '~/api/interface';
import { orderDetailType } from '~/api/interface/orderManageType';
import dayjs from 'dayjs';
// 表格数据类型
type TableType = any;
// 接口返回的类型
type DataType = InterDataType<orderDetailType>;
// 参数类型
type PropsType = {
detail: DataType;
};
function DetailInformation() {
const DetailInformation: React.FC<PropsType> = (props) => {
const { detail } = props;
// 表格数据
const [tableData] = useState<TableType>([{ id: 1 }]);
const [tableData, setTableData] = useState<TableType>([]);
// 表格结构
const columns: ColumnsType<TableType[0]> = [
{
title: '商品',
dataIndex: 'userName',
dataIndex: 'wareTitle',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '单价(元)',
dataIndex: 'userName',
dataIndex: 'unitPrice',
align: 'center',
render: (_text, _record) => `--`,
render: (text) => `￥${text.toLocaleString()}`,
},
{
title: '数量',
dataIndex: 'userName',
dataIndex: 'wareNum',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '订单状态',
dataIndex: 'userName',
dataIndex: 'waiting',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '实收款',
dataIndex: 'userName',
title: '应收款',
dataIndex: 'shouldPay',
align: 'center',
render: (_text, _record) => `--`,
render: (text) => `￥${text.toLocaleString()}`,
},
];
useEffect(() => {
if (!detail) return;
setTableData([
{
id: 1,
wareTitle: detail?.wareTitle,
unitPrice: detail?.unitPrice,
wareNum: detail?.wareNum,
waiting: detail?.waiting,
shouldPay: detail?.shouldPay,
},
]);
}, [detail]);
return (
<div className={'detail-information'}>
<div className={'detail-title'}>订单明细</div>
<div className={'detail-text'}>
<span className={'item'}>订单编号：UD202302181041156087</span>
<span className={'item'}>创建时间：2023-02-18 10:41:16</span>
<span className={'item'}>合同编号：UAV202334741131</span>
<span className={'item'}>订单编号：{detail?.orderNo}</span>
<span className={'item'} style={{ display: 'none' }}>
合同编号：UAV202334741131
</span>
<span className={'item'}>
订单租期：
{dayjs(detail?.startDate).format('YYYY-MM-DD')}
{' ~ '}
{dayjs(detail?.endDate).format('YYYY-MM-DD')}
</span>
<span className={'item'}>创建时间：{detail?.createTime}</span>
</div>
<Table
style={{ margin: '20px auto', width: '90%' }}
......@@ -59,8 +87,11 @@ function DetailInformation() {
pagination={false}
// rowSelection={{ selectedRowKeys, onChange: onSelectChange }}
/>
<div className='detail-price'>
实收款<span className={'num'}>￥ {detail?.actualPay}</span>元
</div>
</div>
);
}
};
export default DetailInformation;
src/pages/orderManage/equipmentOrder/comp/detailPurchaser/index.tsx
import React from 'react';
import React, { useEffect } from 'react';
import { Button, Image } from 'antd';
import { orderDetailType } from '~/api/interface/orderManageType';
import { InterDataType } from '~/api/interface';
import { OrderManageAPI } from '~/api';
function DetailPurchaser() {
// 接口返回的类型
type DataType = InterDataType<orderDetailType>;
// 参数类型
type PropsType = {
detail: DataType;
};
const DetailPurchaser: React.FC<PropsType> = (props) => {
const { detail } = props;
// 物流列表
const [expressList, setExpressList] = React.useState<{ label: string; value: string }[]>([]);
// 获取物流信息
const getListExpressInfo = async () => {
const res = await OrderManageAPI.listExpressInfo({});
if (res && res.code === '200') {
setExpressList(res.result.map((item) => ({ label: item.exName, value: item.exCode })));
// console.log(res);
}
};
// 转换物流信息
const getExpressInfo = (code: string | undefined | null) => {
return expressList.find((item) => item.value === code)?.label || code;
};
// componentDidMount
useEffect(() => {
getListExpressInfo().then();
}, []);
return (
<div className={'detail-purchaser detail-half'}>
<div className={'detail-title'}>买家信息</div>
<div className={'detail-text'}>UID： UID4460817</div>
<div className={'detail-text'}>企业： 浙江科比特创新科技有限公司</div>
<div className={'detail-text'}>备注： 测试单，不用管</div>
<div className={'detail-text'}>UID：{detail?.uid}</div>
<div className={'detail-text'}>姓名： {detail?.buyerName}</div>
<div className={'detail-text'}>手机号： {detail?.buyerPhone}</div>
{/*<div className={'detail-text'}>企业： 浙江科比特创新科技有限公司</div>*/}
<div className={'detail-text'}>备注： {detail?.remark}</div>
<div className={'detail-title'}>合同信息</div>
<div className={'detail-text'}>合同编号： UAV202334741131</div>
<div className={'detail-text'}>合同状态： 已归档</div>
<div className={'detail-text'}>
合同操作：
<Button type={'link'}>平台签署</Button>
<Button type={'link'}>查看</Button>
<Button type={'link'}>下载</Button>
<div style={{ display: 'none' }}>
<div className={'detail-title'}>合同信息</div>
<div className={'detail-text'}>合同编号： UAV202334741131</div>
<div className={'detail-text'}>合同状态： 已归档</div>
<div className={'detail-text'}>
合同操作：
<Button type={'link'}>平台签署</Button>
<Button type={'link'}>查看</Button>
<Button type={'link'}>下载</Button>
</div>
</div>
<div className={'detail-title'}>付款凭证</div>
<div className={'detail-text'}>预付款：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
<div style={{ display: 'none' }}>
<div className={'detail-title'}>付款凭证</div>
<div className={'detail-text'}>预付款：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
</div>
<div className={'detail-text'}>尾款：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
</div>
<div className={'detail-text'}>全款：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
</div>
</div>
<div className={'detail-text'}>尾款：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
<div className={'detail-title'}>发货信息</div>
<div className={'detail-text'}>收货人：{detail?.receipt?.takeName}</div>
<div className={'detail-text'}>手机号：{detail?.receipt?.takePhone}</div>
<div className={'detail-text'}>收货地址：{detail?.receipt?.detailAddress}</div>
<div className={'detail-text'}>物流单号：{detail?.receipt?.sendExNo}</div>
<div className={'detail-text'}>物流公司：{getExpressInfo(detail?.receipt?.sendExCode)}</div>
<div className={'detail-text'}>
物流进度：-- <Button type={'link'}>查看详情</Button>
</div>
<div className={'detail-text'}>全款：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
<div className={'detail-title'}>归还信息</div>
<div className={'detail-text'}>收货人：{detail?.receipt?.renName}</div>
<div className={'detail-text'}>手机号：{detail?.receipt?.renPhone}</div>
<div className={'detail-text'}>收货地址：{detail?.receipt?.renAddress}</div>
<div className={'detail-text'}>物流单号：{detail?.receipt?.renExNo}</div>
<div className={'detail-text'}>物流公司：{getExpressInfo(detail?.receipt?.renExCode)}</div>
<div className={'detail-text'}>
物流进度：-- <Button type={'link'}>查看详情</Button>
</div>
</div>
);
}
};
export default DetailPurchaser;
src/pages/orderManage/equipmentOrder/detail/index.tsx
......@@ -2,9 +2,9 @@ import { useEffect, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { Button } from 'antd';
import './index.scss';
import DetailDelivery from '~/pages/orderManage/productOrder/comp/detailDelivery';
import DetailPurchaser from '~/pages/orderManage/productOrder/comp/detailPurchaser';
import DetailInformation from '~/pages/orderManage/productOrder/comp/detailInformation';
import DetailDelivery from '~/pages/orderManage/equipmentOrder/comp/detailDelivery';
import DetailPurchaser from '~/pages/orderManage/equipmentOrder/comp/detailPurchaser';
import DetailInformation from '~/pages/orderManage/equipmentOrder/comp/detailInformation';
import { OrderManageAPI } from '~/api';
import { InterDataType } from '~/api/interface';
import { orderDetailType } from '~/api/interface/orderManageType';
......
src/pages/orderManage/productOrder/comp/detailDelivery/index.tsx
import React, { useEffect, useState } from 'react';
import { Image } from 'antd';
import { orderDetailType, orderImageDetailType } from '~/api/interface/orderManageType';
import React, { useEffect } from 'react';
import { Button } from 'antd';
import { getMallOrderDetailById } from '~/api/interface/orderManageType';
import { InterDataType } from '~/api/interface';
import { OrderManageAPI } from '~/api';
// 接口返回的类型
type DataType = InterDataType<orderDetailType>;
type DataType = InterDataType<getMallOrderDetailById>;
// 参数类型
type PropsType = {
detail: DataType;
};
// 列表的类型
type ListType = InterDataType<orderImageDetailType>;
// 设备状态列表
const vcuSatusList = [
{ label: '正常', value: 0 },
{ label: '故障', value: 1 },
];
// 0:发货 1:收货 2:归还 3:平台收货
const vcuTypeList = [
{ label: '发货验收', value: 0 },
{ label: '收货验收', value: 1 },
{ label: '归还验收', value: 2 },
{ label: '平台收货', value: 3 },
{ label: '退货申请', value: 4 },
];
const DetailDelivery: React.FC<PropsType> = (props) => {
const { detail } = props;
// 验收信息列表
const [orderImageList, setOrderImageList] = useState<ListType>([]);
// 获取订单验收信息
const getOrderImageDetail = async () => {
const res = await OrderManageAPI.orderImageDetail({ orderInfoId: detail?.id });
// 物流列表
const [expressList, setExpressList] = React.useState<{ label: string; value: string }[]>([]);
// 获取物流信息
const getListExpressInfo = async () => {
const res = await OrderManageAPI.listExpressInfo({});
if (res && res.code === '200') {
setOrderImageList(res.result);
console.log('获取订单验收信息 --->', res.result);
setExpressList(res.result.map((item) => ({ label: item.exName, value: item.exCode })));
// console.log(res);
}
};
// 转换设备状态
const getVcuSatus = (code: number) => {
return vcuSatusList.find((item) => item.value === code)?.label || code;
};
// 转换标题
const getVcuType = (code: number) => {
return vcuTypeList.find((item) => item.value === code)?.label || code;
// 转换物流信息
const getExpressInfo = (code: string | undefined | null) => {
return expressList.find((item) => item.value === code)?.label || code;
};
// componentDidMount
useEffect(() => {
if (!detail) return;
getOrderImageDetail().then();
}, [detail]);
getListExpressInfo().then();
}, []);
return (
<div className={'detail-delivery detail-half'}>
{orderImageList.map((i, j) => (
<div key={j}>
<div className={'detail-title'}>{getVcuType(i.vcuType)}</div>
<div className={'detail-text'}>验收状态：{getVcuSatus(i.vcuSatus)}</div>
<div className={'detail-text'}>验收描述：{i.remark || '无'}</div>
<div className={'detail-text'}>验收凭证：</div>
<div className={'detail-image'}>
{i.imgs?.map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
{!i.imgs && <div style={{ height: '30px' }}></div>}
</div>
</div>
))}
<div className={'detail-title'}>发货信息</div>
<div className={'detail-text'}>收货人：{detail?.receipt?.takeName}</div>
<div className={'detail-text'}>手机号：{detail?.receipt?.takePhone}</div>
<div className={'detail-text'}>收货地址：{detail?.receipt?.detailAddress}</div>
<div className={'detail-text'}>物流单号：{detail?.receipt?.sendExNo}</div>
<div className={'detail-text'}>物流公司：{getExpressInfo(detail?.receipt?.sendExCode)}</div>
<div className={'detail-text'}>
物流进度：-- <Button type={'link'}>查看详情</Button>
</div>
<div className={'detail-title'}>归还信息</div>
<div className={'detail-text'}>收货人：{detail?.receipt?.renName}</div>
<div className={'detail-text'}>手机号：{detail?.receipt?.renPhone}</div>
<div className={'detail-text'}>收货地址：{detail?.receipt?.renAddress}</div>
<div className={'detail-text'}>物流单号：{detail?.receipt?.renExNo}</div>
<div className={'detail-text'}>物流公司：{getExpressInfo(detail?.receipt?.renExCode)}</div>
<div className={'detail-text'}>
物流进度：-- <Button type={'link'}>查看详情</Button>
</div>
</div>
);
};
......
src/pages/orderManage/productOrder/comp/detailInformation/index.tsx
......@@ -29,7 +29,7 @@ const DetailInformation: React.FC<PropsType> = (props) => {
title: '单价(元)',
dataIndex: 'unitPrice',
align: 'center',
render: (text) => `￥${text.toLocaleString()}`,
render: (text) => `￥${text?.toLocaleString()}`,
},
{
title: '数量',
......@@ -45,7 +45,7 @@ const DetailInformation: React.FC<PropsType> = (props) => {
title: '应收款',
dataIndex: 'shouldPay',
align: 'center',
render: (text) => `￥${text.toLocaleString()}`,
render: (text) => `￥${text?.toLocaleString()}`,
},
];
useEffect(() => {
......
src/pages/orderManage/productOrder/comp/detailPurchaser/index.tsx
import React, { useEffect } from 'react';
import React from 'react';
import { Button, Image } from 'antd';
import { orderDetailType } from '~/api/interface/orderManageType';
import { getMallOrderDetailById } from '~/api/interface/orderManageType';
import { InterDataType } from '~/api/interface';
import { OrderManageAPI } from '~/api';
// 接口返回的类型
type DataType = InterDataType<orderDetailType>;
type DataType = InterDataType<getMallOrderDetailById>;
// 参数类型
type PropsType = {
detail: DataType;
......@@ -13,30 +12,13 @@ type PropsType = {
const DetailPurchaser: React.FC<PropsType> = (props) => {
const { detail } = props;
// 物流列表
const [expressList, setExpressList] = React.useState<{ label: string; value: string }[]>([]);
// 获取物流信息
const getListExpressInfo = async () => {
const res = await OrderManageAPI.listExpressInfo({});
if (res && res.code === '200') {
setExpressList(res.result.map((item) => ({ label: item.exName, value: item.exCode })));
// console.log(res);
}
};
// 转换物流信息
const getExpressInfo = (code: string | undefined | null) => {
return expressList.find((item) => item.value === code)?.label || code;
};
// componentDidMount
useEffect(() => {
getListExpressInfo().then();
}, []);
return (
<div className={'detail-purchaser detail-half'}>
<div className={'detail-title'}>买家信息</div>
<div className={'detail-text'}>UID：{detail?.uid}</div>
<div className={'detail-text'}>姓名： {detail?.buyerName}</div>
<div className={'detail-text'}>手机号： {detail?.buyerPhone}</div>
<div className={'detail-text'}>姓名： {detail?.userName}</div>
<div className={'detail-text'}>手机号： {detail?.phoneNum}</div>
{/*<div className={'detail-text'}>企业： 浙江科比特创新科技有限公司</div>*/}
<div className={'detail-text'}>备注： {detail?.remark}</div>
......@@ -52,55 +34,33 @@ const DetailPurchaser: React.FC<PropsType> = (props) => {
</div>
</div>
<div style={{ display: 'none' }}>
<div className={'detail-title'}>付款凭证</div>
<div className={'detail-text'}>预付款：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
</div>
<div className={'detail-text'}>尾款：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
</div>
<div className={'detail-text'}>全款：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
</div>
<div className={'detail-title'}>付款凭证</div>
<div className={'detail-text'}>预付款：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
</div>
<div className={'detail-title'}>发货信息</div>
<div className={'detail-text'}>收货人：{detail?.receipt?.takeName}</div>
<div className={'detail-text'}>手机号：{detail?.receipt?.takePhone}</div>
<div className={'detail-text'}>收货地址：{detail?.receipt?.detailAddress}</div>
<div className={'detail-text'}>物流单号：{detail?.receipt?.sendExNo}</div>
<div className={'detail-text'}>物流公司：{getExpressInfo(detail?.receipt?.sendExCode)}</div>
<div className={'detail-text'}>
物流进度：-- <Button type={'link'}>查看详情</Button>
<div className={'detail-text'}>尾款：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
</div>
<div className={'detail-title'}>归还信息</div>
<div className={'detail-text'}>收货人：{detail?.receipt?.renName}</div>
<div className={'detail-text'}>手机号：{detail?.receipt?.renPhone}</div>
<div className={'detail-text'}>收货地址：{detail?.receipt?.renAddress}</div>
<div className={'detail-text'}>物流单号：{detail?.receipt?.renExNo}</div>
<div className={'detail-text'}>物流公司：{getExpressInfo(detail?.receipt?.renExCode)}</div>
<div className={'detail-text'}>
物流进度：-- <Button type={'link'}>查看详情</Button>
<div className={'detail-text'}>全款：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
</div>
</div>
);
......
src/pages/orderManage/productOrder/detail/index.tsx
import { useEffect } from 'react';
import { useEffect, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { Button } from 'antd';
import './index.scss';
import DetailDelivery from '~/pages/orderManage/productOrder/comp/detailDelivery';
import DetailPurchaser from '~/pages/orderManage/productOrder/comp/detailPurchaser';
import DetailInformation from '~/pages/orderManage/productOrder/comp/detailInformation';
import { getMallOrderDetailById } from '~/api/interface/orderManageType';
import { InterDataType } from '~/api/interface';
import { OrderManageAPI } from '~/api';
// 接口返回的类型
type DataType = InterDataType<getMallOrderDetailById>;
function ProductOrderDetail() {
// 路由钩子
......@@ -13,25 +19,53 @@ function ProductOrderDetail() {
const [searchParams] = useSearchParams();
// 接收到的参数
const id = searchParams.get('id');
// 订单状态
const [orderStatusList, setOrderStatusList] = useState<{ value: number; label: string }[]>([]);
// 返回上一页
const handleBack = () => {
navigate(-1);
};
// 订单详情
const [orderDetail, setOrderDetail] = useState<DataType>(null!);
// 获取订单详情
const getOrderDetail = async () => {
const res = await OrderManageAPI.getMallOrderDetailById({
orderId: Number(id),
});
if (res && res.code === '200') {
setOrderDetail(res.result);
console.log('获取订单详情 --->', res.result);
}
};
// 获取订单状态
const getOrderStatus = async () => {
const res = await OrderManageAPI.orderListStatus({});
if (res && res.code === '200') {
const list = res.result.map((item) => ({ value: item.code, label: item.status }));
setOrderStatusList(list);
}
};
// componentDidMount
useEffect(() => {
console.log('拿到的id是 --->', id);
getOrderStatus().then();
getOrderDetail().then();
// console.log('拿到的id是 --->', id);
}, [id]);
return (
<div className={'order-detail'}>
<div className={'order-head'}>
<div className='head-text'>
<div>
<span>订单编号：R2023051916330461</span>
<span>合同编号：UAV202334741131</span>
<span>订单编号：{orderDetail?.orderNo}</span>
{/*<span>合同编号：UAV202334741131</span>*/}
</div>
<div>
<span>当前状态：交易完成</span>
<span>创建时间：2023-02-18 10:41:16</span>
<span>
当前状态：
{orderStatusList?.find((i) => i.value === orderDetail?.statusCode)?.label ||
orderDetail?.statusCode}
</span>
<span>创建时间：{orderDetail?.createTime}</span>
</div>
</div>
<Button type={'primary'} onClick={() => handleBack()}>
......@@ -39,9 +73,9 @@ function ProductOrderDetail() {
</Button>
</div>
<div className={'detail-wrap'}>
<DetailPurchaser />
<DetailDelivery />
<DetailInformation />
<DetailPurchaser detail={orderDetail} />
<DetailDelivery detail={orderDetail} />
<DetailInformation detail={orderDetail} />
</div>
</div>
);
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论