From e109b6d9c9a326e2f58ca77953f09677dcc1a0a5 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Wed, 26 Jun 2019 20:29:50 +0800
Subject: [PATCH] [Doc] Card: update demo (#3651)

---
 packages/card/demo/index.vue                  | 43 +++++++++++--------
 packages/card/en-US.md                        | 30 ++++++++++---
 .../card/test/__snapshots__/demo.spec.js.snap | 35 +++++++++++----
 packages/card/zh-CN.md                        | 26 +++++++++--
 4 files changed, 96 insertions(+), 38 deletions(-)

diff --git a/packages/card/demo/index.vue b/packages/card/demo/index.vue
index eeb3693a2..72cdf35f2 100644
--- a/packages/card/demo/index.vue
+++ b/packages/card/demo/index.vue
@@ -10,7 +10,7 @@
       />
     </demo-block>
 
-    <demo-block :title="$t('advancedUsage')">
+    <demo-block :title="$t('discountInfo')">
       <van-card
         num="2"
         price="2.00"
@@ -19,26 +19,37 @@
         :desc="$t('desc')"
         :title="$t('title')"
         :thumb="imageURL"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('customContent')">
+      <van-card
+        num="2"
+        price="2.00"
+        :desc="$t('desc')"
+        :title="$t('title')"
+        :thumb="imageURL"
       >
         <template #tags>
-          <div class="card__tags">
+          <div>
             <van-tag
               plain
               type="danger"
+              style="margin-right: 5px;"
             >
-              标签1
+              标签
             </van-tag>
             <van-tag
               plain
               type="danger"
             >
-              标签2
+              标签
             </van-tag>
           </div>
         </template>
 
         <template #footer>
-          <div class="card__footer">
+          <div>
             <van-button
               round
               size="mini"
@@ -62,26 +73,20 @@
 export default {
   i18n: {
     'zh-CN': {
-      title: '商品名称'
+      title: '商品名称',
+      discountInfo: '营销信息',
+      customContent: '自定义内容'
+    },
+    'en-US': {
+      discountInfo: 'Discount Info',
+      customContent: 'Custom Content'
     }
   },
 
   data() {
     return {
-      imageURL: '//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg'
+      imageURL: 'https://img.yzcdn.cn/vant/t-thirt.jpg'
     };
   }
 };
 </script>
-
-<style lang="less">
-.card__footer {
-  padding-top: 5px;
-}
-
-.card__tags {
-  .van-tag {
-    margin-right: 5px;
-  }
-}
-</style>
diff --git a/packages/card/en-US.md b/packages/card/en-US.md
index 155e1ef36..0a628e774 100644
--- a/packages/card/en-US.md
+++ b/packages/card/en-US.md
@@ -13,28 +13,44 @@ Vue.use(Card);
 
 ```html
 <van-card
-  title="Title"
-  desc="Description"
   num="2"
   price="2.00"
-  :thumb="imageURL"
+  title="Title"
+  desc="Description"
+  thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
 />
 ```
 
-### Advanced Usage
+### Discount Info
+
+```html
+<van-card
+  num="2"
+  tag="Tag"
+  price="2.00"
+  title="Title"
+  desc="Description"
+  origin-price="10.00"
+  thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
+/>
+```
+
+### Custom Content
 
 Use slot to custom content.
 
 ```html
 <van-card
   num="2"
-  tag="Tag"
   title="Title"
   desc="Description"  
   price="2.00"
-  :thumb="imageURL"
-  origin-price="10.00"
+  thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
 >
+  <div slot="tags">
+    <van-tag plain type="danger">Tag</van-tag>
+    <van-tag plain type="danger">Tag</van-tag>
+  </div>
   <div slot="footer">
     <van-button size="mini">Button</van-button>
     <van-button size="mini">Button</van-button>
diff --git a/packages/card/test/__snapshots__/demo.spec.js.snap b/packages/card/test/__snapshots__/demo.spec.js.snap
index 843001031..5e65197f3 100644
--- a/packages/card/test/__snapshots__/demo.spec.js.snap
+++ b/packages/card/test/__snapshots__/demo.spec.js.snap
@@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-card">
       <div class="van-card__header"><a class="van-card__thumb">
-          <div class="van-image" style="width: 100%; height: 100%;"><img src="//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg" class="van-image__img" style="object-fit: contain;">
+          <div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/t-thirt.jpg" class="van-image__img" style="object-fit: contain;">
             <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
                 <!----></i></div>
           </div>
@@ -24,7 +24,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-card">
       <div class="van-card__header"><a class="van-card__thumb">
-          <div class="van-image" style="width: 100%; height: 100%;"><img src="//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg" class="van-image__img" style="object-fit: contain;">
+          <div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/t-thirt.jpg" class="van-image__img" style="object-fit: contain;">
             <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
                 <!----></i></div>
           </div>
@@ -33,11 +33,6 @@ exports[`renders demo correctly 1`] = `
         <div class="van-card__content">
           <div class="van-card__title">商品名称</div>
           <div class="van-card__desc van-ellipsis">描述信息</div>
-          <div class="card__tags"><span class="van-tag van-tag--plain van-hairline--surround" style="color: rgb(255, 68, 68);">
-            标签1
-          </span> <span class="van-tag van-tag--plain van-hairline--surround" style="color: rgb(255, 68, 68);">
-            标签2
-          </span></div>
           <div class="van-card__bottom">
             <div class="van-card__price">¥ 2.00</div>
             <div class="van-card__origin-price">¥ 10.00</div>
@@ -45,8 +40,32 @@ exports[`renders demo correctly 1`] = `
           </div>
         </div>
       </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-card">
+      <div class="van-card__header"><a class="van-card__thumb">
+          <div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/t-thirt.jpg" class="van-image__img" style="object-fit: contain;">
+            <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
+                <!----></i></div>
+          </div>
+        </a>
+        <div class="van-card__content">
+          <div class="van-card__title">商品名称</div>
+          <div class="van-card__desc van-ellipsis">描述信息</div>
+          <div><span class="van-tag van-tag--plain van-hairline--surround" style="margin-right: 5px; color: rgb(255, 68, 68);">
+            标签
+          </span> <span class="van-tag van-tag--plain van-hairline--surround" style="color: rgb(255, 68, 68);">
+            标签
+          </span></div>
+          <div class="van-card__bottom">
+            <div class="van-card__price">¥ 2.00</div>
+            <div class="van-card__num">x 2</div>
+          </div>
+        </div>
+      </div>
       <div class="van-card__footer">
-        <div class="card__footer"><button class="van-button van-button--default van-button--mini van-button--round"><span class="van-button__text">
+        <div><button class="van-button van-button--default van-button--mini van-button--round"><span class="van-button__text">
             按钮
           </span></button> <button class="van-button van-button--default van-button--mini van-button--round"><span class="van-button__text">
             按钮
diff --git a/packages/card/zh-CN.md b/packages/card/zh-CN.md
index edd92f1ea..8bcd25824 100644
--- a/packages/card/zh-CN.md
+++ b/packages/card/zh-CN.md
@@ -17,13 +17,13 @@ Vue.use(Card);
   price="2.00"
   desc="描述信息"  
   title="商品标题"
-  :thumb="imageURL"
+  thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
 />
 ```
 
-### 高级用法
+### 营销信息
 
-可以通过具名插槽添加定制内容
+通过`origin-price`设置商品原价，通过`tag`设置商品左上角标签
 
 ```html
 <van-card
@@ -32,9 +32,27 @@ Vue.use(Card);
   price="2.00"
   desc="描述信息"  
   title="商品标题"
-  :thumb="imageURL"
+  thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
   origin-price="10.00"
+/>
+```
+
+### 自定义内容
+
+`Card`组件提供了多个插槽，可以灵活地自定义内容
+
+```html
+<van-card
+  num="2"
+  price="2.00"
+  desc="描述信息"  
+  title="商品标题"
+  thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
 >
+  <div slot="tags">
+    <van-tag plain type="danger">标签</van-tag>
+    <van-tag plain type="danger">标签</van-tag>
+  </div>
   <div slot="footer">
     <van-button size="mini">按钮</van-button>
     <van-button size="mini">按钮</van-button>