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

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']
@@ -55,7 +54,6 @@ declare module 'vue' {
     ElTag: typeof import('element-plus/es')['ElTag']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
-    ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
     ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
@@ -76,6 +74,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']

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;

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>

src/views/order/factoryOrderNew/component/CardLayout.vue

@@ -62,17 +62,23 @@
             <template #images>
               <div class="flex-between">
                 <div class="images-position">
-                  <div v-if="parseImageAry(item.imageAry).length" class="images-container">
+                  <div
+                    v-if="parseImageAry(item.imageAry).length"
+                    class="images-container"
+                  >
                     <div
                       v-for="(img, index) in parseImageAry(item.imageAry)"
                       :key="index"
                       :title="img.title"
                       class="item-image"
                     >
-                      <el-image
-                        :src="img.url"
-                        height="50"
-                        :preview-src-list="parseImageAry(item.imageAry).map((i) => i.url)"
+                      <Thumbnail
+                        :src="img?.url"
+                        width="45"
+                        display-width="50"
+                        :preview-src-list="
+                          parseImageAry(item.imageAry).map((i) => i.url)
+                        "
                         :initial-index="index"
                       />
                     </div>

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>

src/views/order/factoryOrderNew/index.vue

@@ -1236,6 +1236,7 @@ import splitDiv from '@/components/splitDiv/splitDiv.vue'
 import TableView from '@/components/TableView.vue'
 import RightClickMenu from '@/components/RightClickMenu.vue'
 import ResultInfo from '@/views/order/components/ResultInfo.vue'
+import Thumbnail from '@/components/Thumbnail.vue'
 import type { BaseRespData } from '@/types/api'
 import type {
   FactoryOrderNewListData,
@@ -2024,11 +2025,12 @@ const operationOrderColumns = [
       if (!list.length) {
         return (
           <div style="display:flex;gap:4px;">
-            <el-image
-              src={row.variantImage}
-              style="width:50px;height:50px"
-              previewSrcList={[row.variantImage ?? '']}
+            <Thumbnail
+              src={row.variantImage ?? ''}
+              width="45"
+              display-width="50"
               previewTeleported
+              previewSrcList={[row.variantImage ?? '']}
             />
           </div>
         )
@@ -2037,14 +2039,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>
@@ -2131,11 +2134,12 @@ const baseProductColumns = computed(() => [
     render: (row: ProductListData) => {
       return (
         <div>
-          <el-image
-            src={row?.variantImage ?? ''}
-            previewSrcList={[row?.variantImage ?? '']}
-            style="width: 50px; height: 50px"
+          <Thumbnail
+            src={row.variantImage ?? ''}
+            width="45"
+            display-width="50"
             previewTeleported
+            previewSrcList={[row?.variantImage ?? '']}
           />
         </div>
       )

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>

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"
-                          @click="handlePictureCardPreview(img.url)"
+                          :preview-src-list="[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"
-                        @click="
-                          handlePictureCardPreview(
-                            item.variantImage,
-                            'variantImage',
-                          )
+                        :preview-src-list="
+                          getVariantImagePreviewSrcList(item.variantImage)
                         "
                       />
                       <div class="triangle-container-wrap">
@@ -2385,10 +2387,11 @@
                       class="item-image"
                       @mousemove="handleChangeImages(item, cardItem)"
                     >
-                      <img
+                      <Thumbnail
                         :src="item?.url"
-                        height="28"
-                        @click="handlePictureCardPreview(item?.url)"
+                        width="45"
+                        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) => {
-  dialogImageUrl.value = fileUrl
-  if (type == 'variantImage')
-    dialogImageUrl.value = getNewImageFn(fileUrl) as string
+// const handlePictureCardPreview = (fileUrl: string, type?: string) => {
+//   dialogImageUrl.value = fileUrl
+//   if (type == 'variantImage')
+//     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)
 })