feat：【mall 商城】售后退款（10% antd detail description 相关的几个描述）
This commit is contained in:
YunaiV
263
apps/web-antd/src/views/mall/trade/afterSale/detail/data.ts
Normal file
263
apps/web-antd/src/views/mall/trade/afterSale/detail/data.ts
Normal file
@@ -0,0 +1,263 @@
|
||||
import type { MallAfterSaleApi } from '#/api/mall/trade/afterSale';
|
||||
import type { DescriptionItemSchema } from '#/components/description';
|
||||
|
||||
import { h } from 'vue';
|
||||
|
||||
import { DICT_TYPE } from '@vben/constants';
|
||||
import { fenToYuan, formatDate } from '@vben/utils';
|
||||
|
||||
import { Image } from 'ant-design-vue';
|
||||
|
||||
import { DictTag } from '#/components/dict-tag';
|
||||
|
||||
/** 订单信息 schema */
|
||||
export function useOrderInfoSchema(): DescriptionItemSchema[] {
|
||||
return [
|
||||
{
|
||||
field: 'orderNo',
|
||||
label: '订单号',
|
||||
},
|
||||
{
|
||||
field: 'order.deliveryType',
|
||||
label: '配送方式',
|
||||
content: (data: MallAfterSaleApi.AfterSale) =>
|
||||
h(DictTag, {
|
||||
type: DICT_TYPE.TRADE_DELIVERY_TYPE,
|
||||
value: data?.order?.deliveryType,
|
||||
}),
|
||||
},
|
||||
{
|
||||
field: 'order.type',
|
||||
label: '订单类型',
|
||||
content: (data: MallAfterSaleApi.AfterSale) =>
|
||||
h(DictTag, {
|
||||
type: DICT_TYPE.TRADE_ORDER_TYPE,
|
||||
value: data?.order?.type,
|
||||
}),
|
||||
},
|
||||
{
|
||||
field: 'order.receiverName',
|
||||
label: '收货人',
|
||||
},
|
||||
{
|
||||
field: 'order.userRemark',
|
||||
label: '买家留言',
|
||||
},
|
||||
{
|
||||
field: 'order.terminal',
|
||||
label: '订单来源',
|
||||
content: (data: MallAfterSaleApi.AfterSale) =>
|
||||
h(DictTag, {
|
||||
type: DICT_TYPE.TERMINAL,
|
||||
value: data?.order?.terminal,
|
||||
}),
|
||||
},
|
||||
{
|
||||
field: 'order.receiverMobile',
|
||||
label: '联系电话',
|
||||
},
|
||||
{
|
||||
field: 'order.remark',
|
||||
label: '商家备注',
|
||||
},
|
||||
{
|
||||
field: 'order.payOrderId',
|
||||
label: '支付单号',
|
||||
},
|
||||
{
|
||||
field: 'order.payChannelCode',
|
||||
label: '付款方式',
|
||||
content: (data: MallAfterSaleApi.AfterSale) =>
|
||||
h(DictTag, {
|
||||
type: DICT_TYPE.PAY_CHANNEL_CODE,
|
||||
value: data?.order?.payChannelCode,
|
||||
}),
|
||||
},
|
||||
{
|
||||
field: 'user.nickname',
|
||||
label: '买家',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 售后信息 schema */
|
||||
export function useAfterSaleInfoSchema(): DescriptionItemSchema[] {
|
||||
return [
|
||||
{
|
||||
field: 'no',
|
||||
label: '退款编号',
|
||||
},
|
||||
{
|
||||
field: 'auditTime',
|
||||
label: '申请时间',
|
||||
content: (data: MallAfterSaleApi.AfterSale) =>
|
||||
formatDate(data?.auditTime) as string,
|
||||
},
|
||||
{
|
||||
field: 'type',
|
||||
label: '售后类型',
|
||||
content: (data: MallAfterSaleApi.AfterSale) =>
|
||||
h(DictTag, {
|
||||
type: DICT_TYPE.TRADE_AFTER_SALE_TYPE,
|
||||
value: data?.type,
|
||||
}),
|
||||
},
|
||||
{
|
||||
field: 'way',
|
||||
label: '售后方式',
|
||||
content: (data: MallAfterSaleApi.AfterSale) =>
|
||||
h(DictTag, {
|
||||
type: DICT_TYPE.TRADE_AFTER_SALE_WAY,
|
||||
value: data?.way,
|
||||
}),
|
||||
},
|
||||
{
|
||||
field: 'refundPrice',
|
||||
label: '退款金额',
|
||||
content: (data: MallAfterSaleApi.AfterSale) =>
|
||||
fenToYuan(data?.refundPrice ?? 0),
|
||||
},
|
||||
{
|
||||
field: 'applyReason',
|
||||
label: '退款原因',
|
||||
},
|
||||
{
|
||||
field: 'applyDescription',
|
||||
label: '补充描述',
|
||||
},
|
||||
{
|
||||
field: 'applyPicUrls',
|
||||
label: '凭证图片',
|
||||
content: (data) => {
|
||||
const images = data?.applyPicUrls || [];
|
||||
return h(
|
||||
'div',
|
||||
{ class: 'flex gap-10px' },
|
||||
images.map((url: string, index: number) =>
|
||||
h(Image, {
|
||||
key: index,
|
||||
src: url,
|
||||
width: 60,
|
||||
height: 60,
|
||||
class: 'object-cover',
|
||||
}),
|
||||
),
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 退款状态 schema */
|
||||
export function useRefundStatusSchema(): DescriptionItemSchema[] {
|
||||
return [
|
||||
{
|
||||
field: 'status',
|
||||
label: '退款状态',
|
||||
content: (data) =>
|
||||
h(DictTag, {
|
||||
type: DICT_TYPE.TRADE_AFTER_SALE_STATUS,
|
||||
value: data?.status,
|
||||
}),
|
||||
},
|
||||
{
|
||||
field: 'reminder',
|
||||
label: '提醒',
|
||||
content: () =>
|
||||
h('div', { class: 'text-red-500 mb-10px' }, [
|
||||
h('div', '如果未发货，请点击同意退款给买家。'),
|
||||
h('div', '如果实际已发货，请主动与买家联系。'),
|
||||
h('div', '如果订单整体退款后，优惠券和余额会退还给买家.'),
|
||||
]),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 商品信息 schema */
|
||||
export function useProductInfoSchema() {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
field: 'spuName',
|
||||
title: '商品',
|
||||
width: 'auto',
|
||||
formatter: ({ row }) => {
|
||||
const properties = (row.properties || [])
|
||||
.map(
|
||||
(property: any) =>
|
||||
`${property.propertyName}: ${property.valueName}`,
|
||||
)
|
||||
.join(', ');
|
||||
return `${row.spuName}${properties ? ` (${properties})` : ''}`;
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'price',
|
||||
title: '商品原价',
|
||||
width: 150,
|
||||
formatter: ({ cellValue }) => `${fenToYuan(cellValue)} 元`,
|
||||
},
|
||||
{
|
||||
field: 'count',
|
||||
title: '数量',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
field: 'payPrice',
|
||||
title: '合计',
|
||||
width: 150,
|
||||
formatter: ({ cellValue }) => `${fenToYuan(cellValue)} 元`,
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
pagination: false,
|
||||
border: true,
|
||||
size: 'small',
|
||||
};
|
||||
}
|
||||
|
||||
/** 操作日志 schema */
|
||||
export function useOperateLogSchema() {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '操作时间',
|
||||
width: 180,
|
||||
formatter: ({ cellValue }) => formatDate(cellValue),
|
||||
},
|
||||
{
|
||||
field: 'content',
|
||||
title: '操作内容',
|
||||
width: 'auto',
|
||||
},
|
||||
{
|
||||
field: 'userType',
|
||||
title: '操作人',
|
||||
width: 80,
|
||||
formatter: ({ cellValue }) => {
|
||||
const userTypeLabels: Record<number, string> = {
|
||||
1: '管',
|
||||
2: '商',
|
||||
3: '买',
|
||||
};
|
||||
return userTypeLabels[cellValue || 0] || '系';
|
||||
},
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
pagination: false,
|
||||
border: true,
|
||||
size: 'small',
|
||||
};
|
||||
}
|
||||
|
||||
/** 获得用户类型颜色 */
|
||||
export function getUserTypeColor(type: number): string {
|
||||
const colorMap: Record<number, string> = {
|
||||
1: '#1890ff', // 蓝色
|
||||
2: '#52c41a', // 绿色
|
||||
3: '#fa8c16', // 橙色
|
||||
};
|
||||
return colorMap[type] || '#1890ff';
|
||||
}
|
||||
334
apps/web-antd/src/views/mall/trade/afterSale/detail/index.vue
Normal file
334
apps/web-antd/src/views/mall/trade/afterSale/detail/index.vue
Normal file
@@ -0,0 +1,334 @@
|
||||
<script setup lang="ts">
|
||||
import type { MallAfterSaleApi } from '#/api/mall/trade/afterSale';
|
||||
import type { MallOrderApi } from '#/api/mall/trade/order';
|
||||
|
||||
import { h, onMounted, ref } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
import { Page, useVbenModal } from '@vben/common-ui';
|
||||
import { DICT_TYPE } from '@vben/constants';
|
||||
import { getDictLabel, useTabs } from '@vben/hooks';
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
import { Card, message, Modal, Timeline } from 'ant-design-vue';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import * as AfterSaleApi from '#/api/mall/trade/afterSale/index';
|
||||
import { useDescription } from '#/components/description';
|
||||
import { TableAction } from '#/components/table-action';
|
||||
|
||||
import {
|
||||
getUserTypeColor,
|
||||
useAfterSaleInfoSchema,
|
||||
useOperateLogSchema,
|
||||
useOrderInfoSchema,
|
||||
useProductInfoSchema,
|
||||
useRefundStatusSchema,
|
||||
} from './data';
|
||||
|
||||
defineOptions({ name: 'TradeAfterSaleDetail' });
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const tabs = useTabs();
|
||||
|
||||
const loading = ref(false);
|
||||
const afterSaleId = ref(0);
|
||||
const afterSale = ref<MallAfterSaleApi.AfterSale>({
|
||||
order: {} as MallOrderApi.Order,
|
||||
orderItem: {} as MallOrderApi.OrderItem,
|
||||
logs: [] as any[],
|
||||
});
|
||||
|
||||
const [OrderDescriptions] = useDescription({
|
||||
componentProps: {
|
||||
title: '订单信息',
|
||||
bordered: false,
|
||||
column: 3,
|
||||
},
|
||||
schema: useOrderInfoSchema(),
|
||||
});
|
||||
|
||||
const [AfterSaleDescriptions] = useDescription({
|
||||
componentProps: {
|
||||
title: '售后信息',
|
||||
bordered: false,
|
||||
column: 3,
|
||||
},
|
||||
schema: useAfterSaleInfoSchema(),
|
||||
});
|
||||
|
||||
const [RefundStatusDescriptions] = useDescription({
|
||||
componentProps: {
|
||||
title: '退款状态',
|
||||
bordered: false,
|
||||
column: 1,
|
||||
},
|
||||
schema: useRefundStatusSchema(),
|
||||
});
|
||||
|
||||
// TODO @AI：只把 columns 拿出去
|
||||
const [ProductGrid] = useVbenVxeGrid({
|
||||
gridOptions: {
|
||||
...useProductInfoSchema(),
|
||||
class: 'mt-4',
|
||||
},
|
||||
});
|
||||
|
||||
// TODO @AI：只把 columns 拿出去
|
||||
const [OperateLogGrid] = useVbenVxeGrid({
|
||||
gridOptions: {
|
||||
...useOperateLogSchema(),
|
||||
class: 'mt-4',
|
||||
},
|
||||
});
|
||||
|
||||
const [DisagreeModal, disagreeModalApi] = useVbenModal({
|
||||
connectedComponent: () => import('./modules/disagree-form.vue'),
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
/** 获得详情 */
|
||||
async function getDetail() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await AfterSaleApi.getAfterSale(afterSaleId.value);
|
||||
if (res === null) {
|
||||
message.error('售后订单不存在');
|
||||
handleBack();
|
||||
return;
|
||||
}
|
||||
afterSale.value = res;
|
||||
|
||||
// 更新商品信息
|
||||
if (res.orderItem) {
|
||||
ProductGrid.api?.reload([res.orderItem]);
|
||||
}
|
||||
// 更新操作日志
|
||||
if (res.logs) {
|
||||
OperateLogGrid.api?.reload(res.logs);
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/** 同意售后 */
|
||||
// TODO @AI：需要 loading
|
||||
async function agree() {
|
||||
Modal.confirm({
|
||||
title: '确认操作',
|
||||
content: '是否同意售后？',
|
||||
onOk: async () => {
|
||||
await AfterSaleApi.agree(afterSale.value.id!);
|
||||
message.success($t('page.common.success'));
|
||||
await getDetail();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/** 拒绝售后 */
|
||||
function disagree() {
|
||||
disagreeModalApi.setData({ afterSale: afterSale.value }).open();
|
||||
}
|
||||
|
||||
/** 确认收货 */
|
||||
// TODO @AI：需要 loading
|
||||
async function receive() {
|
||||
Modal.confirm({
|
||||
title: '确认操作',
|
||||
content: '是否确认收货？',
|
||||
onOk: async () => {
|
||||
await AfterSaleApi.receive(afterSale.value.id!);
|
||||
message.success($t('page.common.success'));
|
||||
await getDetail();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/** 拒绝收货 */
|
||||
// TODO @AI：需要 loading
|
||||
async function refuse() {
|
||||
Modal.confirm({
|
||||
title: '确认操作',
|
||||
content: '是否拒绝收货？',
|
||||
onOk: async () => {
|
||||
await AfterSaleApi.refuse(afterSale.value.id!);
|
||||
message.success($t('page.common.success'));
|
||||
await getDetail();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/** 确认退款 */
|
||||
// TODO @AI：需要 loading
|
||||
async function refund() {
|
||||
Modal.confirm({
|
||||
title: '确认操作',
|
||||
content: '是否确认退款？',
|
||||
onOk: async () => {
|
||||
await AfterSaleApi.refund(afterSale.value.id!);
|
||||
message.success($t('page.common.success'));
|
||||
await getDetail();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/** 返回列表页 */
|
||||
function handleBack() {
|
||||
tabs.closeCurrentTab();
|
||||
router.push('/mall/trade/afterSale');
|
||||
}
|
||||
|
||||
/** 获取操作按钮 */
|
||||
function getActionButtons() {
|
||||
const buttons: any[] = [
|
||||
{
|
||||
label: '返回',
|
||||
type: 'default',
|
||||
icon: 'lucide:arrow-left',
|
||||
onClick: handleBack,
|
||||
},
|
||||
];
|
||||
|
||||
// 根据状态添加不同的操作按钮
|
||||
switch (afterSale.value.status) {
|
||||
case 10: {
|
||||
buttons.push(
|
||||
{
|
||||
label: '同意售后',
|
||||
type: 'primary',
|
||||
onClick: agree,
|
||||
},
|
||||
{
|
||||
label: '拒绝售后',
|
||||
type: 'primary',
|
||||
onClick: disagree,
|
||||
},
|
||||
);
|
||||
|
||||
break;
|
||||
}
|
||||
case 30: {
|
||||
buttons.push(
|
||||
{
|
||||
label: '确认收货',
|
||||
type: 'primary',
|
||||
onClick: receive,
|
||||
},
|
||||
{
|
||||
label: '拒绝收货',
|
||||
type: 'primary',
|
||||
onClick: refuse,
|
||||
},
|
||||
);
|
||||
|
||||
break;
|
||||
}
|
||||
case 40: {
|
||||
buttons.push({
|
||||
label: '确认退款',
|
||||
type: 'primary',
|
||||
onClick: refund,
|
||||
});
|
||||
|
||||
break;
|
||||
}
|
||||
// No default
|
||||
}
|
||||
|
||||
return buttons;
|
||||
}
|
||||
|
||||
/** 渲染操作日志时间线 */
|
||||
function renderTimeline() {
|
||||
return afterSale.value.logs?.map((log: any) => ({
|
||||
key: log.id,
|
||||
children: [
|
||||
h(
|
||||
'div',
|
||||
{
|
||||
style: {
|
||||
backgroundColor: '#f5f5f5',
|
||||
padding: '10px',
|
||||
borderRadius: '4px',
|
||||
position: 'relative',
|
||||
marginLeft: '10px',
|
||||
},
|
||||
},
|
||||
[
|
||||
h('div', log.content),
|
||||
h('div', {
|
||||
style: {
|
||||
position: 'absolute',
|
||||
left: '-16px',
|
||||
top: '10px',
|
||||
width: 0,
|
||||
height: 0,
|
||||
borderTop: '8px solid transparent',
|
||||
borderBottom: '8px solid transparent',
|
||||
borderRight: '8px solid #f5f5f5',
|
||||
},
|
||||
}),
|
||||
],
|
||||
),
|
||||
],
|
||||
dot: h(
|
||||
'span',
|
||||
{
|
||||
style: {
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
fontSize: '10px',
|
||||
color: '#fff',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: getUserTypeColor(log.userType ?? 0),
|
||||
},
|
||||
},
|
||||
getDictLabel(DICT_TYPE.USER_TYPE, log.userType)?.[0] || '系',
|
||||
),
|
||||
}));
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
afterSaleId.value = Number(route.params.id);
|
||||
getDetail();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page auto-content-height :title="afterSale.no" :loading="loading">
|
||||
<DisagreeModal @success="getDetail" />
|
||||
|
||||
<!-- TODO @AI：直接写，不用 getActionButtons；按钮是否展示，使用 ifShow -->
|
||||
<template #extra>
|
||||
<TableAction :actions="getActionButtons()" />
|
||||
</template>
|
||||
|
||||
<!-- 订单信息 -->
|
||||
<Card class="mb-4">
|
||||
<OrderDescriptions :data="afterSale" />
|
||||
</Card>
|
||||
<!-- 售后信息 -->
|
||||
<Card class="mb-4">
|
||||
<AfterSaleDescriptions :data="afterSale" />
|
||||
</Card>
|
||||
<!-- 退款状态 -->
|
||||
<Card class="mb-4">
|
||||
<RefundStatusDescriptions :data="afterSale" />
|
||||
</Card>
|
||||
<!-- 商品信息 -->
|
||||
<Card class="mb-4" title="商品信息">
|
||||
<ProductGrid />
|
||||
</Card>
|
||||
<!-- 操作日志 -->
|
||||
<Card class="mb-4" title="售后日志">
|
||||
<div style="margin-left: 160px">
|
||||
<Timeline :items="renderTimeline()" />
|
||||
</div>
|
||||
</Card>
|
||||
</Page>
|
||||
</template>
|
||||
Reference in New Issue
Block a user