[new feature] Sku 支持隐藏售罄规格 (#2472)

* [new feature] Sku 支持隐藏售罄规格

packages/sku/Sku.vue

@@ -53,7 +53,7 @@
       >
         <div
           v-if="hasSku"
-          class="van-sku-group-container van-hairline--bottom"
+          :class="skuGroupClass"
         >
           <sku-row
             v-for="(skuTreeItem, index) in skuTree"
@@ -182,6 +182,10 @@ export default create({
       type: Object,
       default: () => ({})
     },
+    showSoldoutSku: {
+      type: Boolean,
+      default: true
+    },
     showAddCartBtn: {
       type: Boolean,
       default: true
@@ -246,6 +250,16 @@ export default create({
   },
 
   computed: {
+    skuGroupClass() {
+      return [
+        'van-sku-group-container',
+        'van-hairline--bottom',
+        {
+          'van-sku-group-container--hide-soldout': !this.showSoldoutSku
+        }
+      ];
+    },
+
     bodyStyle() {
       if (this.$isServer) {
         return;
@@ -307,8 +321,9 @@ export default create({
         }
 
         treeItem.v.forEach(vItem => {
-          if (vItem.imgUrl) {
-            imageList.push(vItem.imgUrl);
+          const img = vItem.imgUrl || vItem.img_url;
+          if (img) {
+            imageList.push(img);
           }
         });
       }

packages/sku/components/SkuHeader.vue

@@ -54,14 +54,10 @@ export default create({
       // 目前skuImg都挂载在skuTree中s1那类sku上
       const treeItem = this.sku.tree.filter(item => item.k_s === 's1')[0] || {};
 
-      if (!treeItem.v) {
-        return;
-      }
+      if (!treeItem.v) return;
 
       const matchedSku = treeItem.v.filter(skuValue => skuValue.id === id)[0];
-      if (matchedSku && matchedSku.imgUrl) {
-        return matchedSku.imgUrl;
-      }
+      if (matchedSku) return (matchedSku.imgUrl || matchedSku.img_url);
     },
 
     previewImage() {

packages/sku/demo/data.js

@@ -15,6 +15,10 @@ export default {
             name: '天蓝色',
             imgUrl:
               'https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'
+          },
+          {
+            id: '1215',
+            name: '白色'
           }
         ],
         k_s: 's1',

packages/sku/demo/index.vue

@@ -1,5 +1,6 @@
 <template>
   <demo-section>
+    <!-- 基础用法 -->
     <demo-block :title="$t('basicUsage')">
       <div class="sku-container">
         <van-sku
@@ -29,6 +30,7 @@
       </div>
     </demo-block>
 
+    <!-- 自定义步进器 -->
     <demo-block :title="$t('title2')">
       <div class="sku-container">
         <van-sku
@@ -55,6 +57,34 @@
       </div>
     </demo-block>
 
+    <!-- 隐藏售罄sku -->
+    <demo-block :title="$t('hideSoldoutSku')">
+      <div class="sku-container">
+        <van-sku
+          hide-quota-text
+          v-model="showSoldout"
+          :sku="skuData.sku"
+          :goods="skuData.goods_info"
+          :goods-id="skuData.goods_id"
+          :hide-stock="skuData.sku.hide_stock"
+          :quota="skuData.quota"
+          :quota-used="skuData.quota_used"
+          :custom-stepper-config="customStepperConfig"
+          :message-config="messageConfig"
+          :show-soldout-sku="false"
+          @buy-clicked="onBuyClicked"
+          @add-cart="onAddCartClicked"
+        />
+        <van-button
+          block
+          type="primary"
+          @click="showSoldout = true"
+        >
+          {{ $t('hideSoldoutSku') }}
+        </van-button>
+      </div>
+    </demo-block>
+
     <demo-block :title="$t('advancedUsage')">
       <div class="sku-container">
         <van-sku
@@ -122,12 +152,14 @@ export default {
   i18n: {
     'zh-CN': {
       title2: '自定义步进器相关配置',
+      hideSoldoutSku: '隐藏售罄sku',
       stepperTitle: '我要买',
       button1: '积分兑换',
       button2: '买买买'
     },
     'en-US': {
       title2: 'Custom Stepper Related Config',
+      hideSoldoutSku: 'Hide Soldout Sku',
       stepperTitle: 'Stepper title',
       button1: 'Button',
       button2: 'Button'
@@ -140,6 +172,7 @@ export default {
       showBase: false,
       showCustom: false,
       showStepper: false,
+      showSoldout: false,
       closeOnClickOverlay: true,
       initialSku: {
         s1: '30349',

packages/sku/index.less

@@ -19,11 +19,6 @@
     }
   }
 
-  &-group-container {
-    margin-left: 15px;
-    padding: 12px 0 2px;
-  }
-
   /* sku header */
   &-header {
     margin-left: 15px;
@@ -85,6 +80,17 @@
     text-align: center;
   }
 
+  &-group-container {
+    margin-left: 15px;
+    padding: 12px 0 2px;
+
+    &--hide-soldout {
+      .van-sku-row__item--disabled {
+        display: none;
+      }
+    }
+  }
+
   /* sku row */
   &-row {
     margin: 0 15px 10px 0;

packages/sku/test/__snapshots__/demo.spec.js.snap

@@ -14,6 +14,12 @@ exports[`renders demo correctly 1`] = `
         自定义步进器相关配置
       </span></button></div>
   </div>
+  <div>
+    <div class="sku-container">
+      <!----> <button class="van-button van-button--primary van-button--normal van-button--block"><span class="van-button__text">
+        隐藏售罄sku
+      </span></button></div>
+  </div>
   <div>
     <div class="sku-container">
       <!----> <button class="van-button van-button--primary van-button--normal van-button--block"><span class="van-button__text">

packages/sku/zh-CN.md

@@ -102,6 +102,8 @@ Vue.use(Sku);
 | custom-stepper-config | 步进器相关自定义配置 | `Object` | `{}` | - |
 | message-config | 留言相关配置 | `Object` | `{}` | - |
 | get-container | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | `String | () => HTMLElement` | - | - |
+| initial-sku | 默认选中的sku，具体参考高级用法 | `Object` | `{}` | - |
+| show-soldout-sku | 是否展示售罄的sku，如果展示，则为置灰不可选状态，不展示则直接隐藏 | `Boolean` | `true` | - |
 
 ### Event
 
@@ -124,7 +126,7 @@ Vue.use(Sku);
 
 Sku 组件默认划分好了若干区块，这些区块都定义成了插槽，可以按需进行替换。区块顺序见下表：
 
-| 名称 | 说明 | 
+| 名称 | 说明 |
 |------|------|
 | sku-header | 商品信息展示区，包含商品图片、名称、价格等信息 |
 | sku-header-price | 自定义 sku 头部价格展示 |