refactor(Sku): header image (#6614)

src/sku/Sku.js

@@ -74,6 +74,22 @@ export default createComponent({
       type: Boolean,
       default: true,
     },
+    customStepperConfig: {
+      type: Object,
+      default: () => ({}),
+    },
+    showHeaderImage: {
+      type: Boolean,
+      default: true,
+    },
+    previewOnClickImage: {
+      type: Boolean,
+      default: true,
+    },
+    safeAreaInsetBottom: {
+      type: Boolean,
+      default: true,
+    },
     bodyOffsetTop: {
       type: Number,
       default: 200,
@@ -87,22 +103,6 @@ export default createComponent({
         uploadMaxSize: 5,
       }),
     },
-    customStepperConfig: {
-      type: Object,
-      default: () => ({}),
-    },
-    previewOnClickImage: {
-      type: Boolean,
-      default: true,
-    },
-    safeAreaInsetBottom: {
-      type: Boolean,
-      default: true,
-    },
-    showHeaderImage: {
-      type: Boolean,
-      default: true,
-    },
   },
 
   data() {

src/sku/components/SkuHeader.tsx

@@ -3,6 +3,9 @@ import { createNamespace } from '../../utils';
 import { inherit } from '../../utils/functional';
 import { BORDER_BOTTOM } from '../../utils/constant';
 
+// Components
+import Image from '../../image';
+
 // Types
 import Vue, { CreateElement, RenderContext } from 'vue/types';
 import { DefaultSlots, ScopedSlot } from '../../utils/types';
@@ -58,19 +61,23 @@ function SkuHeader(
     showHeaderImage = true,
   } = props;
 
-  const goodsImg = getSkuImg(sku, selectedSku) || goods.picture;
+  const imgUrl = getSkuImg(sku, selectedSku) || goods.picture;
 
   const previewImage = () => {
-    skuEventBus.$emit('sku:previewImage', goodsImg);
+    skuEventBus.$emit('sku:previewImage', imgUrl);
   };
 
   return (
     <div class={[bem(), BORDER_BOTTOM]} {...inherit(ctx)}>
       {showHeaderImage && (
-        <div class={bem('img-wrap')} onClick={previewImage}>
-          <img src={goodsImg} />
+        <Image
+          fit="cover"
+          src={imgUrl}
+          class={bem('img-wrap')}
+          onClick={previewImage}
+        >
           {slots['sku-header-image-extra']?.()}
-        </div>
+        </Image>
       )}
       <div class={bem('goods-info')}>{slots.default?.()}</div>
     </div>

src/sku/index.less

@@ -29,23 +29,11 @@
     margin: 0 @padding-md;
 
     &__img-wrap {
-      position: relative;
       width: 96px;
       height: 96px;
       margin: @padding-sm @padding-sm @padding-sm 0;
-      background: @background-color;
-
-      img {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        max-width: 100%;
-        max-height: 100%;
-        margin: auto;
-        border-radius: @border-radius-md;
-      }
+      overflow: hidden;
+      border-radius: @border-radius-md;
     }
 
     &__goods-info {