feat(Card): Card 组件样式调整添加 price 上方的插槽 (#5134)

src/card/README.md

@@ -94,6 +94,7 @@ Use slot to custom content.
 | num | Custom num |
 | price | Custom price |
 | origin-price | Custom origin price |
+| price-top | Custom price top |
 | bottom | Custom price bottom |
 | thumb | Custom thumb |
 | tag | Custom thumb tag |

src/card/README.zh-CN.md

@@ -96,6 +96,7 @@ Vue.use(Card);
 | num | 自定义数量 |
 | price | 自定义价格 |
 | origin-price | 自定义商品原价 |
+| price-top | 自定义价格上方区域 |
 | bottom | 自定义价格下方区域 |
 | thumb | 自定义图片 |
 | tag | 自定义图片角标 |

src/card/index.less

@@ -29,6 +29,7 @@
     display: flex;
     flex: 1;
     flex-direction: column;
+    justify-content: space-between;
     min-width: 0; /* hack for flex box ellipsis */
     min-height: @card-thumb-size;
 
@@ -62,6 +63,11 @@
     display: inline-block;
     color: @card-price-color;
     font-weight: @font-weight-bold;
+
+    &--integer {
+      font-size: @card-price-integer-font-size;
+      font-family: @card-price-font-family;
+    }
   }
 
   &__origin-price {
@@ -74,6 +80,7 @@
 
   &__num {
     float: right;
+    color: @card-num-color;
   }
 
   &__tag {

src/card/index.tsx

@@ -32,6 +32,7 @@ export type CardSlots = DefaultSlots & {
   bottom?: ScopedSlot;
   footer?: ScopedSlot;
   'origin-price'?: ScopedSlot;
+  'price-top'?: ScopedSlot;
 };
 
 export type CardEvents = {
@@ -114,11 +115,22 @@ function Card(
     }
   }
 
+  function PriceContent() {
+    const priceArr = props.price!.toString().split('.');
+    return (
+        <div>
+          {props.currency}
+          <span class={bem('price', 'integer')}>{priceArr[0]}</span>.
+          {priceArr[1]}
+        </div>
+    );
+  }
+
   function Price() {
     if (showPrice) {
       return (
         <div class={bem('price')}>
-          {slots.price ? slots.price() : `${props.currency} ${props.price}`}
+          {slots.price ? slots.price() : PriceContent()}
         </div>
       );
     }
@@ -137,7 +149,7 @@ function Card(
 
   function Num() {
     if (showNum) {
-      return <div class={bem('num')}>{slots.num ? slots.num() : `x ${props.num}`}</div>;
+      return <div class={bem('num')}>{slots.num ? slots.num() : `x${props.num}`}</div>;
     }
   }
 
@@ -152,11 +164,14 @@ function Card(
       <div class={bem('header')}>
         {Thumb()}
         <div class={bem('content', { centered: props.centered })}>
-          {Title()}
+          <div>
-          {Desc()}
+            {Title()}
-          {slots.tags && slots.tags()}
+            {Desc()}
+            {slots.tags && slots.tags()}
+          </div>
           {showBottom && (
             <div class="van-card__bottom">
+              {slots['price-top'] && slots['price-top']()}
               {Price()}
               {OriginPrice()}
               {Num()}

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

@@ -11,11 +11,15 @@ exports[`renders demo correctly 1`] = `
           </div>
         </a>
         <div class="van-card__content">
-          <div class="van-card__title van-multi-ellipsis--l2">商品名称</div>
+          <div>
-          <div class="van-card__desc van-ellipsis">描述信息</div>
+            <div class="van-card__title van-multi-ellipsis--l2">商品名称</div>
+            <div class="van-card__desc van-ellipsis">描述信息</div>
+          </div>
           <div class="van-card__bottom">
-            <div class="van-card__price">¥ 2.00</div>
+            <div class="van-card__price">
-            <div class="van-card__num">x 2</div>
+              <div>¥<span class="van-card__price van-card__price--integer">2</span>.00</div>
+            </div>
+            <div class="van-card__num">x2</div>
           </div>
         </div>
       </div>
@@ -31,12 +35,16 @@ exports[`renders demo correctly 1`] = `
           <div class="van-card__tag"><span class="van-tag van-tag--mark van-tag--danger">标签</span></div>
         </a>
         <div class="van-card__content">
-          <div class="van-card__title van-multi-ellipsis--l2">商品名称</div>
+          <div>
-          <div class="van-card__desc van-ellipsis">描述信息</div>
+            <div class="van-card__title van-multi-ellipsis--l2">商品名称</div>
+            <div class="van-card__desc van-ellipsis">描述信息</div>
+          </div>
           <div class="van-card__bottom">
-            <div class="van-card__price">¥ 2.00</div>
+            <div class="van-card__price">
+              <div>¥<span class="van-card__price van-card__price--integer">2</span>.00</div>
+            </div>
             <div class="van-card__origin-price">¥ 10.00</div>
-            <div class="van-card__num">x 2</div>
+            <div class="van-card__num">x2</div>
           </div>
         </div>
       </div>
@@ -51,16 +59,20 @@ exports[`renders demo correctly 1`] = `
           </div>
         </a>
         <div class="van-card__content">
-          <div class="van-card__title van-multi-ellipsis--l2">商品名称</div>
+          <div>
-          <div class="van-card__desc van-ellipsis">描述信息</div>
+            <div class="van-card__title van-multi-ellipsis--l2">商品名称</div>
-          <div><span class="van-tag van-tag--plain van-tag--danger van-hairline--surround" style="margin-right: 5px;">
+            <div class="van-card__desc van-ellipsis">描述信息</div>
+            <div><span class="van-tag van-tag--plain van-tag--danger van-hairline--surround" style="margin-right: 5px;">
             标签
           </span> <span class="van-tag van-tag--plain van-tag--danger van-hairline--surround">
             标签
           </span></div>
+          </div>
           <div class="van-card__bottom">
-            <div class="van-card__price">¥ 2.00</div>
+            <div class="van-card__price">
-            <div class="van-card__num">x 2</div>
+              <div>¥<span class="van-card__price van-card__price--integer">2</span>.00</div>
+            </div>
+            <div class="van-card__num">x2</div>
           </div>
         </div>
       </div>

src/card/test/__snapshots__/index.spec.js.snap

@@ -4,6 +4,7 @@ exports[`render bottom slot 1`] = `
 <div class="van-card">
   <div class="van-card__header">
     <div class="van-card__content">
+      <div></div>
       <div class="van-card__bottom">Custom Bottom</div>
     </div>
   </div>
@@ -14,6 +15,7 @@ exports[`render origin-price slot 1`] = `
 <div class="van-card">
   <div class="van-card__header">
     <div class="van-card__content">
+      <div></div>
       <div class="van-card__bottom">
         <div class="van-card__origin-price">Custom Origin Price</div>
       </div>
@@ -26,6 +28,7 @@ exports[`render price & num slot 1`] = `
 <div class="van-card">
   <div class="van-card__header">
     <div class="van-card__content">
+      <div></div>
       <div class="van-card__bottom">
         <div class="van-card__price">Custom Price</div>
         <div class="van-card__num">Custom Num</div>
@@ -38,7 +41,9 @@ exports[`render price & num slot 1`] = `
 exports[`render thumb & tag slot 1`] = `
 <div class="van-card">
   <div class="van-card__header"><a class="van-card__thumb">Custom Thumb<div class="van-card__tag">Custom Tag</div></a>
-    <div class="van-card__content"></div>
+    <div class="van-card__content">
+      <div></div>
+    </div>
   </div>
 </div>
 `;
@@ -46,7 +51,21 @@ exports[`render thumb & tag slot 1`] = `
 exports[`render title & desc slot 1`] = `
 <div class="van-card">
   <div class="van-card__header">
-    <div class="van-card__content">Custom TitleCustom desc</div>
+    <div class="van-card__content">
+      <div>Custom TitleCustom desc</div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`render price & price-top slot 1`] = `
+<div class="van-card">
+  <div class="van-card__header">
+    <div class="van-card__content">
+      <div></div>
+      <div class="van-card__bottom">Custom Price-top<div class="van-card__price">Custom Price</div>
+      </div>
+    </div>
   </div>
 </div>
 `;

src/card/test/index.spec.js

@@ -94,3 +94,14 @@ test('render title & desc slot', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('render price & price-top slot', () => {
+  const wrapper = mount(Card, {
+    scopedSlots: {
+      price: () => 'Custom Price',
+      'price-top': () => 'Custom Price-top'
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});

src/style/var.less

@@ -42,6 +42,7 @@
 @font-size-md: 14px;
 @font-size-lg: 16px;
 @font-weight-bold: 500;
+@price-integer-font-family: Avenir-Heavy PingFang SC, Helvetica Neue, Arial, sans-serif;
 
 // Animation
 @animation-duration-base: .3s;
@@ -141,9 +142,12 @@
 @card-title-line-height: 16px;
 @card-desc-color: @gray-7;
 @card-desc-line-height: 20px;
-@card-price-color: @red;
+@card-price-color: @gray-8;
-@card-origin-price-color: @gray-7;
+@card-origin-price-color: @gray-6;
+@card-num-color: @gray-6;
 @card-origin-price-font-size: @font-size-xs;
+@card-price-integer-font-size: @font-size-lg;
+@card-price-font-family: @price-integer-font-family;
 
 // Cell
 @cell-font-size: @font-size-md;
@@ -609,7 +613,7 @@
 @submit-bar-button-height: 40px;
 @submit-bar-padding: 0 @padding-md;
 @submit-bar-price-integer-font-size: 20px;
-@submit-bar-price-font-family: Avenir-Heavy PingFang SC, Helvetica Neue, Arial, sans-serif;
+@submit-bar-price-font-family: @price-integer-font-family;
 
 // Swipe
 @swipe-indicator-size: 6px;