[new feature] Sku: add sku-header-origin-price slot and update price-num style (#3958)

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 |

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 展示区，一般用不到 |

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>
     );
 

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 {