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,77 +109,114 @@
       margin-bottom: 0;
     }
 
-    &__picture {
+    &__item,
+    &__image-item {
+      position: relative;
+      overflow: hidden;
+      color: @text-color;
+      border-radius: @border-radius-md;
+      cursor: pointer;
+
+      &::before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: @sku-item-background-color;
+        content: '';
+      }
+
+      &--active {
+        color: @red;
+
+        &::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 {
-        position: relative;
+        display: flex;
-        flex: 0 0 110px;
+        flex-direction: column;
         width: 110px;
-        height: 150px;
         margin: 0 4px 6px 0;
-        color: @text-color;
+        border: 1px solid transparent;
-        border: 1px solid rgba(0, 0, 0, 0);
-        border-radius: @border-radius-md;
-        cursor: pointer;
 
-        &::before {
+        &:last-child {
-          position: absolute;
+          margin-right: 0;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          background: @sku-item-background-color;
-          border-radius: @border-radius-md;
-          content: '';
         }
 
         &-img {
-          position: absolute;
+          width: 100%;
-          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;
+          position: relative;
-          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;
+
+          span {
+            word-wrap: break-word;
+          }
         }
 
         &--active {
-          color: @red;
+          border-color: currentColor;
-          border: 1px solid currentColor;
-
-          &::before {
-            background: currentColor;
-            opacity: 0.1;
-          }
         }
 
         &--disabled {
@@ -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;