This commit is contained in:
2025-11-19 10:08:47 +08:00
30 changed files with 773 additions and 93 deletions

View File

@@ -74,7 +74,7 @@ const ProdInfo = <T extends Record<string, any>>(props: ProdInfoProps<T>) => {
extra="仅支持.jpg .png 格式建议图片比例1:1限7张"
// getValueFromEvent={(e) => e.fileList}
>
<UploadImages />
<UploadImages maxCount={7} />
</ProForm.Item>
<ProForm.Item
style={{ width: '100%' }}

View File

@@ -0,0 +1,83 @@
import {
BetaSchemaForm,
type ProFormColumnsType,
} from '@ant-design/pro-components';
import { type FormInstance, Modal, message } from 'antd';
import React, { useCallback, useRef, useState } from 'react';
import { cancelOrder } from '@/services/trade/order';
const CancleOrderModal: React.FC<{
open?: boolean;
id?: number;
onClose?: () => void;
}> = (props) => {
const formRef = useRef<FormInstance>(null);
const [loading, setLoading] = useState<boolean>(false);
const columns: ProFormColumnsType[] = [
{
title: '',
dataIndex: 'cancelReason',
valueType: 'radio',
fieldProps: {
options: [
{ value: '用户主动取消', label: '用户主动取消' },
{ value: '选项二', label: '选项二' },
{ value: '选项三', label: '选项三' },
{ value: '选项四', label: '选项四' },
{ value: '选项五', label: '选项五' },
{ value: '选项六', label: '选项六' },
{ value: '选项七', label: '选项七' },
],
style: {
display: 'flex',
flexDirection: 'column',
gap: '8px',
marginTop: '6px',
background: '#f0f0f0',
padding: '8px',
borderRadius: '8px',
},
},
},
{
title: '取消备注',
dataIndex: 'cancelRemark',
valueType: 'textarea',
},
];
const handleOk = useCallback(async () => {
try {
setLoading(true);
const values = formRef.current?.getFieldsValue();
console.log(values, props.id, 'ok');
await cancelOrder({ id: props.id, ...values });
message.success('取消成功');
props.onClose?.();
} finally {
setLoading(false);
}
}, [open, props.id]);
return (
<Modal
title="取消订单"
open={props.open}
onOk={handleOk}
onCancel={props?.onClose}
confirmLoading={loading}
>
<span></span>
<BetaSchemaForm
layoutType="Form"
formRef={formRef}
columns={columns || []}
layout="horizontal"
submitter={false}
labelCol={{ span: 4 }}
wrapperCol={{ span: 20 }}
/>
</Modal>
);
};
export default React.memo(CancleOrderModal);

View File

@@ -14,10 +14,10 @@ export const baseOrderColumns: ProColumns<TradeOrderPageRespVO>[] = [
if (!record.items) {
return _;
}
return record.items.map((item) => (
return record.items.map((item, index) => (
<div
style={{ width: '100%', display: 'flex', gap: '8px' }}
key={item.id}
key={`${index}${Math.random()}`}
>
<Image src={item.picUrl} width={64} height={64} />
<div style={{ flex: '1', overflow: 'hidden' }}>

View File

@@ -21,7 +21,7 @@ const DetailCom: React.FC<{ data?: TradeOrderPageRespVO }> = (props) => {
children: '商品配送',
},
];
return <Tabs defaultActiveKey="1" items={items} />;
return <Tabs defaultActiveKey="1" items={items} destroyOnHidden />;
};
export default React.memo(DetailCom);

View File

@@ -5,16 +5,17 @@ import {
type TradeOrderDetailRespVO,
type TradeOrderPageRespVO,
} from '@/services/trade/order';
import BasicInfo from './component/info/basic-info'; //基本信息(通版)
import ExtendCostInfo from './component/info/extend-cost'; //服务附加费(殡葬专属字段)
import ExtendService from './component/info/extend-service'; //可选服务(殡葬专属字段)
import ProdInfo from './component/info/prod-info'; //商品信息(通版)
import ServiceInfo from './component/info/service-info';
import BasicInfo from './src/info/basic-info'; //基本信息(通版)
import ExtendCostInfo from './src/info/extend-cost'; //服务附加费(殡葬专属字段)
import ExtendService from './src/info/extend-service'; //可选服务(殡葬专属字段)
import ProdInfo from './src/info/prod-info'; //商品信息(通版)
import ServiceInfo from './src/info/service-info';
export interface ItemConfig<T> {
data?: T;
loading?: boolean;
orderCategoryId?: number;
id?: number;
}
const OrderDetail: React.FC<{ data?: TradeOrderPageRespVO }> = (props) => {
const { data } = props;
@@ -43,6 +44,7 @@ const OrderDetail: React.FC<{ data?: TradeOrderPageRespVO }> = (props) => {
<ServiceInfo
data={detais.tradeServeInfo}
orderCategoryId={detais?.orderCategoryId}
id={detais?.id}
/>
)}
{detais?.tradeExtendServeInfo && (

View File

@@ -73,10 +73,13 @@ export const renderBaseInfoOrder = (
>
{data?.orderStatus && orderStatusObj.label}
</Title>
<span>
<Text type="secondary"></Text>
<Text>430</Text>
</span>
{data.orderStatus === 10 && (
<span>
<Text type="secondary"></Text>
<Text>430</Text>
</span>
)}
{data.orderStatus &&
Number(data.orderStatus) === OrderStatus.Refunded && (
<Paragraph>
@@ -121,18 +124,18 @@ export const renderBaseInfoOrder = (
{data.orderStatus &&
Number(data.orderStatus) === OrderStatus.Cancelled && (
<>
<Paragraph>
<div>
<Text type="secondary"></Text>
<Text></Text>
</Paragraph>
<Paragraph>
<Text>{data.cancelTime}</Text>
</div>
<div>
<Text type="secondary"></Text>
<Text>{data.cancelReason}</Text>
</Paragraph>
<Paragraph>
</div>
<div>
<Text type="secondary"></Text>
<Text>{data?.merchantRemark}</Text>
</Paragraph>
<Text>{data?.cancelRemark}</Text>
</div>
</>
)}
{data.orderStatus &&

View File

@@ -1,14 +1,22 @@
import { ProCard } from '@ant-design/pro-components';
import { Button, Card, Image, Space, Tag, Typography } from 'antd';
import React, { useCallback } from 'react';
import { Button, Card, Image, Modal, Space, Tag, Typography } from 'antd';
import React, { useCallback, useEffect, useState } from 'react';
import AdvancedImageGallery from '@/components/AdvancedImageGallery';
import DangerouslySetInnerHTML from '@/components/DangerouslySetInnerHTML';
import { fallback } from '@/constants/antd/image';
import type { Item } from '@/services/trade/order/detail';
import { getfastPhoto } from '@/services/trade/order';
import type {
Item,
TradeOrderFastPhotoRespVo,
} from '@/services/trade/order/detail';
import type { ItemConfig } from '../../order-info';
import styles from './index.module.less';
const { Text, Paragraph } = Typography;
const { Text, Paragraph, Title } = Typography;
const ProdInfo: React.FC<ItemConfig<Item[]>> = (props) => {
const { data = [] } = props;
const [visible, setVisible] = useState(false);
const [item, setItem] = useState<Item>();
const renderTitle = useCallback((item: Item) => {
return (
<Space style={{ height: '100%' }} size={16}>
@@ -24,6 +32,14 @@ const ProdInfo: React.FC<ItemConfig<Item[]>> = (props) => {
</Space>
);
}, []);
const onPhoto = useCallback(
async (item: Item) => {
setVisible(true);
setItem(item);
},
[item, visible],
);
return (
<div className={styles['order-info']}>
<Card title="商品信息">
@@ -35,7 +51,11 @@ const ProdInfo: React.FC<ItemConfig<Item[]>> = (props) => {
bordered
headerBordered
gutter={8}
extra={<Button size="small"></Button>}
extra={
<Button size="small" onClick={() => onPhoto(item)}>
</Button>
}
>
<ProCard
layout="default"
@@ -74,14 +94,12 @@ const ProdInfo: React.FC<ItemConfig<Item[]>> = (props) => {
>
<Text type="secondary"></Text>
<Text>
{' '}
¥{item.handedPrice} {item.unit}
</Text>
</Paragraph>
<Paragraph className="order-paragraph">
<Text type="secondary"></Text>
<Text>
{' '}
¥{item.expensePrice} {item.unit}/-
</Text>
</Paragraph>
@@ -141,8 +159,94 @@ const ProdInfo: React.FC<ItemConfig<Item[]>> = (props) => {
</ProCard>
))}
</Card>
<PhotoModal
open={visible}
onCancel={() => setVisible(false)}
item={item}
/>
</div>
);
};
// 交易快照
const PhotoModal: React.FC<{
open: boolean;
onCancel: () => void;
item?: Item;
}> = (props) => {
const [photo, setPhoto] = useState<TradeOrderFastPhotoRespVo>();
const { item } = props;
console.log(item, 'item');
const onPhoto = useCallback(async () => {
const res = await getfastPhoto({
itemId: item?.id as number,
spuId: item?.spuId as number,
});
setPhoto(res);
}, [item]);
useEffect(() => {
if (props.open && item) {
onPhoto();
}
}, [props.open, item]);
return (
<Modal
title="交易快照"
open={props.open}
onCancel={props.onCancel}
footer={null}
width={820}
>
<div
style={{
height: '480px',
width: '100%',
overflow: 'hidden',
display: 'flex',
justifyContent: 'space-between',
gap: '16px',
}}
>
<div className="left" style={{ width: '386px', height: '100%' }}>
<AdvancedImageGallery images={photo?.imgs?.split(',') || []} />
</div>
<div
className="right"
style={{ height: '100%', overflow: 'auto', width: '386px' }}
>
<Title level={4}>{photo?.spuName}</Title>
<Paragraph>
<Text type="secondary">{photo?.brief}</Text>
</Paragraph>
<div
style={{
marginBottom: '16px',
background: '#00000005',
padding: '8px',
borderRadius: '8px',
fontSize: '12px',
}}
>
<span>
</span>
</div>
<div
style={{
marginBottom: '16px',
background: '#00000005',
padding: '8px',
borderRadius: '8px',
}}
>
<strong>{photo?.skuName}SKU规格</strong>
</div>
<DangerouslySetInnerHTML content={photo?.content} />
</div>
</div>
</Modal>
);
};
export default React.memo(ProdInfo);

View File

@@ -4,8 +4,8 @@ import type { ItemConfig } from '../../order-info';
import ServicePetUI from './uis/pets/service';
const ServiceInfo: React.FC<ItemConfig<TradeServeInfo>> = (props) => {
const { data = {}, orderCategoryId } = props;
return <>{orderCategoryId === 1 && <ServicePetUI data={data} />}</>; //宠物服务ui
const { data = {}, orderCategoryId, id } = props;
return <>{orderCategoryId === 1 && <ServicePetUI data={data} id={id} />}</>; //宠物服务ui
};
export default React.memo(ServiceInfo);

View File

@@ -77,15 +77,23 @@ export const baseOrderColumns: ProColumns<TradeExtendServeInfo>[] = [
/>
<div>
<div>{serve.serveName}</div>
<Text type="secondary">{serve.serveDesc}</Text>
<div>
<Text type="secondary"></Text>
<Text>{serve.count}</Text>
<Text type="secondary"></Text>
<Text>{serve.price}</Text>
<Text type="secondary"></Text>
<Text>{serve.handPrice}</Text>
<Text type="secondary">{serve.serveDesc}</Text>
</div>
<Space>
<div>
<Text type="secondary"></Text>
<Text>{serve.count}</Text>
</div>
<div>
<Text type="secondary"></Text>
<Text>{serve.price}</Text>
</div>
<div>
<Text type="secondary"></Text>
<Text>{serve.handPrice}</Text>
</div>
</Space>
</div>
</Space>
))}

View File

@@ -1,16 +1,22 @@
import { ClockCircleOutlined, EnvironmentOutlined } from '@ant-design/icons';
import { ProCard } from '@ant-design/pro-components';
import { Button, Card, Image, Space, Timeline, Typography } from 'antd';
import React from 'react';
import { ProCard, type ProColumns } from '@ant-design/pro-components';
import { Button, Card, Image, Modal, Space, Timeline, Typography } from 'antd';
import React, { useCallback, useEffect, useState } from 'react';
import EnhancedProTable from '@/components/EnhancedProTable';
import { fallback } from '@/constants/antd/image';
import type { TradeServeInfo } from '@/services/trade/order/detail';
import { getSubTimeLog } from '@/services/trade/order';
import type {
TradeOrderSubLogDO,
TradeServeInfo,
} from '@/services/trade/order/detail';
import type { ItemConfig } from '../../../../order-info';
import styles from '../../index.module.less';
const { Text, Paragraph } = Typography;
const ServicePetUI: React.FC<ItemConfig<TradeServeInfo>> = (props) => {
const { data = {} } = props;
const { data = {}, id } = props;
const { boneInfo, subInfo } = data;
const [open, setOpen] = useState<boolean>(false);
return (
<div className={styles['order-info']}>
<Card title="服务信息">
@@ -54,7 +60,11 @@ const ServicePetUI: React.FC<ItemConfig<TradeServeInfo>> = (props) => {
size="small"
title="预约信息"
headerBordered
extra={<Button size="small"></Button>}
extra={
<Button size="small" onClick={() => setOpen(true)}>
</Button>
}
>
<Space size={100}>
<div>
@@ -99,8 +109,60 @@ const ServicePetUI: React.FC<ItemConfig<TradeServeInfo>> = (props) => {
</ProCard>
</ProCard>
</Card>
<SubTimeLogModal id={id} open={open} onCancel={() => setOpen(false)} />
</div>
);
};
//修改记录
const SubTimeLogModal: React.FC<{
id?: number;
open?: boolean;
onCancel: () => void;
}> = (props) => {
const { id, open = false } = props;
const [log, setLog] = useState<TradeOrderSubLogDO[]>([]);
const fetchSubTimeLog = useCallback(
async (id: number) => {
const res = await getSubTimeLog(id);
console.log(res);
setLog(res);
},
[id],
);
const columns: ProColumns<TradeOrderSubLogDO>[] = [
{
title: '预约时间',
dataIndex: 'subTime',
valueType: 'dateTime',
},
{
title: '修改时间',
dataIndex: 'updateTime',
valueType: 'dateTime',
},
];
useEffect(() => {
if (open && id) fetchSubTimeLog(id);
}, [open, id]);
return (
<Modal
width={'60vw'}
open={open}
onCancel={props.onCancel}
title="修改记录"
footer={null}
>
<EnhancedProTable<TradeOrderSubLogDO>
columns={columns}
dataSource={log}
showIndex={false}
search={false}
scroll={{ x: 'max-content' }}
showSelection={false}
pagination={false}
/>
</Modal>
);
};
export default React.memo(ServicePetUI);

View File

@@ -20,7 +20,7 @@ const OrderList: React.FC = () => {
return (
<div className={`${styles['trade-order']} "page-container" `}>
<Tabs defaultActiveKey="1" items={items} />
<Tabs defaultActiveKey="1" items={items} destroyOnHidden />
</div>
);
};

View File

@@ -12,9 +12,8 @@ import {
message,
Space,
Statistic,
Typography,
} from 'antd';
import React, { useCallback, useRef, useState } from 'react';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import ConfigurableDrawerForm, {
type ConfigurableDrawerFormRef,
} from '@/components/DrawerForm';
@@ -29,14 +28,18 @@ import PopconfirmForm, {
} from '@/components/PopconfirmForm';
import {
mapOrderStatusToBadgeStatus,
type OrderStatus,
OrderStatus,
OrderStatusLabels,
} from '@/constants/trade';
import {
getTradeOrderPage,
getTradeSummary,
type TradeOrderPageRespVO,
type TradeReq,
type TradeSummaryRespVO,
updateOrderRemark,
} from '@/services/trade/order';
import CancleOrderModal from './components/cancleOrderModal';
import DetailCom from './detail';
const OrderListItem: React.FC<{ orderStatus: number }> = (props) => {
@@ -46,6 +49,16 @@ const OrderListItem: React.FC<{ orderStatus: number }> = (props) => {
const [modalData, setModalData] = useState<TradeOrderPageRespVO>();
const [isShowTotal, setIsShowTotal] = useState<boolean>(false);
const popconfirmFormRef = useRef<PopconfirmFormRef>(null);
const [summary, setSummary] = useState<TradeSummaryRespVO>();
const [cancleOrderVisible, setCancleOrderVisible] = useState<boolean>(false);
const fetchSummary = async () => {
const res = await getTradeSummary();
setSummary(res);
};
useEffect(() => {
fetchSummary();
}, []);
const onFetch = async (
params: TradeReq & {
pageSize: number;
@@ -74,14 +87,24 @@ const OrderListItem: React.FC<{ orderStatus: number }> = (props) => {
[modalData],
);
const handleOrder = useCallback((id?: number) => {
console.log(id, '取消订单');
// await updateTradeOrder(values.id);
}, []);
const handleUpdate = async (_values: TradeOrderPageRespVO) => {
try {
const handleOrder = useCallback(
(type: string, record?: TradeOrderPageRespVO) => {
setModalData(record);
if (type === 'order') {
setCancleOrderVisible(true);
}
if (type === 'order') {
setCancleOrderVisible(true);
}
// await updateTradeOrder(values.id);
},
[],
);
const handleUpdate = async (values: TradeOrderPageRespVO, id?: number) => {
try {
await updateOrderRemark({ remark: values.userRemark || '', id: id });
tableRef.current?.reload();
return true;
} finally {
message.success('更新成功');
@@ -105,37 +128,56 @@ const OrderListItem: React.FC<{ orderStatus: number }> = (props) => {
}}
key={record.id}
>
<a key="cancel" onClick={() => handleOrder(record.id)}>
</a>
<a key="order" onClick={() => handleOrder(record.id)}>
</a>
<a key="sale" onClick={() => handleOrder(record.id)}>
</a>
{record.orderStatus !== OrderStatus.Cancelled && (
<a key="cancel" onClick={() => handleOrder('order', record)}>
</a>
)}
{record.orderStatus === OrderStatus.PendingService && (
<a key="order" onClick={() => handleOrder('service', record)}>
</a>
)}
{record.orderStatus === OrderStatus.PendingConfirmation && (
<a key="order" onClick={() => handleOrder('service', record)}>
</a>
)}
{(record.orderStatus as number) > OrderStatus.PendingPayment &&
record.orderStatus !== OrderStatus.Cancelled && (
<a key="sale" onClick={() => handleOrder('sales', record)}>
</a>
)}
{record.orderStatus === OrderStatus.PendingAcceptance && (
<a key="sale" onClick={() => handleOrder('sales', record)}>
</a>
)}
<a key="detail" onClick={() => handleDetail(record)}>
</a>
<PopconfirmForm
ref={popconfirmFormRef}
columns={[
{
title: '备注',
name: 'userRemark',
valueType: 'textarea',
fieldProps: { rows: 4, autoFocus: false },
},
]}
onSubmit={handleUpdate}
>
<a
key="remark"
onClick={() => popconfirmFormRef.current?.open(record)}
{record.orderStatus === OrderStatus.PendingPayment && (
<PopconfirmForm
ref={popconfirmFormRef}
columns={[
{
title: '备注',
name: 'merchantRemark',
valueType: 'textarea',
fieldProps: { rows: 4, autoFocus: false },
},
]}
onSubmit={(value) => handleUpdate(value, record.id)}
>
</a>
</PopconfirmForm>
<a
key="remark"
onClick={() => popconfirmFormRef.current?.open(record)}
>
</a>
</PopconfirmForm>
)}
</div>,
],
};
@@ -251,13 +293,25 @@ const OrderListItem: React.FC<{ orderStatus: number }> = (props) => {
{isShowTotal && (
<ProCard.Group direction="row" style={{ marginBottom: 18 }}>
<ProCard layout="center" style={{ background: '#f5f5f5' }}>
<Statistic title="订单数量" value={79.0} precision={2} />
<Statistic
title="订单数量"
value={summary?.orderCount}
precision={2}
/>
</ProCard>
<ProCard layout="center" style={{ background: '#f5f5f5' }}>
<Statistic title="实付金额" value={112893.0} precision={2} />
<Statistic
title="实付金额"
value={summary?.payPrice}
precision={2}
/>
</ProCard>
<ProCard layout="center" style={{ background: '#f5f5f5' }}>
<Statistic title="实收金额" value={93} suffix="/ 100" />
<Statistic
title="实收金额"
value={summary?.livePrice}
precision={2}
/>
</ProCard>
</ProCard.Group>
)}
@@ -286,8 +340,13 @@ const OrderListItem: React.FC<{ orderStatus: number }> = (props) => {
>
<DetailCom data={modalData} />
</ConfigurableDrawerForm>
<CancleOrderModal
open={cancleOrderVisible}
onClose={() => setCancleOrderVisible(false)}
id={modalData?.id}
/>
</>
);
};
export default OrderListItem;
export default React.memo(OrderListItem);

View File

@@ -0,0 +1,6 @@
// 售后列表
const TradeSales: React.FC = () => {
return 111;
};
export default TradeSales;