From f9445ba4eefd13e68c6837dfa045e7aec93092b8 Mon Sep 17 00:00:00 2001
From: wny <colonD.wny@gmail.com>
Date: Fri, 16 Mar 2018 22:03:42 +0800
Subject: [PATCH] add sku-header-price slot (#705)

* [new feature] add sku-header-price slot
---
 docs/demos/views/sku.vue              |  5 +++++
 docs/markdown/en-US/sku.md            |  7 +++++++
 docs/markdown/zh-CN/sku.md            |  7 +++++++
 packages/sku/Sku.vue                  | 21 +++++++++++++++++++--
 packages/sku/components/SkuHeader.vue | 16 +++-------------
 5 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/docs/demos/views/sku.vue b/docs/demos/views/sku.vue
index f0e51f1a5..e46eb8204 100644
--- a/docs/demos/views/sku.vue
+++ b/docs/demos/views/sku.vue
@@ -59,6 +59,11 @@
           @buy-clicked="onBuyClicked"
           @add-cart="onAddCartClicked"
         >
+          <template slot="sku-header-price" slot-scope="props">
+            <div class="van-sku__goods-price">
+              <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span> only!!!
+            </div>
+          </template>
           <template slot="sku-actions" slot-scope="props">
             <div class="van-sku-actions">
               <van-button bottom-action @click="onPointClicked">{{ $t('button1') }}</van-button>
diff --git a/docs/markdown/en-US/sku.md b/docs/markdown/en-US/sku.md
index b3b8c27bd..b1a5ec87d 100644
--- a/docs/markdown/en-US/sku.md
+++ b/docs/markdown/en-US/sku.md
@@ -64,6 +64,12 @@ Vue.use(Sku);
   @buy-clicked="onBuyClicked"
   @add-cart="onAddCartClicked"
 >
+  <!-- custom sku-header-price -->
+  <template slot="sku-header-price" slot-scope="props">
+    <div class="van-sku__goods-price">
+      <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span> only!!!
+    </div>
+  </template>
   <!-- custom sku actions -->
   <template slot="sku-actions" slot-scope="props">
     <div class="van-sku-actions">
@@ -114,6 +120,7 @@ Vue.use(Sku);
 | Name | Description | 
 |-----------|-----------|
 | sku-header | Custom header |
+| sku-header-price | Custom header price area |
 | sku-body-top | Custom content before sku-group |
 | sku-group | Custom sku |
 | extra-sku-group | Extra custom content |
diff --git a/docs/markdown/zh-CN/sku.md b/docs/markdown/zh-CN/sku.md
index 760013ea4..b3a7a6bb5 100644
--- a/docs/markdown/zh-CN/sku.md
+++ b/docs/markdown/zh-CN/sku.md
@@ -64,6 +64,12 @@ Vue.use(Sku);
   @buy-clicked="onBuyClicked"
   @add-cart="onAddCartClicked"
 >
+  <!-- 自定义 sku-header-price -->
+  <template slot="sku-header-price" slot-scope="props">
+    <div class="van-sku__goods-price">
+      <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span> only!!!
+    </div>
+  </template>
   <!-- 自定义 sku actions -->
   <template slot="sku-actions" slot-scope="props">
     <div class="van-sku-actions">
@@ -116,6 +122,7 @@ Sku 组件默认划分好了若干区块，这些区块都定义成了 slot，
 | 名称 | 说明 | 
 |-----------|-----------|
 | sku-header | 商品信息展示区，包含商品图片、名称、价格等信息 |
+| sku-header-price | 自定义sku头部价格展示 |
 | sku-body-top | sku展示区上方的slot，无默认展示内容，按需使用 |
 | sku-group | 商品sku展示区 |
 | extra-sku-group | 额外商品sku展示区，一般用不到 |
diff --git a/packages/sku/Sku.vue b/packages/sku/Sku.vue
index 673c06c65..6d9fb9b49 100644
--- a/packages/sku/Sku.vue
+++ b/packages/sku/Sku.vue
@@ -17,10 +17,19 @@
       <sku-header
         :sku-event-bus="skuEventBus"
         :selected-sku="selectedSku"
-        :selected-sku-comb="selectedSkuComb"
         :goods="goods"
         :sku="sku"
-      />
+      >
+        <slot
+          name="sku-header-price"
+          :price="price"
+          :selected-sku-comb="selectedSkuComb"
+        >
+          <div class="van-sku__goods-price">
+            <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ price }}</span>
+          </div>
+        </slot>
+      </sku-header>
     </slot>
     <div class="van-sku-body" :style="bodyStyle">
       <!-- sku-body-top -->
@@ -251,6 +260,14 @@ export default create({
       return null;
     },
 
+    price() {
+      if (this.selectedSkuComb) {
+        return (this.selectedSkuComb.price / 100).toFixed(2);
+      }
+      // sku.price是一个格式化好的价格区间
+      return this.sku.price;
+    },
+
     skuTree() {
       return this.sku.tree || [];
     }
diff --git a/packages/sku/components/SkuHeader.vue b/packages/sku/components/SkuHeader.vue
index 24d592a72..6171a783a 100644
--- a/packages/sku/components/SkuHeader.vue
+++ b/packages/sku/components/SkuHeader.vue
@@ -5,9 +5,8 @@
     </div>
     <div class="van-sku-header__goods-info">
       <div class="van-sku__goods-name van-ellipsis">{{ goods.title }}</div>
-      <div class="van-sku__goods-price">
-        <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ price }}</span>
-      </div>
+      <!-- price display area -->
+      <slot />
       <icon name="close" class="van-sku__close-icon" @click="skuEventBus.$emit('sku:close')" />
     </div>
   </div>
@@ -23,8 +22,7 @@ export default create({
     sku: Object,
     goods: Object,
     skuEventBus: Object,
-    selectedSku: Object,
-    selectedSkuComb: Object
+    selectedSku: Object
   },
 
   computed: {
@@ -33,14 +31,6 @@ export default create({
       const skuImg = this.getSkuImg(s1Id);
       // 优先使用选中sku的图片
       return skuImg || this.goods.picture;
-    },
-
-    price() {
-      if (this.selectedSkuComb) {
-        return (this.selectedSkuComb.price / 100).toFixed(2);
-      }
-      // sku.price是一个格式化好的价格区间
-      return this.sku.price;
     }
   },