diff --git a/src/card/README.md b/src/card/README.md index e21fafc42..7c5efc0de 100644 --- a/src/card/README.md +++ b/src/card/README.md @@ -45,7 +45,7 @@ Use slot to custom content. @@ -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 | diff --git a/src/card/README.zh-CN.md b/src/card/README.zh-CN.md index 6cbf13df9..b87dd2529 100644 --- a/src/card/README.zh-CN.md +++ b/src/card/README.zh-CN.md @@ -17,7 +17,7 @@ Vue.use(Card); @@ -32,7 +32,7 @@ Vue.use(Card); num="2" tag="标签" price="2.00" - desc="描述信息" + desc="描述信息" title="商品标题" thumb="https://img.yzcdn.cn/vant/t-thirt.jpg" origin-price="10.00" @@ -47,7 +47,7 @@ Vue.use(Card); @@ -96,6 +96,7 @@ Vue.use(Card); | num | 自定义数量 | | price | 自定义价格 | | origin-price | 自定义商品原价 | +| price-top | 自定义价格上方区域 | | bottom | 自定义价格下方区域 | | thumb | 自定义图片 | | tag | 自定义图片角标 | diff --git a/src/card/index.less b/src/card/index.less index 590d1d520..6d05cc91b 100644 --- a/src/card/index.less +++ b/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 { diff --git a/src/card/index.tsx b/src/card/index.tsx index 17e981e0d..2dc3cc48e 100644 --- a/src/card/index.tsx +++ b/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 ( +
+ {props.currency} + {priceArr[0]}. + {priceArr[1]} +
+ ); + } + function Price() { if (showPrice) { return (
- {slots.price ? slots.price() : `${props.currency} ${props.price}`} + {slots.price ? slots.price() : PriceContent()}
); } @@ -137,7 +149,7 @@ function Card( function Num() { if (showNum) { - return
{slots.num ? slots.num() : `x ${props.num}`}
; + return
{slots.num ? slots.num() : `x${props.num}`}
; } } @@ -152,11 +164,14 @@ function Card(
{Thumb()}
- {Title()} - {Desc()} - {slots.tags && slots.tags()} +
+ {Title()} + {Desc()} + {slots.tags && slots.tags()} +
{showBottom && (
+ {slots['price-top'] && slots['price-top']()} {Price()} {OriginPrice()} {Num()} diff --git a/src/card/test/__snapshots__/demo.spec.js.snap b/src/card/test/__snapshots__/demo.spec.js.snap index d4a044fcb..77352ba68 100644 --- a/src/card/test/__snapshots__/demo.spec.js.snap +++ b/src/card/test/__snapshots__/demo.spec.js.snap @@ -11,11 +11,15 @@ exports[`renders demo correctly 1`] = `
-
商品名称
-
描述信息
+
+
商品名称
+
描述信息
+
-
¥ 2.00
-
x 2
+
+
¥2.00
+
+
x2
@@ -31,12 +35,16 @@ exports[`renders demo correctly 1`] = `
标签
-
商品名称
-
描述信息
+
+
商品名称
+
描述信息
+
-
¥ 2.00
+
+
¥2.00
+
¥ 10.00
-
x 2
+
x2
@@ -51,16 +59,20 @@ exports[`renders demo correctly 1`] = `
-
商品名称
-
描述信息
-
+
+
商品名称
+
描述信息
+
标签 标签
+
-
¥ 2.00
-
x 2
+
+
¥2.00
+
+
x2
diff --git a/src/card/test/__snapshots__/index.spec.js.snap b/src/card/test/__snapshots__/index.spec.js.snap index d4de2d22d..04e9c3d58 100644 --- a/src/card/test/__snapshots__/index.spec.js.snap +++ b/src/card/test/__snapshots__/index.spec.js.snap @@ -4,6 +4,7 @@ exports[`render bottom slot 1`] = `
+
Custom Bottom
@@ -14,6 +15,7 @@ exports[`render origin-price slot 1`] = `
+
Custom Origin Price
@@ -26,6 +28,7 @@ exports[`render price & num slot 1`] = `
+
Custom Price
Custom Num
@@ -38,7 +41,9 @@ exports[`render price & num slot 1`] = ` exports[`render thumb & tag slot 1`] = `
Custom Thumb
Custom Tag
 -
+
+
+
`; @@ -46,7 +51,21 @@ exports[`render thumb & tag slot 1`] = ` exports[`render title & desc slot 1`] = `
-
Custom TitleCustom desc
+
+
Custom TitleCustom desc
+
`; + +exports[`render price & price-top slot 1`] = ` +
+
+
+
+
Custom Price-top
Custom Price
+
+
+
+
+`; \ No newline at end of file diff --git a/src/card/test/index.spec.js b/src/card/test/index.spec.js index fcef9663e..6f1ef2718 100644 --- a/src/card/test/index.spec.js +++ b/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(); +}); diff --git a/src/style/var.less b/src/style/var.less index c70e52527..a905490a6 100644 --- a/src/style/var.less +++ b/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-origin-price-color: @gray-7; +@card-price-color: @gray-8; +@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;