style(Sku): refactor image item style

src/sku/components/SkuRow.js

@@ -83,7 +83,7 @@ export default createComponent({
             <div class={bem('row')} ref="row">
               {top}
             </div>
-            {bottom.length && <div class={bem('row')}>{bottom}</div>}
+            {bottom.length ? <div class={bem('row')}>{bottom}</div> : null}
           </div>
         );
       }

src/sku/components/SkuRowItem.js

@@ -1,6 +1,7 @@
 import { bem } from './SkuRow';
 import { createNamespace } from '../../utils';
 import { isSkuChoosable } from '../utils/sku-helper';
+import Image from '../../image';
 
 const [createComponent] = createNamespace('sku-row-item');
 
@@ -51,23 +52,22 @@ export default createComponent({
     },
 
     genImage(classPrefix) {
-      const { imgUrl } = this;
+      if (this.imgUrl) {
-
+        return (
-      if (!imgUrl) {
+          <Image
-        return;
+            fit="cover"
+            src={this.imgUrl}
+            class={`${classPrefix}-img`}
+            lazy-load={this.lazyLoad}
+          />
+        );
       }
-
-      if (this.largeImageMode && this.lazyLoad) {
-        return <img class={`${classPrefix}-img`} src={imgUrl} vLazy={imgUrl} />;
-      }
-
-      return <img class={`${classPrefix}-img`} src={imgUrl} />;
     },
   },
 
   render() {
     const choosed = this.skuValue.id === this.selectedSku[this.skuKeyStr];
-    const classPrefix = this.largeImageMode ? bem('picture-item') : bem('item');
+    const classPrefix = this.largeImageMode ? bem('image-item') : bem('item');
 
     return (
       <span
@@ -78,6 +78,16 @@ export default createComponent({
         ]}
         onClick={this.onSelect}
       >
+        {this.genImage(classPrefix)}
+        <div class={`${classPrefix}-name`}>
+          {this.largeImageMode ? (
+            <span class={{ 'van-multi-ellipsis--l2': this.largeImageMode }}>
+              {this.skuValue.name}
+            </span>
+          ) : (
+            this.skuValue.name
+          )}
+        </div>
         {this.largeImageMode && (
           <img
             class={`${classPrefix}-img-icon`}
@@ -85,12 +95,6 @@ export default createComponent({
             onClick={this.onPreviewImg}
           />
         )}
-        {this.genImage(classPrefix)}
-        <div class={`${classPrefix}-name`}>
-          <span class={this.largeImageMode ? 'van-multi-ellipsis--l2' : ''}>
-            {this.skuValue.name}
-          </span>
-        </div>
       </span>
     );
   },

src/sku/index.less

@@ -109,17 +109,11 @@
       margin-bottom: 0;
     }
 
-    &__picture {
+    &__item,
-      margin-right: 0;
+    &__image-item {
-
-      &-item {
       position: relative;
-        flex: 0 0 110px;
+      overflow: hidden;
-        width: 110px;
-        height: 150px;
-        margin: 0 4px 6px 0;
       color: @text-color;
-        border: 1px solid rgba(0, 0, 0, 0);
       border-radius: @border-radius-md;
       cursor: pointer;
 
@@ -130,57 +124,100 @@
         width: 100%;
         height: 100%;
         background: @sku-item-background-color;
-          border-radius: @border-radius-md;
         content: '';
       }
 
-        &-img {
-          position: absolute;
-          top: 0;
-          left: 0;
-          z-index: 1;
-          display: block;
-          width: 110px;
-          height: 110px;
-          object-fit: cover;
-          border-radius: @border-radius-md @border-radius-md 0 0;
-
-          &-icon {
-            position: absolute;
-            top: 0;
-            right: 0;
-            z-index: 3;
-            width: 18px;
-            height: 19px;
-            opacity: 1 !important;
-          }
-        }
-
-        &-name {
-          position: absolute;
-          top: 110px;
-          left: 0;
-          z-index: 1;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          box-sizing: border-box;
-          width: 110px;
-          height: 40px;
-          padding: @padding-base;
-          font-size: 12px;
-          line-height: 16px;
-        }
-
       &--active {
         color: @red;
-          border: 1px solid currentColor;
 
         &::before {
           background: currentColor;
           opacity: 0.1;
         }
       }
+    }
+
+    &__item {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 40px;
+      margin: 0 @padding-sm @padding-sm 0;
+      font-size: 13px;
+      line-height: 16px;
+      vertical-align: middle;
+
+      &-img {
+        z-index: 1;
+        width: 24px;
+        height: 24px;
+        margin: 4px 0 4px 4px;
+        object-fit: cover;
+        border-radius: @border-radius-sm;
+      }
+
+      &-name {
+        z-index: 1;
+        padding: @padding-xs;
+      }
+
+      &--disabled {
+        color: @gray-5;
+        background: @active-color;
+        cursor: not-allowed;
+
+        .van-sku-row__item-img {
+          opacity: 0.3;
+        }
+      }
+    }
+
+    &__image {
+      margin-right: 0;
+
+      &-item {
+        display: flex;
+        flex-direction: column;
+        width: 110px;
+        margin: 0 4px 6px 0;
+        border: 1px solid transparent;
+
+        &:last-child {
+          margin-right: 0;
+        }
+
+        &-img {
+          width: 100%;
+          height: 110px;
+
+          &-icon {
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 18px;
+            height: 19px;
+          }
+        }
+
+        &-name {
+          position: relative;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          box-sizing: border-box;
+          height: 40px;
+          padding: @padding-base;
+          font-size: 12px;
+          line-height: 16px;
+
+          span {
+            word-wrap: break-word;
+          }
+        }
+
+        &--active {
+          border-color: currentColor;
+        }
 
         &--disabled {
           color: @gray-5;
@@ -203,65 +240,6 @@
       color: @gray-6;
     }
 
-    &__item {
-      position: relative;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      min-width: 40px;
-      margin: 0 @padding-sm @padding-sm 0;
-      overflow: hidden;
-      color: @text-color;
-      font-size: 13px;
-      line-height: 16px;
-      vertical-align: middle;
-      border-radius: @border-radius-md;
-      cursor: pointer;
-
-      &::before {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: @sku-item-background-color;
-        content: '';
-      }
-
-      &-img {
-        z-index: 1;
-        width: 24px;
-        height: 24px;
-        margin: 4px 0 4px 4px;
-        object-fit: cover;
-        border-radius: @border-radius-sm;
-      }
-
-      &-name {
-        z-index: 1;
-        padding: @padding-xs;
-      }
-
-      &--active {
-        color: @red;
-
-        &::before {
-          background: currentColor;
-          opacity: 0.1;
-        }
-      }
-
-      &--disabled {
-        color: @gray-5;
-        background: @active-color;
-        cursor: not-allowed;
-
-        .van-sku-row__item-img {
-          opacity: 0.3;
-        }
-      }
-    }
-
     &__scroller {
       margin: 0 -@padding-md;
       overflow-x: scroll;