feat(Sku): add stockThreshold prop (#4444)

src/sku/README.md

@@ -126,6 +126,7 @@ export default {
 | hide-stock | Whether to hide stock | *boolean* | `false` | - |
 | hide-quota-text | Whether to hide quota text | *boolean* | `false` | - |
 | hide-selected-text | Whether to hide selected text | *boolean* | `false` | - |
+| stock-threshold | stock threshold | *boolean* | `50` | - |
 | show-add-cart-btn | Whether to show cart button | *boolean* | `true` | - |
 | buy-text | Buy button text | *string* | - | - | - |
 | add-cart-text | Add cart button text | *string* | - | - | - |

src/sku/README.zh-CN.md

@@ -128,6 +128,7 @@ export default {
 | hide-stock | 是否显示商品剩余库存 | *boolean* | `false` | - |
 | hide-quota-text | 是否显示限购提示 | *boolean* | `false` | - |
 | hide-selected-text | 是否隐藏已选提示 | *boolean* | `false` | - |
+| stock-threshold | 库存阈值。低于这个值会把库存数高亮显示 | *boolean* | `50` | - |
 | show-add-cart-btn | 是否显示加入购物车按钮 | *boolean* | `true` | - |
 | buy-text | 购买按钮文字 | *string* | `立即购买` | - |
 | add-cart-text | 加入购物车按钮文字 | *string* | `加入购物车` | - |

src/sku/Sku.js

@@ -14,8 +14,7 @@ import { isAllSelected, isSkuChoosable, getSkuComb, getSelectedSkuValues } from
 import { LIMIT_TYPE, UNSELECTED_SKU_VALUE_ID } from './constants';
 
 const namespace = createNamespace('sku');
-const createComponent = namespace[0];
+const [createComponent, bem, t] = namespace;
-const t = namespace[2];
 const { QUOTA_LIMIT } = LIMIT_TYPE;
 
 export default createComponent({
@@ -50,6 +49,10 @@ export default createComponent({
       type: Object,
       default: () => ({})
     },
+    stockThreshold: {
+      type: Number,
+      default: 50,
+    },
     showSoldoutSku: {
       type: Boolean,
       default: true
@@ -224,7 +227,13 @@ export default createComponent({
       const { stockFormatter } = this.customStepperConfig;
       if (stockFormatter) return stockFormatter(this.stock);
 
-      return t('stock', this.stock);
+      return [
+        `${t('stock')} `,
+        <span class={bem('stock-num', { highlight: this.stock < this.stockThreshold })}>
+          {this.stock}
+        </span>,
+        ` ${t('stockUnit')}`
+      ];
     },
 
     quotaText() {

src/sku/index.less

@@ -213,6 +213,10 @@
     margin-right: @padding-xs;
     color: @gray-dark;
     font-size: @font-size-sm;
+
+    &-num--highlight {
+      color: @red;
+    }
   }
 
   &__quota {

src/sku/lang.ts

@@ -12,7 +12,8 @@ export default {
       originPrice: '原价',
       minusTip: '至少选择一件',
       unavailable: '商品已经无法购买啦',
-      stock: (stock: number) => `剩余 ${stock}件`,
+      stock: '剩余',
+      stockUnit: '件',
       quotaLimit: (quota: number) => `每人限购${quota}件`,
       quotaCount: (count: number) => `你已购买${count}件`
     },