订单售后列表：初始化售后详情

src/api/mall/trade/afterSale/index.ts

@@ -40,15 +40,12 @@ export interface ProductPropertiesVO {
   valueName?: string // 属性值的名称
 }
 
-// 获得交易售后
-export function getAfterSale(id) {
-  return request({
-    url: '/trade/after-sale/get?id=' + id,
-    method: 'get'
-  })
-}
-
 // 获得交易售后分页
 export const getAfterSalePage = async (params) => {
   return await request.get({ url: `/trade/after-sale/page`, params })
 }
+
+// 获得交易售后详情
+export const getAfterSale = async (id) => {
+  return await request.get({ url: `/trade/after-sale/get-detail?id=${id}` })
+}

src/router/modules/remaining.ts

@@ -401,10 +401,16 @@ const remainingRouter: AppRouteRecordRaw[] = [
     },
     children: [
       {
-        path: 'detail/:orderId(\\d+)',
+        path: 'orderDetail/:orderId(\\d+)',
         component: () => import('@/views/mall/trade/order/detail/index.vue'),
         name: 'TradeOrderDetail',
         meta: { title: '订单详情', icon: '', activeMenu: '/trade/trade/order' }
+      },
+      {
+        path: 'afterSaleDetail/:orderId(\\d+)',
+        component: () => import('@/views/mall/trade/afterSale/detail/index.vue'),
+        name: 'TradeAfterSaleDetail',
+        meta: { title: '退款详情', icon: '', activeMenu: '/trade/trade/after-sale' }
       }
     ]
   },

src/views/mall/trade/afterSale/detail/index.vue

@@ -0,0 +1,190 @@
+<template>
+  <ContentWrap>
+    <!-- 订单信息 -->
+    <el-descriptions title="退款订单信息">
+      <el-descriptions-item label="订单号: ">{{ orderInfo.orderNo }}</el-descriptions-item>
+      <el-descriptions-item label="配送方式: ">
+        <dict-tag :type="DICT_TYPE.TRADE_DELIVERY_TYPE" :value="orderInfo.order.deliveryType" />
+      </el-descriptions-item>
+      <el-descriptions-item label="订单类型: ">
+        <dict-tag :type="DICT_TYPE.TRADE_ORDER_TYPE" :value="orderInfo.order.type" />
+      </el-descriptions-item>
+      <el-descriptions-item label="收货人: ">
+        {{ orderInfo.order.receiverName }}
+      </el-descriptions-item>
+      <el-descriptions-item label="买家留言: ">
+        {{ orderInfo.order.userRemark }}
+      </el-descriptions-item>
+      <el-descriptions-item label="订单来源: ">
+        <dict-tag :type="DICT_TYPE.TERMINAL" :value="orderInfo.order.terminal" />
+      </el-descriptions-item>
+      <el-descriptions-item label="联系电话: ">
+        {{ orderInfo.order.receiverMobile }}
+      </el-descriptions-item>
+      <el-descriptions-item label="商家备注: ">{{ orderInfo.order.remark }}</el-descriptions-item>
+      <el-descriptions-item label="支付单号: ">
+        {{ orderInfo.order.payOrderId }}
+      </el-descriptions-item>
+      <el-descriptions-item label="付款方式: ">
+        <dict-tag :type="DICT_TYPE.PAY_CHANNEL_CODE" :value="orderInfo.order.payChannelCode" />
+      </el-descriptions-item>
+      <!-- TODO 芋艿：待实现：跳转会员 -->
+      <!-- <el-descriptions-item label="买家: ">{{ orderInfo.user.nickname }}</el-descriptions-item> -->
+    </el-descriptions>
+
+    <!-- 售后信息 -->
+    <el-descriptions title="售后信息">
+      <el-descriptions-item label="退款编号: ">{{ orderInfo.no }}</el-descriptions-item>
+      <el-descriptions-item label="申请时间: ">
+        {{ formatDate(orderInfo.auditTime) }}
+      </el-descriptions-item>
+      <!-- TODO 营销活动待实现     -->
+      <el-descriptions-item label="售后类型: ">
+        <dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_TYPE" :value="orderInfo.type" />
+      </el-descriptions-item>
+      <el-descriptions-item label="售后方式: ">
+        <dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_WAY" :value="orderInfo.way" />
+      </el-descriptions-item>
+      <el-descriptions-item label="退款金额: ">{{ orderInfo.refundPrice }}</el-descriptions-item>
+      <el-descriptions-item label="退款原因: ">{{ orderInfo.applyReason }}</el-descriptions-item>
+      <el-descriptions-item label="补充描述: ">
+        {{ orderInfo.applyDescription }}
+      </el-descriptions-item>
+      <el-descriptions-item label="凭证图片: "> {{ orderInfo.applyPicUrls }}</el-descriptions-item>
+    </el-descriptions>
+
+    <!-- 退款状态 -->
+    <el-descriptions :column="1" title="退款状态">
+      <el-descriptions-item label="退款状态: ">
+        <dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_STATUS" :value="orderInfo.status" />
+      </el-descriptions-item>
+      <el-descriptions-item label-class-name="no-colon">
+        <el-button type="primary" @click="openForm('agree')">同意售后</el-button>
+        <el-button type="primary" @click="openForm('disagree')">拒绝售后</el-button>
+        <el-button type="primary" @click="openForm('receive')">确认收货</el-button>
+        <el-button type="primary" @click="openForm('refuse')">拒绝收货</el-button>
+        <el-button type="primary" @click="openForm('refund')">确认退款</el-button>
+        <el-button type="primary" @click="openForm('update-refunded')">
+          更新售后订单为已退款
+        </el-button>
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template #label><span style="color: red">提醒: </span></template>
+        如果未发货，请点击同意退款给买家。<br />
+        如果实际已发货，请主动与买家联系。<br />
+        如果订单整体退款后，优惠券和余额会退还给买家.
+      </el-descriptions-item>
+    </el-descriptions>
+
+    <!-- 商品信息 -->
+    <el-descriptions title="商品信息">
+      <el-descriptions-item labelClassName="no-colon">
+        <el-row :gutter="20">
+          <el-col :span="15">
+            <el-table :data="orderInfo.items" border>
+              <el-table-column label="商品" prop="spuName" width="auto">
+                <template #default="{ row }">
+                  {{ row.spuName }}
+                  <el-tag v-for="property in row.properties" :key="property.propertyId">
+                    {{ property.propertyName }}: {{ property.valueName }}
+                  </el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column label="商品原价" prop="price" width="150">
+                <template #default="{ row }">{{ floatToFixed2(row.price) }}元</template>
+              </el-table-column>
+              <el-table-column label="数量" prop="count" width="100" />
+              <el-table-column label="合计" prop="payPrice" width="150">
+                <template #default="{ row }">{{ floatToFixed2(row.payPrice) }}元</template>
+              </el-table-column>
+              <el-table-column label="售后状态" prop="afterSaleStatus" width="120">
+                <template #default="{ row }">
+                  <dict-tag
+                    :type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
+                    :value="row.afterSaleStatus"
+                  />
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-col>
+          <el-col :span="10" />
+        </el-row>
+      </el-descriptions-item>
+    </el-descriptions>
+    <!-- 售后信息 -->
+    <el-descriptions title="售后日志" />
+  </ContentWrap>
+</template>
+<script lang="ts" setup>
+import * as AfterSaleApi from '@/api/mall/trade/afterSale/index'
+import { floatToFixed2 } from '@/utils'
+import { DICT_TYPE } from '@/utils/dict'
+import { formatDate } from '@/utils/formatTime'
+
+defineOptions({ name: 'TradeOrderDetailForm' })
+
+const { params } = useRoute() // 查询参数
+const orderInfo = ref({
+  order: {}
+})
+/** 获得详情 */
+const getDetail = async () => {
+  const id = params.orderId as unknown as number
+  if (id) {
+    const res = (await AfterSaleApi.getAfterSale(id)) as AfterSaleApi.TradeAfterSaleVO
+    orderInfo.value = res
+  }
+}
+const openForm = (type: string) => {
+  switch (type) {
+    case 'agree':
+      break
+    case 'disagree':
+      break
+    case 'receive':
+      break
+    case 'refuse':
+      break
+    case 'refund':
+      break
+    case 'update-refunded':
+      break
+  }
+}
+onMounted(async () => {
+  await getDetail()
+})
+</script>
+<style lang="scss" scoped>
+:deep(.el-descriptions) {
+  &:not(:nth-child(1)) {
+    margin-top: 20px;
+  }
+
+  .el-descriptions__title {
+    display: flex;
+    align-items: center;
+
+    &::before {
+      display: inline-block;
+      width: 3px;
+      height: 20px;
+      margin-right: 10px;
+      background-color: #409eff;
+      content: '';
+    }
+  }
+
+  .el-descriptions-item__container {
+    margin: 0 10px;
+
+    .no-colon {
+      margin: 0;
+
+      &::after {
+        content: '';
+      }
+    }
+  }
+}
+</style>

src/views/mall/trade/afterSale/index.vue

@@ -91,19 +91,32 @@
     </el-tabs>
     <!-- 列表 -->
     <el-table v-loading="loading" :data="list">
-      <el-table-column align="center" label="退款编号" prop="no" />
-      <el-table-column align="center" label="订单编号" prop="orderNo" />
-      <!-- TODO 芋艿：未来要加个订单链接 -->
-      <el-table-column align="center" label="商品信息" min-width="300" prop="spuName" width="auto">
-        <!-- TODO @小红：样式不太对，辛苦改改 -->
-        <!--        <div v-slot="{ row }" class="goods-info">-->
-        <!--          <img :src="row.picUrl"/>-->
-        <!--          <span class="ellipsis-2" :title="row.name">{{row.name}}</span>-->
-        <!--        </div>-->
+      <el-table-column align="center" label="退款编号" min-width="200" prop="no" />
+      <el-table-column align="center" label="订单编号" min-width="200" prop="orderNo">
+        <template #default="{ row }">
+          <el-button link type="primary" @click="openOrderDetail(row.orderId)">
+            {{ row.orderNo }}
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column label="商品信息" min-width="600" prop="spuName">
+        <template #default="{ row }">
+          <div class="flex items-center">
+            <el-image
+              :src="row.picUrl"
+              class="w-30px h-30px mr-10px"
+              @click="imagePreview(row.picUrl)"
+            />
+            <span class="mr-10px">{{ row.spuName }}</span>
+            <el-tag v-for="property in row.properties" :key="property.propertyId" class="mr-10px">
+              {{ property.propertyName }}: {{ property.valueName }}
+            </el-tag>
+          </div>
+        </template>
       </el-table-column>
       <el-table-column align="center" label="订单金额" prop="refundPrice">
         <template #default="scope">
-          <span>￥{{ (scope.row.refundPrice / 100.0).toFixed(2) }}</span>
+          <span>{{ floatToFixed2(scope.row.refundPrice) }}元</span>
         </template>
       </el-table-column>
       <el-table-column align="center" label="买家" prop="user.nickname" />
@@ -124,8 +137,8 @@
         </template>
       </el-table-column>
       <el-table-column align="center" fixed="right" label="操作" width="160">
-        <template #default>
-          <el-button icon="el-icon-thumb" link type="primary">处理退款</el-button>
+        <template #default="{ row }">
+          <el-button link type="primary" @click="openAfterSaleDetail(row.id)">处理退款</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -142,11 +155,20 @@
 import * as AfterSaleApi from '@/api/mall/trade/afterSale/index'
 import { DICT_TYPE, getDictOptions } from '@/utils/dict'
 import { formatDate } from '@/utils/formatTime'
+import { createImageViewer } from '@/components/ImageViewer'
 import { TabsPaneContext } from 'element-plus'
 import { cloneDeep } from 'lodash-es'
+import { floatToFixed2 } from '@/utils'
 
 defineOptions({ name: 'TradeAfterSale' })
 
+const { push } = useRouter() // 路由跳转
+/** 商品图预览 */
+const imagePreview = (imgUrl: string) => {
+  createImageViewer({
+    urlList: [imgUrl]
+  })
+}
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
 const list = ref<AfterSaleApi.TradeAfterSaleVO[]>([]) // 列表的数据
@@ -202,6 +224,15 @@ const tabClick = async (tab: TabsPaneContext) => {
   await getList()
 }
 
+/** 处理退款 */
+const openAfterSaleDetail = (id: number) => {
+  push({ name: 'TradeAfterSaleDetail', params: { orderId: id } })
+}
+/** 查看订单详情 */
+const openOrderDetail = (id: number) => {
+  push({ name: 'TradeOrderDetail', params: { orderId: id } })
+}
+
 onMounted(async () => {
   await getList()
   // 设置 statuses 过滤