code review：售后详情

29b8d06f · YunaiV · 09d21639 · 29b8d06f · 29b8d06f · 29b8d06f
Commit 29b8d06f authored Aug 30, 2023 by YunaiV
5 changed files
--- a/src/api/mall/trade/afterSale/index.ts
+++ b/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}` })

--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -401,9 +401,9 @@ const remainingRouter: AppRouteRecordRaw[] = [
    },
    children: [
      {
-        path: 'orderDetail/:orderId(\\d+)',
+        path: 'orderDetail/:orderId(\\d+)', // TODO @puhui999：路径合理的是 trade/order/detail
        component: () => import('@/views/mall/trade/order/detail/index.vue'),
-        name: 'TradeOrderDetail',
+        name: 'TradeOrderDetail', // TODO @puhui999：路径合理的是 trade/after-sale/detail
        meta: { title: '订单详情', icon: '', activeMenu: '/trade/trade/order' }
      },
      {

--- a/src/views/mall/trade/afterSale/components/UpdateAuditReasonForm.vue
+++ b/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() // 国际化

--- a/src/views/mall/trade/afterSale/detail/index.vue
+++ b/src/views/mall/trade/afterSale/detail/index.vue
 <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" />
@@ -38,18 +38,20 @@
      <el-descriptions-item label="申请时间: ">
        {{ formatDate(formData.auditTime) }}
      </el-descriptions-item>
-      <!-- TODO 营销活动待实现     -->
+      <!-- TODO 营销活动待实现 -->
      <el-descriptions-item label="售后类型: ">
        <dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_TYPE" :value="formData.type" />
      </el-descriptions-item>
      <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':

--- a/src/views/mall/trade/afterSale/index.vue
+++ b/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 过滤