From a704310ace8da9c8570b97911c53e7f9bf4f8b28 Mon Sep 17 00:00:00 2001
From: "AERWEN\\26795" <123456789a>
Date: Mon, 16 Oct 2023 23:02:36 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=E6=B7=BB=E5=8A=A0=E5=94=AE=E5=90=8E?=
 =?UTF-8?q?=E5=8D=95=E5=88=97=E8=A1=A8=E9=A1=B5=E9=9D=A2=EF=BC=8C=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../OrderManage/OrderRefunds/orderrefund.js   |   9 +
 .../components/CancelOrderDialog.vue          | 135 +++++
 .../OrderManage/OrderRefunds/index.vue        | 336 +++++++++----
 .../OrderRefunds/orderRefundsDetail.vue       | 473 ++++++++++++++++++
 4 files changed, 854 insertions(+), 99 deletions(-)
 create mode 100644 src/views/business/OrderManage/OrderRefunds/components/CancelOrderDialog.vue
 create mode 100644 src/views/business/OrderManage/OrderRefunds/orderRefundsDetail.vue

diff --git a/src/api/business/OrderManage/OrderRefunds/orderrefund.js b/src/api/business/OrderManage/OrderRefunds/orderrefund.js
index 47b9db7..5a02fda 100644
--- a/src/api/business/OrderManage/OrderRefunds/orderrefund.js
+++ b/src/api/business/OrderManage/OrderRefunds/orderrefund.js
@@ -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({
diff --git a/src/views/business/OrderManage/OrderRefunds/components/CancelOrderDialog.vue b/src/views/business/OrderManage/OrderRefunds/components/CancelOrderDialog.vue
new file mode 100644
index 0000000..c4bc6f2
--- /dev/null
+++ b/src/views/business/OrderManage/OrderRefunds/components/CancelOrderDialog.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/business/OrderManage/OrderRefunds/index.vue b/src/views/business/OrderManage/OrderRefunds/index.vue
index 1101986..b86d785 100644
--- a/src/views/business/OrderManage/OrderRefunds/index.vue
+++ b/src/views/business/OrderManage/OrderRefunds/index.vue
@@ -1,5 +1,5 @@
 <!--
- * @Descripttion: (售后单记录表/tb_order_refund)
+ * @Descripttion: (订单/tb_order)
  * @version: (1.0)
  * @Author: (lwh)
  * @Date: (2023-08-29)
@@ -10,59 +10,54 @@
   <div class="app-container">
     <el-row :gutter="24">
       <!-- 搜索框 queryParams.需要搜索的字段 -->
-      <el-form :model="queryParams" label-position="left" style="margin:15px;"  inline ref="queryForm" v-show="showSearch"
+      <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>
-        <el-button icon="search" type="primary" @click="handleQuery">{{ $t('btn.search') }}</el-button>
-        <el-button icon="refresh" @click="resetQuery">{{ $t('btn.reset') }}</el-button>
-      </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>
+        </el-form-item>
       </el-form>
     </el-row>
 
     <!-- 工具按钮 -->
     <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">
-        <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>
-          </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">
+      <el-table-column prop="goodsInfo" label="商品信息 / 单价与数量" width="500">
         <template #default="scope">
-          <el-button type="primary" size="small" icon="edit" @click="handleUpdate(scope.row)"
-            v-hasPermi="['business:orderrefund:addOrUpdate']">编辑</el-button>
+          <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>
+
+            <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">
+          <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>
 
@@ -130,21 +170,27 @@
     <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
       @pagination="getList" />
   </div>
-  
+
   <!-- 添加 -->
   <AddDialog v-model="AddDialogVisible" :done="() => resetQuery()"></AddDialog>
   <!-- 编辑 -->
   <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,13 +360,13 @@ function handleQuery() {
 }
 /** 删除按钮操作 */
 function handleDelete(row) {
-  const Ids = row.orderRefundId || ids.value
+  const Ids = row.orderId || ids.value
 
-    ElMessageBox.confirm("是否确认删除？", "系统提示", {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: "warning",
-    })
+  ElMessageBox.confirm("是否确认删除？", "系统提示", {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: "warning",
+  })
     .then(function () {
       return delOrderRefund(Ids)
     })
@@ -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>
\ No newline at end of file
diff --git a/src/views/business/OrderManage/OrderRefunds/orderRefundsDetail.vue b/src/views/business/OrderManage/OrderRefunds/orderRefundsDetail.vue
new file mode 100644
index 0000000..8c0551f
--- /dev/null
+++ b/src/views/business/OrderManage/OrderRefunds/orderRefundsDetail.vue
@@ -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>
\ No newline at end of file