From 44a08889f35e70022404f721c4a307071ea1cff4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Wed, 6 Sep 2017 09:47:35 +0800
Subject: [PATCH] Card: support num and price props

---
 docs/examples-docs/card.md | 38 ++++++++++++++++++++++----------------
 packages/card/index.vue    | 18 ++++++++++++++----
 2 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/docs/examples-docs/card.md b/docs/examples-docs/card.md
index 2c586a78a..99719d7d0 100644
--- a/docs/examples-docs/card.md
+++ b/docs/examples-docs/card.md
@@ -23,25 +23,29 @@ Vue.component(Card.name, Card);
 
 :::demo 基础用法
 ```html
-<van-card title="商品名称" desc="商品描述" :thumb="imageURL" />
+<van-card
+  title="商品名称"
+  desc="商品描述"
+  num="2"
+  price="2.00"
+  :thumb="imageURL"
+/>
 ```
 :::
 
 #### 高级用法
-
-可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。
+可以通过具名`slot`添加定制内容
 
 :::demo 高级用法
 ```html
-<van-card :thumb="imageURL">
-  <div class="van-card__row" slot="title">
-    <h4 class="van-card__title">商品名称</h4>
-    <span class="van-card__price">¥ 2.00</span>
-  </div>
-  <div class="van-card__row" slot="desc">
-    <span class="van-card__num">x 2</span>
-  </div>
-  <div class="van-card__footer" slot="footer">
+<van-card
+  title="商品名称"
+  desc="商品描述"  
+  num="2"
+  price="2.00"
+  :thumb="imageURL"
+>
+  <div slot="footer">
     <van-button size="mini">按钮一</van-button>
     <van-button size="mini">按钮二</van-button>
   </div>
@@ -51,11 +55,13 @@ Vue.component(Card.name, Card);
 
 ### API
 
-| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
-| thumb | 左侧图片 | `String`  | - | - |
-| title | 标题 | `String`  | - | - |
-| desc | 描述 | `String`  | - | - |
+| thumb | 左侧图片 | `String` | - | - |
+| title | 标题 | `String` | - | - |
+| desc | 描述 | `String` | - | - |
+| num | 商品数量 | `String | Number` | - | - |
+| price | 商品价格 | `String | Number` | - | - |
 | centered | 内容是否垂直居中 | `String`  | `false` | - |
 
 ### Slot
diff --git a/packages/card/index.vue b/packages/card/index.vue
index 387b8f9cc..69f93dbb1 100644
--- a/packages/card/index.vue
+++ b/packages/card/index.vue
@@ -7,14 +7,22 @@
     </div>
     <div class="van-card__content">
       <slot name="title">
-        <h4 v-text="title" class="van-card__title"></h4>
+        <div class="van-card__row" v-if="title || price !== undefined">
+          <h4 v-if="title" class="van-card__title">{{ title }}</h4>
+          <p v-if="price !== undefined" class="van-card__price">¥ {{ price }}</p>
+        </div>
       </slot>
       <slot name="desc">
-        <p v-if="desc" v-text="desc" class="van-card__desc"></p>
+        <div class="van-card__row" v-if="desc || num !== undefined">
+          <p v-if="desc" class="van-card__desc">{{ desc }}</p>
+          <p v-if="num !== undefined" class="van-card__num">x {{ num }}</p>
+        </div>
       </slot>
       <slot name="tags"></slot>
     </div>
-    <slot name="footer"></slot>
+    <div class="van-card__footer" v-if="$slots.footer">
+      <slot name="footer"></slot>      
+    </div>
   </div>
 </template>
 
@@ -26,7 +34,9 @@ export default {
     thumb: String,
     title: String,
     desc: String,
-    centered: Boolean
+    num: [Number, String],
+    centered: Boolean,
+    price: [Number, String]
   }
 };
 </script>