From a7ae694dbb900c6bef8d206fb3db5d3e61d011fd Mon Sep 17 00:00:00 2001 From: Lindy <33708359+Lindysen@users.noreply.github.com> Date: Thu, 28 Nov 2019 19:07:50 +0800 Subject: [PATCH] =?UTF-8?q?feat(SubmitBar):=20SubmitBar=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4=E5=8F=8A=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E6=96=87=E6=A1=88=E5=AF=B9=E9=BD=90=E6=96=B9=E5=90=91=E5=B1=9E?= =?UTF-8?q?=E6=80=A7=20(#5130)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/style/var.less | 6 +++++- src/submit-bar/README.md | 1 + src/submit-bar/README.zh-CN.md | 3 ++- src/submit-bar/demo/index.vue | 2 +- src/submit-bar/index.less | 15 ++++++++++++--- src/submit-bar/index.tsx | 19 +++++++++++-------- .../test/__snapshots__/demo.spec.js.snap | 8 ++++---- .../test/__snapshots__/index.spec.js.snap | 18 +++++++++++++----- src/submit-bar/test/index.spec.js | 12 ++++++++++++ 9 files changed, 61 insertions(+), 23 deletions(-) diff --git a/src/style/var.less b/src/style/var.less index 94d63ba5f..c70e52527 100644 --- a/src/style/var.less +++ b/src/style/var.less @@ -596,7 +596,7 @@ @submit-bar-background-color: @white; @submit-bar-button-width: 110px; @submit-bar-price-color: @red; -@submit-bar-price-font-size: 18px; +@submit-bar-price-font-size: @font-size-md; @submit-bar-currency-font-size: @font-size-md; @submit-bar-text-color: @text-color; @submit-bar-text-font-size: @font-size-md; @@ -606,6 +606,10 @@ @submit-bar-tip-color: #f56723; @submit-bar-tip-background-color: #fff7cc; @submit-bar-tip-icon-size: 12px; +@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; // Swipe @swipe-indicator-size: 6px; diff --git a/src/submit-bar/README.md b/src/submit-bar/README.md index 677ac7eab..a4f5b18e2 100644 --- a/src/submit-bar/README.md +++ b/src/submit-bar/README.md @@ -75,6 +75,7 @@ Use slot to add custom contents. | price | Price | *number* | - | - | | label | Price left label | *string* | `Total：` | - | | suffix-label | Price right label | *string* | - | - | +| text-align | Price label text align can be set to `right` `left` | *string* | `right` | - | | button-text | Button text | *string* | - | - | | button-type | Button type | *string* | `danger` | - | | tip | Tip | *string* | - | - | diff --git a/src/submit-bar/README.zh-CN.md b/src/submit-bar/README.zh-CN.md index 173bb706e..1070deb35 100644 --- a/src/submit-bar/README.zh-CN.md +++ b/src/submit-bar/README.zh-CN.md @@ -75,6 +75,7 @@ Vue.use(SubmitBar); | price | 价格（单位分） | *number* | - | - | | label | 价格左侧文案 | *string* | `合计：` | - | | suffix-label | 价格右侧文案 | *string* | - | - | +| text-align | 价格文案对齐方向，可选值为 `right` `left` | *string* | `right` | - | | button-text | 按钮文字 | *string* | - | - | | button-type | 按钮类型 | *string* | `danger` | - | | tip | 提示文案 | *string* | - | - | @@ -82,7 +83,7 @@ Vue.use(SubmitBar); | disabled | 是否禁用按钮 | *boolean* | `false` | - | | loading | 是否显示加载中的按钮 | *boolean* | `false` | - | | currency | 货币符号 | *string* | `¥` | - | -| decimal-length | 价格小数点后位数 | *number* | `2` | - | +| decimal-length | 价格小数点后位数 | *number* | `2` | - | | safe-area-inset-bottom | 是否开启底部安全区适配，[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `false` | - | ### Events diff --git a/src/submit-bar/demo/index.vue b/src/submit-bar/demo/index.vue index 8e34112ad..e8886ea78 100644 --- a/src/submit-bar/demo/index.vue +++ b/src/submit-bar/demo/index.vue @@ -102,7 +102,7 @@ export default { } .van-checkbox { - margin-left: @padding-sm; + margin-right: @padding-sm; } } diff --git a/src/submit-bar/index.less b/src/submit-bar/index.less index 9ab448b41..37ad37834 100644 --- a/src/submit-bar/index.less +++ b/src/submit-bar/index.less @@ -32,6 +32,7 @@ align-items: center; justify-content: flex-end; height: @submit-bar-height; + padding: @submit-bar-padding; font-size: @submit-bar-text-font-size; } @@ -53,15 +54,23 @@ &__price { color: @submit-bar-price-color; - font-size: @submit-bar-price-font-size; + font-size: @font-size-sm; - &::first-letter { - font-size: @submit-bar-currency-font-size; + &--integer { + font-size: @submit-bar-price-integer-font-size; + font-family: @submit-bar-price-font-family; } } &__button { width: @submit-bar-button-width; + height: @submit-bar-button-height; + line-height: @submit-bar-button-height; + border: none; + + &--danger { + background: @goods-action-button-danger-color; + } } &--safe-area-inset-bottom { diff --git a/src/submit-bar/index.tsx b/src/submit-bar/index.tsx index 50ff0aa82..4a4380979 100644 --- a/src/submit-bar/index.tsx +++ b/src/submit-bar/index.tsx @@ -20,6 +20,7 @@ export type SubmitBarProps = { suffixLabel?: string; decimalLength: number; safeAreaInsetBottom?: boolean; + textAlign?: 'right' | 'left'; }; export type SubmitBarSlots = DefaultSlots & { @@ -39,12 +40,14 @@ function SubmitBar( function Text() { if (typeof price === 'number') { - const priceText = `${props.currency} ${(price / 100).toFixed(props.decimalLength)}`; - + const priceArr = (price / 100).toFixed(props.decimalLength).split('.'); return ( -
+
{props.label || t('label')} - {priceText} + + {props.currency} + {priceArr[0]}.{priceArr[1]} + {props.suffixLabel && ( {props.suffixLabel} )} @@ -76,9 +79,8 @@ function SubmitBar( {slots.default && slots.default()} {Text()} +
合计：¥30.50
@@ -14,14 +14,14 @@ exports[`renders demo correctly 1`] = `
你的收货地址不支持同城送, 我们已为你推荐快递
-
合计：¥ 30.50
+
合计：¥30.50
-
合计：¥ 30.50
@@ -39,7 +39,7 @@ exports[`renders demo correctly 1`] = `
全选
-
合计：¥ 30.50
+
合计：¥30.50
diff --git a/src/submit-bar/test/__snapshots__/index.spec.js.snap b/src/submit-bar/test/__snapshots__/index.spec.js.snap index 004dae279..113fba541 100644 --- a/src/submit-bar/test/__snapshots__/index.spec.js.snap +++ b/src/submit-bar/test/__snapshots__/index.spec.js.snap @@ -3,7 +3,7 @@ exports[`decimal-length prop 1`] = `
-
合计：¥ 1.1
+
合计：¥1.1
`; @@ -11,7 +11,7 @@ exports[`decimal-length prop 1`] = ` exports[`disable submit 1`] = `
-
合计：¥ 0.01
+
合计：¥0.01
`; @@ -19,18 +19,26 @@ exports[`disable submit 1`] = ` exports[`suffix-label prop 1`] = `
-
Label¥ 1.11Suffix Label
+
Label¥1.11Suffix Label
+
+
+`; + +exports[`text-align prop 1`] = ` +
+
+
合计：¥1.11
`; exports[`top slot 1`] = ` -
top
+
top
`; exports[`without price 1`] = `
-
+
`; diff --git a/src/submit-bar/test/index.spec.js b/src/submit-bar/test/index.spec.js index 12832b105..4c4ea3246 100644 --- a/src/submit-bar/test/index.spec.js +++ b/src/submit-bar/test/index.spec.js @@ -85,3 +85,15 @@ test('suffix-label prop', () => { expect(wrapper).toMatchSnapshot(); }); + +test('text-align prop', () => { + const wrapper = mount(SubmitBar, { + context: { + props: { + price: 111, + textAlign: 'left' + } + } + }); + expect(wrapper).toMatchSnapshot(); +});