From 789baada090cb44a444f79135a28de3aa8e7ccfc Mon Sep 17 00:00:00 2001
From: panqihua <panqihua@melt.icu>
Date: Mon, 16 Jan 2023 16:44:33 +0800
Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E8=90=A5=E5=95=86=E5=9F=8E-=E5=94=AE?=
 =?UTF-8?q?=E5=90=8E=E8=AE=A2=E5=8D=95-=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../after_sales_service.vue                   | 115 +++++++-
 .../components/order_detail.vue               | 279 +++++++-----------
 .../components/progress.vue                   |  94 ++++++
 .../components/query_order_form.vue           | 109 -------
 .../components/refund_order_detail.vue        | 260 ++++++++++++++++
 .../platform/self-operated-mall/order.vue     |  24 +-
 6 files changed, 576 insertions(+), 305 deletions(-)
 create mode 100644 src/views/platform/self-operated-mall/components/progress.vue
 delete mode 100644 src/views/platform/self-operated-mall/components/query_order_form.vue
 create mode 100644 src/views/platform/self-operated-mall/components/refund_order_detail.vue

diff --git a/src/views/platform/self-operated-mall/after_sales_service.vue b/src/views/platform/self-operated-mall/after_sales_service.vue
index d311d5e..1d7fe16 100644
--- a/src/views/platform/self-operated-mall/after_sales_service.vue
+++ b/src/views/platform/self-operated-mall/after_sales_service.vue
@@ -10,19 +10,126 @@
             <el-tab-pane label="待退货" name="returns"></el-tab-pane>
             <el-tab-pane label="已退款" name="refund"></el-tab-pane>
         </el-tabs>
-        <query-order-form />
+        <el-form :inline="true">
+            <el-form-item>
+                <el-input placeholder="订单号" />
+            </el-form-item>
+            <el-form-item>
+                <el-input placeholder="请输入订单号" />
+            </el-form-item>
+            <el-form-item>
+                <el-select v-model="queryParams.refund_type" placeholder="退款类型" clearable>
+                    <el-option v-for="dict in dict.type.refund_type" :key="dict.value" :label="dict.label"
+                        :value="dict.value"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item>
+                <el-date-picker v-model="queryParams.dateRange" style="width: 240px" value-format="yyyy-MM-dd"
+                    type="daterange" range-separator="-" start-placeholder="开始日期"
+                    end-placeholder="结束日期"></el-date-picker>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary">查询</el-button>
+                <el-button>重置</el-button>
+            </el-form-item>
+            <br />
+            <el-form-item>
+                <el-select v-model="queryParams.after_sales_order_status" placeholder="全部状态" clearable>
+                    <el-option v-for="dict in dict.type.after_sales_order_status" :key="dict.value" :label="dict.label"
+                        :value="dict.value"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item>
+                <el-select v-model="queryParams.refund_cause" placeholder="全部原因" clearable>
+                    <el-option v-for="dict in dict.type.refund_cause" :key="dict.value" :label="dict.label"
+                        :value="dict.value"></el-option>
+                </el-select>
+            </el-form-item>
+        </el-form>
+        <el-button class="export">导出</el-button>
+        <el-table :data="dataList" border>
+            <el-table-column type="selection" align="center"></el-table-column>
+            <el-table-column label="退款单号" align="center">
+                12313141
+            </el-table-column>
+            <el-table-column label="退款类型" align="center">
+                退款退货
+            </el-table-column>
+            <el-table-column label="退款原因" align="center">
+                拍错
+            </el-table-column>
+            <el-table-column label="申请时间" align="center">
+                2022-12-31 12:31
+            </el-table-column>
+            <el-table-column label="退款金额" align="center">
+                ￥120.00
+            </el-table-column>
+            <el-table-column label="退款说明" align="center">
+                7天无理由退款
+            </el-table-column>
+            <el-table-column label="审核时间" align="center">
+                2022-12-31 12:31
+            </el-table-column>
+            <el-table-column label="审核状态" align="center">
+                待审核
+            </el-table-column>
+            <el-table-column label="用户ID" align="center">
+                12
+            </el-table-column>
+            <el-table-column label="商品名称" align="center">
+                商品名称
+            </el-table-column>
+            <el-table-column label="商品图片" align="center">
+                <img src="http://dummyimage.com/50x50" />
+            </el-table-column>
+            <el-table-column label="价格" align="center">
+                ￥120.00
+            </el-table-column>
+            <el-table-column label="数量" align="center">
+                2
+            </el-table-column>
+            <el-table-column label="商品图片" align="center">
+                <el-button type="text" @click="open = true">详情</el-button>
+                <el-button type="text">审核</el-button>
+            </el-table-column>
+        </el-table>
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize" @pagination="getList" />
+        <refund-order-detail :open="open" @close="open = false" />
+
     </div>
 </template>
 <script>
-import QueryOrderForm from "./components/query_order_form.vue"
+import RefundOrderDetail from "./components/refund_order_detail.vue"
 export default {
     name: 'AfterSalesService',
-    components: { QueryOrderForm },
-    dicts: ['refund_type', 'after_sales_order_status'],
+    components: { RefundOrderDetail },
+    dicts: ['refund_type', 'after_sales_order_status', 'refund_cause', 'audit_status'],
     data() {
         return {
+
+            open: false,
+            dataList: [{}],
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                refund_type: undefined,
+                after_sales_order_status: undefined,
+                refund_cause: undefined,
+                dateRange: undefined
+            },
+            //总记录数
+            total: 1,
             activeName: 'all'
         }
+    },
+    methods: {
+        getList() {
+
+        },
     }
 }
 </script>
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/views/platform/self-operated-mall/components/order_detail.vue b/src/views/platform/self-operated-mall/components/order_detail.vue
index 3193035..5e8fd3c 100644
--- a/src/views/platform/self-operated-mall/components/order_detail.vue
+++ b/src/views/platform/self-operated-mall/components/order_detail.vue
@@ -1,130 +1,112 @@
 <template>
-    <div v-if="showDetail">
-        <div class="title">订单动态</div>
-        <el-steps :active="4" finish-status="success" align-center>
-            <el-step title="2022-12-31 12:31" description="创建订单"></el-step>
-            <el-step title="2022-12-31 12:31" description="支付成功/待支付"></el-step>
-            <el-step title="2022-12-31 12:31" description="已收货/待收货"></el-step>
-            <el-step title="2022-12-31 12:31" description="已完成/已取消"></el-step>
-        </el-steps>
-        <div class="title">订单信息</div>
-        <el-form :inline="true" label-width="100px" label-position="left" class="form">
-            <el-form-item label="订单号">
-                <el-input v-model="form.orderId"></el-input>
-            </el-form-item>
-            <br />
-            <el-form-item label="用户昵称">
-                <el-input v-model="form.user.nickName"></el-input>
-            </el-form-item>
-            <el-form-item label="用户ID" style="margin-left:20px">
-                <el-input v-model="form.user.userId"></el-input>
-            </el-form-item>
-            <el-form-item label="配送物流">
-                <el-input v-model="form.logisticsCompany"></el-input>
-            </el-form-item>
-            <el-form-item label="快递单号" style="margin-left:20px">
-                <el-input v-model="form.expressNumber"></el-input>
-            </el-form-item>
-            <br />
-            <el-form-item label="创建时间">
-                <el-input v-model="form.createTime"></el-input>
-            </el-form-item>
-            <br />
-            <el-form-item label="收货人姓名">
-                <el-input v-model="form.address.userName"></el-input>
-            </el-form-item>
-            <el-form-item label="收货电话" style="margin-left:20px">
-                <el-input v-model="form.address.phone"></el-input>
-            </el-form-item>
-            <br />
-            <el-form-item label="收货地址">
-                <el-select v-model="form.address.province" placeholder="请选择">
-
-                </el-select>
-                <el-select v-model="form.address.city" placeholder="请选择">
-
-                </el-select>
-                <el-select v-model="form.address.area" placeholder="请选择">
-
-                </el-select>
-                <br />
-                <el-input v-model="form.address.address" style="margin-top:10px"></el-input>
-            </el-form-item>
-
-        </el-form>
-        <div class="title">商品列表</div>
-        <el-row type="flex" class="count">
-            <el-col>合计：￥1230.00</el-col>
-            <el-col>店铺优惠：-￥10.00</el-col>
-            <el-col>平台优惠券：￥125.00</el-col>
-            <el-col>实付款：￥1234.00</el-col>
-        </el-row>
-        <el-table :data="form.shopList" border>
-            <el-table-column label="商品编码" align="center">
-                DS000001
-            </el-table-column>
-            <el-table-column label="商品名称" align="center">
-                联想笔记本
-            </el-table-column>
-            <el-table-column label="商品图片" align="center">
-                <img src="http://dummyimage.com/50x50" />
-            </el-table-column>
-            <el-table-column label="规格" align="center">
-                黑色，L
-            </el-table-column>
-            <el-table-column label="数量" align="center">
-                10
-            </el-table-column>
-            <el-table-column label="金额" align="center">
-                ￥120.00
-            </el-table-column>
-        </el-table>
-        <div class="btn">
-            <el-button type="primary" @click="save">保存</el-button>
-            <el-button @click="$emit('view')">查看物流信息</el-button>
-            <el-button @click="$emit('close')">关闭</el-button>
-        </div>
-    </div>
-    <div v-else>
-        <div class="logistics-info">物流公司：xxxxx<br />
-            物流单号：xxxx<br />
-            起点：湖北省武汉市东西湖区xxx<br />
-            目的地：xxxx<br />
-            发货时间：xxx<br />
-            签收时间：xxx<br />
-            完成时间：xxx
+    <el-dialog :visible="showDetail" :show-close="false" @closed="view = true">
+        <div slot="title" class="title">
+            <span>订单详情</span>
+            <i :class="{
+                'el-icon-close': view, 'el-icon-refresh-left': !view
+            }" @click="view ? $emit('close') : view = true"></i>
         </div>
-
-        <div class="progress">
-            <div class="circle start"></div>
-            <template v-for="item in 4">
-                <div class="line"></div>
-                <div class="info">
-                    昨天<br />
-                    15:56
-                    <div class="line-f">
-                        <div class="line"></div>
-                        <div class="circle"></div>
-                        <div class="line"></div>
-                    </div>
-                    已揽件<br />
-                    xxxxxxxxxxxxxxx
-                </div>
-            </template>
-            <div class="line"></div>
-            <i class="el-icon-caret-right end" />
+        <div v-if="view">
+            <div class="sub-title">订单动态</div>
+            <el-steps :active="4" finish-status="success" align-center>
+                <el-step title="2022-12-31 12:31" description="创建订单"></el-step>
+                <el-step title="2022-12-31 12:31" description="支付成功/待支付"></el-step>
+                <el-step title="2022-12-31 12:31" description="已收货/待收货"></el-step>
+                <el-step title="2022-12-31 12:31" description="已完成/已取消"></el-step>
+            </el-steps>
+            <div class="sub-title">订单信息</div>
+            <el-form :inline="true" label-width="100px" label-position="left" class="form">
+                <el-form-item label="订单号">
+                    <el-input v-model="form.orderId"></el-input>
+                </el-form-item>
+                <br />
+                <el-form-item label="用户昵称">
+                    <el-input v-model="form.user.nickName"></el-input>
+                </el-form-item>
+                <el-form-item label="用户ID" style="margin-left:20px">
+                    <el-input v-model="form.user.userId"></el-input>
+                </el-form-item>
+                <el-form-item label="配送物流">
+                    <el-input v-model="form.logisticsCompany"></el-input>
+                </el-form-item>
+                <el-form-item label="快递单号" style="margin-left:20px">
+                    <el-input v-model="form.expressNumber"></el-input>
+                </el-form-item>
+                <br />
+                <el-form-item label="创建时间">
+                    <el-input v-model="form.createTime"></el-input>
+                </el-form-item>
+                <br />
+                <el-form-item label="收货人姓名">
+                    <el-input v-model="form.address.userName"></el-input>
+                </el-form-item>
+                <el-form-item label="收货电话" style="margin-left:20px">
+                    <el-input v-model="form.address.phone"></el-input>
+                </el-form-item>
+                <br />
+                <el-form-item label="收货地址">
+                    <el-select v-model="form.address.province" placeholder="请选择">
+
+                    </el-select>
+                    <el-select v-model="form.address.city" placeholder="请选择">
+
+                    </el-select>
+                    <el-select v-model="form.address.area" placeholder="请选择">
+
+                    </el-select>
+                    <br />
+                    <el-input v-model="form.address.address" style="margin-top:10px"></el-input>
+                </el-form-item>
+
+            </el-form>
+            <div class="sub-title">商品列表</div>
+            <el-row type="flex" class="count">
+                <el-col>合计：￥1230.00</el-col>
+                <el-col>店铺优惠：-￥10.00</el-col>
+                <el-col>平台优惠券：￥125.00</el-col>
+                <el-col>实付款：￥1234.00</el-col>
+            </el-row>
+            <el-table :data="form.shopList" border>
+                <el-table-column label="商品编码" align="center">
+                    DS000001
+                </el-table-column>
+                <el-table-column label="商品名称" align="center">
+                    联想笔记本
+                </el-table-column>
+                <el-table-column label="商品图片" align="center">
+                    <img src="http://dummyimage.com/50x50" />
+                </el-table-column>
+                <el-table-column label="规格" align="center">
+                    黑色，L
+                </el-table-column>
+                <el-table-column label="数量" align="center">
+                    10
+                </el-table-column>
+                <el-table-column label="金额" align="center">
+                    ￥120.00
+                </el-table-column>
+            </el-table>
+            <div class="btn">
+                <el-button type="primary" @click="save">保存</el-button>
+                <el-button @click="view = false">查看物流信息</el-button>
+                <el-button @click="$emit('close')">关闭</el-button>
+            </div>
         </div>
-    </div>
+        <order-progress v-else />
+    </el-dialog>
 </template>
 <script>
+import OrderProgress from "./progress"
 export default {
     name: "OrderDetail",
+    components: { OrderProgress },
     props: {
         showDetail: Boolean
     },
     data() {
         return {
-
+            //订单详情 true:显示动态，false:显示物流
+            view: true,
             form: {
                 orderId: '1213154154153',
                 user: {
@@ -155,61 +137,6 @@ export default {
 }
 </script>
 <style scoped lang="scss">
-$progress-color: #1684fc;
-$circle-size: 20px;
-
-.logistics-info {
-    font-size: 16px;
-}
-
-.progress {
-    margin-top: 50px;
-    display: flex;
-    align-items: center;
-
-    &>.end {
-        font-size: #{$circle-size*1.5};
-        position: relative;
-        left: -2%;
-        color: $progress-color;
-    }
-
-    &>.line {
-        background-color: $progress-color;
-        height: 2px;
-        width: 8%;
-    }
-
-    &>.info {
-        text-align: center;
-
-        &>div {
-            display: flex;
-            align-items: center;
-        }
-
-
-        .line {
-            background-color: $progress-color;
-            height: 2px;
-            flex: auto;
-        }
-    }
-
-    .circle {
-        border-radius: 50%;
-        width: $circle-size;
-        height: $circle-size;
-        background-color: #555353;
-    }
-
-    .circle.start {
-
-        background-color: $progress-color;
-    }
-
-}
-
 .btn {
     margin-top: 20px;
     text-align: center;
@@ -223,10 +150,20 @@ $circle-size: 20px;
     margin-top: 20px;
 }
 
-.title {
+.sub-title {
     font-size: 16px;
     text-align: left;
     font-family: SourceHanSansSC-regular;
     margin: 10px 0;
 }
+
+.title {
+    display: flex;
+    justify-content: space-between;
+    font-size: 16px;
+
+    &>i {
+        cursor: pointer;
+    }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/platform/self-operated-mall/components/progress.vue b/src/views/platform/self-operated-mall/components/progress.vue
new file mode 100644
index 0000000..1e4e2c5
--- /dev/null
+++ b/src/views/platform/self-operated-mall/components/progress.vue
@@ -0,0 +1,94 @@
+<template>
+    <div>
+        <div class="logistics-info">物流公司：xxxxx<br />
+            物流单号：xxxx<br />
+            起点：湖北省武汉市东西湖区xxx<br />
+            目的地：xxxx<br />
+            发货时间：xxx<br />
+            签收时间：xxx<br />
+            完成时间：xxx
+        </div>
+
+        <div class="progress">
+            <div class="circle start"></div>
+            <template v-for="item in 4">
+                <div class="line"></div>
+                <div class="info">
+                    昨天<br />
+                    15:56
+                    <div class="line-f">
+                        <div class="line"></div>
+                        <div class="circle"></div>
+                        <div class="line"></div>
+                    </div>
+                    已揽件<br />
+                    xxxxxxxxxxxxxxx
+                </div>
+            </template>
+            <div class="line"></div>
+            <i class="el-icon-caret-right end" />
+        </div>
+    </div>
+</template>
+<script>
+
+export default {
+    name: 'Progress'
+}
+</script>
+<style scoped lang="scss">
+$progress-color: #1684fc;
+$circle-size: 20px;
+
+.logistics-info {
+    font-size: 16px;
+}
+
+.progress {
+    margin-top: 50px;
+    display: flex;
+    align-items: center;
+
+    &>.end {
+        font-size: #{$circle-size*1.5};
+        position: relative;
+        left: -2%;
+        color: $progress-color;
+    }
+
+    &>.line {
+        background-color: $progress-color;
+        height: 2px;
+        width: 8%;
+    }
+
+    &>.info {
+        text-align: center;
+
+        &>div {
+            display: flex;
+            align-items: center;
+        }
+
+
+        .line {
+            background-color: $progress-color;
+            height: 2px;
+            flex: auto;
+        }
+    }
+
+    .circle {
+        border-radius: 50%;
+        width: $circle-size;
+        height: $circle-size;
+        background-color: #555353;
+    }
+
+    .circle.start {
+
+        background-color: $progress-color;
+    }
+
+}
+</style>
\ No newline at end of file
diff --git a/src/views/platform/self-operated-mall/components/query_order_form.vue b/src/views/platform/self-operated-mall/components/query_order_form.vue
deleted file mode 100644
index 1ee3eeb..0000000
--- a/src/views/platform/self-operated-mall/components/query_order_form.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-    <div>
-        <el-form :inline="true">
-            <el-form-item>
-                <el-input placeholder="订单号" />
-            </el-form-item>
-            <el-form-item>
-                <el-input placeholder="请输入订单号" />
-            </el-form-item>
-            <el-form-item>
-                <el-select v-model="queryParams.refund_type" placeholder="退款类型" clearable>
-                    <el-option v-for="dict in dict.type.refund_type" :key="dict.value" :label="dict.label"
-                        :value="dict.value"></el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item>
-                <el-date-picker v-model="queryParams.dateRange" style="width: 240px" value-format="yyyy-MM-dd"
-                    type="daterange" range-separator="-" start-placeholder="开始日期"
-                    end-placeholder="结束日期"></el-date-picker>
-            </el-form-item>
-            <el-form-item>
-                <el-button type="primary">查询</el-button>
-                <el-button>重置</el-button>
-            </el-form-item>
-            <br />
-            <el-form-item>
-                <el-select v-model="queryParams.after_sales_order_status" placeholder="全部状态" clearable>
-                    <el-option v-for="dict in dict.type.after_sales_order_status" :key="dict.value" :label="dict.label"
-                        :value="dict.value"></el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item>
-                <el-select v-model="queryParams.refund_cause" placeholder="全部原因" clearable>
-                    <el-option v-for="dict in dict.type.refund_cause" :key="dict.value" :label="dict.label"
-                        :value="dict.value"></el-option>
-                </el-select>
-            </el-form-item>
-        </el-form>
-        <el-button class="export">导出</el-button>
-        <el-table :data="dataList" border>
-            <el-table-column type="selection" align="center"></el-table-column>
-            <el-table-column label="退款单号" align="center">
-                12313141
-            </el-table-column>
-            <el-table-column label="退款类型" align="center">
-                退款退货
-            </el-table-column>
-            <el-table-column label="退款原因" align="center">
-                拍错
-            </el-table-column>
-            <el-table-column label="申请时间" align="center">
-                2022-12-31 12:31
-            </el-table-column>
-            <el-table-column label="退款金额" align="center">
-                ￥120.00
-            </el-table-column>
-            <el-table-column label="退款说明" align="center">
-                7天无理由退款
-            </el-table-column>
-            <el-table-column label="审核时间" align="center">
-                2022-12-31 12:31
-            </el-table-column>
-            <el-table-column label="审核状态" align="center">
-                待审核
-            </el-table-column>
-            <el-table-column label="用户ID" align="center">
-                12
-            </el-table-column>
-            <el-table-column label="商品名称" align="center">
-                商品名称
-            </el-table-column>
-            <el-table-column label="商品图片" align="center">
-                <img src="http://dummyimage.com/50x50" />
-            </el-table-column>
-            <el-table-column label="价格" align="center">
-                ￥120.00
-            </el-table-column>
-            <el-table-column label="数量" align="center">
-                2
-            </el-table-column>
-            <el-table-column label="商品图片" align="center">
-                <el-button type="text">详情</el-button>
-                <el-button type="text">审核</el-button>
-            </el-table-column>
-        </el-table>
-    </div>
-</template>
-<script>
-export default {
-    name: 'QueryOrderForm',
-    dicts: ['refund_type', 'after_sales_order_status', 'refund_cause'],
-    data() {
-        return {
-            dataList: [{}],
-            queryParams: {
-                refund_type: undefined,
-                after_sales_order_status: undefined,
-                refund_cause: undefined,
-                dateRange: undefined
-            }
-        }
-    },
-}
-</script>
-<style scoped lang="scss">
-.export {
-    margin-bottom: 10px;
-}
-</style>
\ No newline at end of file
diff --git a/src/views/platform/self-operated-mall/components/refund_order_detail.vue b/src/views/platform/self-operated-mall/components/refund_order_detail.vue
new file mode 100644
index 0000000..9bae2ca
--- /dev/null
+++ b/src/views/platform/self-operated-mall/components/refund_order_detail.vue
@@ -0,0 +1,260 @@
+<template>
+    <el-dialog :visible="open" :show-close="false" @closed="view = true">
+        <div slot="title" class="title">
+            <span>详情</span>
+            <i :class="{
+                'el-icon-close': view, 'el-icon-refresh-left': !view
+            }" @click="view ? $emit('close') : view = true"></i>
+        </div>
+        <template v-if="view">
+            <div class="sub-title"><span>待审核</span></div>
+            <div class="h2">退回信息</div>
+            <el-form :inline="true" label-width="100px" label-position="left">
+                <el-form-item label="退款单号">
+                    <el-input v-model="form.orderId"></el-input>
+                </el-form-item>
+                <el-form-item label="退款类型">
+                    <el-input v-model="form.refundType"></el-input>
+                </el-form-item>
+                <br />
+                <el-form-item label="退款原因">
+                    <el-input v-model="form.refundCause"></el-input>
+                </el-form-item>
+                <el-form-item label="创建时间">
+                    <el-input v-model="form.createTime"></el-input>
+                </el-form-item>
+                <br />
+                <el-form-item label="详细原因">
+                    <el-input type="textarea" autosize v-model="form.detailCause"></el-input>
+                </el-form-item>
+                <br />
+                <el-form-item label="凭证">
+                    <div class="img-list">
+                        <el-image v-for="item in 3" :key="item" src="http://dummyimage.com/200x200"
+                            fit="contain"></el-image>
+                    </div>
+                </el-form-item>
+                <br />
+                <el-form-item label="退回金额">
+                    <el-input v-model="form.refundAmount">
+                        <template slot="prepend">
+                            ￥
+                        </template>
+                    </el-input>
+                </el-form-item>
+                <el-form-item label="订单金额" class="amount">
+                    <el-input v-model="form.orderAmount">
+                        <template slot="prepend">
+                            ￥
+                        </template>
+                    </el-input>
+                </el-form-item>
+                <el-form-item label="退回时间">
+                    <el-input v-model="form.returnTime"></el-input>
+                </el-form-item>
+                <br />
+                <el-form-item label="退回物流">
+                    <el-input v-model="form.logisticsCompany"></el-input>
+                </el-form-item>
+                <el-form-item label="单号">
+                    <el-input v-model="form.transactionCode"></el-input>
+                </el-form-item>
+                <el-button type="text">查看物流</el-button>
+                <br />
+                <el-form-item label="审核">
+                    <el-radio v-model="form.auditType" :key="item.value" :label="item.value"
+                        v-for="item in dict.type.audit_status">{{
+                            item.label
+                        }}</el-radio>
+                    <el-input type="textarea" v-model="form.refusalCause" placeholder="拒绝原因" autosize />
+                </el-form-item>
+
+            </el-form>
+            <div class="h2">订单消息</div>
+            <el-form :inline="true" label-width="100px" label-position="left">
+                <el-form-item label="订单号">
+                    <el-input v-model="order.orderId"></el-input>
+                </el-form-item>
+                <el-form-item label="购买门店">
+                    <el-input v-model="order.shopName"></el-input>
+                </el-form-item>
+                <br />
+                <el-form-item label="用户昵称">
+                    <el-input v-model="order.nickName"></el-input>
+                </el-form-item>
+                <el-form-item label="用户ID">
+                    <el-input v-model="order.userId"></el-input>
+                </el-form-item>
+                <br />
+                <el-form-item label="配送物流">
+                    <el-input v-model="order.logisticsCompany"></el-input>
+                </el-form-item>
+                <el-form-item label="快递单号">
+                    <el-input v-model="order.transactionCode"></el-input>
+                </el-form-item>
+                <br />
+                <el-form-item label="创建时间">
+                    <el-input v-model="order.createTime"></el-input>
+                </el-form-item>
+                <br />
+                <el-form-item label="收货人姓名">
+                    <el-input v-model="order.userName"></el-input>
+                </el-form-item>
+                <el-form-item label="收货地址">
+                    <el-select v-model="order.address.province" placeholder="请选择">
+
+                    </el-select>
+                    <el-select v-model="order.address.city" placeholder="请选择">
+
+                    </el-select>
+                    <el-select v-model="order.address.area" placeholder="请选择">
+
+                    </el-select>
+                    <br />
+                    <el-input v-model="order.address.address" style="margin-top:10px"></el-input>
+                </el-form-item>
+            </el-form>
+            <div class="h2">退货商品</div>
+            <el-table :data="shopList" border>
+                <el-table-column label="商品编码" align="center">
+                    DS000001
+                </el-table-column>
+                <el-table-column label="商品名称" align="center">
+                    联想笔记本
+                </el-table-column>
+                <el-table-column label="商品图片" align="center">
+                    <img src="http://dummyimage.com/50x50" />
+                </el-table-column>
+                <el-table-column label="规格" align="center">
+                    黑色，L
+                </el-table-column>
+                <el-table-column label="数量" align="center">
+                    10
+                </el-table-column>
+                <el-table-column label="金额" align="center">
+                    ￥120.00
+                </el-table-column>
+                <el-table-column label="退款金额" align="center">
+                    ￥120.00
+                </el-table-column>
+            </el-table>
+            <div class="btn">
+                <el-button type="primary" @click="save">保存</el-button>
+                <el-button @click="view = false">查看物流信息</el-button>
+                <el-button @click="$emit('close')">关闭</el-button>
+            </div>
+        </template>
+        <order-progress v-else />
+    </el-dialog>
+</template>
+<script>
+import OrderProgress from "./progress"
+export default {
+    name: 'RefundOrderDetail',
+    components: { OrderProgress },
+    dicts: ['audit_status'],
+    props: {
+        open: Boolean
+    },
+    data() {
+        return {
+            //订单详情 true:显示动态，false:显示物流
+            view: true,
+            form: {
+                orderId: '1213154154153',
+                refundType: '退款',
+                refundCause: '多拍',
+                createTime: '2022-12-31 12:31',
+                detailCause: '',
+                refundAmount: 1230,
+                orderAmount: 1230,
+                returnTime: '2022-12-31 12:31',
+                logisticsCompany: '圆通物流',
+                transactionCode: '单号',
+                auditType: '0',
+                refusalCause: undefined
+            },
+            order: {
+                orderId: '1213154154153',
+                shopName: '门店名称',
+                nickName: '用户昵称',
+                userId: '用户ID',
+                logisticsCompany: '圆通',
+                transactionCode: '13132131361313132',
+                createTime: '2022-12-31 12:31',
+                address: {
+                    userName: '账单',
+                    phone: '18888888888',
+                    province: '河南省',
+                    city: '郑州市',
+                    area: '金水区',
+                    address: '光明路128号'
+                }
+            },
+            shopList: [{}],
+
+        }
+    },
+    methods: {
+
+        save() {
+            this.$modal.msgSuccess('保存成功')
+            this.$emit('close')
+        }
+    }
+}
+</script>
+<style scoped lang="scss">
+.btn {
+    margin-top: 20px;
+    text-align: center;
+}
+
+.amount {
+    .el-input-group__prepend {
+        padding: 0 !important;
+    }
+}
+
+.img-list {
+    overflow-x: auto;
+    white-space: nowrap;
+
+    &>div {
+        height: 100px;
+        margin-left: 10px;
+    }
+}
+
+.export {
+    margin-bottom: 10px;
+}
+
+.h2 {
+    font-size: 16px;
+    text-align: left;
+    font-family: SourceHanSansSC-regular;
+    margin: 20px 0;
+}
+
+.title {
+    display: flex;
+    justify-content: space-between;
+    font-size: 16px;
+
+    &>i {
+        cursor: pointer;
+    }
+}
+
+.sub-title {
+    padding: 15px 20px;
+    background-color: #e1efff;
+
+    &>span {
+        font-size: 14px;
+        text-align: left;
+        font-family: SourceHanSansSC-regular;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/platform/self-operated-mall/order.vue b/src/views/platform/self-operated-mall/order.vue
index 35f5968..6019234 100644
--- a/src/views/platform/self-operated-mall/order.vue
+++ b/src/views/platform/self-operated-mall/order.vue
@@ -76,15 +76,9 @@
             </el-table-column>
         </el-table>
 
-        <el-dialog :visible.sync="open" :show-close="false" @closed="view = true">
-            <div slot="title" class="title">
-                <span>订单详情</span>
-                <i :class="{
-                    'el-icon-close': view, 'el-icon-refresh-left': !view
-                }" @click="view ? open = false : view = true"></i>
-            </div>
-            <order-detail :show-detail="view" @close="open = false" @view="view = false" />
-        </el-dialog>
+
+        <order-detail :show-detail="open" @close="open = false" />
+
 
         <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
             :limit.sync="queryParams.pageSize" @pagination="getList" />
@@ -98,8 +92,6 @@ export default {
     dicts: ['logistics_company'],
     data() {
         return {
-            //订单详情 true:显示动态，false:显示物流
-            view: true,
             //订单详情dialog
             open: false,
             //表格数据
@@ -133,14 +125,4 @@ export default {
     display: flex;
     justify-content: right;
 }
-
-.title {
-    display: flex;
-    justify-content: space-between;
-    font-size: 16px;
-
-    &>i {
-        cursor: pointer;
-    }
-}
 </style>
\ No newline at end of file