[improvement] Card: add tag prop (#705)

example/pages/card/index.wxml

@@ -1,20 +1,21 @@
 <view class="container">
   <demo-block title="基础用法">
     <van-card
-      title="标题"
-      desc="描述信息"
       num="2"
       price="2.00"
+      desc="描述信息"
+      title="商品标题"
       thumb="{{ imageURL }}"
     />
   </demo-block>
 
   <demo-block title="高级用法">
     <van-card
-      title="标题"
-      desc="描述信息"
       num="2"
+      tag="标签"
       price="2.00"
+      desc="描述信息"
+      title="商品标题"
       thumb="{{ imageURL }}"
     >
       <div slot="footer">

packages/card/README.md

@@ -15,10 +15,10 @@
 
 ```html
 <van-card
-  title="标题"
-  desc="描述"
   num="2"
   price="2.00"
+  desc="描述信息"
+  title="商品标题"
   thumb="{{ imageURL }}"
 />
 ```
@@ -28,10 +28,11 @@
 
 ```html
 <van-card
-  title="标题"
-  desc="描述"  
   num="2"
+  tag="标签"
   price="2.00"
+  desc="描述信息"
+  title="商品标题"
   thumb="{{ imageURL }}"
 >
   <view slot="footer">
@@ -48,6 +49,7 @@
 | thumb | 左侧图片 | `String` | - |
 | title | 标题 | `String` | - |
 | desc | 描述 | `String` | - |
+| tag | 标签 | `String` | - |
 | num | 商品数量 | `String | Number` | - |
 | price | 商品价格 | `String | Number` | - |
 | centered | 内容是否垂直居中 | `String` | `false` |

packages/card/index.json

@@ -1,3 +1,6 @@
 {
-  "component": true
+  "component": true,
+  "usingComponents": {
+    "van-tag": "../tag/index"
+  }
 }

packages/card/index.less

@@ -77,6 +77,12 @@
     font-size: 12px;
   }
 
+  &__tag {
+    position: absolute;
+    top: 2px;
+    left: 0;
+  }
+
   &__footer {
     right: 15px;
     bottom: 5px;

packages/card/index.ts

@@ -10,6 +10,7 @@ VantComponent({
   ],
 
   props: {
+    tag: String,
     num: String,
     desc: String,
     thumb: String,

packages/card/index.wxml

@@ -2,6 +2,14 @@
   <view class="van-card__thumb">
     <image wx:if="{{ thumb }}" src="{{ thumb }}" class="van-card__img thumb-class" />
     <slot wx:else name="thumb" />
+    <van-tag
+      wx:if="{{ tag }}"
+      mark
+      type="danger"
+      custom-class="van-card__tag"
+    >
+      {{ tag }}
+    </van-tag>
   </view>
   <view class="van-card__content">
     <view wx:if="{{ title || price || price === 0 }}" class="van-card__row">