smart-flow/yudao-ui-admin-vben
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：【mall 商城】交易订单（20% antd detail 优化代码风格）

Browse Source
This commit is contained in:
YunaiV
2025-10-14 23:17:28 +08:00
parent fc9d7232be
commit 8c5680de81
3 changed files with 204 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
apps/web-antd/src/api/mall/trade/order/index.ts
View File

@@ -6,11 +6,11 @@ export namespace MallOrderApi {
/** 商品属性 */ /** 商品属性 */
export interface ProductProperty { export interface ProductProperty {
/** 属性的编号 */ /** 属性的编号 */
propertyId?: null | number; propertyId?: number;
/** 属性的名称 */ /** 属性的名称 */
propertyName?: string; propertyName?: string;
/** 属性值的编号 */ /** 属性值的编号 */
valueId?: null | number; valueId?: number;
/** 属性值的名称 */ /** 属性值的名称 */
valueName?: string; valueName?: string;
} }
@@ -18,35 +18,35 @@ export namespace MallOrderApi {
/** 订单项 */ /** 订单项 */
export interface OrderItem { export interface OrderItem {
/** 编号 */ /** 编号 */
id?: null | number; id?: number;
/** 用户编号 */ /** 用户编号 */
userId?: null | number; userId?: number;
/** 订单编号 */ /** 订单编号 */
orderId?: null | number; orderId?: number;
/** 商品 SPU 编号 */ /** 商品 SPU 编号 */
spuId?: null | number; spuId?: number;
/** 商品 SPU 名称 */ /** 商品 SPU 名称 */
spuName?: string; spuName?: string;
/** 商品 SKU 编号 */ /** 商品 SKU 编号 */
skuId?: null | number; skuId?: number;
/** 商品图片 */ /** 商品图片 */
picUrl?: string; picUrl?: string;
/** 购买数量 */ /** 购买数量 */
count?: null | number; count?: number;
/** 商品原价（总） */ /** 商品原价（总） */
originalPrice?: null | number; originalPrice?: number;
/** 商品原价（单） */ /** 商品原价（单） */
originalUnitPrice?: null | number; originalUnitPrice?: number;
/** 商品优惠（总） */ /** 商品优惠（总） */
discountPrice?: null | number; discountPrice?: number;
/** 商品实付金额（总） */ /** 商品实付金额（总） */
payPrice?: null | number; payPrice?: number;
/** 子订单分摊金额（总） */ /** 子订单分摊金额（总） */
orderPartPrice?: null | number; orderPartPrice?: number;
/** 分摊后子订单实付金额（总） */ /** 分摊后子订单实付金额（总） */
orderDividePrice?: null | number; orderDividePrice?: number;
/** 售后状态 */ /** 售后状态 */
afterSaleStatus?: null | number; afterSaleStatus?: number;
/** 属性数组 */ /** 属性数组 */
properties?: ProductProperty[]; properties?: ProductProperty[];
price?: number; price?: number;
@@ -67,91 +67,91 @@ export namespace MallOrderApi {
/** 订单 */ /** 订单 */
export interface Order { export interface Order {
/** 订单编号 */ /** 订单编号 */
id?: null | number; id?: number;
/** 订单流水号 */ /** 订单流水号 */
no?: string; no?: string;
/** 下单时间 */ /** 下单时间 */
createTime?: Date | null; createTime?: Date;
/** 订单类型 */ /** 订单类型 */
type?: null | number; type?: number;
/** 订单来源 */ /** 订单来源 */
terminal?: null | number; terminal?: number;
/** 用户编号 */ /** 用户编号 */
userId?: null | number; userId?: number;
/** 用户 IP */ /** 用户 IP */
userIp?: string; userIp?: string;
/** 用户备注 */ /** 用户备注 */
userRemark?: string; userRemark?: string;
/** 订单状态 */ /** 订单状态 */
status?: null | number; status?: number;
/** 购买的商品数量 */ /** 购买的商品数量 */
productCount?: null | number; productCount?: number;
/** 订单完成时间 */ /** 订单完成时间 */
finishTime?: Date | null; finishTime?: Date;
/** 订单取消时间 */ /** 订单取消时间 */
cancelTime?: Date | null; cancelTime?: Date;
/** 取消类型 */ /** 取消类型 */
cancelType?: null | number; cancelType?: number;
/** 商家备注 */ /** 商家备注 */
remark?: string; remark?: string;
/** 支付订单编号 */ /** 支付订单编号 */
payOrderId?: null | number; payOrderId?: number;
/** 是否已支付 */ /** 是否已支付 */
payStatus?: boolean; payStatus?: boolean;
/** 付款时间 */ /** 付款时间 */
payTime?: Date | null; payTime?: Date;
/** 支付渠道 */ /** 支付渠道 */
payChannelCode?: string; payChannelCode?: string;
/** 商品原价（总） */ /** 商品原价（总） */
totalPrice?: null | number; totalPrice?: number;
/** 订单优惠（总） */ /** 订单优惠（总） */
discountPrice?: null | number; discountPrice?: number;
/** 运费金额 */ /** 运费金额 */
deliveryPrice?: null | number; deliveryPrice?: number;
/** 订单调价（总） */ /** 订单调价（总） */
adjustPrice?: null | number; adjustPrice?: number;
/** 应付金额（总） */ /** 应付金额（总） */
payPrice?: null | number; payPrice?: number;
/** 发货方式 */ /** 发货方式 */
deliveryType?: null | number; deliveryType?: number;
/** 自提门店编号 */ /** 自提门店编号 */
pickUpStoreId?: number; pickUpStoreId?: number;
/** 自提核销码 */ /** 自提核销码 */
pickUpVerifyCode?: string; pickUpVerifyCode?: string;
/** 配送模板编号 */ /** 配送模板编号 */
deliveryTemplateId?: null | number; deliveryTemplateId?: number;
/** 发货物流公司编号 */ /** 发货物流公司编号 */
logisticsId?: null | number; logisticsId?: number;
/** 发货物流单号 */ /** 发货物流单号 */
logisticsNo?: string; logisticsNo?: string;
/** 发货时间 */ /** 发货时间 */
deliveryTime?: Date | null; deliveryTime?: Date;
/** 收货时间 */ /** 收货时间 */
receiveTime?: Date | null; receiveTime?: Date;
/** 收件人名称 */ /** 收件人名称 */
receiverName?: string; receiverName?: string;
/** 收件人手机 */ /** 收件人手机 */
receiverMobile?: string; receiverMobile?: string;
/** 收件人邮编 */ /** 收件人邮编 */
receiverPostCode?: null | number; receiverPostCode?: number;
/** 收件人地区编号 */ /** 收件人地区编号 */
receiverAreaId?: null | number; receiverAreaId?: number;
/** 收件人地区名字 */ /** 收件人地区名字 */
receiverAreaName?: string; receiverAreaName?: string;
/** 收件人详细地址 */ /** 收件人详细地址 */
receiverDetailAddress?: string; receiverDetailAddress?: string;
/** 售后状态 */ /** 售后状态 */
afterSaleStatus?: null | number; afterSaleStatus?: number;
/** 退款金额 */ /** 退款金额 */
refundPrice?: null | number; refundPrice?: number;
/** 优惠劵编号 */ /** 优惠劵编号 */
couponId?: null | number; couponId?: number;
/** 优惠劵减免金额 */ /** 优惠劵减免金额 */
couponPrice?: null | number; couponPrice?: number;
/** 积分抵扣的金额 */ /** 积分抵扣的金额 */
pointPrice?: null | number; pointPrice?: number;
/** VIP 减免金额 */ /** VIP 减免金额 */
vipPrice?: null | number; vipPrice?: number;
/** 订单项列表 */ /** 订单项列表 */
items?: OrderItem[]; items?: OrderItem[];
/** 下单用户信息 */ /** 下单用户信息 */
@@ -159,7 +159,7 @@ export namespace MallOrderApi {
/** 用户头像 */ /** 用户头像 */
avatar?: string; avatar?: string;
/** 用户编号 */ /** 用户编号 */
id?: null | number; id?: number;
/** 用户昵称 */ /** 用户昵称 */
nickname?: string; nickname?: string;
}; };
@@ -168,7 +168,7 @@ export namespace MallOrderApi {
/** 用户头像 */ /** 用户头像 */
avatar?: string; avatar?: string;
/** 用户编号 */ /** 用户编号 */
id?: null | number; id?: number;
/** 用户昵称 */ /** 用户昵称 */
nickname?: string; nickname?: string;
}; };
@@ -195,7 +195,7 @@ export namespace MallOrderApi {
/** 发货方式 */ /** 发货方式 */
expressType: string; expressType: string;
/** 物流公司编号 */ /** 物流公司编号 */
logisticsId: null | number; logisticsId: number;
/** 物流编号 */ /** 物流编号 */
logisticsNo: string; logisticsNo: string;
} }

89
apps/web-antd/src/views/mall/trade/order/detail/data.ts
View File

@@ -1,11 +1,11 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MallOrderApi } from '#/api/mall/trade/order'; import type { MallOrderApi } from '#/api/mall/trade/order';
import type { DescriptionItemSchema } from '#/components/description'; import type { DescriptionItemSchema } from '#/components/description';
import type { VxeGridPropTypes } from 'vxe-table';
import { h } from 'vue'; import { h } from 'vue';
import { DICT_TYPE } from '@vben/constants'; import { DICT_TYPE } from '@vben/constants';
import { fenToYuan, formatDate } from '@vben/utils'; import { fenToYuan, formatDateTime } from '@vben/utils';
import { DictTag } from '#/components/dict-tag'; import { DictTag } from '#/components/dict-tag';
@@ -82,10 +82,13 @@ export function useOrderStatusSchema(): DescriptionItemSchema[] {
field: 'reminder', field: 'reminder',
label: '提醒', label: '提醒',
content: () => content: () =>
h('div', { class: 'text-red-500 space-y-1' }, [ h('div', { class: 'space-y-1' }, [
h('div', '买家付款成功后，货款将直接进入您的商户号（微信、支付宝）'), h('div', '买家付款成功后，货款将直接进入您的商户号（微信、支付宝）'),
h('div', '请及时关注你发出的包裹状态，确保可以配送至买家手中'), h('div', '请及时关注你发出的包裹状态，确保可以配送至买家手中'),
h('div', '如果买家表示没收到货或货物有问题，请及时联系买家处理，友好协商'), h(
'div',
'如果买家表示没收到货或货物有问题，请及时联系买家处理，友好协商',
),
]), ]),
}, },
]; ];
@@ -97,46 +100,66 @@ export function useOrderPriceSchema(): DescriptionItemSchema[] {
{ {
field: 'totalPrice', field: 'totalPrice',
label: '商品总额', label: '商品总额',
content: (data: MallOrderApi.Order) => `${fenToYuan(data?.totalPrice ?? 0)} 元`, content: (data: MallOrderApi.Order) =>
`${fenToYuan(data?.totalPrice ?? 0)} 元`,
}, },
{ {
field: 'deliveryPrice', field: 'deliveryPrice',
label: '运费金额', label: '运费金额',
content: (data: MallOrderApi.Order) => `${fenToYuan(data?.deliveryPrice ?? 0)} 元`, content: (data: MallOrderApi.Order) =>
`${fenToYuan(data?.deliveryPrice ?? 0)} 元`,
}, },
{ {
field: 'adjustPrice', field: 'adjustPrice',
label: '订单调价', label: '订单调价',
content: (data: MallOrderApi.Order) => `${fenToYuan(data?.adjustPrice ?? 0)} 元`, content: (data: MallOrderApi.Order) =>
`${fenToYuan(data?.adjustPrice ?? 0)} 元`,
}, },
{ {
field: 'couponPrice', field: 'couponPrice',
label: '优惠劵优惠', label: '优惠劵优惠',
content: (data: MallOrderApi.Order) => content: (data: MallOrderApi.Order) =>
h('span', { class: 'text-red-500' }, `${fenToYuan(data?.couponPrice ?? 0)} 元`), h(
'span',
{ class: 'text-red-500' },
`${fenToYuan(data?.couponPrice ?? 0)} 元`,
),
}, },
{ {
field: 'vipPrice', field: 'vipPrice',
label: 'VIP 优惠', label: 'VIP 优惠',
content: (data: MallOrderApi.Order) => content: (data: MallOrderApi.Order) =>
h('span', { class: 'text-red-500' }, `${fenToYuan(data?.vipPrice ?? 0)} 元`), h(
'span',
{ class: 'text-red-500' },
`${fenToYuan(data?.vipPrice ?? 0)} 元`,
),
}, },
{ {
field: 'discountPrice', field: 'discountPrice',
label: '活动优惠', label: '活动优惠',
content: (data: MallOrderApi.Order) => content: (data: MallOrderApi.Order) =>
h('span', { class: 'text-red-500' }, `${fenToYuan(data?.discountPrice ?? 0)} 元`), h(
'span',
{ class: 'text-red-500' },
`${fenToYuan(data?.discountPrice ?? 0)} 元`,
),
}, },
{ {
field: 'pointPrice', field: 'pointPrice',
label: '积分抵扣', label: '积分抵扣',
content: (data: MallOrderApi.Order) => content: (data: MallOrderApi.Order) =>
h('span', { class: 'text-red-500' }, `${fenToYuan(data?.pointPrice ?? 0)} 元`), h(
'span',
{ class: 'text-red-500' },
`${fenToYuan(data?.pointPrice ?? 0)} 元`,
),
}, },
{ {
field: 'payPrice', field: 'payPrice',
label: '应付金额', label: '应付金额',
content: (data: MallOrderApi.Order) => `${fenToYuan(data?.payPrice ?? 0)} 元`, content: (data: MallOrderApi.Order) =>
`${fenToYuan(data?.payPrice ?? 0)} 元`,
}, },
]; ];
} }
@@ -168,21 +191,17 @@ export function useDeliveryInfoSchema(): DescriptionItemSchema[] {
`${data?.receiverAreaName} ${data?.receiverDetailAddress}`.trim(), `${data?.receiverAreaName} ${data?.receiverDetailAddress}`.trim(),
}, },
{ {
field: 'logisticsTime', field: 'deliveryTime',
label: '发货时间', label: '发货时间',
content: (data: MallOrderApi.Order) => formatDate(data?.deliveryTime) as string, content: (data: MallOrderApi.Order) =>
formatDateTime(data?.deliveryTime) as string,
}, },
]; ];
} }
/** 商品信息 columns */ /** 商品信息 columns */
export function useProductColumns(): VxeGridPropTypes.Columns { export function useProductColumns(): VxeTableGridOptions['columns'] {
return [ return [
{
type: 'seq',
width: 60,
title: '序号',
},
{ {
field: 'spuName', field: 'spuName',
title: '商品', title: '商品',
@@ -193,7 +212,7 @@ export function useProductColumns(): VxeGridPropTypes.Columns {
field: 'price', field: 'price',
title: '商品原价', title: '商品原价',
width: 150, width: 150,
formatter: ({ cellValue }: any) => `${fenToYuan(cellValue)} 元`, formatter: 'formatFenToYuanAmount',
}, },
{ {
field: 'count', field: 'count',
@@ -204,25 +223,45 @@ export function useProductColumns(): VxeGridPropTypes.Columns {
field: 'payPrice', field: 'payPrice',
title: '合计', title: '合计',
width: 150, width: 150,
formatter: ({ cellValue }: any) => `${fenToYuan(cellValue)} 元`, formatter: 'formatFenToYuanAmount',
}, },
{ {
field: 'afterSaleStatus', field: 'afterSaleStatus',
title: '售后状态', title: '售后状态',
width: 120, width: 120,
slots: { default: 'afterSaleStatus' }, cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS },
},
},
];
}
/** 物流详情 columns */
export function useExpressTrackColumns(): VxeTableGridOptions['columns'] {
return [
{
field: 'time',
title: '时间',
width: 180,
formatter: 'formatDateTime',
},
{
field: 'content',
title: '物流状态',
minWidth: 300,
}, },
]; ];
} }
/** 操作日志 columns */ /** 操作日志 columns */
export function useOperateLogColumns(): VxeGridPropTypes.Columns { export function useOperateLogColumns(): VxeTableGridOptions['columns'] {
return [ return [
{ {
field: 'createTime', field: 'createTime',
title: '操作时间', title: '操作时间',
width: 180, width: 180,
formatter: ({ cellValue }: any) => formatDate(cellValue) as string, formatter: 'formatDateTime',
}, },
{ {
field: 'userType', field: 'userType',

240
apps/web-antd/src/views/mall/trade/order/detail/index.vue
View File

@@ -1,4 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MallDeliveryExpressApi } from '#/api/mall/trade/delivery/express'; import type { MallDeliveryExpressApi } from '#/api/mall/trade/delivery/express';
import type { MallDeliveryPickUpStoreApi } from '#/api/mall/trade/delivery/pickUpStore'; import type { MallDeliveryPickUpStoreApi } from '#/api/mall/trade/delivery/pickUpStore';
import type { MallOrderApi } from '#/api/mall/trade/order'; import type { MallOrderApi } from '#/api/mall/trade/order';
@@ -12,12 +13,9 @@ import {
DICT_TYPE, DICT_TYPE,
TradeOrderStatusEnum, TradeOrderStatusEnum,
} from '@vben/constants'; } from '@vben/constants';
import { getDictLabel, getDictObj } from '@vben/hooks';
import { formatDate } from '@vben/utils';
import { useTabs } from '@vben/hooks'; import { useTabs } from '@vben/hooks';
import { Card, Tag, Timeline } from 'ant-design-vue'; import { Card, message, Tag } from 'ant-design-vue';
import { message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table'; import { useVbenVxeGrid } from '#/adapter/vxe-table';
import * as DeliveryExpressApi from '#/api/mall/trade/delivery/express'; import * as DeliveryExpressApi from '#/api/mall/trade/delivery/express';
@@ -33,6 +31,7 @@ import OrderUpdatePriceForm from '../modules/update-price-form.vue';
import OrderUpdateRemarkForm from '../modules/update-remark-form.vue'; import OrderUpdateRemarkForm from '../modules/update-remark-form.vue';
import { import {
useDeliveryInfoSchema, useDeliveryInfoSchema,
useExpressTrackColumns,
useOperateLogColumns, useOperateLogColumns,
useOrderInfoSchema, useOrderInfoSchema,
useOrderPriceSchema, useOrderPriceSchema,
@@ -46,31 +45,17 @@ const route = useRoute();
const router = useRouter(); const router = useRouter();
const tabs = useTabs(); const tabs = useTabs();
// 查询参数
const props = defineProps({
id: {
type: Number,
default: undefined,
}, // 订单ID
showPickUp: {
type: Boolean,
default: true,
}, // 显示核销按钮
});
const loading = ref(false); const loading = ref(false);
const orderId = ref(0); const orderId = ref(0);
const formData = ref<MallOrderApi.Order>({ const order = ref<MallOrderApi.Order>({
logs: [], logs: [],
}); });
const deliveryExpressList = ref<MallDeliveryExpressApi.SimpleDeliveryExpress[]>(
const deliveryExpressList = ref<MallDeliveryExpressApi.SimpleDeliveryExpress[]>([]); [],
const expressTrackList = ref<any[]>([]);
const pickUpStore = ref<MallDeliveryPickUpStoreApi.PickUpStore>(
{} as MallDeliveryPickUpStoreApi.PickUpStore,
); );
const expressTrackList = ref<any[]>([]);
const pickUpStore = ref<MallDeliveryPickUpStoreApi.PickUpStore | undefined>();
// Description 组件
const [OrderInfoDescriptions] = useDescription({ const [OrderInfoDescriptions] = useDescription({
componentProps: { componentProps: {
title: '订单信息', title: '订单信息',
@@ -84,7 +69,7 @@ const [OrderStatusDescriptions] = useDescription({
componentProps: { componentProps: {
title: '订单状态', title: '订单状态',
bordered: false, bordered: false,
column: 2, column: 1,
}, },
schema: useOrderStatusSchema(), schema: useOrderStatusSchema(),
}); });
@@ -107,7 +92,6 @@ const [DeliveryInfoDescriptions] = useDescription({
schema: useDeliveryInfoSchema(), schema: useDeliveryInfoSchema(),
}); });
// Grid 组件
const [ProductGrid, productGridApi] = useVbenVxeGrid({ const [ProductGrid, productGridApi] = useVbenVxeGrid({
gridOptions: { gridOptions: {
cellConfig: { cellConfig: {
@@ -124,7 +108,22 @@ const [ProductGrid, productGridApi] = useVbenVxeGrid({
refresh: true, refresh: true,
search: true, search: true,
}, },
}, } as VxeTableGridOptions<MallOrderApi.OrderItem>,
});
const [ExpressTrackGrid, expressTrackGridApi] = useVbenVxeGrid({
gridOptions: {
columns: useExpressTrackColumns(),
data: [],
border: true,
pagerConfig: {
enabled: false,
},
toolbarConfig: {
refresh: true,
search: true,
},
} as VxeTableGridOptions,
}); });
const [OperateLogGrid, operateLogGridApi] = useVbenVxeGrid({ const [OperateLogGrid, operateLogGridApi] = useVbenVxeGrid({
@@ -139,10 +138,9 @@ const [OperateLogGrid, operateLogGridApi] = useVbenVxeGrid({
refresh: true, refresh: true,
search: true, search: true,
}, },
}, } as VxeTableGridOptions,
}); });
// Modal 组件
const [DeliveryFormModal, deliveryFormModalApi] = useVbenModal({ const [DeliveryFormModal, deliveryFormModalApi] = useVbenModal({
connectedComponent: DeliveryForm, connectedComponent: DeliveryForm,
destroyOnClose: true, destroyOnClose: true,
@@ -163,78 +161,31 @@ const [OrderUpdatePriceFormModal, priceFormModalApi] = useVbenModal({
destroyOnClose: true, destroyOnClose: true,
}); });
/** 获得 userType 颜色 */
const getUserTypeColor = (type: number) => {
const dict = getDictObj(DICT_TYPE.USER_TYPE, type);
switch (dict?.colorType) {
case 'danger': {
return '#F56C6C';
}
case 'info': {
return '#909399';
}
case 'success': {
return '#67C23A';
}
case 'warning': {
return '#E6A23C';
}
}
return '#409EFF';
};
/** 各种操作 */
const handleRemark = () => {
remarkFormModalApi.setData(formData.value).open();
};
const handleDelivery = () => {
deliveryFormModalApi.setData(formData.value).open();
};
const handleUpdateAddress = () => {
addressFormModalApi.setData(formData.value).open();
};
const handleUpdatePrice = () => {
priceFormModalApi.setData(formData.value).open();
};
/** 核销 */
const handlePickUp = async () => {
await confirm('确认核销订单吗？');
const hideLoading = message.loading({
content: '正在处理中...',
duration: 0,
});
try {
await TradeOrderApi.pickUpOrder(formData.value.id!);
message.success('核销成功');
await getDetail();
} finally {
hideLoading();
}
};
/** 获得详情 */ /** 获得详情 */
const getDetail = async () => { async function getDetail() {
loading.value = true; loading.value = true;
try { try {
const res = await TradeOrderApi.getOrder(orderId.value); const res = await TradeOrderApi.getOrder(orderId.value);
if (!res) { if (res === null) {
message.error('交易订单不存在'); message.error('交易订单不存在');
handleBack(); handleBack();
return; return;
} }
formData.value = res; order.value = res;
productGridApi.setGridOptions({ data: res.items || [] }); productGridApi.setGridOptions({ data: res.items || [] });
operateLogGridApi.setGridOptions({ data: res.logs || [] }); operateLogGridApi.setGridOptions({ data: res.logs || [] });
// 如果配送方式为快递，则查询物流公司 // 如果配送方式为快递，则查询物流公司
if (res.deliveryType === DeliveryTypeEnum.EXPRESS.type) { if (res.deliveryType === DeliveryTypeEnum.EXPRESS.type) {
deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList(); deliveryExpressList.value =
await DeliveryExpressApi.getSimpleDeliveryExpressList();
if (res.logisticsId) { if (res.logisticsId) {
expressTrackList.value = await TradeOrderApi.getExpressTrackList(res.id!); expressTrackList.value = await TradeOrderApi.getExpressTrackList(
res.id!,
);
expressTrackGridApi.setGridOptions({
data: expressTrackList.value || [],
});
} }
} else if ( } else if (
res.deliveryType === DeliveryTypeEnum.PICK_UP.type && res.deliveryType === DeliveryTypeEnum.PICK_UP.type &&
@@ -247,6 +198,39 @@ const getDetail = async () => {
} finally { } finally {
loading.value = false; loading.value = false;
} }
}
/** 各种操作 */
const handleRemark = () => {
remarkFormModalApi.setData(order.value).open();
};
const handleDelivery = () => {
deliveryFormModalApi.setData(order.value).open();
};
const handleUpdateAddress = () => {
addressFormModalApi.setData(order.value).open();
};
const handleUpdatePrice = () => {
priceFormModalApi.setData(order.value).open();
};
/** 核销 */
const handlePickUp = async () => {
await confirm('确认核销订单吗？');
const hideLoading = message.loading({
content: '正在处理中...',
duration: 0,
});
try {
await TradeOrderApi.pickUpOrder(order.value.id!);
message.success('核销成功');
await getDetail();
} finally {
hideLoading();
}
}; };
/** 返回列表页 */ /** 返回列表页 */
@@ -255,18 +239,15 @@ function handleBack() {
router.push('/mall/trade/order'); router.push('/mall/trade/order');
} }
/** 初始化 */ /** 初始化 */
onMounted(async () => { onMounted(async () => {
orderId.value = Number(route.params.id) || props.id || 0; orderId.value = Number(route.params.id);
if (orderId.value) { await getDetail();
await getDetail();
}
}); });
</script> </script>
<template> <template>
<Page auto-content-height :title="formData.no" :loading="loading"> <Page auto-content-height :title="order.no" :loading="loading">
<template #extra> <template #extra>
<TableAction <TableAction
:actions="[ :actions="[
@@ -280,7 +261,7 @@ onMounted(async () => {
label: '调整价格', label: '调整价格',
type: 'primary', type: 'primary',
onClick: handleUpdatePrice, onClick: handleUpdatePrice,
ifShow: formData.status === TradeOrderStatusEnum.UNPAID.status, ifShow: order.status === TradeOrderStatusEnum.UNPAID.status,
}, },
{ {
label: '备注', label: '备注',
@@ -292,25 +273,24 @@ onMounted(async () => {
type: 'primary', type: 'primary',
onClick: handleDelivery, onClick: handleDelivery,
ifShow: ifShow:
formData.status === TradeOrderStatusEnum.UNDELIVERED.status && order.status === TradeOrderStatusEnum.UNDELIVERED.status &&
formData.deliveryType === DeliveryTypeEnum.EXPRESS.type, order.deliveryType === DeliveryTypeEnum.EXPRESS.type,
}, },
{ {
label: '修改地址', label: '修改地址',
type: 'primary', type: 'primary',
onClick: handleUpdateAddress, onClick: handleUpdateAddress,
ifShow: ifShow:
formData.status === TradeOrderStatusEnum.UNDELIVERED.status && order.status === TradeOrderStatusEnum.UNDELIVERED.status &&
formData.deliveryType === DeliveryTypeEnum.EXPRESS.type, order.deliveryType === DeliveryTypeEnum.EXPRESS.type,
}, },
{ {
label: '核销', label: '核销',
type: 'primary', type: 'primary',
onClick: handlePickUp, onClick: handlePickUp,
ifShow: ifShow:
formData.status === TradeOrderStatusEnum.UNDELIVERED.status && order.status === TradeOrderStatusEnum.UNDELIVERED.status &&
formData.deliveryType === DeliveryTypeEnum.PICK_UP.type && order.deliveryType === DeliveryTypeEnum.PICK_UP.type,
showPickUp,
}, },
]" ]"
/> />
@@ -324,14 +304,12 @@ onMounted(async () => {
<!-- 订单信息 --> <!-- 订单信息 -->
<Card class="mb-4"> <Card class="mb-4">
<OrderInfoDescriptions :data="formData" /> <OrderInfoDescriptions :data="order" />
</Card> </Card>
<!-- 订单状态 --> <!-- 订单状态 -->
<Card class="mb-4"> <Card class="mb-4">
<OrderStatusDescriptions :data="formData" /> <OrderStatusDescriptions :data="order" />
</Card> </Card>
<!-- 商品信息 --> <!-- 商品信息 -->
<div class="mb-4"> <div class="mb-4">
<ProductGrid table-title="商品信息"> <ProductGrid table-title="商品信息">
@@ -349,64 +327,26 @@ onMounted(async () => {
</div> </div>
</div> </div>
</template> </template>
<template #afterSaleStatus="{ row }">
<DictTag
:type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
:value="row.afterSaleStatus"
/>
</template>
</ProductGrid> </ProductGrid>
</div> </div>
<!-- 费用信息 --> <!-- 费用信息 -->
<Card class="mb-4"> <Card class="mb-4">
<OrderPriceDescriptions :data="formData" /> <OrderPriceDescriptions :data="order" />
</Card> </Card>
<!-- 收货信息 --> <!-- 收货信息 -->
<Card class="mb-4"> <Card class="mb-4">
<DeliveryInfoDescriptions :data="formData" /> <DeliveryInfoDescriptions :data="order" />
<!-- 物流详情 -->
<div v-if="expressTrackList.length > 0" class="mt-4">
<h4 class="mb-2 font-semibold">物流详情</h4>
<Timeline>
<Timeline.Item
v-for="(track, index) in expressTrackList"
:key="index"
>
<template #dot>
<div class="h-2 w-2 rounded-full bg-blue-500"></div>
</template>
<div>
<div class="text-sm text-gray-600">
{{ formatDate(track.time) }}
</div>
<div class="text-sm">{{ track.content }}</div>
</div>
</Timeline.Item>
</Timeline>
</div>
</Card> </Card>
<!-- 物流详情 -->
<div v-if="expressTrackList.length > 0" class="mt-4">
<ExpressTrackGrid table-title="物流详情" />
</div>
<!-- 操作日志 --> <!-- 操作日志 -->
<div> <div>
<OperateLogGrid table-title="操作日志"> <OperateLogGrid table-title="操作日志">
<template #userType="{ row }"> <template #userType="{ row }">
<Tag <Tag v-if="row.userId === 0" color="default"> 系统 </Tag>
v-if="row.userId === 0" <DictTag :type="DICT_TYPE.USER_TYPE" :value="row.userType" />
color="default"
>
系统
</Tag>
<div v-else class="flex items-center gap-2">
<span
:style="{ backgroundColor: getUserTypeColor(row.userType!) }"
class="inline-flex h-5 w-5 items-center justify-center rounded-full text-xs text-white"
>
{{ getDictLabel(DICT_TYPE.USER_TYPE, row.userType)[0] }}
</span>
<DictTag :type="DICT_TYPE.USER_TYPE" :value="row.userType" />
</div>
</template> </template>
</OperateLogGrid> </OperateLogGrid>
</div> </div>