net/shop_template_back
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat 添加售后单列表页面，详情页面

Browse Source
This commit is contained in:
AERWEN\26795 2023-10-16 23:02:36 +08:00
parent e1b484d806
commit a704310ace
4 changed files with 854 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/api/business/OrderManage/OrderRefunds/orderrefund.js
View File

@ -18,6 +18,15 @@ export function orderRefundList(query) {
})
}
// 售后单记录详情查询列表
export function getOrderRefundDetails(query) {
return request({
url: '/business/OrderRefund/getOrderRefundDetails',
method: 'get',
params: query
})
}
// 售后单记录表新增或修改
export function addOrUpdateOrderRefund(data) {
return request({

135
src/views/business/OrderManage/OrderRefunds/components/CancelOrderDialog.vue Normal file
View File

@ -0,0 +1,135 @@
<!--
* @Descripttion: (订单/tb_order 审核取消订单弹窗)
* @version: (1.0)
* @Author: (lwh)
* @Date: (2023-09-04)
* @LastEditors: (lwh)
* @LastEditTime: (2023-09-04)
-->
<template>
<el-dialog v-model="props.modelValue" title="审核取消订单" width="600px" @closed="closeDialog" @open="openDialog">
<el-form ref="formRef" :model="formData" :rules="rules">
<el-row :gutter="20">
<el-col :lg="24">
<el-form-item :label-width="labelWidth" label="订单金额" prop="">
￥ {{ formData.orderAmount }}
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :lg="24">
<el-form-item :label-width="labelWidth" label="审核状态" prop="isAgree">
<div class="radio-box">
<el-radio-group style="display: flex;" v-model="formData.isAgree">
<el-radio :label=true>同意</el-radio>
<el-radio :label=false>拒绝</el-radio>
</el-radio-group>
<div class="input-intro">同意后将退回付款金额并关闭订单</div>
</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleEditClick(formRef)" :loading="loadingStatus">确认</el-button>
<el-button @click="handleResetClick(formRef)">重置</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import modal from '@/plugins/modal.js'
import { reactive, ref, watch } from "vue";
import { cancelOrder } from "@/api/business/OrderManage/Orders/order.js";
// 打开弹窗时回调
const openDialog = async () => {
}
const formData = ref({
...props.data,
});
watch(props, async (v) => {
formData.value = v.data;
});
// 业务参数
// -业务方法
// -基础参数
const props = defineProps({
modelValue: Boolean,
data: Object,
done: Function,
});
const loadingStatus = ref(false)
const labelWidth = 100;
const formRef = ref();
const { proxy } = getCurrentInstance()
const emits = defineEmits(["update:modelValue"]);
const imgData = ref({
fileDir: "Order"
})
// 验证
const rules = reactive({
isAgree: [{ required: true, message: "审核状态不能为空", trigger: "blur" }],
});
// -基础方法
// 提交
const handleEditClick = async (formEl) => {
if (!formEl) return;
formEl.validate(async (valid) => {
if (!valid) {
return;
}
loadingStatus.value = true
const { code,data } = await cancelOrder(formData.value);
if (code == 200) {
modal.msgSuccess(data)
props.done();
closeDialog();
loadingStatus.value = false
}
});
}
const handleResetClick = async (formEl) => {
if (!formEl) return;
formEl.resetFields();
}
const closeDialog = () => {
emits("update:modelValue", false);
};
</script>
<style>
.input-intro {
color: #8c8c8c;
font-size: 12px;
}
.radio-box {
display: flex;
flex-direction: column;
}
</style>

308
src/views/business/OrderManage/OrderRefunds/index.vue
View File

@ -1,5 +1,5 @@
<!--
* @Descripttion: (售后单记录表/tb_order_refund)
* @Descripttion: (订单/tb_order)
* @version: (1.0)
* @Author: (lwh)
* @Date: (2023-08-29)
@ -12,36 +12,29 @@
<!-- 搜索框 queryParams.需要搜索的字段 -->
<el-form :model="queryParams" label-position="left" style="margin:15px;" inline ref="queryForm" v-show="showSearch"
@submit.prevent>
<el-form-item label="售后类型(1退货退款 2退货(无需退款) 3换货)" prop="refundType">
<el-select v-model="queryParams.refundType" placeholder="请选择售后类型(1退货退款 2退货(无需退款) 3换货)" clearable @change="handleQuery">
<el-form-item label="订单号" prop="orderNumber">
<el-input v-model="queryParams.orderNumber" placeholder="请输入订单号" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="售后类型" prop="refundType">
<el-select v-model="queryParams.refundType" placeholder="请选择售后类型" clearable @change="handleQuery">
<el-option v-for="item in refund_type " :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
</el-select>
</el-form-item>
<el-form-item label="客户退货原因" prop="refundReason">
<el-select v-model="queryParams.refundReason" placeholder="请选择客户退货原因" clearable @change="handleQuery">
<el-option v-for="item in refund_reason " :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
</el-select>
</el-form-item>
<el-form-item label="商品收货状态(1未收到货 2已收到货)" prop="goodsReceiveStatus">
<el-select v-model="queryParams.goodsReceiveStatus" placeholder="请选择商品收货状态(1未收到货 2已收到货)" clearable @change="handleQuery">
<el-option v-for="item in goods_receive_status " :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
</el-select>
</el-form-item>
<el-form-item label="商家审核状态(1待审核 2已同意 3已拒绝)" prop="merchantAuditStatus">
<el-select v-model="queryParams.merchantAuditStatus" placeholder="请选择商家审核状态(1待审核 2已同意 3已拒绝)" clearable @change="handleQuery">
<el-form-item label="商家审核状态" prop="merchantAuditStatus">
<el-select v-model="queryParams.merchantAuditStatus" placeholder="请选择商家审核状态" clearable @change="handleQuery">
<el-option v-for="item in merchant_audit_status " :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
</el-select>
</el-form-item>
<el-form-item label="用户是否发货(1未发货 2已发货)" prop="isCustomerSend">
<el-select v-model="queryParams.isCustomerSend" placeholder="请选择用户是否发货(1未发货 2已发货)" clearable @change="handleQuery">
<el-option v-for="item in is_customer_send " :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
</el-select>
</el-form-item>
<el-form-item label="售后单状态(1进行中 2已拒绝 3已完成 4已取消)" prop="orderRefundStatus">
<el-select v-model="queryParams.orderRefundStatus" placeholder="请选择售后单状态(1进行中 2已拒绝 3已完成 4已取消)" clearable @change="handleQuery">
<el-form-item label="售后单状态" prop="orderRefundStatus">
<el-select v-model="queryParams.orderRefundStatus" placeholder="请选择售后单状态" clearable @change="handleQuery">
<el-option v-for="item in order_refund_status " :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
</el-select>
</el-form-item>
<el-form-item label="申请时间">
<el-date-picker v-model="dateRange" style="width: 240px" type="daterange" range-separator="-"
start-placeholder="开始日期" end-placeholder="结束日期" :default-time="defaultTime2" @change="handleQuery"></el-date-picker>
</el-form-item>
<el-form-item>
<el-button icon="search" type="primary" @click="handleQuery">{{ $t('btn.search') }}</el-button>
<el-button icon="refresh" @click="resetQuery">{{ $t('btn.reset') }}</el-button>
@ -51,18 +44,20 @@
<!-- 工具按钮 -->
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" v-hasPermi="['business:orderrefund:addOrUpdate']" plain icon="plus" @click="AddDialogVisible = true">
<!-- <el-col :span="1.5">
<el-button type="primary" v-hasPermi="['business:order:addOrUpdate']" plain icon="plus"
@click="AddDialogVisible = true">
{{ $t('btn.add') }}
</el-button>
</el-col>
</el-col> -->
<el-col :span="1.5">
<el-button type="danger" :disabled="multiple" v-hasPermi="['business:orderrefund:delete']" plain icon="delete" @click="handleDelete">
<el-button type="danger" :disabled="multiple" v-hasPermi="['business:order:delete']" plain icon="delete"
@click="handleDelete">
{{ $t('btn.delete') }}
</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="download" @click="handleExport" v-hasPermi="['business:orderrefund:export']">
<el-button type="warning" plain icon="download" @click="handleExport" v-hasPermi="['business:order:export']">
{{ $t('btn.export') }}
</el-button>
</el-col>
@ -70,59 +65,104 @@
</el-row>
<!-- 表格渲染 prop="对应的字段"-->
<el-table v-loading="loading" :data="dataList" ref="tableRef" border highlight-current-row @selection-change="handleSelectionChange">
<el-table v-loading="loading" :data="dataList" ref="tableRef" border highlight-current-row
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" />
<el-table-column prop="refundType" label="售后类型(1退货退款 2退货(无需退款) 3换货)" align="center">
<el-table-column prop="goodsInfo" label="商品信息 / 单价与数量" width="500">
<template #default="scope">
<dict-tag :options=" refund_type " :value="scope.row.refundType" />
</template>
</el-table-column>
<el-table-column prop="refundReason" label="客户退货原因" align="center">
<template #default="scope">
<dict-tag :options=" refund_reason " :value="scope.row.refundReason" />
</template>
</el-table-column>
<el-table-column prop="customerRefundDesc" label="客户退款说明" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="customerRefundImg" label="客户退款凭证" align="center">
<template #default="scope">
<el-image preview-teleported :hide-on-click-modal="true" lazy class="table-td-thumb" fit="contain" :src="scope.row.customerRefundImg?.split(',')[0]" :preview-src-list="scope.row.customerRefundImg?.split(',')">
<div><el-icon :size="15"><document /></el-icon></div>
<div class="order-num-box">
<div>订单号：<b>{{ scope.row.orderNumber }}</b></div>
<el-link class="copy" type="primary" @click="copyText(scope.row.orderNumber)">复制订单号</el-link>
</div>
<div class="goods-info-box" v-for="(item, idx) in scope.row.goodsInfoList" :key="idx">
<el-image preview-teleported :hide-on-click-modal="true" lazy class="table-td-thumb" fit="contain"
:src="item.goodsPicture?.split(',')[0]" :preview-src-list="item.goodsPicture?.split(',')">
<div><el-icon :size="15">
<document />
</el-icon></div>
</el-image>
</template>
</el-table-column>
<el-table-column prop="goodsReceiveStatus" label="商品收货状态(1未收到货 2已收到货)" align="center">
<template #default="scope">
<dict-tag :options=" goods_receive_status " :value="scope.row.goodsReceiveStatus" />
</template>
</el-table-column>
<el-table-column prop="merchantAuditStatus" label="商家审核状态(1待审核 2已同意 3已拒绝)" align="center">
<template #default="scope">
<dict-tag :options=" merchant_audit_status " :value="scope.row.merchantAuditStatus" />
</template>
</el-table-column>
<el-table-column prop="merchantRefuseDesc" label="商家拒绝原因(说明)" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="refundMoney" label="实际退款金额" align="center" />
<el-table-column prop="isCustomerSend" label="用户是否发货(1未发货 2已发货)" align="center">
<template #default="scope">
<dict-tag :options=" is_customer_send " :value="scope.row.isCustomerSend" />
</template>
</el-table-column>
<el-table-column prop="customerSendTime" label="客户发货时间" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="expressNo" label="客户发货物流单号" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="orderRefundStatus" label="售后单状态(1进行中 2已拒绝 3已完成 4已取消)" align="center">
<template #default="scope">
<dict-tag :options=" order_refund_status " :value="scope.row.orderRefundStatus" />
</template>
</el-table-column>
<el-table-column label="操作" width="350" fixed="right">
<div>
<div class="goods-info-text m2">
{{ item.goodsName }}
</div>
<div>
<el-tag type="info" v-if="item.goodsSpecName" >{{ item.goodsSpecName }}</el-tag>
</div>
</div>
<div class="price-box">
<div>￥ {{ item.goodsPrice }}</div>
<div>× {{ item.goodsTotalNum }}</div>
</div>
</div>
</template>
</el-table-column>
<!-- <el-table-column prop="goodsInfo" label="单价/数量" width="150">
<template #default="scope">
<el-button type="primary" size="small" icon="edit" @click="handleUpdate(scope.row)"
v-hasPermi="['business:orderrefund:addOrUpdate']">编辑</el-button>
<div>￥ {{ scope.row.goodsInfo.goodsPrice }}</div>
<div>× {{ scope.row.goodsTotalNum }}</div>
</template>
</el-table-column> -->
<el-table-column prop="payPrice" label="实付款" width="150">
<template #default="scope">
<div>￥ {{ scope.row.payPrice }}</div>
<div>(含运费：￥ {{ scope.row.expressPrice }})</div>
</template>
</el-table-column>
<el-table-column prop="goodsInfo" label="买家信息" width="200">
<template #default="scope">
<div class="goods-info-box">
<div class="avatar">
<el-avatar shape="circle" :size="50" :src="scope.row.customerAvatar" />
</div>
<div>
<div class="goods-info-text m2">
{{ scope.row.customerNickName }}
</div>
<div>
{{ scope.row.customerMobilePhoneNumber }}
</div>
</div>
</div>
</template>
</el-table-column>
<el-table-column prop="refundType" label="售后类型" width="150">
<template #default="scope">
<dict-tag :options="refund_type" :value="scope.row.refundType" />
</template>
</el-table-column>
<el-table-column prop="orderRefundStatus" label="售后单状态" width="150">
<template #default="scope">
<dict-tag :options="order_refund_status" :value="scope.row.orderRefundStatus" />
</template>
</el-table-column>
<el-table-column prop="deliveryStatus" label="处理进度" width="200">
<template #default="scope">
<div class="status-box">商家审核: &nbsp;<dict-tag :options="merchant_audit_status" :value="scope.row.merchantAuditStatus" /></div>
<div class="status-box">用户发货: &nbsp;<dict-tag :options="is_customer_send" :value="scope.row.isCustomerSend" />
</div>
<div class="status-box">商家收货: &nbsp;<dict-tag :options="is_merchant_receive" :value="scope.row.isMerchantReceive" />
</div>
</template>
</el-table-column>
<el-table-column prop="createTime" label="申请时间" :show-overflow-tooltip="true" width="200" />
<el-table-column label="操作" width="250" fixed="right">
<template #default="scope">
<!-- <el-button type="primary" size="small" icon="edit" @click="handleUpdate(scope.row)"
v-hasPermi="['business:order:addOrUpdate']">编辑</el-button> -->
<el-button type="primary" size="small" icon="view" @click="handleDetail(scope.row)">详情</el-button>
<!-- 审核取消订单 -->
<el-button type="warning" size="small" v-if="scope.row.orderStatus == 3"
@click="handleCancelOrder(scope.row)" icon="check">审核取消订单</el-button>
<el-button type="danger" size="small" icon="delete" @click="handleDelete(scope.row)"
v-hasPermi="['business:orderrefund:delete']">删除</el-button>
<el-button size="small" icon="view" @click="handleDetail(scope.row)">查看</el-button>
v-hasPermi="['business:order:delete']">删除</el-button>
</template>
</el-table-column>
@ -137,14 +177,20 @@
<EditDialog v-model="EditDialogVisible" :data="EditDialogRow" :done="() => resetQuery()"></EditDialog>
<!-- 详情 -->
<DetailDialog v-model="DetailDialogVisible" :data="DetailDialogRow" :done="() => resetQuery()"></DetailDialog>
<!-- 审核取消订单 -->
<!-- <CancelOrderDialog v-model="CancelOrderDialogVisible" :data="CancelOrderDialogRow" :done="() => resetQuery()">
</CancelOrderDialog> -->
</template>
<script setup name="orderrefund">
<script setup name="order">
import { ElMessageBox } from 'element-plus'
import modal from '@/plugins/modal.js'
import { exportOrderRefund, orderRefundList , delOrderRefund } from '@/api/business/OrderManage/OrderRefunds/orderRefund.js'
import AddDialog from "./components/AddDialog.vue";
import EditDialog from "./components/EditDialog.vue";
import DetailDialog from "./components/DetailDialog.vue";
// import CancelOrderDialog from "./components/CancelOrderDialog.vue";
import useClipboard from 'vue-clipboard3'
const AddDialogVisible = ref(false);
const EditDialogVisible = ref(false);
@ -152,6 +198,9 @@ const EditDialogRow = ref({});
const DetailDialogVisible = ref(false);
const DetailDialogRow = ref({});
const CancelOrderDialogVisible = ref(false);
const CancelOrderDialogRow = ref({});
const { proxy } = getCurrentInstance()
// 选中categoryId数组数组
@ -168,6 +217,10 @@ const dataList = ref([])
const total = ref(0)
// 是否加载
const loading = ref(true)
// 路由
const router = useRouter();
const { toClipboard } = useClipboard()
const data = reactive({
form: {},
@ -179,9 +232,39 @@ const data = reactive({
const { queryParams } = toRefs(data)
// 业务参数
const dateRange = ref([])
const defaultTime2 = [
new Date(2000, 1, 1, 0, 0, 0),
new Date(2000, 2, 1, 23, 59, 59),
] // '12:00:00', '08:00:00'
// 业务方法
const copyText = async (val) => {
try {
await toClipboard(val)
proxy.$modal.msgSuccess('复制成功！')
} catch (e) {
console.log(e)
proxy.$modal.msgError('当前浏览器不支持')
}
}
// 审核修改订单
function handleCancelOrder(row) {
CancelOrderDialogVisible.value = true
CancelOrderDialogRow.value = row
}
function resetStatusQuery(){
queryParams.value.deliveryStatus = null;
queryParams.value.receiptStatus = null;
queryParams.value.payStatus = null;
queryParams.value.orderStatus = null;
}
// 字典获取
const refund_type = ref([]);
@ -231,8 +314,14 @@ async function getorder_refund_status() {
})
}
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()
//基础方法
@ -240,9 +329,8 @@ getorder_refund_status()
// 查询数据
function getList() {
loading.value = true
orderRefundList(queryParams.value).then((res) => {
console.log(dateRange?.value[1])
orderRefundList(proxy.addDateRange(queryParams.value, dateRange.value)).then((res) => {
if (res.code == 200) {
loading.value = false;
dataList.value = res.data.result;
@ -254,13 +342,15 @@ function getList() {
// 多选框选中数据
function handleSelectionChange(selection) {
ids.value = selection.map((item) => item.orderRefundId)
ids.value = selection.map((item) => item.orderId)
single.value = selection.length != 1
multiple.value = !selection.length
}
/** 重置查询操作 */
function resetQuery() {
resetStatusQuery()
dateRange.value = []
proxy.resetForm('queryForm')
handleQuery()
}
@ -270,7 +360,7 @@ function handleQuery() {
}
/** 删除按钮操作 */
function handleDelete(row) {
const Ids = row.orderRefundId || ids.value
const Ids = row.orderId || ids.value
ElMessageBox.confirm("是否确认删除？", "系统提示", {
confirmButtonText: '确定',
@ -289,7 +379,7 @@ function handleDelete(row) {
/** 导出按钮操作 */
function handleExport(row) {
const Ids = row.orderRefundId || ids.value
const Ids = row.orderId || ids.value
const name = ref("所有")
if (Ids.length != 0) {
@ -324,9 +414,57 @@ function handleUpdate(row) {
// 详情
function handleDetail(row) {
DetailDialogVisible.value = true
DetailDialogRow.value = row
router.push("/orders/orderRefundsDetail?orderRefundId=" + row.orderRefundId)
// DetailDialogVisible.value = true
// DetailDialogRow.value = row
}
handleQuery()
</script>
<style lang="scss" scoped>
.goods-info-box {
display: flex;
justify-content: space-between;
margin: 10px 0;
}
.goods-info-text {
width: 250px;
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;
}
.avatar {
margin-right: 15px;
}
.status-box {
display: flex;
align-items: center;
margin-bottom: 2px;
}
.price-box {
width: 60px;
}
.order-num-box {
display: flex;
position: relative;
.copy {
position: absolute;
right: 0%;
}
}
</style>

473
src/views/business/OrderManage/OrderRefunds/orderRefundsDetail.vue Normal file
View File

@ -0,0 +1,473 @@
<template>
<!-- 订单信息 -->
<el-card class="box-card">
<template v-if="detail.merchantAuditStatus == 1">
<!-- 售后单操作 -->
<div class="order-operation">
<div class="card-title">售后单操作</div>
<div class="btn-box">
<!-- 审核取消订单 -->
<div style="width: 100%;">
<el-alert title="当前买家已发起售后申请，请及时审核处理。" type="warning" show-icon :closable=false />
<div>
<el-button type="primary" @click="handleCancelOrder(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>
</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.customerRefundDesc?.split(',')[0]"
:preview-src-list="detail.customerRefundDesc?.split(',')">
<div><el-icon :size="15">
<document />
</el-icon></div>
</el-image>
{{ detail.CustomerRefundImg }}</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">
<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-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.logisticsTrackingNumber }}</el-col>
<el-col :span="8">发货状态： <dict-tag :options="delivery_status" :value="detail.deliveryStatus" /></el-col>
</el-row>
<el-row class="order-info-box">
<el-col :span="8">发货时间： {{ detail.deliveryTime }}</el-col>
</el-row>
</div>
</el-card>
<!-- 审核取消订单 -->
<CancelOrderDialog v-model="CancelOrderDialogVisible" :data="CancelOrderDialogRow" :done="() => getDetail()">
</CancelOrderDialog>
</template>
<script setup>
import modal from '@/plugins/modal.js'
import { getOrderRefundDetails } from '@/api/business/OrderManage/OrderRefunds/orderRefund.js'
import CancelOrderDialog from "./components/CancelOrderDialog.vue";
const route = useRoute()
const { proxy } = getCurrentInstance()
const parm = reactive({
orderRefundId: route.query.orderRefundId
})
const CancelOrderDialogVisible = ref(false);
const CancelOrderDialogRow = 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 handleCancelOrder(row) {
CancelOrderDialogVisible.value = true
CancelOrderDialogRow.value = row
}
// 字典获取
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>