code review：售后详情

(cherry picked from commit 29b8d06ff2)

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

@@ -43,26 +43,32 @@ export interface ProductPropertiesVO {
 export const getAfterSalePage = async (params) => {
   return await request.get({ url: `/trade/after-sale/page`, params })
 }
+
 // 获得交易售后详情
 export const getAfterSale = async (id: any) => {
   return await request.get({ url: `/trade/after-sale/get-detail?id=${id}` })
 }
+
 // 同意售后
 export const agree = async (id: any) => {
   return await request.put({ url: `/trade/after-sale/agree?id=${id}` })
 }
+
 // 拒绝售后
 export const disagree = async (data: any) => {
   return await request.put({ url: `/trade/after-sale/disagree`, data })
 }
+
 // 确认收货
 export const receive = async (id: any) => {
   return await request.put({ url: `/trade/after-sale/receive?id=${id}` })
 }
+
 // 拒绝收货
 export const refuse = async (id: any) => {
   return await request.put({ url: `/trade/after-sale/refuse?id=${id}` })
 }
+
 // 确认退款
 export const refund = async (id: any) => {
   return await request.put({ url: `/trade/after-sale/refund?id=${id}` })

src/router/modules/remaining.ts

@@ -395,16 +395,22 @@ const remainingRouter: AppRouteRecordRaw[] = [
   {
     path: '/trade/order',
     component: Layout,
-    name: 'Detail',
+    name: 'Order',
     meta: {
       hidden: true
     },
     children: [
       {
-        path: 'detail/:orderId(\\d+)',
+        path: 'orderDetail/:orderId(\\d+)', // TODO @puhui999：路径合理的是 trade/order/detail
         component: () => import('@/views/mall/trade/order/detail/index.vue'),
-        name: 'TradeOrderDetailForm',
+        name: 'TradeOrderDetail', // TODO @puhui999：路径合理的是 trade/after-sale/detail
         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/components/UpdateAuditReasonForm.vue

@@ -19,6 +19,7 @@
 <script lang="ts" setup>
 import * as AfterSaleApi from '@/api/mall/trade/afterSale/index'
 
+// TODO @puhui999：是不是改成 AfterSaleDisagreeForm ，更明确
 defineOptions({ name: 'UpdateAuditReasonForm' })
 
 const { t } = useI18n() // 国际化

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

@@ -1,7 +1,7 @@
 <template>
   <ContentWrap>
     <!-- 订单信息 -->
-    <el-descriptions title="退款订单信息">
+    <el-descriptions title="订单信息">
       <el-descriptions-item label="订单号: ">{{ formData.orderNo }}</el-descriptions-item>
       <el-descriptions-item label="配送方式: ">
         <dict-tag :type="DICT_TYPE.TRADE_DELIVERY_TYPE" :value="formData.order.deliveryType" />
@@ -45,11 +45,13 @@
       <el-descriptions-item label="售后方式: ">
         <dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_WAY" :value="formData.way" />
       </el-descriptions-item>
+      <!-- TODO @puhui999：金额的格式化 -->
       <el-descriptions-item label="退款金额: ">{{ formData.refundPrice }}</el-descriptions-item>
       <el-descriptions-item label="退款原因: ">{{ formData.applyReason }}</el-descriptions-item>
       <el-descriptions-item label="补充描述: ">
         {{ formData.applyDescription }}
       </el-descriptions-item>
+      <!-- TODO @puhui999：数组，图片 -->
       <el-descriptions-item label="凭证图片: "> {{ formData.applyPicUrls }}</el-descriptions-item>
     </el-descriptions>
 
@@ -58,6 +60,7 @@
       <el-descriptions-item label="退款状态: ">
         <dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_STATUS" :value="formData.status" />
       </el-descriptions-item>
+      <!-- TODO @puhui999：不同状态，展示不同按钮 -->
       <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>
@@ -108,7 +111,7 @@
         </el-row>
       </el-descriptions-item>
     </el-descriptions>
-    <!-- 售后信息 -->
+    <!-- 售后信息 TODO @puhui999：需要接入 -->
     <el-descriptions title="售后日志" />
   </ContentWrap>
 
@@ -130,6 +133,7 @@ const formData = ref({
   order: {}
 })
 const updateAuditReasonFormRef = ref() // 拒绝售后表单 Ref
+
 /** 获得详情 */
 const getDetail = async () => {
   const id = params.orderId as unknown as number
@@ -137,6 +141,8 @@ const getDetail = async () => {
     formData.value = await AfterSaleApi.getAfterSale(id)
   }
 }
+
+/** 各种操作 TODO @puhui999：是不是每个一个方法好点，干净点 */
 const openForm = (type: string) => {
   switch (type) {
     case 'agree':

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

@@ -5,6 +5,7 @@
       <el-form-item label="商品名称" prop="spuName">
         <el-input
           v-model="queryParams.spuName"
+          class="!w-280px"
           clearable
           placeholder="请输入商品 SPU 名称"
           @keyup.enter="handleQuery"
@@ -13,6 +14,7 @@
       <el-form-item label="退款编号" prop="no">
         <el-input
           v-model="queryParams.no"
+          class="!w-280px"
           clearable
           placeholder="请输入退款编号"
           @keyup.enter="handleQuery"
@@ -21,13 +23,19 @@
       <el-form-item label="订单编号" prop="orderNo">
         <el-input
           v-model="queryParams.orderNo"
+          class="!w-280px"
           clearable
           placeholder="请输入订单编号"
           @keyup.enter="handleQuery"
         />
       </el-form-item>
       <el-form-item label="售后状态" prop="status">
-        <el-select v-model="queryParams.status" clearable placeholder="请选择售后状态">
+        <el-select
+          v-model="queryParams.status"
+          class="!w-280px"
+          clearable
+          placeholder="请选择售后状态"
+        >
           <el-option label="全部" value="0" />
           <el-option
             v-for="dict in getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_STATUS)"
@@ -38,7 +46,12 @@
         </el-select>
       </el-form-item>
       <el-form-item label="售后方式" prop="way">
-        <el-select v-model="queryParams.way" clearable placeholder="请选择售后方式">
+        <el-select
+          v-model="queryParams.way"
+          class="!w-280px"
+          clearable
+          placeholder="请选择售后方式"
+        >
           <el-option
             v-for="dict in getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_WAY)"
             :key="dict.value"
@@ -48,7 +61,12 @@
         </el-select>
       </el-form-item>
       <el-form-item label="售后类型" prop="type">
-        <el-select v-model="queryParams.type" clearable placeholder="请选择售后类型">
+        <el-select
+          v-model="queryParams.type"
+          class="!w-280px"
+          clearable
+          placeholder="请选择售后类型"
+        >
           <el-option
             v-for="dict in getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_TYPE)"
             :key="dict.value"
@@ -61,7 +79,7 @@
         <el-date-picker
           v-model="queryParams.createTime"
           :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-280px"
+          class="!w-260px"
           end-placeholder="自定义时间"
           start-placeholder="自定义时间"
           type="daterange"
@@ -80,6 +98,7 @@
       </el-form-item>
     </el-form>
   </ContentWrap>
+
   <ContentWrap>
     <el-tabs v-model="queryParams.status" @tab-click="tabClick">
       <el-tab-pane
@@ -163,12 +182,7 @@ 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[]>([]) // 列表的数据
@@ -228,11 +242,19 @@ const tabClick = async (tab: TabsPaneContext) => {
 const openAfterSaleDetail = (id: number) => {
   push({ name: 'TradeAfterSaleDetail', params: { orderId: id } })
 }
+
 /** 查看订单详情 */
 const openOrderDetail = (id: number) => {
   push({ name: 'TradeOrderDetail', params: { orderId: id } })
 }
 
+/** 商品图预览 */
+const imagePreview = (imgUrl: string) => {
+  createImageViewer({
+    urlList: [imgUrl]
+  })
+}
+
 onMounted(async () => {
   await getList()
   // 设置 statuses 过滤