refactor(product-manage): 优化历史详情页面展示逻辑

- 修复 ChangeValue 组件中的 badge显示逻辑，添加默认值处理无效的 badge 值
- 优化 DataTable 组件中的 create_datetime 字段显示，增加空值处理- 调整 ChangeValue组件中图片展示逻辑，添加 lazy 加载和样式优化

src/views/product-manage/historical-detail/component/ChangeValue.vue

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-import { defineProps, ref, computed } from 'vue';
 import XEUtils from 'xe-utils';
 
+
 const props = defineProps<{
   field: string;
   value: string;
 }>();
 
-const badgeMap = {
+const badgeMap: { [key: number]: string } = {
   0: '',
   1: 'LD',
   2: '7DD',
@@ -16,15 +16,16 @@ const badgeMap = {
 
 const loadJsonString = (val: string) => XEUtils.toStringJSON(val);
 
-const isArray = computed(() => XEUtils.includes(['bullet_point', 'variants'], props.field));
+const isArray = computed(() => XEUtils.includes([ 'bullet_point', 'variants' ], props.field));
 
 const formatedVal = computed(() => {
   if (props.field === 'discount') {
-    return `${props.value}%`;
+    return `${ props.value }%`;
   } else if (props.field === 'coupon' || props.field === 'price') {
-    return `$${props.value}`;
+    return `$${ props.value }`;
   } else if (props.field === 'badge') {
-    return badgeMap[props.value];
+    const badgeValue = Number(props.value);
+    return badgeMap[badgeValue] || ''; // 添加默认值以处理无效的 badge 值
   }
   return props.value;
 });
@@ -34,16 +35,18 @@ const formatedVal = computed(() => {
   <div>
     <template v-if="props.field==='imgs'">
       <span v-for="(img, index) in loadJsonString(props.value)" :key="index">
-        <el-tooltip placement="bottom-start" effect="light">
+        <el-tooltip effect="light" placement="bottom-start">
           <el-image
-              style="width: 40px; margin-right: 5px;"
-              fit="fill"
               :src="`https://m.media-amazon.com/images/I/${img}.jpg`"
+              fit="fill"
+              lazy
+              style="width: 40px; margin-right: 5px;"
           />
           <template #content>
             <el-image
-                style="width: 250px"
                 :src="`https://m.media-amazon.com/images/I/${img}.jpg`"
+                lazy
+                style="width: 250px"
             />
           </template>
         </el-tooltip>

src/views/product-manage/historical-detail/component/DataTable.vue

@@ -61,7 +61,7 @@ const gridOptions: any = reactive({
   data: ''
 });
 
-const tagMap = {
+const tagMap: any = {
   price: { label: '价格', color: 'primary' },
   discount: { label: '折扣', color: 'primary' },
   coupon: { label: '优惠券', color: 'primary' },
@@ -125,7 +125,7 @@ function handleRefresh() {
       </template>
       <!-- 自定义列插槽 -->
       <template #create_datetime="{row}">
-        {{ row.create_datetime }}
+        {{ row.create_datetime || '--' }}
       </template>
       <template #field="{ row }">
         <el-tag v-if="tagMap[row.field]" :type="tagMap[row.field].color" effect="plain">