feat(Card): add originPrice prop、update style @rex-zsd (#745)

example/pages/card/index.json

@@ -3,6 +3,7 @@
   "usingComponents": {
     "demo-block": "../../components/demo-block/index",
     "van-card": "../../dist/card/index",
-    "van-button": "../../dist/button/index"
+    "van-button": "../../dist/button/index",
+    "van-tag": "../../dist/tag/index"
   }
 }

example/pages/card/index.wxml

@@ -14,14 +14,18 @@
       num="2"
       tag="标签"
       price="2.00"
+      origin-price="3.00"
       desc="描述信息"
       title="商品标题"
       thumb="{{ imageURL }}"
     >
-      <div slot="footer">
+      <view slot="tags">
+        <van-tag plain type="danger">满减</van-tag>
+      </view>
+      <view slot="footer">
         <van-button size="mini" custom-class="button">按钮</van-button>
         <van-button size="mini">按钮</van-button>
-      </div>
+      </view>
     </van-card>
   </demo-block>
 </view>

packages/card/README.md

@@ -52,6 +52,7 @@
 | tag | 标签 | `String` | - |
 | num | 商品数量 | `String | Number` | - |
 | price | 商品价格 | `String | Number` | - |
+| origin-price | 商品划线原价 | `String | Number` | - |
 | centered | 内容是否垂直居中 | `String` | `false` |
 | currency | 货币符号 |  `String` | `¥` |
 | thumb-link | 点击左侧图片后的跳转链接 | `String` | - |
@@ -62,8 +63,8 @@
 
 | 名称 | 说明 |
 |-----------|-----------|
-| title | 自定义标题栏，如果设置了`title`或`price`属性则不生效 |
+| title | 自定义标题栏，如果设置了`title`属性则不生效 |
-| desc | 自定义描述栏，如果设置了`desc`或`num`属性则不生效 |
+| desc | 自定义描述栏，如果设置了`desc`属性则不生效 |
 | thumb | 自定义 thumb，如果设置了`thumb`属性则不生效 |
 | footer | 自定义 footer |
 | tags | 自定义 tags |
@@ -76,6 +77,7 @@
 | thumb-class | 左侧图片样式类 |
 | title-class | 标题样式类 |
 | price-class | 价格样式类 |
+| origin-price-class | 划线原价样式类 |
 | desc-class | 描述样式类 |
 | num-class | 数量样式类 |
 

packages/card/index.less

@@ -1,13 +1,13 @@
 @import '../common/style/var.less';
 
 .van-card {
-  color: @text-color;
-  height: 100px;
-  font-size: 12px;
-  background: #fafafa;
-  position: relative;
   box-sizing: border-box;
+  position: relative;
+  height: 100px;
   padding: 5px 15px 5px 115px;
+  background: #fafafa;
+  color: @text-color;
+  font-size: 12px;
 
   &--center,
   &__thumb {
@@ -16,22 +16,23 @@
   }
 
   &__thumb {
+    position: absolute;
     top: 5px;
     left: 15px;
     width: 90px;
     height: 90px;
-    position: absolute;
   }
 
   &__img {
-    border: none;
     max-width: 100%;
     max-height: 100%;
+    border: none;
   }
 
   &,
   &__thumb,
-  &__row {
+  &__row,
+  &__content {
     display: flex;
   }
 
@@ -39,8 +40,8 @@
     width: 100%;
 
     &--center {
-      height: 90px;
       align-items: center;
+      height: 90px;
     }
   }
 
@@ -59,14 +60,22 @@
     color: @gray-darker;
   }
 
-  &__price,
+  &__left {
-  &__num {
     flex: 1;
-    min-width: 80px;
+  }
+
+  &__right {
+    flex: none;
+    padding-left: 10px;
     line-height: 20px;
     text-align: right;
   }
 
+  &__origin-price {
+    color: @gray-darker;
+    text-decoration: line-through;
+  }
+
   &__num {
     color: @gray-darker;
   }
@@ -77,16 +86,10 @@
     left: 0;
   }
 
-  &__tag {
-    position: absolute;
-    top: 2px;
-    left: 0;
-  }
-
   &__footer {
+    position: absolute;
     right: 15px;
     bottom: 5px;
-    position: absolute;
 
     .van-button {
       margin-left: 5px;

packages/card/index.ts

@@ -5,6 +5,7 @@ VantComponent({
     'thumb-class',
     'title-class',
     'price-class',
+    'origin-price-class',
     'desc-class',
     'num-class'
   ],
@@ -16,6 +17,7 @@ VantComponent({
     thumb: String,
     title: String,
     price: String,
+    originPrice: String,
     centered: Boolean,
     lazyLoad: Boolean,
     thumbLink: String,

packages/card/index.wxml

@@ -18,19 +18,20 @@
   </view>
 
   <view class="van-card__content">
-    <view wx:if="{{ title || price || price === 0 }}" class="van-card__row">
+    <view class="van-card__left">
       <view wx:if="{{ title }}" class="van-card__title van-multi-ellipsis--l2 title-class">{{ title }}</view>
-      <view wx:if="{{ price || price === 0 }}" class="van-card__price price-class">{{ currency }} {{ price }}</view>
+      <slot wx:else name="title" />
-    </view>
-    <slot wx:else name="title" />
 
-    <view wx:if="{{ desc || num }}" class="van-card__row">
       <view wx:if="{{ desc }}" class="van-card__desc van-ellipsis desc-class">{{ desc }}</view>
+      <slot wx:else name="desc" />
+
+      <slot name="tags" />
+    </view>
+    <view class="van-card__right">
+      <view wx:if="{{ price || price === 0 }}" class="van-card__price price-class">{{ currency }} {{ price }}</view>
+      <view wx:if="{{ originPrice || originPrice === 0 }}" class="van-card__origin-price origin-price-class">{{ currency }} {{ originPrice }}</view>
       <view wx:if="{{ num }}" class="van-card__num num-class">x {{ num }}</view>
     </view>
-    <slot wx:else name="desc" />
-
-    <slot name="tags" />
   </view>
 
   <view class="van-card__footer">