509 lines
15 KiB
Vue
509 lines
15 KiB
Vue
<template>
|
||
<!-- 订单信息 -->
|
||
<el-card class="box-card">
|
||
|
||
<template v-if="detail.orderRefundStatus == 1">
|
||
<!-- 售后单操作 -->
|
||
<div class="order-operation">
|
||
<div class="card-title">售后单操作</div>
|
||
|
||
<div class="btn-box" v-if="detail.merchantAuditStatus == 1">
|
||
<!-- 审核售后订单 -->
|
||
<div style="width: 100%;">
|
||
<el-alert title="当前买家已发起售后申请，请及时审核处理。" type="warning" show-icon :closable=false />
|
||
<div>
|
||
<el-button type="primary" @click="handleAuditOrderRefund(detail)">商家审核</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="btn-box" v-if="detail.isCustomerSend == 2">
|
||
<!-- 确认收货 -->
|
||
<div style="width: 100%;">
|
||
<el-alert title="当前买家已发货，请确认包裹后点击收货，确认收货后将退款给买家。" type="warning" show-icon :closable=false />
|
||
<div>
|
||
<el-button type="primary" @click="handleConfirmsReceipt(detail)">确认收货</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<el-divider />
|
||
</template>
|
||
|
||
<div class="order-info">
|
||
<div class="card-title">售后单信息</div>
|
||
<el-row class="order-info-box">
|
||
<el-col :span="8">订单号： {{ detail.orderNumber }}</el-col>
|
||
<el-col :span="8">买家信息： {{ detail.customerPhone }}</el-col>
|
||
<el-col :span="8">退款金额：￥{{ detail.refundMoney }}</el-col>
|
||
</el-row>
|
||
<el-row class="order-info-box">
|
||
<el-col :span="8">售后类型： <dict-tag :options="refund_type" :value="detail.refundType" /></el-col>
|
||
<el-col :span="8">售后单状态： <dict-tag :options="order_refund_status"
|
||
:value="detail.orderRefundStatus" /></el-col>
|
||
<el-col :span="8">申请时间： {{ detail.createTime }}</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
<el-divider />
|
||
|
||
<div class="order-info">
|
||
<div class="card-title">处理进度</div>
|
||
<el-row class="order-info-box">
|
||
<el-col :span="8">审核状态(商家)： <dict-tag :options="merchant_audit_status"
|
||
:value="detail.merchantAuditStatus" /></el-col>
|
||
<el-col :span="8">发货状态(买家)： <dict-tag :options="is_customer_send" :value="detail.isCustomerSend" /></el-col>
|
||
<el-col :span="8">收货状态(商家)： <dict-tag :options="is_merchant_receive"
|
||
:value="detail.isMerchantReceive" /></el-col>
|
||
</el-row>
|
||
<el-row class="order-info-box">
|
||
<el-col :span="8" v-if="detail.merchantRefuseDesc">商家拒绝说明：{{ detail.merchantRefuseDesc }}</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
</el-card>
|
||
|
||
|
||
<el-card class="box-card">
|
||
|
||
<div class="order-info">
|
||
<div class="card-title">买家申请原因</div>
|
||
<el-row class="order-info-box">
|
||
<el-col :span="12" style="margin-bottom: 25px;">退货原因：<dict-tag :options="refund_reason"
|
||
:value="detail.refundReason" /></el-col>
|
||
<el-col :span="12" style="margin-bottom: 25px;">退款说明：{{ detail.customerRefundDesc }}</el-col>
|
||
<el-col :span="24">退款凭证：
|
||
<el-image preview-teleported :hide-on-click-modal="true" lazy class="table-td-thumb" fit="contain"
|
||
:src="detail.customerRefundImg?.split(',')[0]"
|
||
:preview-src-list="detail.customerRefundImg?.split(',')">
|
||
<div><el-icon :size="15">
|
||
<document />
|
||
</el-icon></div>
|
||
</el-image>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
</el-card>
|
||
|
||
|
||
<!-- 商品信息 -->
|
||
<el-card class="box-card">
|
||
|
||
<div class="card-title">订单商品</div>
|
||
|
||
<el-table v-loading="loading" :data="detail.goodsInfoList" ref="tableRef" highlight-current-row>
|
||
<el-table-column prop="goodsInfo" label="商品信息" width="700">
|
||
<template #default="scope">
|
||
<div class="goods-info-box">
|
||
<el-image preview-teleported :hide-on-click-modal="true" lazy class="table-td-thumb" fit="contain"
|
||
:src="scope.row.goodsPicture?.split(',')[0]"
|
||
:preview-src-list="scope.row.goodsPicture?.split(',')">
|
||
<div><el-icon :size="15">
|
||
<document />
|
||
</el-icon></div>
|
||
</el-image>
|
||
|
||
<div style="margin-left: 20px;">
|
||
<div class="goods-info-text ">
|
||
{{ scope.row.goodsName }}
|
||
</div>
|
||
<div>
|
||
<el-tag type="info" v-if="scope.row.goodsSpecName">{{ scope.row.goodsSpecName }}</el-tag>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="goodsCoding" label="编码" align="center">
|
||
<template #default="scope">
|
||
<div v-if="scope.row.goodsCoding">{{ scope.row.goodsCoding }}</div>
|
||
<div v-else> - - </div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="goodsWeight" label="重量(Kg)" align="center" />
|
||
<el-table-column prop="goodsPrice" label="单价" align="center">
|
||
<template #default="scope">
|
||
<div>￥ {{ scope.row.goodsPrice }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="goodsTotalNum" label="购买数量" align="center">
|
||
<template #default="scope">
|
||
<div>× {{ scope.row.goodsTotalNum }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="goodsTotalPrice" label="商品总价" align="center">
|
||
<template #default="scope">
|
||
<div>￥ {{ scope.row.goodsTotalPrice }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
</el-table>
|
||
|
||
</el-card>
|
||
|
||
|
||
<!-- 收货信息 / 发货信息 -->
|
||
<el-card class="box-card" v-if="detail.shopRefundAddressGuid">
|
||
|
||
<div class="card-title">商家收货信息</div>
|
||
<el-row class="order-info-box">
|
||
<el-col :span="8">收货人姓名： {{ detail.orderReceive?.consigneeName }}</el-col>
|
||
<el-col :span="8">联系电话： {{ detail.orderReceive?.phone }}</el-col>
|
||
<el-col :span="8">收货地区： {{ detail.orderReceive?.region }}</el-col>
|
||
</el-row>
|
||
<el-row class="order-info-box">
|
||
<el-col :span="8">详细地址： {{ detail.orderReceive?.detail }}</el-col>
|
||
<el-col :span="8">收货状态： <dict-tag :options="is_merchant_receive" :value="detail.isMerchantReceive" /></el-col>
|
||
<el-col :span="8">收货时间： {{ detail.merchantReceiveTime }}</el-col>
|
||
</el-row>
|
||
|
||
<div v-if="detail.isCustomerSend == 2">
|
||
<el-divider />
|
||
<div class="card-title">买家发货信息</div>
|
||
<el-row class="order-info-box">
|
||
<el-col :span="8">物流公司： {{ detail.logisticsCompany }}</el-col>
|
||
<el-col :span="8">物流单号： {{ detail.expressNo }}</el-col>
|
||
<el-col :span="8">发货状态： <dict-tag :options="is_customer_send" :value="detail.isCustomerSend" /></el-col>
|
||
</el-row>
|
||
<el-row class="order-info-box">
|
||
<el-col :span="8">发货时间： {{ detail.customerSendTime }}</el-col>
|
||
<el-col :span="8">备注： {{ detail.customerWaybillRemark }}</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
</el-card>
|
||
|
||
<!-- 审核售后订单 -->
|
||
<AuditOrderRefundDialog v-model="AuditOrderRefundDialogVisible" :data="AuditOrderRefundDialogRow"
|
||
:done="() => getDetail()">
|
||
</AuditOrderRefundDialog>
|
||
</template>
|
||
|
||
<script setup>
|
||
import modal from '@/plugins/modal.js'
|
||
import { ElMessageBox } from 'element-plus'
|
||
import { getOrderRefundDetails, confirmsReceipt } from '@/api/business/OrderManage/OrderRefunds/orderRefund.js'
|
||
import AuditOrderRefundDialog from "./components/AuditOrderRefundDialog.vue";
|
||
|
||
|
||
const route = useRoute()
|
||
const { proxy } = getCurrentInstance()
|
||
|
||
const parm = reactive({
|
||
orderRefundId: route.query.orderRefundId
|
||
})
|
||
|
||
const AuditOrderRefundDialogVisible = ref(false);
|
||
const AuditOrderRefundDialogRow = ref({});
|
||
|
||
|
||
const loading = ref(true)
|
||
const detail = ref({})
|
||
|
||
// 获取详情
|
||
function getDetail() {
|
||
loading.value = true
|
||
getOrderRefundDetails(parm).then((res) => {
|
||
if (res.code == 200) {
|
||
loading.value = false;
|
||
detail.value = res.data;
|
||
}
|
||
console.log(detail.value, '详情');
|
||
});
|
||
}
|
||
getDetail()
|
||
|
||
|
||
|
||
|
||
// 审核修改订单
|
||
function handleAuditOrderRefund(row) {
|
||
AuditOrderRefundDialogVisible.value = true
|
||
AuditOrderRefundDialogRow.value = row
|
||
}
|
||
|
||
|
||
/** 确认收货按钮操作 */
|
||
function handleConfirmsReceipt(row) {
|
||
const Ids = row.orderRefundGuid
|
||
|
||
ElMessageBox.confirm("是否确认确认收货？", "系统提示", {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: "warning",
|
||
})
|
||
.then(function () {
|
||
return confirmsReceipt({ orderRefundGuid: Ids })
|
||
})
|
||
.then(() => {
|
||
getDetail()
|
||
modal.msgSuccess("确认收货成功")
|
||
})
|
||
.catch(() => { })
|
||
}
|
||
|
||
|
||
// 字典获取
|
||
const refund_type = ref([]);
|
||
async function getrefund_type() {
|
||
await proxy.getDicts('refund_type').then((res) => {
|
||
refund_type.value = res.data
|
||
})
|
||
}
|
||
getrefund_type()
|
||
// 字典获取
|
||
const refund_reason = ref([]);
|
||
async function getrefund_reason() {
|
||
await proxy.getDicts('refund_reason').then((res) => {
|
||
refund_reason.value = res.data
|
||
})
|
||
}
|
||
getrefund_reason()
|
||
// 字典获取
|
||
const goods_receive_status = ref([]);
|
||
async function getgoods_receive_status() {
|
||
await proxy.getDicts('goods_receive_status').then((res) => {
|
||
goods_receive_status.value = res.data
|
||
})
|
||
}
|
||
getgoods_receive_status()
|
||
// 字典获取
|
||
const merchant_audit_status = ref([]);
|
||
async function getmerchant_audit_status() {
|
||
await proxy.getDicts('merchant_audit_status').then((res) => {
|
||
merchant_audit_status.value = res.data
|
||
})
|
||
}
|
||
getmerchant_audit_status()
|
||
// 字典获取
|
||
const is_customer_send = ref([]);
|
||
async function getis_customer_send() {
|
||
await proxy.getDicts('is_customer_send').then((res) => {
|
||
is_customer_send.value = res.data
|
||
})
|
||
}
|
||
getis_customer_send()
|
||
// 字典获取
|
||
const order_refund_status = ref([]);
|
||
async function getorder_refund_status() {
|
||
await proxy.getDicts('order_refund_status').then((res) => {
|
||
order_refund_status.value = res.data
|
||
})
|
||
}
|
||
getorder_refund_status()
|
||
// 字典获取
|
||
const is_merchant_receive = ref([]);
|
||
async function getis_merchant_receive() {
|
||
await proxy.getDicts('is_merchant_receive').then((res) => {
|
||
is_merchant_receive.value = res.data
|
||
})
|
||
}
|
||
getis_merchant_receive()
|
||
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.box-card {
|
||
position: relative;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.card-title {
|
||
// font-size: 18px;
|
||
margin-bottom: 30px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.btn-box {
|
||
display: flex;
|
||
}
|
||
|
||
// 分割线
|
||
.o-divider {
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
// 步骤条
|
||
.order-progress {
|
||
height: 26px;
|
||
line-height: 26px;
|
||
background: #f8f8f8;
|
||
border-radius: 13px;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
position: relative;
|
||
|
||
li {
|
||
list-style: none;
|
||
}
|
||
|
||
&:before,
|
||
&:after {
|
||
content: '';
|
||
position: absolute;
|
||
z-index: 2;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
border-radius: 13px;
|
||
background: #1890ff;
|
||
}
|
||
|
||
&:after {
|
||
background: #91d5ff;
|
||
z-index: 1;
|
||
}
|
||
|
||
&.progress-1 {
|
||
&:before {
|
||
width: 0;
|
||
}
|
||
|
||
&:after {
|
||
width: 20%;
|
||
}
|
||
}
|
||
|
||
&.progress-2 {
|
||
&:before {
|
||
width: 20%;
|
||
}
|
||
|
||
&:after {
|
||
width: 40%;
|
||
}
|
||
}
|
||
|
||
&.progress-3 {
|
||
&:before {
|
||
width: 40%;
|
||
}
|
||
|
||
&:after {
|
||
width: 60%;
|
||
}
|
||
}
|
||
|
||
&.progress-4 {
|
||
&:before {
|
||
width: 60%;
|
||
}
|
||
|
||
&:after {
|
||
width: 80%;
|
||
}
|
||
}
|
||
|
||
&.progress-5 {
|
||
&:before {
|
||
width: 100%;
|
||
}
|
||
|
||
&:after {
|
||
width: 100%;
|
||
}
|
||
|
||
li {
|
||
&:nth-child(5) {
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
li {
|
||
width: 20%;
|
||
float: left;
|
||
border-radius: 13px;
|
||
position: relative;
|
||
z-index: 3;
|
||
}
|
||
|
||
.tip {
|
||
font-size: 12px;
|
||
padding-top: 10px;
|
||
color: #8c8c8c;
|
||
}
|
||
|
||
&.progress-1 li:nth-child(1),
|
||
&.progress-2 li:nth-child(1),
|
||
&.progress-3 li:nth-child(1),
|
||
&.progress-4 li:nth-child(1),
|
||
&.progress-5 li:nth-child(1) {
|
||
color: #fff;
|
||
}
|
||
|
||
&.progress-2 li:nth-child(2),
|
||
&.progress-3 li:nth-child(2),
|
||
&.progress-4 li:nth-child(2),
|
||
&.progress-5 li:nth-child(2) {
|
||
color: #fff;
|
||
}
|
||
|
||
&.progress-3 li:nth-child(3),
|
||
&.progress-4 li:nth-child(3),
|
||
&.progress-5 li:nth-child(3) {
|
||
color: #fff;
|
||
}
|
||
|
||
&.progress-4 li:nth-child(4),
|
||
&.progress-5 li:nth-child(4) {
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
|
||
// 信息盒子
|
||
.order-info {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.order-info-box {
|
||
font-size: 15px;
|
||
margin-top: 25px;
|
||
}
|
||
|
||
.order-info-box div {}
|
||
|
||
|
||
// 订单商品
|
||
.order-summary-box {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
flex-direction: column;
|
||
margin: 20px 0;
|
||
|
||
div {
|
||
font-size: 15px;
|
||
margin-bottom: 5px;
|
||
}
|
||
}
|
||
|
||
|
||
.goods-info-box {
|
||
display: flex;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.goods-info-text {
|
||
width: 350px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.m2 {
|
||
text-overflow: -o-ellipsis-lastline;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
.el-alert {
|
||
display: flex;
|
||
// margin: 20px 0 0;
|
||
margin-bottom: 15px;
|
||
}
|
||
</style> |