[improvement] Card: add origin-price prop (#1916)

docs/src/doc.config.js

@@ -280,7 +280,7 @@ module.exports = {
               },
               {
                 path: '/card',
-                title: 'Card 卡片'
+                title: 'Card 商品卡片'
               },
               {
                 path: '/contact-card',

packages/card/demo/index.vue

@@ -14,6 +14,7 @@
       <van-card
         num="2"
         price="2.00"
+        origin-price="10.00"
         :tag="$t('tag')"
         :desc="$t('desc')"
         :title="$t('title')"
@@ -32,7 +33,7 @@
 export default {
   i18n: {
     'zh-CN': {
-      title: '商品标题'
+      title: '商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题'
     }
   },
 

packages/card/en-US.md

@@ -32,6 +32,7 @@ Use `slot` to custom content.
   desc="Description"  
   price="2.00"
   :thumb="imageURL"
+  origin-price="10.00"
 >
   <div slot="footer">
     <van-button size="mini">Button</van-button>
@@ -48,8 +49,9 @@ Use `slot` to custom content.
 | title | Title | `String` | - |
 | desc | Description | `String` | - |
 | tag | Tag | `String` | - |
-| num | Number of goods | `String | Number` | - |
+| num | Number | `String | Number` | - |
-| price | Price of goods | `String | Number` | - |
+| price | Price | `String | Number` | - |
+| origin-price | Origin price | `String | Number` | - |
 | centered | Whether content vertical centered | `String` | `false` |
 | currency | Currency symbol |  `String` | `¥` |
 | thumb-link | Thumb link URL | `String` | - |

packages/card/index.vue

@@ -2,7 +2,7 @@
   <div :class="b({ center: centered })">
     <a :href="thumbLink" :class="b('thumb')">
       <slot name="thumb">
-        <img :src="thumb" :class="b('img')" >
+        <img :src="thumb" :class="b('img')">
       </slot>
       <van-tag
         v-if="tag"
@@ -14,19 +14,20 @@
       </van-tag>
     </a>
     <div :class="b('content')">
-      <slot name="title">
+      <div :class="b('left')">
-        <div :class="b('row')" v-if="title || isDef(price)">
+        <slot name="title">
           <div v-if="title" :class="b('title')">{{ title }}</div>
-          <div v-if="isDef(price)" :class="b('price')">{{ currency }} {{ price }}</div>
+        </slot>
-        </div>
+        <slot name="desc">
-      </slot>
-      <slot name="desc">
-        <div :class="b('row')" v-if="desc || isDef(num)">
           <div v-if="desc" :class="[b('desc'), 'van-ellipsis']">{{ desc }}</div>
-          <div v-if="isDef(num)" :class="b('num')">x {{ num }}</div>
+        </slot>
-        </div>
+        <slot name="tags" />
-      </slot>
+      </div>
-      <slot name="tags" />
+      <div :class="b('right')">
+        <div v-if="isDef(price)">{{ currency }} {{ price }}</div>
+        <div v-if="isDef(originPrice)" :class="b('origin-price')">{{ currency }} {{ originPrice }}</div>
+        <div v-if="isDef(num)" :class="b('num')">x {{ num }}</div>
+      </div>
     </div>
     <div :class="b('footer')" v-if="$slots.footer">
       <slot name="footer" />
@@ -53,6 +54,7 @@ export default create({
     centered: Boolean,
     num: [Number, String],
     price: [Number, String],
+    originPrice: [Number, String],
     currency: {
       type: String,
       default: '¥'

packages/card/test/__snapshots__/demo.spec.js.snap

@@ -9,12 +9,13 @@ exports[`renders demo correctly 1`] = `
         <!---->
       </a>
       <div class="van-card__content">
-        <div class="van-card__row">
+        <div class="van-card__left">
-          <div class="van-card__title">商品标题</div>
+          <div class="van-card__title">商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题</div>
-          <div class="van-card__price">¥ 2.00</div>
-        </div>
-        <div class="van-card__row">
           <div class="van-card__desc van-ellipsis">描述信息</div>
+        </div>
+        <div class="van-card__right">
+          <div>¥ 2.00</div>
+          <!---->
           <div class="van-card__num">x 2</div>
         </div>
       </div>
@@ -28,12 +29,13 @@ exports[`renders demo correctly 1`] = `
       标签
     </span></a>
       <div class="van-card__content">
-        <div class="van-card__row">
+        <div class="van-card__left">
-          <div class="van-card__title">商品标题</div>
+          <div class="van-card__title">商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题</div>
-          <div class="van-card__price">¥ 2.00</div>
-        </div>
-        <div class="van-card__row">
           <div class="van-card__desc van-ellipsis">描述信息</div>
+        </div>
+        <div class="van-card__right">
+          <div>¥ 2.00</div>
+          <div class="van-card__origin-price">¥ 10.00</div>
           <div class="van-card__num">x 2</div>
         </div>
       </div>

packages/card/zh-CN.md

@@ -32,6 +32,7 @@ Vue.use(Card);
   desc="描述信息"  
   title="商品标题"
   :thumb="imageURL"
+  origin-price="10.00"
 >
   <div slot="footer">
     <van-button size="mini">按钮</van-button>
@@ -50,6 +51,7 @@ Vue.use(Card);
 | tag | 标签 | `String` | - |
 | num | 商品数量 | `String | Number` | - |
 | price | 商品价格 | `String | Number` | - |
+| origin-price | 商品划线原价 | `String | Number` | - |
 | centered | 内容是否垂直居中 | `String` | `false` |
 | currency | 货币符号 |  `String` | `¥` |
 | thumb-link | 点击左侧图片后的跳转链接 | `String` | - |
@@ -60,9 +62,9 @@ Vue.use(Card);
 |-----------|-----------|
 | title | 自定义标题 |
 | desc | 自定义描述 |
-| tags | 自定义 tags |
+| tags | 自定义描述下方的内容 |
-| thumb | 自定义 thumb |
+| thumb | 自定义图片 |
-| footer | 自定义 footer |
+| footer | 自定义右下角内容 |
 
 ### 更新日志
 

packages/vant-css/src/card.css

@@ -36,7 +36,8 @@
 
   &,
   &__thumb,
-  &__row {
+  &__row,
+  &__content {
     display: flex;
   }
 
@@ -66,14 +67,22 @@
     max-height: 20px;
   }
 
-  &__price,
+  &__left {
-  &__num {
     flex: 1;
-    min-width: 80px;
+  }
+
+  &__right {
+    flex-shrink: 0;
     line-height: 20px;
+    padding-left: 10px;
     text-align: right;
   }
 
+  &__origin-price {
+    color: $gray-darker;
+    text-decoration: line-through;
+  }
+
   &__num {
     color: $gray-darker;
   }
@@ -86,7 +95,7 @@
 
   &__footer {
     right: 15px;
-    bottom: 5px;
+    bottom: 8px;
     position: absolute;
 
     .van-button {