diff --git a/src/sku/README.md b/src/sku/README.md index a6ccd92b8..5c5b97079 100644 --- a/src/sku/README.md +++ b/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* | - | - | - | diff --git a/src/sku/README.zh-CN.md b/src/sku/README.zh-CN.md index c740c88b4..e31bf7d7c 100644 --- a/src/sku/README.zh-CN.md +++ b/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* | `加入购物车` | - | diff --git a/src/sku/Sku.js b/src/sku/Sku.js index c36ceb489..393d6f826 100644 --- a/src/sku/Sku.js +++ b/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 t = namespace[2]; +const [createComponent, bem, t] = namespace; 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')} `, + + {this.stock} + , + ` ${t('stockUnit')}` + ]; }, quotaText() { diff --git a/src/sku/index.less b/src/sku/index.less index 6bba8b17b..e9c7d5bea 100644 --- a/src/sku/index.less +++ b/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 { diff --git a/src/sku/lang.ts b/src/sku/lang.ts index b9bb19e15..216c1dd06 100644 --- a/src/sku/lang.ts +++ b/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}件` },