完善订单详情和售后退款日志展示样式重构

46fd154e · puhui999 · d10530c9 · 46fd154e · 46fd154e · 46fd154e
Commit 46fd154e authored Sep 03, 2023 by puhui999
Show whitespace changes
Inline Side-by-side

Showing with 160 additions and 13 deletions

src/api/mall/trade/order/index.ts
+2 -1

src/utils/dict.ts
+14 -6

src/views/mall/trade/afterSale/detail/index.vue
+73 -5

src/views/mall/trade/order/detail/index.vue
+71 -1

No files found.
--- a/src/api/mall/trade/order/index.ts
+++ b/src/api/mall/trade/order/index.ts
@@ -51,12 +51,13 @@ export interface OrderVO {
    avatar?: string
  }
  // 订单操作日志
-  orderLog: orderLog[]
+  orderLog?: orderLog[]
 }
 export interface orderLog {
  content?: string
  createTime?: Date
+  userType?: number
 }
 export interface OrderItemRespVO {

--- a/src/utils/dict.ts
+++ b/src/utils/dict.ts
@@ -60,13 +60,20 @@ export const getBoolDictOptions = (dictType: string) => {
  return dictOption
 }
-export const getDictObj = (dictType: string, value: any) => {
+/**
+ * 获取指定字典类型的指定值对应的字典对象
+ * @param dictType 字典类型
+ * @param value 字典值
+ * @return DictDataType 字典对象
+ */
+export const getDictObj = (dictType: string, value: any): DictDataType | undefined => {
  const dictOptions: DictDataType[] = getDictOptions(dictType)
-  dictOptions.forEach((dict: DictDataType) => {
+  console.log(dictOptions)
-    if (dict.value === value.toString()) {
+  for (const dict of dictOptions) {
+    if (dict.value === value + '') {
      return dict
    }
-  })
+  }
 }
 /**
@@ -74,12 +81,13 @@ export const getDictObj = (dictType: string, value: any) => {
 *
 * @param dictType 字典类型
 * @param value 字典数据的值
+ * @return 字典名称
 */
-export const getDictLabel = (dictType: string, value: any) => {
+export const getDictLabel = (dictType: string, value: any): string => {
  const dictOptions: DictDataType[] = getDictOptions(dictType)
  const dictLabel = ref('')
  dictOptions.forEach((dict: DictDataType) => {
-    if (dict.value === value) {
+    if (dict.value === value + '') {
      dictLabel.value = dict.label
    }
  })

--- a/src/views/mall/trade/afterSale/detail/index.vue
+++ b/src/views/mall/trade/afterSale/detail/index.vue
@@ -131,9 +131,7 @@
            :timestamp="formatDate(saleLog.createTime)"
            placement="top"
          >
-            <el-card>
+            <div class="el-timeline-right-content">
-              <span>用户类型：</span>
-              <dict-tag :type="DICT_TYPE.USER_TYPE" :value="saleLog.userType" class="mr-10px" />
              <span>售后状态(之前)：</span>
              <dict-tag
                :type="DICT_TYPE.TRADE_AFTER_SALE_STATUS"
@@ -147,7 +145,15 @@
                class="mr-10px"
              />
              <span>操作明细：{{ saleLog.content }}</span>
-            </el-card>
+            </div>
+            <template #dot>
+              <span
+                :style="{ backgroundColor: updateStyles(saleLog.userType) }"
+                class="dot-node-style"
+              >
+                {{ getDictLabel(DICT_TYPE.USER_TYPE, saleLog.userType)[0] }}
+              </span>
+            </template>
          </el-timeline-item>
        </el-timeline>
      </el-descriptions-item>
@@ -160,7 +166,7 @@
 <script lang="ts" setup>
 import * as AfterSaleApi from '@/api/mall/trade/afterSale/index'
 import { floatToFixed2 } from '@/utils'
-import { DICT_TYPE } from '@/utils/dict'
+import { DICT_TYPE, getDictLabel, getDictObj } from '@/utils/dict'
 import { formatDate } from '@/utils/formatTime'
 import UpdateAuditReasonForm from '@/views/mall/trade/afterSale/form/AfterSaleDisagreeForm.vue'
 import { createImageViewer } from '@/components/ImageViewer'
@@ -177,6 +183,21 @@ const formData = ref({
 })
 const updateAuditReasonFormRef = ref() // 拒绝售后表单 Ref
+const updateStyles = (type: number) => {
+  const dict = getDictObj(DICT_TYPE.USER_TYPE, type)
+  switch (dict?.colorType) {
+    case 'success':
+      return '#67C23A'
+    case 'info':
+      return '#909399'
+    case 'warning':
+      return '#E6A23C'
+    case 'danger':
+      return '#F56C6C'
+  }
+  return '#409EFF'
+}
 /** 获得详情 */
 const getDetail = async () => {
  const id = params.orderId as unknown as number
@@ -277,4 +298,51 @@ onMounted(async () => {
    }
  }
 }
+// 时间线样式调整
+:deep(.el-timeline) {
+  margin: 10px 0px 0px 160px;
+  .el-timeline-item__wrapper {
+    position: relative;
+    top: -20px;
+    .el-timeline-item__timestamp {
+      position: absolute !important;
+      top: 10px;
+      left: -150px;
+    }
+  }
+  .el-timeline-right-content {
+    display: flex;
+    align-items: center;
+    min-height: 30px;
+    padding: 10px;
+    background-color: #f7f8fa;
+    &::before {
+      content: ''; /* 必须设置 content 属性 */
+      position: absolute;
+      top: 10px;
+      left: 13px; /* 将伪元素水平居中 */
+      border-width: 8px; /* 调整尖角大小 */
+      border-style: solid;
+      border-color: transparent #f7f8fa transparent transparent; /* 尖角颜色，左侧朝向 */
+    }
+  }
+  .dot-node-style {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    left: -5px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    color: #fff;
+    font-size: 10px;
+  }
+}
 </style>
--- a/src/views/mall/trade/order/detail/index.vue
+++ b/src/views/mall/trade/order/detail/index.vue
@@ -155,8 +155,16 @@
            v-for="(log, index) in formData.orderLog"
            :key="index"
            :timestamp="formatDate(log.createTime!)"
+            placement="top"
          >
+            <div class="el-timeline-right-content">
              {{ log.content }}
+            </div>
+            <template #dot>
+              <span :style="{ backgroundColor: updateStyles(log.userType) }" class="dot-node-style">
+                {{ getDictLabel(DICT_TYPE.USER_TYPE, log.userType)[0] }}
+              </span>
+            </template>
          </el-timeline-item>
        </el-timeline>
      </el-descriptions-item>
@@ -173,7 +181,7 @@
 import * as TradeOrderApi from '@/api/mall/trade/order'
 import { floatToFixed2 } from '@/utils'
 import { formatDate } from '@/utils/formatTime'
-import { DICT_TYPE } from '@/utils/dict'
+import { DICT_TYPE, getDictLabel, getDictObj } from '@/utils/dict'
 import OrderUpdateRemarkForm from '@/views/mall/trade/order/form/OrderUpdateRemarkForm.vue'
 import OrderDeliveryForm from '@/views/mall/trade/order/form/OrderDeliveryForm.vue'
 import OrderUpdateAddressForm from '@/views/mall/trade/order/form/OrderUpdateAddressForm.vue'
@@ -184,6 +192,21 @@ defineOptions({ name: 'TradeOrderDetail' })
 const message = useMessage() // 消息弹窗
+const updateStyles = (type: number) => {
+  const dict = getDictObj(DICT_TYPE.USER_TYPE, type)
+  switch (dict?.colorType) {
+    case 'success':
+      return '#67C23A'
+    case 'info':
+      return '#909399'
+    case 'warning':
+      return '#E6A23C'
+    case 'danger':
+      return '#F56C6C'
+  }
+  return '#409EFF'
+}
 // 订单详情
 const formData = ref<TradeOrderApi.OrderVO>({
  orderLog: [] // TODO @puhui999：orderLogs
@@ -267,4 +290,51 @@ onMounted(async () => {
    }
  }
 }
+// 时间线样式调整
+:deep(.el-timeline) {
+  margin: 10px 0px 0px 160px;
+  .el-timeline-item__wrapper {
+    position: relative;
+    top: -20px;
+    .el-timeline-item__timestamp {
+      position: absolute !important;
+      top: 10px;
+      left: -150px;
+    }
+  }
+  .el-timeline-right-content {
+    display: flex;
+    align-items: center;
+    min-height: 30px;
+    padding: 10px;
+    background-color: #f7f8fa;
+    &::before {
+      content: ''; /* 必须设置 content 属性 */
+      position: absolute;
+      top: 10px;
+      left: 13px; /* 将伪元素水平居中 */
+      border-width: 8px; /* 调整尖角大小 */
+      border-style: solid;
+      border-color: transparent #f7f8fa transparent transparent; /* 尖角颜色，左侧朝向 */
+    }
+  }
+  .dot-node-style {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    left: -5px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    color: #fff;
+    font-size: 10px;
+  }
+}
 </style>