芋道源码
Gitee
450
apps/web-ele/src/views/mall/trade/afterSale/modules/detail.vue
Normal file
450
apps/web-ele/src/views/mall/trade/afterSale/modules/detail.vue
Normal file
@@ -0,0 +1,450 @@
|
||||
<script lang="ts" setup>
|
||||
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 { Page } from '@vben/common-ui';
|
||||
import { $t } from '@vben/locales';
|
||||
import { fenToYuan, formatDate } from '@vben/utils';
|
||||
|
||||
import {
|
||||
ElDescriptions,
|
||||
ElDescriptionsItem,
|
||||
ElImage,
|
||||
ElMessage,
|
||||
ElMessageBox,
|
||||
ElTimeline,
|
||||
ElTimelineItem,
|
||||
} from 'element-plus';
|
||||
|
||||
import * as AfterSaleApi from '#/api/mall/trade/afterSale/index';
|
||||
import ContentWrap from '#/components/content-wrap/content-wrap.vue';
|
||||
import { DictTag } from '#/components/dict-tag';
|
||||
import { DICT_TYPE, getDictLabel, getDictObj } from '#/utils/dict';
|
||||
|
||||
import UpdateAuditReasonForm from './disagree-form.vue';
|
||||
|
||||
defineOptions({ name: 'TradeAfterSaleDetail' });
|
||||
|
||||
const { params } = useRoute(); // 查询参数
|
||||
const { push } = useRouter(); // 路由
|
||||
const formData = ref<MallAfterSaleApi.AfterSale>({
|
||||
order: {} as MallOrderApi.Order,
|
||||
logs: [] as MallOrderApi.OrderLog[],
|
||||
orderItem: {} as MallOrderApi.OrderItem,
|
||||
});
|
||||
const updateAuditReasonFormRef = ref(); // 拒绝售后表单 Ref
|
||||
|
||||
/** 获得 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 getDetail = async () => {
|
||||
const id = params.id as unknown as number;
|
||||
if (id) {
|
||||
const res = await AfterSaleApi.getAfterSale(id);
|
||||
// 没有表单信息则关闭页面返回
|
||||
if (res === null) {
|
||||
ElMessage.error('售后订单不存在');
|
||||
close();
|
||||
}
|
||||
formData.value = res;
|
||||
}
|
||||
};
|
||||
|
||||
/** 同意售后 */
|
||||
const agree = async () => {
|
||||
// 二次确认
|
||||
await ElMessageBox.confirm('是否同意售后？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
});
|
||||
await AfterSaleApi.agree(formData.value.id!);
|
||||
// 提示成功
|
||||
ElMessage.success($t('page.common.success'));
|
||||
await getDetail();
|
||||
};
|
||||
|
||||
/** 拒绝售后 */
|
||||
const disagree = async () => {
|
||||
updateAuditReasonFormRef.value?.open(formData.value);
|
||||
};
|
||||
|
||||
/** 确认收货 */
|
||||
const receive = async () => {
|
||||
// 二次确认
|
||||
await ElMessageBox.confirm('是否确认收货？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
});
|
||||
await AfterSaleApi.receive(formData.value.id!);
|
||||
// 提示成功
|
||||
ElMessage.success($t('page.common.success'));
|
||||
await getDetail();
|
||||
};
|
||||
|
||||
/** 拒绝收货 */
|
||||
const refuse = async () => {
|
||||
// 二次确认
|
||||
await ElMessageBox.confirm('是否拒绝收货？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
});
|
||||
await AfterSaleApi.refuse(formData.value.id!);
|
||||
// 提示成功
|
||||
ElMessage.success($t('page.common.success'));
|
||||
await getDetail();
|
||||
};
|
||||
|
||||
/** 确认退款 */
|
||||
const refund = async () => {
|
||||
// 二次确认
|
||||
await ElMessageBox.confirm('是否确认退款？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
});
|
||||
await AfterSaleApi.refund(formData.value.id!);
|
||||
// 提示成功
|
||||
ElMessage.success($t('page.common.success'));
|
||||
await getDetail();
|
||||
};
|
||||
|
||||
/** 关闭 tag */
|
||||
const close = () => {
|
||||
push({ name: 'TradeAfterSale' });
|
||||
};
|
||||
onMounted(async () => {
|
||||
await getDetail();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<ContentWrap>
|
||||
<!-- 订单信息 -->
|
||||
<ElDescriptions title="订单信息">
|
||||
<ElDescriptionsItem label="订单号: ">
|
||||
{{ formData.orderNo }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="配送方式: ">
|
||||
<DictTag
|
||||
:type="DICT_TYPE.TRADE_DELIVERY_TYPE"
|
||||
:value="formData.order?.deliveryType"
|
||||
/>
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="订单类型: ">
|
||||
<DictTag
|
||||
:type="DICT_TYPE.TRADE_ORDER_TYPE"
|
||||
:value="formData.order?.type"
|
||||
/>
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="收货人: ">
|
||||
{{ formData.order?.receiverName }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="买家留言: ">
|
||||
{{ formData.order?.userRemark }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="订单来源: ">
|
||||
<DictTag
|
||||
:type="DICT_TYPE.TERMINAL"
|
||||
:value="formData.order?.terminal"
|
||||
/>
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="联系电话: ">
|
||||
{{ formData.order?.receiverMobile }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="商家备注: ">
|
||||
{{ formData.order?.remark }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="支付单号: ">
|
||||
{{ formData.order?.payOrderId }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="付款方式: ">
|
||||
<DictTag
|
||||
:type="DICT_TYPE.PAY_CHANNEL_CODE"
|
||||
:value="formData.order?.payChannelCode"
|
||||
/>
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="买家: ">
|
||||
{{ formData?.user?.nickname }}
|
||||
</ElDescriptionsItem>
|
||||
</ElDescriptions>
|
||||
|
||||
<!-- 售后信息 -->
|
||||
<ElDescriptions title="售后信息">
|
||||
<ElDescriptionsItem label="退款编号: ">
|
||||
{{ formData.no }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="申请时间: ">
|
||||
{{ formatDate(formData.auditTime) }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="售后类型: ">
|
||||
<DictTag
|
||||
:type="DICT_TYPE.TRADE_AFTER_SALE_TYPE"
|
||||
:value="formData.type"
|
||||
/>
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="售后方式: ">
|
||||
<DictTag
|
||||
:type="DICT_TYPE.TRADE_AFTER_SALE_WAY"
|
||||
:value="formData.way"
|
||||
/>
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="退款金额: ">
|
||||
{{ fenToYuan(formData.refundPrice ?? 0) }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="退款原因: ">
|
||||
{{ formData.applyReason }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="补充描述: ">
|
||||
{{ formData.applyDescription }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="凭证图片: ">
|
||||
<ElImage
|
||||
v-for="(item, index) in formData.applyPicUrls"
|
||||
:key="index"
|
||||
:src="item"
|
||||
style="width: 60px; height: 60px; margin-right: 10px"
|
||||
:preview-src-list="formData.applyPicUrls ?? []"
|
||||
/>
|
||||
</ElDescriptionsItem>
|
||||
</ElDescriptions>
|
||||
|
||||
<!-- 退款状态 -->
|
||||
<ElDescriptions :column="1" title="退款状态">
|
||||
<ElDescriptionsItem label="退款状态: ">
|
||||
<DictTag
|
||||
:type="DICT_TYPE.TRADE_AFTER_SALE_STATUS"
|
||||
:value="formData.status"
|
||||
/>
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label-class-name="no-colon">
|
||||
<el-button
|
||||
v-if="formData.status === 10"
|
||||
type="primary"
|
||||
@click="agree"
|
||||
>
|
||||
同意售后
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="formData.status === 10"
|
||||
type="primary"
|
||||
@click="disagree"
|
||||
>
|
||||
拒绝售后
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="formData.status === 30"
|
||||
type="primary"
|
||||
@click="receive"
|
||||
>
|
||||
确认收货
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="formData.status === 30"
|
||||
type="primary"
|
||||
@click="refuse"
|
||||
>
|
||||
拒绝收货
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="formData.status === 40"
|
||||
type="primary"
|
||||
@click="refund"
|
||||
>
|
||||
确认退款
|
||||
</el-button>
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem>
|
||||
<template #label><span style="color: red">提醒: </span></template>
|
||||
如果未发货，请点击同意退款给买家。<br />
|
||||
如果实际已发货，请主动与买家联系。<br />
|
||||
如果订单整体退款后，优惠券和余额会退还给买家.
|
||||
</ElDescriptionsItem>
|
||||
</ElDescriptions>
|
||||
|
||||
<!-- 商品信息 -->
|
||||
<ElDescriptions title="商品信息">
|
||||
<ElDescriptionsItem label-class-name="no-colon">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="15">
|
||||
<el-table
|
||||
v-if="formData.orderItem"
|
||||
:data="[formData.orderItem]"
|
||||
border
|
||||
>
|
||||
<el-table-column label="商品" prop="spuName" width="auto">
|
||||
<template #default="{ row }">
|
||||
{{ row.spuName }}
|
||||
<el-tag
|
||||
v-for="property in row.properties"
|
||||
:key="property.propertyId"
|
||||
class="mr-10px"
|
||||
>
|
||||
{{ property.propertyName }}: {{ property.valueName }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品原价" prop="price" width="150">
|
||||
<template #default="{ row }">
|
||||
{{ fenToYuan(row.price) }} 元
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="数量" prop="count" width="100" />
|
||||
<el-table-column label="合计" prop="payPrice" width="150">
|
||||
<template #default="{ row }">
|
||||
{{ fenToYuan(row.payPrice) }} 元
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
<el-col :span="10" />
|
||||
</el-row>
|
||||
</ElDescriptionsItem>
|
||||
</ElDescriptions>
|
||||
|
||||
<!-- 操作日志 -->
|
||||
<ElDescriptions title="售后日志">
|
||||
<ElDescriptionsItem label-class-name="no-colon">
|
||||
<ElTimeline>
|
||||
<ElTimelineItem
|
||||
v-for="saleLog in formData.logs"
|
||||
:key="saleLog.id"
|
||||
:timestamp="formatDate(saleLog.createTime)?.toString()"
|
||||
placement="top"
|
||||
>
|
||||
<div class="el-timeline-right-content">
|
||||
<span>{{ saleLog.content }}</span>
|
||||
</div>
|
||||
<template #dot>
|
||||
<span
|
||||
:style="{
|
||||
backgroundColor: getUserTypeColor(saleLog.userType ?? 0),
|
||||
}"
|
||||
class="dot-node-style"
|
||||
>
|
||||
{{
|
||||
getDictLabel(DICT_TYPE.USER_TYPE, saleLog.userType)[0] ||
|
||||
'系'
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</ElTimelineItem>
|
||||
</ElTimeline>
|
||||
</ElDescriptionsItem>
|
||||
</ElDescriptions>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 各种操作的弹窗 -->
|
||||
<UpdateAuditReasonForm
|
||||
ref="updateAuditReasonFormRef"
|
||||
@success="getDetail"
|
||||
/>
|
||||
</Page>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-descriptions) {
|
||||
&:not(:nth-child(1)) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.el-descriptions__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
display: inline-block;
|
||||
width: 3px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
content: '';
|
||||
background-color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
.el-descriptions-item__container {
|
||||
margin: 0 10px;
|
||||
|
||||
.no-colon {
|
||||
margin: 0;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 时间线样式调整
|
||||
:deep(.el-timeline) {
|
||||
margin: 10px 0 0 160px;
|
||||
|
||||
.el-timeline-item__wrapper {
|
||||
position: relative;
|
||||
top: -20px;
|
||||
|
||||
.el-timeline-item__timestamp {
|
||||
position: absolute !important;
|
||||
top: 10px;
|
||||
left: -150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 单独定义气泡样式，不使用嵌套 */
|
||||
:deep(.el-timeline-right-content) {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 30px;
|
||||
padding: 10px;
|
||||
margin-left: 10px;
|
||||
background-color: #f5f7fa; /* 使用明确的颜色替代变量 */
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
:deep(.el-timeline-right-content)::before {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: -16px;
|
||||
content: '';
|
||||
border-color: transparent #f5f7fa transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: 8px;
|
||||
}
|
||||
|
||||
.dot-node-style {
|
||||
position: absolute;
|
||||
left: -5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-size: 10px;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,129 @@
|
||||
<script lang="ts" setup>
|
||||
import type { MallOrderApi } from '#/api/mall/trade/order';
|
||||
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import { getSimpleDeliveryExpressList } from '#/api/mall/trade/delivery/express';
|
||||
import { deliveryOrder } from '#/api/mall/trade/order';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
const emit = defineEmits(['success']);
|
||||
|
||||
const formData = ref<MallOrderApi.DeliveryRequest>();
|
||||
|
||||
const [Form, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
formItemClass: 'col-span-2',
|
||||
labelWidth: 120,
|
||||
},
|
||||
layout: 'horizontal',
|
||||
schema: [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'id',
|
||||
dependencies: {
|
||||
triggerFields: [''],
|
||||
show: () => false,
|
||||
},
|
||||
},
|
||||
// TODO @xingyu：发货默认选中第一个？
|
||||
{
|
||||
fieldName: 'expressType',
|
||||
label: '发货方式',
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '快递', value: 'express' },
|
||||
{ label: '无需发货', value: 'none' },
|
||||
],
|
||||
buttonStyle: 'solid',
|
||||
optionType: 'button',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'logisticsId',
|
||||
label: '物流公司',
|
||||
component: 'ApiSelect',
|
||||
componentProps: {
|
||||
api: getSimpleDeliveryExpressList,
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
},
|
||||
dependencies: {
|
||||
triggerFields: ['expressType'],
|
||||
show: (values) => values.expressType === 'express',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'logisticsNo',
|
||||
label: '物流单号',
|
||||
component: 'Input',
|
||||
dependencies: {
|
||||
triggerFields: ['expressType'],
|
||||
show: (values) => values.expressType === 'express',
|
||||
},
|
||||
},
|
||||
],
|
||||
showDefaultActions: false,
|
||||
});
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
async onConfirm() {
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
modalApi.lock();
|
||||
// 提交表单
|
||||
const data = (await formApi.getValues()) as MallOrderApi.DeliveryRequest;
|
||||
if (data.expressType === 'none') {
|
||||
// 无需发货的情况
|
||||
data.logisticsId = 0;
|
||||
data.logisticsNo = '';
|
||||
}
|
||||
try {
|
||||
await deliveryOrder(data);
|
||||
// 关闭并提示
|
||||
await modalApi.close();
|
||||
emit('success');
|
||||
ElMessage.success($t('ui.actionMessage.operationSuccess'));
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
}
|
||||
},
|
||||
async onOpenChange(isOpen: boolean) {
|
||||
if (!isOpen) {
|
||||
formData.value = undefined;
|
||||
return;
|
||||
}
|
||||
// 加载数据
|
||||
const data = modalApi.getData<MallOrderApi.Order>();
|
||||
if (!data) {
|
||||
return;
|
||||
}
|
||||
modalApi.lock();
|
||||
try {
|
||||
if (data.logisticsId === 0) {
|
||||
await formApi.setValues({ expressType: 'none' });
|
||||
}
|
||||
// 设置到 values
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal class="w-1/3" title="发货">
|
||||
<Form class="mx-4" />
|
||||
</Modal>
|
||||
</template>
|
||||
Reference in New Issue
Block a user