From 92eec6c1f53caa4b2e5ca867667eed530137897e Mon Sep 17 00:00:00 2001
From: czc <czc15706259078@163.com>
Date: Mon, 17 Jul 2023 17:17:50 +0800
Subject: [PATCH] =?UTF-8?q?=E5=94=AE=E5=90=8E=E5=8D=95=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                |  16 +-
 src/views/oms/aftersale/detail.vue | 246 +++++++++++++++++++++++++++++
 src/views/oms/aftersale/index.vue  |  23 ++-
 3 files changed, 276 insertions(+), 9 deletions(-)
 create mode 100644 src/views/oms/aftersale/detail.vue

diff --git a/src/router/index.js b/src/router/index.js
index 95aee89..a3a0bc2 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -189,7 +189,21 @@ export const dynamicRoutes = [
         meta: { title: '订单详情' }
       }
     ]
-  }
+  },
+  {
+    path: '/aftersale',
+    component: Layout,
+    hidden: true,
+    permissions: ['oms:aftersale:query'],
+    children: [
+      {
+        path: 'detail',
+        component: () => import('@/views/oms/aftersale/detail'),
+        name: 'aftersaleOrderDetail',
+        meta: { title: '售后订单详情' }
+      }
+    ]
+  },
 ]
 
 // 防止连续点击多次路由报错
diff --git a/src/views/oms/aftersale/detail.vue b/src/views/oms/aftersale/detail.vue
new file mode 100644
index 0000000..cc0d61d
--- /dev/null
+++ b/src/views/oms/aftersale/detail.vue
@@ -0,0 +1,246 @@
+<template>
+    <div class="order_detail_wrapper">
+        <el-main v-loading="loading">
+            <el-card>
+                <el-descriptions title="订单信息" :column="2" border label-class-name="my-label" contentClassName="my-content">
+                    <template slot="extra">
+                        <el-button size="small" @click="$router.back()">返回</el-button>
+                    </template>
+                    <el-descriptions-item label="订单号">{{ orderDetail.orderSn }}</el-descriptions-item>
+                    <el-descriptions-item label="用户昵称">{{ orderDetail.nickName }}</el-descriptions-item>
+                    <el-descriptions-item label="用户手机号">{{ orderDetail.phone }}</el-descriptions-item>
+                    <el-descriptions-item label="下单时间">{{ parseTime(orderDetail.createTime, '')
+                    }}</el-descriptions-item>
+                    <el-descriptions-item label="支付方式">{{ getPayType(orderDetail) }}</el-descriptions-item>
+                    <el-descriptions-item label="支付时间">{{ parseTime(orderDetail.payTime, '')
+                    }}</el-descriptions-item>
+                    <el-descriptions-item label="订单状态">{{ getOrderStatus(orderDetail) }}</el-descriptions-item>
+                </el-descriptions>
+            </el-card>
+            <el-card>
+                <div slot="header" style="font-size: 16px;font-weight: bold;">售后信息</div>
+                <el-table :data="refundInfoList">
+                    <el-table-column label="售后单号" prop="id" width="150"></el-table-column>
+                    <el-table-column label="售后类型" prop="applyRefundType" width="80">
+                        <template slot-scope="{row}">
+                            <span>{{ getAftersaleType(row) }}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="申请售后时间" prop="applyRefundTime" width="180">
+                        <template slot-scope="{row}">
+                            <span>
+                                {{ parseTime(row.applyRefundTime, '') }}
+                            </span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="退款金额" prop="refundAmount">
+                        <template v-slot="scope">
+                            ￥<span>{{ scope.row.refundAmount }}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="申请原因" prop="reason"></el-table-column>
+<!--                    <el-table-column label="凭证" prop="proofPics">-->
+<!--                        <template slot-scope="{row}">-->
+<!--                            <el-image class="small-img circle-img" :src="row.proofPics"-->
+<!--                                :preview-src-list="[row.proofPics]" />-->
+<!--                        </template>-->
+<!--                    </el-table-column>-->
+                    <el-table-column label="申请状态" prop="refundStatus" width="110">
+                        <template slot-scope="{row}">
+                            <span>{{ getAftersaleStatus(row) }}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="平台拒绝理由" prop="remark"></el-table-column>
+<!--                    <el-table-column label="退货快递号" prop="expressNo"></el-table-column>-->
+                    <el-table-column label="操作">
+                        <template slot-scope="scope">
+                            <el-button size="mini" type="text" icon="el-icon-edit"
+                                @click="handleWatch(scope.row)">查看</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </el-card>
+            <el-card>
+                <el-descriptions title="收货信息" :column="2" border label-class-name="my-label" contentClassName="my-content">
+                    <el-descriptions-item label="收货人姓名">{{ addressInfo.name }}</el-descriptions-item>
+                    <el-descriptions-item label="收货人手机号">{{ addressInfo.userPhone }}</el-descriptions-item>
+                    <el-descriptions-item label="收货区域">{{ addressInfo.area }}</el-descriptions-item>
+                    <el-descriptions-item label="详细地址">{{ addressInfo.address }}</el-descriptions-item>
+                </el-descriptions>
+            </el-card>
+            <el-card>
+                <div slot="header" style="font-size: 16px;font-weight: bold;">商品信息</div>
+                <el-table :data="products">
+                    <el-table-column label="商品图片" prop="pic">
+                        <template slot-scope="{row}"><el-image class="small-img circle-img" :src="row.pic"
+                                :preview-src-list="[row.pic]" /></template>
+                    </el-table-column>
+                    <el-table-column label="商品ID" prop="productId"></el-table-column>
+                    <el-table-column label="商品名称" prop="productName"></el-table-column>
+                    <el-table-column label="商品规格" align="center" prop="spData" width="180">
+                      <template slot-scope="scope">
+                        <div v-for="(item,key) in JSON.parse(scope.row.spData)">{{ key }}：{{ item }}</div>
+                      </template>
+                    </el-table-column>
+                  <el-table-column label="价格" prop="salePrice"></el-table-column>
+                  <el-table-column label="购买数量" prop="buyNum"></el-table-column>
+                </el-table>
+            </el-card>
+            <!-- 售后详细信息 -->
+            <el-dialog title="售后详细信息" :visible.sync="open" width="1100px" append-to-body>
+                <el-descriptions :column="2" border label-class-name="my-label" contentClassName="my-content">
+                    <el-descriptions-item label="售后单号">{{ refundInfoDetail.id }}</el-descriptions-item>
+                    <el-descriptions-item label="售后类型">{{ getAftersaleType(refundInfoDetail) }}</el-descriptions-item>
+                    <el-descriptions-item label="申请售后时间">{{ parseTime(refundInfoDetail.applyRefundTime,'') }}</el-descriptions-item>
+                    <el-descriptions-item label="退款金额">￥{{ refundInfoDetail.refundAmount }}</el-descriptions-item>
+                    <el-descriptions-item label="申请原因">{{ refundInfoDetail.reason }}</el-descriptions-item>
+<!--                    <el-descriptions-item label="凭证">-->
+<!--                        <el-image class="small-img circle-img" :src="refundInfoDetail.proofPics"-->
+<!--                                :preview-src-list="[refundInfoDetail.proofPics]" />-->
+<!--                    </el-descriptions-item>-->
+                    <el-descriptions-item label="申请状态">{{ getAftersaleStatus(refundInfoDetail) }}</el-descriptions-item>
+                    <el-descriptions-item label="平台拒绝理由">{{ refundInfoDetail.remark }}</el-descriptions-item>
+                    <el-descriptions-item label="退货快递号">{{ refundInfoDetail.expressNo }}</el-descriptions-item>
+                    <el-descriptions-item label="物流公司">{{ getExpressName(refundInfoDetail) }}</el-descriptions-item>
+                </el-descriptions>
+            </el-dialog>
+        </el-main>
+    </div>
+</template>
+
+<script>
+import { getOmsAftersale } from "@/api/oms/aftersale";
+
+export default {
+    name: "OmsAftersaleDetail",
+    dicts: ['oms_order_status', 'oms_pay_type', "oms_aftersale_type", "oms_aftersale_status"],
+    data() {
+        return {
+            products: [],
+            orderDetail: {},
+            addressInfo: {},
+            // aliLogisticsInfoList: [],
+            refundInfoList: [],
+            loading: false,
+            experssList: [],
+            open: false,
+            refundInfoDetail: {},
+            aliLogisticsInfoList: []
+        }
+    },
+    created() {
+        const { id } = this.$route.query
+        this.queryDetail(id).then((expressNo) => {
+            // this.getLogistic(expressNo)
+        })
+    },
+    computed: {
+        orderStatusMap() {
+            let obj = this.dict.type.oms_order_status.map(item => [item.value, item.label])
+            let map = new Map(obj)
+            return map;
+        },
+        payTypeMap() {
+            let obj = this.dict.type.oms_pay_type.map(item => [item.value, item.label])
+            let map = new Map(obj)
+            return map
+        },
+        aftersaleTypeMap() {
+            let obj = this.dict.type.oms_aftersale_type.map(item => [item.value, item.label])
+            let map = new Map(obj)
+            return map;
+        },
+        aftersaleStatusMap() {
+            let obj = this.dict.type.oms_aftersale_status.map(item => [item.value, item.label])
+            let map = new Map(obj)
+            return map;
+        },
+        expressMap() {
+            let obj = this.experssList.map(item => [item.expressCode, item.expressName])
+            let map = new Map(obj)
+            return map
+        }
+    },
+    methods: {
+        queryDetail(id) {
+            this.loading = true
+            return new Promise(resolve =>
+                getOmsAftersale(id).then(res => {
+                    const { productList, addressInfo, refundInfoList } = res;
+                    this.orderDetail = res;
+                    this.products = productList
+                    this.refundInfoList = refundInfoList
+                    this.addressInfo = addressInfo || {}
+                    this.loading = false
+                })
+            )
+        },
+        getOrderStatus(row) {
+            return this.orderStatusMap.get(row.status + '')
+        },
+        getPayType(row) {
+            return this.payTypeMap.get(row.payType + '')
+        },
+        getAftersaleType(row) {
+            return this.aftersaleTypeMap.get(row.applyRefundType + '')
+        },
+        getAftersaleStatus(row) {
+            return this.aftersaleStatusMap.get(row.refundStatus + '')
+        },
+        getExpressName(row) {
+            return this.expressMap.get(row.expressName + '')
+        },
+        handleWatch(row) {
+            this.refundInfoDetail = row
+            // if(this.refundInfoDetail.allLogistics){
+            //     this.aliLogisticsInfoList = JSON.parse(refundInfoDetail.allLogistics)
+            // }
+            this.open = true
+        },
+        cancel() {
+            this.open = false;
+            this.refundInfoDetail = {};
+        }
+    }
+}
+</script>
+
+<style lang="stylus">
+  .order_detail_wrapper
+    > .el-card + .el-card
+      margin-top 1rem
+
+    .el-form-item
+      margin-bottom 0
+
+      .el-form-item__content, .el-form-item__label
+        line-height 2
+
+  .my-label
+    width 100px
+  .my-content
+    width 400px
+.popperOptions[x-placement^=left] .popper__arrow::after{
+    border-left-color: #565D6B;
+}
+.popperOptions[x-placement^=right] .popper__arrow::after{
+    border-right-color: #565D6B;
+}
+.popperOptions[x-placement^=bottom] .popper__arrow::after{
+    border-bottom-color: #565D6B;
+}
+.popperOptions[x-placement^=top] .popper__arrow::after{
+    border-top-color: #565D6B;
+}
+.popperOptions{
+    background-color: #565D6B;
+    color: #FFFFFF;
+    border: #565D6B;
+}
+.el-timeline-item__content {
+    color: #fff;
+}
+.el-timeline-item__timestamp {
+    color: #fff;
+}
+  </style>
diff --git a/src/views/oms/aftersale/index.vue b/src/views/oms/aftersale/index.vue
index f9be303..4b6eae8 100644
--- a/src/views/oms/aftersale/index.vue
+++ b/src/views/oms/aftersale/index.vue
@@ -11,8 +11,8 @@
           <el-option v-for="(item, index) in dict.type.oms_aftersale_type" :label="item.label" :value="item.value" />
         </el-select>
       </el-form-item>
-      <el-form-item label="订单号" prop="orderId">
-        <el-input v-model.trim="queryParams.orderId" placeholder="请输入订单号" clearable size="small"
+      <el-form-item label="订单号" prop="orderSn">
+        <el-input v-model.trim="queryParams.orderSn" placeholder="请输入订单号" clearable size="small"
                   @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="售后单号" prop="id">
@@ -37,7 +37,7 @@
     </el-form>
 
     <el-table v-loading="loading" :data="omsAftersaleList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
+<!--      <el-table-column type="selection" width="55" align="center" />-->
       <el-table-column label="订单号" align="center" prop="orderSn" width="200"/>
       <el-table-column label="售后单号" align="center" prop="id" width="160"/>
       <el-table-column label="申请状态" align="center" prop="aftersaleStatus" width="80">
@@ -69,8 +69,8 @@
       <el-table-column label="处理人员" align="center" prop="handleMan" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="140">
         <template slot-scope="scope">
-          <el-button size="mini" type="text" @click="handleDetail(scope.row)"
-                     v-hasPermi="['manager:oms:aftersale:query']">详情</el-button>
+          <el-button size="mini" type="text" @click="handleDetail(scope.row.orderId)"
+                     v-hasPermi="['oms:aftersale:query']">详情</el-button>
           <el-button size="mini" type="text"  @click="approve(scope.row.orderId, 1)"
                      v-if="scope.row.aftersaleStatus == 0" v-hasPermi="['manager:oms:aftersale:update']">同意</el-button>
           <el-button size="mini" type="text"  @click="handleOpen(scope.row.orderId, 2)"
@@ -138,7 +138,7 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        orderId: null,
+        orderSn: null,
         type: null,
         status: null,
         userPhone: null,
@@ -280,7 +280,8 @@ export default {
     },
     /** 售后详情 */
     handleDetail(orderId){
-
+      const id = orderId
+      this.$router.push({ path: '/aftersale/detail', query: { id } })
     },
     /** 同意售后 */
     approve(orderId, type){
@@ -360,7 +361,13 @@ export default {
           })
         }
       })
-    }
+    },
+    handleChange(value) {
+      if (!value) {
+        this.queryParams.startTime = null;
+        this.queryParams.endTime = null;
+      }
+    },
   }
 };
 </script>