完善订单详情和售后退款 TODO 提到的问题

(cherry picked from commit 73628d3930)
2023-09-06 11:23:16 +08:00 · 2023-09-06 11:23:16 +08:00 · 69eb2c0f3a
commit 69eb2c0f3a
parent b398062102
7 changed files with 55 additions and 38 deletions
--- a/src/api/mall/trade/order/index.ts
+++ b/src/api/mall/trade/order/index.ts
@ -51,10 +51,10 @@ export interface OrderVO {
    avatar?: string
  }
  // 订单操作日志
-  orderLog?: orderLog[]
+  logs?: logs[]
 }

-export interface orderLog {
+export interface logs {
  content?: string
  createTime?: Date
  userType?: number
--- a/src/config/axios/service.ts
+++ b/src/config/axios/service.ts
@ -191,6 +191,10 @@ service.interceptors.response.use(
      }
      return Promise.reject('error')
    } else {
+      // 前端处理 data 为 null 的情况，进行提示
+      if (data.msg !== '') {
+        ElNotification.error({ title: msg })
+      }
      return data
    }
  },
--- a/src/utils/dict.ts
+++ b/src/utils/dict.ts
@ -68,7 +68,6 @@ export const getBoolDictOptions = (dictType: string) => {
 */
 export const getDictObj = (dictType: string, value: any): DictDataType | undefined => {
  const dictOptions: DictDataType[] = getDictOptions(dictType)
-  console.log(dictOptions)
  for (const dict of dictOptions) {
    if (dict.value === value + '') {
      return dict
--- a/src/views/mall/promotion/components/SpuAndSkuList.vue
+++ b/src/views/mall/promotion/components/SpuAndSkuList.vue
@ -41,7 +41,7 @@ import { SpuProperty } from '@/views/mall/promotion/components/index'
 defineOptions({ name: 'PromotionSpuAndSkuList' })

 const props = defineProps<{
-  spuList: T[] // TODO 为了方便兼容后续可能有需要展示多个 spu 的情况暂时保持，如果后续都是只操作一个 spu 的话则可更改为接受一个 spu 或保持
+  spuList: T[]
  ruleConfig: RuleConfig[]
  spuPropertyListP: SpuProperty<T>[]
 }>()
--- a/src/views/mall/trade/afterSale/detail/index.vue
+++ b/src/views/mall/trade/afterSale/detail/index.vue
@ -126,7 +126,7 @@
      <el-descriptions-item labelClassName="no-colon">
        <el-timeline>
          <el-timeline-item
-            v-for="saleLog in formData.afterSaleLog"
+            v-for="saleLog in formData.logs"
            :key="saleLog.id"
            :timestamp="formatDate(saleLog.createTime)"
            placement="top"
@ -151,7 +151,7 @@
                :style="{ backgroundColor: updateStyles(saleLog.userType) }"
                class="dot-node-style"
              >
-                {{ getDictLabel(DICT_TYPE.USER_TYPE, saleLog.userType)[0] }}
+                {{ getDictLabel(DICT_TYPE.USER_TYPE, saleLog.userType)[0] || '系' }}
              </span>
            </template>
          </el-timeline-item>
@ -171,15 +171,17 @@ import { formatDate } from '@/utils/formatTime'
 import UpdateAuditReasonForm from '@/views/mall/trade/afterSale/form/AfterSaleDisagreeForm.vue'
 import { createImageViewer } from '@/components/ImageViewer'
 import { isArray } from '@/utils/is'
+import { useTagsViewStore } from '@/store/modules/tagsView'

 defineOptions({ name: 'TradeAfterSaleDetail' })

 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const { params } = useRoute() // 查询参数
+const { push, currentRoute } = useRouter() // 路由
 const formData = ref({
  order: {},
-  afterSaleLog: []
+  logs: []
 })
 const updateAuditReasonFormRef = ref() // 拒绝售后表单 Ref

@ -202,7 +204,12 @@ const updateStyles = (type: number) => {
 const getDetail = async () => {
  const id = params.orderId as unknown as number
  if (id) {
-    formData.value = await AfterSaleApi.getAfterSale(id)
+    const res = await AfterSaleApi.getAfterSale(id)
+    // 没有表单信息则关闭页面返回
+    if (res === null) {
+      close()
+    }
+    formData.value = res
  }
 }

@ -261,7 +268,12 @@ const imagePreview = (args) => {
    urlList
  })
 }
-
+const { delView } = useTagsViewStore() // 视图操作
+/** 关闭 tag */
+const close = () => {
+  delView(unref(currentRoute))
+  push({ name: 'TradeAfterSale' })
+}
 onMounted(async () => {
  await getDetail()
 })
@ -322,10 +334,10 @@ onMounted(async () => {
    background-color: #f7f8fa;

    &::before {
-      content: ''; /* 必须设置 content 属性 */
+      content: '';
      position: absolute;
      top: 10px;
-      left: 13px; /* 将伪元素水平居中 */
+      left: 13px;
      border-width: 8px; /* 调整尖角大小 */
      border-style: solid;
      border-color: transparent #f7f8fa transparent transparent; /* 尖角颜色，左侧朝向 */
--- a/src/views/mall/trade/order/detail/index.vue
+++ b/src/views/mall/trade/order/detail/index.vue
@ -40,12 +40,17 @@
      <el-descriptions-item label="订单状态: ">
        <dict-tag :type="DICT_TYPE.TRADE_ORDER_STATUS" :value="formData.status!" />
      </el-descriptions-item>
-      <!-- TODO @puhui999：根据状态，进行展示按钮 -->
      <el-descriptions-item label-class-name="no-colon">
-        <el-button type="primary" @click="openForm('updatePrice')">调整价格</el-button>
-        <el-button type="primary" @click="openForm('remark')">备注</el-button>
-        <el-button type="primary" @click="openForm('delivery')">发货</el-button>
-        <el-button type="primary" @click="openForm('updateAddress')">修改地址</el-button>
+        <el-button v-if="formData.status! === 0" type="primary" @click="updatePrice">
+          调整价格
+        </el-button>
+        <el-button type="primary" @click="remark">备注</el-button>
+        <el-button v-if="formData.status! === 10" type="primary" @click="delivery">
+          发货
+        </el-button>
+        <el-button v-if="formData.status! === 10" type="primary" @click="updateAddress">
+          修改地址
+        </el-button>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label><span style="color: red">提醒: </span></template>
@ -152,7 +157,7 @@
      <el-descriptions-item labelClassName="no-colon">
        <el-timeline>
          <el-timeline-item
-            v-for="(log, index) in formData.orderLog"
+            v-for="(log, index) in formData.logs"
            :key="index"
            :timestamp="formatDate(log.createTime!)"
            placement="top"
@ -161,7 +166,10 @@
              {{ log.content }}
            </div>
            <template #dot>
-              <span :style="{ backgroundColor: updateStyles(log.userType) }" class="dot-node-style">
+              <span
+                :style="{ backgroundColor: updateStyles(log.userType!) }"
+                class="dot-node-style"
+              >
                {{ getDictLabel(DICT_TYPE.USER_TYPE, log.userType)[0] }}
              </span>
            </template>
@ -209,31 +217,25 @@ const updateStyles = (type: number) => {

 // 订单详情
 const formData = ref<TradeOrderApi.OrderVO>({
-  orderLog: [] // TODO @puhui999：orderLogs
+  logs: []
 })

-// TODO @puhui999：这个最好也拆掉哈
 const deliveryFormRef = ref() // 发货表单 Ref
 const updateRemarkForm = ref() // 订单备注表单 Ref
 const updateAddressFormRef = ref() // 收货地址表单 Ref
 const updatePriceFormRef = ref() // 订单调价表单 Ref
-const openForm = (type: string) => {
-  switch (type) {
-    case 'remark':
+const remark = () => {
  updateRemarkForm.value?.open(formData.value)
-      break
-    case 'delivery':
-      deliveryFormRef.value?.open(formData.value)
-      break
-    case 'updateAddress':
-      updateAddressFormRef.value?.open(formData.value)
-      break
-    case 'updatePrice':
-      updatePriceFormRef.value?.open(formData.value)
-      break
-  }
 }
-
+const delivery = () => {
+  deliveryFormRef.value?.open(formData.value)
+}
+const updateAddress = () => {
+  updateAddressFormRef.value?.open(formData.value)
+}
+const updatePrice = () => {
+  updatePriceFormRef.value?.open(formData.value)
+}
 /** 获得详情 */
 const { params } = useRoute() // 查询参数
 const getDetail = async () => {
--- a/src/views/mall/trade/order/index.vue
+++ b/src/views/mall/trade/order/index.vue
@ -100,7 +100,7 @@
          />
        </el-select>
      </el-form-item>
-      <!-- TODO 聚合搜索等售后结束后实现-->
+      <!-- TODO puhui 聚合搜索等售后结束后实现-->
      <el-form-item label="聚合搜索">
        <el-input
          v-show="true"
@ -139,7 +139,7 @@
    <el-table v-loading="loading" :data="list">
      <el-table-column class-name="order-table-col">
        <template #header>
-          <!-- TODO @phui999：小屏幕下，会有偏移，后续看看 -->
+          <!-- TODO @puhui999：小屏幕下，会有偏移，后续看看 -->
          <div class="flex items-center" style="width: 100%">
            <div class="ml-100px mr-200px">商品信息</div>
            <div class="mr-60px">单价(元)/数量</div>