feat: PODUS和工厂订单new缩略图优化

2a6c0d71 · wusiyi · 3e0881e1 · 2a6c0d71 · 2a6c0d71 · 2a6c0d71
Commit 2a6c0d71 authored Jun 29, 2026 by wusiyi
8 changed files
--- a/components.d.ts
+++ b/components.d.ts
@@ -23,7 +23,6 @@ declare module 'vue' {
    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
    ElDialog: typeof import('element-plus/es')['ElDialog']
-    ElDivider: typeof import('element-plus/es')['ElDivider']
    ElDrawer: typeof import('element-plus/es')['ElDrawer']
    ElDropdown: typeof import('element-plus/es')['ElDropdown']
    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
@@ -74,6 +73,7 @@ declare module 'vue' {
    SplitDiv: typeof import('./src/components/splitDiv/splitDiv.vue')['default']
    'Switch ': typeof import('./src/components/Form/Switch .vue')['default']
    TableView: typeof import('./src/components/TableView.vue')['default']
+    Thumbnail: typeof import('./src/components/Thumbnail.vue')['default']
    UploadBox: typeof import('./src/components/uploadBox.vue')['default']
    UploadExcel: typeof import('./src/components/UploadExcel.vue')['default']
    UploadImage: typeof import('./src/components/UploadImage.vue')['default']

--- a/src/components/CommonCard.vue
+++ b/src/components/CommonCard.vue
@@ -3,7 +3,7 @@
    <div class="commodity-card-image">
      <div class="before" :style="{ paddingTop: paddingTop }"></div>
      <div class="image">
-        <img :src="mainImageSrc" />
+        <Thumbnail :src="mainImageSrc" width="300" height="300" />
      </div>
      <!-- 左上角 -->
      <div class="img_top_left">
@@ -224,7 +224,7 @@ const copy = (text: string) => {
 .image {
  position: absolute;
  inset: 0;
-  img {
+  :deep(.el-image) {
    width: 100%;
    height: 100%;
    object-fit: contain;

--- a/src/components/Thumbnail.vue
+++ b/src/components/Thumbnail.vue
+<template>
+  <el-image
+    v-bind="imageBindProps"
+    :style="imageStyle"
+    :src="imageUrl"
+    loading="lazy"
+  />
+</template>
+<script setup lang="ts">
+import { omit } from 'lodash-es'
+import type { ImageProps } from 'element-plus'
+interface ThumbnailProps
+  extends Omit<Partial<ImageProps>, 'src' | 'width' | 'height' | 'style'> {
+  src: string
+  width?: string
+  height?: string
+  displayWidth?: string
+  displayHeight?: string
+}
+type ThumbnailBindProps = Omit<
+  ThumbnailProps,
+  'src' | 'width' | 'height' | 'displayWidth' | 'displayHeight'
+>
+defineOptions({ inheritAttrs: false })
+const props = withDefaults(defineProps<ThumbnailProps>(), {
+  width: '45',
+})
+const imageBindProps = computed(
+  (): Partial<ThumbnailBindProps> =>
+    omit(props, ['src', 'width', 'height', 'displayWidth', 'displayHeight']),
+)
+const displayWidth = computed(() => {
+  return props.displayWidth ?? props.width
+})
+const displayHeight = computed(() => {
+  return props.displayHeight ?? props.height ?? displayWidth.value
+})
+const imageStyle = computed(() => {
+  return {
+    width: `${displayWidth}px`,
+    height: `${displayHeight}px`,
+  }
+})
+const imageUrl = computed(() => {
+  if (props.src.includes('custom.jomalls.com')) {
+    return props.src.replace(/\.(png|jpg|jpeg)$/i, `-${props.width}.$1`)
+  } else if (props.src.includes('oss')) {
+    return (
+      props.src + `?x-oss-process=image/resize,m_fixed,w_${displayWidth.value}`
+    )
+  }
+  return props.src
+})
+</script>
--- a/src/views/order/factoryOrderNew/component/CardLayout.vue
+++ b/src/views/order/factoryOrderNew/component/CardLayout.vue
@@ -69,9 +69,10 @@
                      :title="img.title"
                      class="item-image"
                    >
-                      <el-image
+                      <Thumbnail
                        :src="img?.url"
-                        height="50"
+                        width="45"
+                        display-width="50"
                        :preview-src-list="JSON.parse(item.imageAry as string).map((i: any) => i.url)"
                        :initial-index="index"
                      />

--- a/src/views/order/factoryOrderNew/component/OperateDetailsDialog.vue
+++ b/src/views/order/factoryOrderNew/component/OperateDetailsDialog.vue
@@ -77,9 +77,10 @@
                      :title="img.title"
                      class="item-image"
                    >
-                      <el-image
+                      <Thumbnail
                        :src="img?.url"
-                        height="50"
+                        width="45"
+                        display-width="50"
                        :preview-src-list="JSON.parse(item.imageAry as string).map((i: any) => i.url)"
                      />
                    </div>

--- a/src/views/order/factoryOrderNew/index.vue
+++ b/src/views/order/factoryOrderNew/index.vue
@@ -1195,6 +1195,7 @@ import { computed, nextTick, onMounted, ref } from 'vue'
 import splitDiv from '@/components/splitDiv/splitDiv.vue'
 import TableView from '@/components/TableView.vue'
 import ResultInfo from '@/views/order/components/ResultInfo.vue'
+import Thumbnail from '@/components/Thumbnail.vue'
 import type { BaseRespData } from '@/types/api'
 import type {
  FactoryOrderNewListData,
@@ -1920,11 +1921,12 @@ const operationOrderColumns = [
      if (!list.length) {
        return (
          <div style="display:flex;gap:4px;">
-            <el-image
+            <Thumbnail
-              src={row.variantImage}
+              src={row.variantImage ?? ''}
-              style="width:50px;height:50px"
+              width="45"
-              previewSrcList={[row.variantImage ?? '']}
+              display-width="50"
              previewTeleported
+              previewSrcList={[row.variantImage ?? '']}
            />
          </div>
        )
@@ -1933,14 +1935,15 @@ const operationOrderColumns = [
      return (
        <div style="display:flex;gap:4px;">
          {list.map((img, idx) => (
-            <el-image
+            <Thumbnail
+              title={img.title ?? ''}
              key={idx}
              src={img.url}
+              width="45"
+              display-width="50"
+              previewTeleported
              previewSrcList={urls}
-              previewTeleported={true}
              initialIndex={idx}
-              style="width:50px;height:50px"
-              title={img.title ?? ''}
            />
          ))}
        </div>
@@ -2027,11 +2030,12 @@ const baseProductColumns = computed(() => [
    render: (row: ProductListData) => {
      return (
        <div>
-          <el-image
+          <Thumbnail
-            src={row?.variantImage ?? ''}
+            src={row.variantImage ?? ''}
-            previewSrcList={[row?.variantImage ?? '']}
+            width="45"
-            style="width: 50px; height: 50px"
+            display-width="50"
            previewTeleported
+            previewSrcList={[row?.variantImage ?? '']}
          />
        </div>
      )

--- a/src/views/order/podUs/PodMakeOrder.vue
+++ b/src/views/order/podUs/PodMakeOrder.vue
@@ -152,7 +152,12 @@
                  style="cursor: pointer; margin-right: 5px; flex: 1"
                  @click.stop="handleCurrentChange(img.url)"
                >
-                  <img v-if="img.url" :src="img.url" alt="" />
+                  <Thumbnail
+                    v-if="img.url"
+                    :src="img.url"
+                    width="300"
+                    display-width="220"
+                  />
                </div>
              </div>
            </template>

--- a/src/views/order/podUs/index.vue
+++ b/src/views/order/podUs/index.vue
@@ -982,7 +982,10 @@
          </span>
        </ElFormItem>
        <ElFormItem
-          v-if="['WAIT_TRACK'].includes(status) && [1,2,5].includes(waitTrackStatus)"
+          v-if="
+            ['WAIT_TRACK'].includes(status) &&
+            [1, 2, 5].includes(waitTrackStatus)
+          "
        >
          <span class="item">
            <ElButton type="success" @click="reissueOrder">补发</ElButton>
@@ -1255,11 +1258,12 @@
                        :key="img"
                        style="text-align: center"
                      >
-                        <img
+                        <Thumbnail
                          :src="img.url"
+                          width="300"
+                          display-width="100"
                          alt="商品图片"
-                          style="cursor: pointer"
+                          :preview-src-list="[img.url]"
-                          @click="handlePictureCardPreview(img.url)"
                        />
                        <div
                          v-if="item.customizedQuantity"
@@ -1275,15 +1279,13 @@
                      </div>
                    </template>
                    <template v-else>
-                      <img
+                      <Thumbnail
                        :src="getNewImageFn(item.variantImage)"
+                        width="300"
+                        display-width="100"
                        alt="商品图片"
-                        style="cursor: pointer"
+                        :preview-src-list="
-                        @click="
+                          getVariantImagePreviewSrcList(item.variantImage)
-                          handlePictureCardPreview(
-                            item.variantImage,
-                            'variantImage',
-                          )
                        "
                      />
                      <div class="triangle-container-wrap">
@@ -2385,10 +2387,11 @@
                      class="item-image"
                      @mousemove="handleChangeImages(item, cardItem)"
                    >
-                      <img
+                      <Thumbnail
                        :src="item?.url"
-                        height="28"
+                        width="45"
-                        @click="handlePictureCardPreview(item?.url)"
+                        display-width="28"
+                        :preview-src-list="[item.url]"
                      />
                    </div>
                  </div>
@@ -3042,9 +3045,9 @@
      </span>
    </template>
  </ElDialog>
-  <el-dialog v-model="dialogVisible" width="35%">
+  <!-- <el-dialog v-model="dialogVisible" width="35%">
    <img :src="dialogImageUrl" alt="商品预览图片" />
-  </el-dialog>
+  </el-dialog> -->
  <el-dialog v-model="timeLineVisible" title="物流轨迹" width="1000px">
    <el-timeline>
      <el-timeline-item
@@ -3153,7 +3156,7 @@
  <ReissueOrderComponent
    ref="reissueOrderRef"
    :selection="selection"
-    :trackRegisterSelect="waitTrackStatus"
+    :track-register-select="waitTrackStatus"
    @success="handleSuccess"
  ></ReissueOrderComponent>
@@ -6585,13 +6588,13 @@ function getProductMarkt(productMark: string) {
 const dialogVisible = ref(false)
 const dialogImageUrl = ref('')
-const handlePictureCardPreview = (fileUrl: string, type?: string) => {
+// const handlePictureCardPreview = (fileUrl: string, type?: string) => {
-  dialogImageUrl.value = fileUrl
+//   dialogImageUrl.value = fileUrl
-  if (type == 'variantImage')
+//   if (type == 'variantImage')
-    dialogImageUrl.value = getNewImageFn(fileUrl) as string
+//     dialogImageUrl.value = getNewImageFn(fileUrl) as string
-  dialogVisible.value = true
+//   dialogVisible.value = true
-}
+// }
 // 全局 loading 改为每行 loading map
 const reComposingLoadingMap = reactive<{ [key: number]: boolean }>({})
@@ -6907,6 +6910,12 @@ const getNewImageFn = (img: string) => {
  }
 }
+const getVariantImagePreviewSrcList = (variantImage?: string) => {
+  if (!variantImage) return []
+  const url = getNewImageFn(variantImage)
+  return url ? [url] : []
+}
 useRouter().beforeEach((to, from, next) => {
  handleBeforeRouteLeave(to, from, next)
 })