Skip to content

A
admin
提交 c6ec679e 作者: ZhangLingKun
操作

功能：商城订单详情

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