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

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

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

@@ -1,4 +1,5 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MallDeliveryExpressApi } from '#/api/mall/trade/delivery/express';
import type { MallDeliveryPickUpStoreApi } from '#/api/mall/trade/delivery/pickUpStore';
import type { MallOrderApi } from '#/api/mall/trade/order';
@@ -12,12 +13,9 @@ import {
DICT_TYPE,
TradeOrderStatusEnum,
} from '@vben/constants';
import { getDictLabel, getDictObj } from '@vben/hooks';
import { formatDate } from '@vben/utils';
import { useTabs } from '@vben/hooks';
import { Card, Tag, Timeline } from 'ant-design-vue';
import { message } from 'ant-design-vue';
import { Card, message, Tag } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
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 {
useDeliveryInfoSchema,
useExpressTrackColumns,
useOperateLogColumns,
useOrderInfoSchema,
useOrderPriceSchema,
@@ -46,31 +45,17 @@ const route = useRoute();
const router = useRouter();
const tabs = useTabs();
// 查询参数
const props = defineProps({
id: {
type: Number,
default: undefined,
}, // 订单ID
showPickUp: {
type: Boolean,
default: true,
}, // 显示核销按钮
});
const loading = ref(false);
const orderId = ref(0);
const formData = ref<MallOrderApi.Order>({
const order = ref<MallOrderApi.Order>({
logs: [],
});
const deliveryExpressList = ref<MallDeliveryExpressApi.SimpleDeliveryExpress[]>([]);
const expressTrackList = ref<any[]>([]);
const pickUpStore = ref<MallDeliveryPickUpStoreApi.PickUpStore>(
{} as MallDeliveryPickUpStoreApi.PickUpStore,
const deliveryExpressList = ref<MallDeliveryExpressApi.SimpleDeliveryExpress[]>(
[],
);
const expressTrackList = ref<any[]>([]);
const pickUpStore = ref<MallDeliveryPickUpStoreApi.PickUpStore | undefined>();
// Description 组件
const [OrderInfoDescriptions] = useDescription({
componentProps: {
title: '订单信息',
@@ -84,7 +69,7 @@ const [OrderStatusDescriptions] = useDescription({
componentProps: {
title: '订单状态',
bordered: false,
column: 2,
column: 1,
},
schema: useOrderStatusSchema(),
});
@@ -107,7 +92,6 @@ const [DeliveryInfoDescriptions] = useDescription({
schema: useDeliveryInfoSchema(),
});
// Grid 组件
const [ProductGrid, productGridApi] = useVbenVxeGrid({
gridOptions: {
cellConfig: {
@@ -124,7 +108,22 @@ const [ProductGrid, productGridApi] = useVbenVxeGrid({
refresh: 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({
@@ -139,10 +138,9 @@ const [OperateLogGrid, operateLogGridApi] = useVbenVxeGrid({
refresh: true,
search: true,
},
},
} as VxeTableGridOptions,
});
// Modal 组件
const [DeliveryFormModal, deliveryFormModalApi] = useVbenModal({
connectedComponent: DeliveryForm,
destroyOnClose: true,
@@ -163,78 +161,31 @@ const [OrderUpdatePriceFormModal, priceFormModalApi] = useVbenModal({
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;
try {
const res = await TradeOrderApi.getOrder(orderId.value);
if (!res) {
if (res === null) {
message.error('交易订单不存在');
handleBack();
return;
}
formData.value = res;
order.value = res;
productGridApi.setGridOptions({ data: res.items || [] });
operateLogGridApi.setGridOptions({ data: res.logs || [] });
// 如果配送方式为快递，则查询物流公司
if (res.deliveryType === DeliveryTypeEnum.EXPRESS.type) {
deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList();
deliveryExpressList.value =
await DeliveryExpressApi.getSimpleDeliveryExpressList();
if (res.logisticsId) {
expressTrackList.value = await TradeOrderApi.getExpressTrackList(res.id!);
expressTrackList.value = await TradeOrderApi.getExpressTrackList(
res.id!,
);
expressTrackGridApi.setGridOptions({
data: expressTrackList.value || [],
});
}
} else if (
res.deliveryType === DeliveryTypeEnum.PICK_UP.type &&
@@ -247,6 +198,39 @@ const getDetail = async () => {
} finally {
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');
}
/** 初始化 */
onMounted(async () => {
orderId.value = Number(route.params.id) || props.id || 0;
if (orderId.value) {
await getDetail();
}
orderId.value = Number(route.params.id);
await getDetail();
});
</script>
<template>
<Page auto-content-height :title="formData.no" :loading="loading">
<Page auto-content-height :title="order.no" :loading="loading">
<template #extra>
<TableAction
:actions="[
@@ -280,7 +261,7 @@ onMounted(async () => {
label: '调整价格',
type: 'primary',
onClick: handleUpdatePrice,
ifShow: formData.status === TradeOrderStatusEnum.UNPAID.status,
ifShow: order.status === TradeOrderStatusEnum.UNPAID.status,
},
{
label: '备注',
@@ -292,25 +273,24 @@ onMounted(async () => {
type: 'primary',
onClick: handleDelivery,
ifShow:
formData.status === TradeOrderStatusEnum.UNDELIVERED.status &&
formData.deliveryType === DeliveryTypeEnum.EXPRESS.type,
order.status === TradeOrderStatusEnum.UNDELIVERED.status &&
order.deliveryType === DeliveryTypeEnum.EXPRESS.type,
},
{
label: '修改地址',
type: 'primary',
onClick: handleUpdateAddress,
ifShow:
formData.status === TradeOrderStatusEnum.UNDELIVERED.status &&
formData.deliveryType === DeliveryTypeEnum.EXPRESS.type,
order.status === TradeOrderStatusEnum.UNDELIVERED.status &&
order.deliveryType === DeliveryTypeEnum.EXPRESS.type,
},
{
label: '核销',
type: 'primary',
onClick: handlePickUp,
ifShow:
formData.status === TradeOrderStatusEnum.UNDELIVERED.status &&
formData.deliveryType === DeliveryTypeEnum.PICK_UP.type &&
showPickUp,
order.status === TradeOrderStatusEnum.UNDELIVERED.status &&
order.deliveryType === DeliveryTypeEnum.PICK_UP.type,
},
]"
/>
@@ -324,14 +304,12 @@ onMounted(async () => {
<!-- 订单信息 -->
<Card class="mb-4">
<OrderInfoDescriptions :data="formData" />
<OrderInfoDescriptions :data="order" />
</Card>
<!-- 订单状态 -->
<Card class="mb-4">
<OrderStatusDescriptions :data="formData" />
<OrderStatusDescriptions :data="order" />
</Card>
<!-- 商品信息 -->
<div class="mb-4">
<ProductGrid table-title="商品信息">
@@ -349,66 +327,28 @@ onMounted(async () => {
</div>
</div>
</template>
<template #afterSaleStatus="{ row }">
<DictTag
:type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
:value="row.afterSaleStatus"
/>
</template>
</ProductGrid>
</div>
<!-- 费用信息 -->
<Card class="mb-4">
<OrderPriceDescriptions :data="formData" />
<OrderPriceDescriptions :data="order" />
</Card>
<!-- 收货信息 -->
<Card class="mb-4">
<DeliveryInfoDescriptions :data="formData" />
<!-- 物流详情 -->
<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>
<DeliveryInfoDescriptions :data="order" />
</Card>
<!-- 物流详情 -->
<div v-if="expressTrackList.length > 0" class="mt-4">
<ExpressTrackGrid table-title="物流详情" />
</div>
<!-- 操作日志 -->
<div>
<OperateLogGrid table-title="操作日志">
<template #userType="{ row }">
<Tag
v-if="row.userId === 0"
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>
<Tag v-if="row.userId === 0" color="default"> 系统 </Tag>
<DictTag :type="DICT_TYPE.USER_TYPE" :value="row.userType" />
</template>
</OperateLogGrid>
</div>
</Page>
</template>
</template>