feat：【mall 商城】售后退款（100% ele）
This commit is contained in:
YunaiV
224
apps/web-ele/src/views/mall/trade/afterSale/detail/data.ts
Normal file
224
apps/web-ele/src/views/mall/trade/afterSale/detail/data.ts
Normal file
@@ -0,0 +1,224 @@
|
||||
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 { ElImage } from 'element-plus';
|
||||
|
||||
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(ElImage, {
|
||||
key: index,
|
||||
src: url,
|
||||
width: 60,
|
||||
height: 60,
|
||||
}),
|
||||
),
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 退款状态 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', '如果订单整体退款后，优惠券和余额会退还给买家.'),
|
||||
]),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 商品信息 columns */
|
||||
export function useProductColumns() {
|
||||
return [
|
||||
{
|
||||
field: 'spuName',
|
||||
title: '商品信息',
|
||||
minWidth: 300,
|
||||
slots: { default: 'spuName' },
|
||||
},
|
||||
{
|
||||
field: 'price',
|
||||
title: '商品原价',
|
||||
minWidth: 150,
|
||||
formatter: 'formatFenToYuanAmount',
|
||||
},
|
||||
{
|
||||
field: 'count',
|
||||
title: '数量',
|
||||
minWidth: 100,
|
||||
},
|
||||
{
|
||||
field: 'payPrice',
|
||||
title: '合计',
|
||||
minWidth: 150,
|
||||
formatter: 'formatFenToYuanAmount',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 操作日志 columns */
|
||||
export function useOperateLogSchema() {
|
||||
return [
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '操作时间',
|
||||
width: 180,
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
{
|
||||
field: 'userType',
|
||||
title: '操作人',
|
||||
width: 100,
|
||||
slots: { default: 'userType' },
|
||||
},
|
||||
{
|
||||
field: 'content',
|
||||
title: '操作内容',
|
||||
},
|
||||
];
|
||||
}
|
||||
316
apps/web-ele/src/views/mall/trade/afterSale/detail/index.vue
Normal file
316
apps/web-ele/src/views/mall/trade/afterSale/detail/index.vue
Normal file
@@ -0,0 +1,316 @@
|
||||
<script setup lang="ts">
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { MallAfterSaleApi } from '#/api/mall/trade/afterSale';
|
||||
import type { MallOrderApi } from '#/api/mall/trade/order';
|
||||
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
import { confirm, Page, useVbenModal } from '@vben/common-ui';
|
||||
import { DICT_TYPE } from '@vben/constants';
|
||||
import { useTabs } from '@vben/hooks';
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
import { ElCard, ElLoading, ElMessage, ElTag } from 'element-plus';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import {
|
||||
agreeAfterSale,
|
||||
getAfterSale,
|
||||
receiveAfterSale,
|
||||
refundAfterSale,
|
||||
refuseAfterSale,
|
||||
} from '#/api/mall/trade/afterSale';
|
||||
import { useDescription } from '#/components/description';
|
||||
import { DictTag } from '#/components/dict-tag';
|
||||
import { TableAction } from '#/components/table-action';
|
||||
|
||||
import DisagreeForm from '../modules/disagree-form.vue';
|
||||
import {
|
||||
useAfterSaleInfoSchema,
|
||||
useOperateLogSchema,
|
||||
useOrderInfoSchema,
|
||||
useProductColumns,
|
||||
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: {},
|
||||
orderItem: {},
|
||||
logs: [],
|
||||
});
|
||||
|
||||
const [OrderDescriptions] = useDescription({
|
||||
componentProps: {
|
||||
title: '订单信息',
|
||||
border: false,
|
||||
column: 3,
|
||||
direction: 'horizontal',
|
||||
labelWidth: 140,
|
||||
extra: '',
|
||||
},
|
||||
schema: useOrderInfoSchema(),
|
||||
});
|
||||
|
||||
const [AfterSaleDescriptions] = useDescription({
|
||||
componentProps: {
|
||||
title: '售后信息',
|
||||
border: false,
|
||||
column: 3,
|
||||
direction: 'horizontal',
|
||||
labelWidth: 140,
|
||||
extra: '',
|
||||
},
|
||||
schema: useAfterSaleInfoSchema(),
|
||||
});
|
||||
|
||||
const [RefundStatusDescriptions] = useDescription({
|
||||
componentProps: {
|
||||
title: '退款状态',
|
||||
border: false,
|
||||
column: 1,
|
||||
direction: 'horizontal',
|
||||
labelWidth: 140,
|
||||
extra: '',
|
||||
},
|
||||
schema: useRefundStatusSchema(),
|
||||
});
|
||||
|
||||
const [ProductGrid, productGridApi] = useVbenVxeGrid({
|
||||
gridOptions: {
|
||||
cellConfig: {
|
||||
height: 60,
|
||||
},
|
||||
columns: useProductColumns(),
|
||||
data: [],
|
||||
height: 'auto',
|
||||
border: true,
|
||||
pagerConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: true,
|
||||
search: true,
|
||||
},
|
||||
} as VxeTableGridOptions<MallOrderApi.OrderItem>,
|
||||
});
|
||||
|
||||
const [OperateLogGrid, operateLogGridApi] = useVbenVxeGrid({
|
||||
gridOptions: {
|
||||
columns: useOperateLogSchema(),
|
||||
data: [],
|
||||
border: true,
|
||||
pagerConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: true,
|
||||
search: true,
|
||||
},
|
||||
} as VxeTableGridOptions,
|
||||
});
|
||||
|
||||
const [DisagreeModal, disagreeModalApi] = useVbenModal({
|
||||
connectedComponent: DisagreeForm,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
/** 获得详情 */
|
||||
async function getDetail() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await getAfterSale(afterSaleId.value);
|
||||
if (res === null) {
|
||||
ElMessage.error('售后订单不存在');
|
||||
handleBack();
|
||||
return;
|
||||
}
|
||||
afterSale.value = res;
|
||||
productGridApi.setGridOptions({ data: [afterSale.value.orderItem] });
|
||||
operateLogGridApi.setGridOptions({
|
||||
data: afterSale.value.logs || [],
|
||||
});
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/** 同意售后 */
|
||||
async function handleAgree() {
|
||||
await confirm('是否同意售后？');
|
||||
const loadingInstance = ElLoading.service({
|
||||
text: '正在处理中...',
|
||||
});
|
||||
try {
|
||||
await agreeAfterSale(afterSale.value.id!);
|
||||
ElMessage.success($t('ui.actionMessage.operationSuccess'));
|
||||
await getDetail();
|
||||
} finally {
|
||||
loadingInstance.close();
|
||||
}
|
||||
}
|
||||
|
||||
/** 拒绝售后 */
|
||||
function handleDisagree() {
|
||||
disagreeModalApi.setData({ afterSale: afterSale.value }).open();
|
||||
}
|
||||
|
||||
/** 确认收货 */
|
||||
async function handleReceive() {
|
||||
await confirm('是否确认收货？');
|
||||
const loadingInstance = ElLoading.service({
|
||||
text: '正在处理中...',
|
||||
});
|
||||
try {
|
||||
await receiveAfterSale(afterSale.value.id!);
|
||||
ElMessage.success($t('ui.actionMessage.operationSuccess'));
|
||||
await getDetail();
|
||||
} finally {
|
||||
loadingInstance.close();
|
||||
}
|
||||
}
|
||||
|
||||
/** 拒绝收货 */
|
||||
async function handleRefuse() {
|
||||
await confirm('是否拒绝收货？');
|
||||
const loadingInstance = ElLoading.service({
|
||||
text: '正在处理中...',
|
||||
});
|
||||
try {
|
||||
await refuseAfterSale(afterSale.value.id!);
|
||||
ElMessage.success($t('ui.actionMessage.operationSuccess'));
|
||||
await getDetail();
|
||||
} finally {
|
||||
loadingInstance.close();
|
||||
}
|
||||
}
|
||||
|
||||
/** 确认退款 */
|
||||
async function handleRefund() {
|
||||
await confirm('是否确认退款？');
|
||||
const loadingInstance = ElLoading.service({
|
||||
text: '正在处理中...',
|
||||
});
|
||||
try {
|
||||
await refundAfterSale(afterSale.value.id!);
|
||||
ElMessage.success($t('ui.actionMessage.operationSuccess'));
|
||||
await getDetail();
|
||||
} finally {
|
||||
loadingInstance.close();
|
||||
}
|
||||
}
|
||||
|
||||
/** 返回列表页 */
|
||||
function handleBack() {
|
||||
tabs.closeCurrentTab();
|
||||
router.push('/mall/trade/afterSale');
|
||||
}
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(() => {
|
||||
afterSaleId.value = Number(route.params.id);
|
||||
getDetail();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page auto-content-height :title="afterSale.no" :loading="loading">
|
||||
<template #extra>
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: '返回',
|
||||
type: 'default',
|
||||
icon: 'lucide:arrow-left',
|
||||
onClick: handleBack,
|
||||
},
|
||||
{
|
||||
label: '同意售后',
|
||||
type: 'primary',
|
||||
onClick: handleAgree,
|
||||
ifShow: afterSale.status === 10,
|
||||
},
|
||||
{
|
||||
label: '拒绝售后',
|
||||
type: 'danger',
|
||||
link: true,
|
||||
onClick: handleDisagree,
|
||||
ifShow: afterSale.status === 10,
|
||||
},
|
||||
{
|
||||
label: '确认收货',
|
||||
type: 'primary',
|
||||
onClick: handleReceive,
|
||||
ifShow: afterSale.status === 30,
|
||||
},
|
||||
{
|
||||
label: '拒绝收货',
|
||||
type: 'danger',
|
||||
link: true,
|
||||
onClick: handleRefuse,
|
||||
ifShow: afterSale.status === 30,
|
||||
},
|
||||
{
|
||||
label: '确认退款',
|
||||
type: 'primary',
|
||||
onClick: handleRefund,
|
||||
ifShow: afterSale.status === 40,
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- 拒绝售后弹窗 -->
|
||||
<DisagreeModal @success="getDetail" />
|
||||
|
||||
<!-- 订单信息 -->
|
||||
<ElCard class="mb-4">
|
||||
<OrderDescriptions :data="afterSale" />
|
||||
</ElCard>
|
||||
<!-- 售后信息 -->
|
||||
<ElCard class="mb-4">
|
||||
<AfterSaleDescriptions :data="afterSale" />
|
||||
</ElCard>
|
||||
<!-- 退款状态 -->
|
||||
<ElCard class="mb-4">
|
||||
<RefundStatusDescriptions :data="afterSale" />
|
||||
</ElCard>
|
||||
<!-- 商品信息 -->
|
||||
<div class="mb-4">
|
||||
<ProductGrid table-title="商品信息">
|
||||
<template #spuName="{ row }">
|
||||
<div class="flex flex-1 flex-col items-start gap-1 text-left">
|
||||
<span class="text-sm">{{ row.spuName }}</span>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<ElTag
|
||||
v-for="property in row.properties"
|
||||
:key="property.propertyId!"
|
||||
size="small"
|
||||
type="info"
|
||||
>
|
||||
{{ property.propertyName }}: {{ property.valueName }}
|
||||
</ElTag>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</ProductGrid>
|
||||
</div>
|
||||
<!-- 操作日志 -->
|
||||
<div>
|
||||
<OperateLogGrid table-title="售后日志">
|
||||
<template #userType="{ row }">
|
||||
<ElTag v-if="row.userId === 0" type="info">系统</ElTag>
|
||||
<DictTag v-else :type="DICT_TYPE.USER_TYPE" :value="row.userType" />
|
||||
</template>
|
||||
</OperateLogGrid>
|
||||
</div>
|
||||
</Page>
|
||||
</template>
|
||||
Reference in New Issue
Block a user