From de606e6fc77053549abbca4d3283fdf0ff389adf Mon Sep 17 00:00:00 2001
From: codpoe <codpoe.me@gmail.com>
Date: Thu, 25 Jul 2019 14:04:40 +0800
Subject: [PATCH] [new feature] Sku: add sku-header-origin-price slot and
 update price-num style (#3958)

---
 src/sku/README.md       |  2 ++
 src/sku/README.zh-CN.md |  2 ++
 src/sku/Sku.js          | 38 +++++++++++++++++++-------------------
 src/sku/index.less      |  3 ++-
 4 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/src/sku/README.md b/src/sku/README.md
index f7c6d500a..c7f18adb5 100644
--- a/src/sku/README.md
+++ b/src/sku/README.md
@@ -164,6 +164,8 @@ Use ref to get sku instance and call instance methods
 |------|------|
 | sku-header | Custom header |
 | sku-header-price | Custom header price area |
+| sku-header-origin-price | Custom header origin price area |
+| sku-header-extra | Extra header area |
 | sku-body-top | Custom content before sku-group |
 | sku-group | Custom sku |
 | extra-sku-group | Extra custom content |
diff --git a/src/sku/README.zh-CN.md b/src/sku/README.zh-CN.md
index 9a906507f..3f4ff7c94 100644
--- a/src/sku/README.zh-CN.md
+++ b/src/sku/README.zh-CN.md
@@ -170,6 +170,8 @@ Sku 组件默认划分好了若干区块，这些区块都定义成了插槽，
 |------|------|
 | sku-header | 商品信息展示区，包含商品图片、名称、价格等信息 |
 | sku-header-price | 自定义 sku 头部价格展示 |
+| sku-header-origin-price | 自定义 sku 头部原价展示 |
+| sku-header-extra | 额外 sku 头部区域 |
 | sku-body-top |  sku 展示区上方的内容，无默认展示内容，按需使用 |
 | sku-group | 商品 sku 展示区 |
 | extra-sku-group | 额外商品 sku 展示区，一般用不到 |
diff --git a/src/sku/Sku.js b/src/sku/Sku.js
index 09e89b426..a68ffb999 100644
--- a/src/sku/Sku.js
+++ b/src/sku/Sku.js
@@ -458,27 +458,27 @@ export default createComponent({
     const Header = slots('sku-header') || (
       <SkuHeader sku={sku} goods={goods} skuEventBus={skuEventBus} selectedSku={selectedSku}>
         {slots('sku-header-price') || (
-          <div>
-            <div class="van-sku__goods-price">
-              <span class="van-sku__price-symbol">￥</span>
-              <span class="van-sku__price-num">{price}</span>
-              {this.priceTag && <span class="van-sku__price-tag">{this.priceTag}</span>}
-            </div>
-            {originPrice && (
-              <SkuHeaderItem>原价 ￥{originPrice}</SkuHeaderItem>
-            )}
-            {!this.hideStock && (
-              <SkuHeaderItem>
-                <span class="van-sku__stock">{this.stockText}</span>
-                {!hideQuotaText && this.quotaText && <span class="van-sku__quota">({this.quotaText})</span>}
-              </SkuHeaderItem>
-            )}
-            {this.hasSku && !this.hideSelectedText && (
-              <SkuHeaderItem>{this.selectedText}</SkuHeaderItem>
-            )}
-            {slots('sku-header-extra')}
+          <div class="van-sku__goods-price">
+            <span class="van-sku__price-symbol">￥</span>
+            <span class="van-sku__price-num">{price}</span>
+            {this.priceTag && <span class="van-sku__price-tag">{this.priceTag}</span>}
           </div>
         )}
+        {slots('sku-header-origin-price') || (
+          originPrice && (
+            <SkuHeaderItem>原价 ￥{originPrice}</SkuHeaderItem>
+          )
+        )}
+        {!this.hideStock && (
+          <SkuHeaderItem>
+            <span class="van-sku__stock">{this.stockText}</span>
+            {!hideQuotaText && this.quotaText && <span class="van-sku__quota">({this.quotaText})</span>}
+          </SkuHeaderItem>
+        )}
+        {this.hasSku && !this.hideSelectedText && (
+          <SkuHeaderItem>{this.selectedText}</SkuHeaderItem>
+        )}
+        {slots('sku-header-extra')}
       </SkuHeader>
     );
 
diff --git a/src/sku/index.less b/src/sku/index.less
index 3def8e83e..6ec01e332 100644
--- a/src/sku/index.less
+++ b/src/sku/index.less
@@ -65,13 +65,14 @@
 
   &__price-symbol {
     font-size: @font-size-lg;
-    vertical-align: text-bottom;
+    vertical-align: middle;
   }
 
   &__price-num {
     font-weight: 500;
     font-size: 22px;
     vertical-align: middle;
+    word-break: break-all;
   }
 
   &__goods-price {