diff --git a/docs/markdown/v2-progress-tracking.md b/docs/markdown/v2-progress-tracking.md index 033dc8dcf..15f40c290 100644 --- a/docs/markdown/v2-progress-tracking.md +++ b/docs/markdown/v2-progress-tracking.md @@ -104,6 +104,7 @@ ### SubmitBar - 新增`tip-icon`属性 +- 新增`suffix-label`属性 ### Steps diff --git a/packages/submit-bar/en-US.md b/packages/submit-bar/en-US.md index c5b00a5b6..e863dec3d 100644 --- a/packages/submit-bar/en-US.md +++ b/packages/submit-bar/en-US.md @@ -66,7 +66,8 @@ Use slot to add custom contents. | Attribute | Description | Type | Default | |------|------|------|------| | price | Price | `Number` | - | -| label | Price label | `String` | `合计:` | +| label | Price left label | `String` | `Total:` | +| suffix-label | Price right label | `String` | - | | button-text | Button text | `String` | - | | button-type | Button type | `String` | `danger` | | tip | Tip | `String` | - | diff --git a/packages/submit-bar/index.less b/packages/submit-bar/index.less index 1ada4cc0c..27173814a 100644 --- a/packages/submit-bar/index.less +++ b/packages/submit-bar/index.less @@ -30,6 +30,7 @@ &__bar { display: flex; align-items: center; + justify-content: flex-end; height: 50px; font-size: 14px; } @@ -46,6 +47,10 @@ } } + &__suffix-label { + margin-left: 5px; + } + &__price { color: @red; font-size: 18px; diff --git a/packages/submit-bar/index.tsx b/packages/submit-bar/index.tsx index 01cbb6bdf..ab13ea2ce 100644 --- a/packages/submit-bar/index.tsx +++ b/packages/submit-bar/index.tsx @@ -17,6 +17,7 @@ export type SubmitBarProps = { disabled?: boolean; buttonType: ButtonType; buttonText?: string; + suffixLabel?: string; decimalLength: number; safeAreaInsetBottom?: boolean; }; @@ -35,7 +36,34 @@ function SubmitBar( ctx: RenderContext ) { const { tip, price, tipIcon } = props; - const hasPrice = typeof price === 'number'; + + function Text() { + if (typeof price === 'number') { + const priceText = `${props.currency} ${(price / 100).toFixed(props.decimalLength)}`; + + return ( +
+ {props.label || t('label')} + {priceText} + {props.suffixLabel && ( + {props.suffixLabel} + )} +
+ ); + } + } + + function Tip() { + if (slots.tip || tip) { + return ( +
+ {tipIcon && } + {tip && {tip}} + {slots.tip && slots.tip()} +
+ ); + } + } return (
{slots.top && slots.top()} - {(slots.tip || tip) && ( -
- {tipIcon && ( - - )} - {tip && ( - {tip} - )} - {slots.tip && slots.tip()} -
- )} + {Tip()}
{slots.default && slots.default()} -
- {hasPrice && [ - {props.label || t('label')}, - {`${props.currency} ${( - (price as number) / 100 - ).toFixed(props.decimalLength)}`} - ]} -
+ {Text()} @@ -15,3 +15,22 @@ exports[`disable submit 1`] = `
`; + +exports[`suffix-label prop 1`] = ` +
+
+
Label¥ 1.11Suffix Label
+
+
+`; + +exports[`top slot 1`] = ` +
top
+
+`; + +exports[`without price 1`] = ` +
+
+
+`; diff --git a/packages/submit-bar/test/index.spec.js b/packages/submit-bar/test/index.spec.js index d669b8edd..410416268 100644 --- a/packages/submit-bar/test/index.spec.js +++ b/packages/submit-bar/test/index.spec.js @@ -1,7 +1,7 @@ import SubmitBar from '..'; import { mount } from '../../../test/utils'; -test('submit', () => { +test('submit event', () => { const submit = jest.fn(); const wrapper = mount(SubmitBar, { context: { @@ -37,7 +37,29 @@ test('disable submit', () => { expect(submit).toHaveBeenCalledTimes(0); }); -test('decimal length', () => { +test('without price', () => { + const wrapper = mount(SubmitBar, { + context: { + props: { + label: 'Label' + } + } + }); + + expect(wrapper).toMatchSnapshot(); +}); + +test('top slot', () => { + const wrapper = mount(SubmitBar, { + scopedSlots: { + top: () => 'top' + } + }); + + expect(wrapper).toMatchSnapshot(); +}); + +test('decimal-length prop', () => { const wrapper = mount(SubmitBar, { context: { props: { @@ -49,3 +71,17 @@ test('decimal length', () => { expect(wrapper).toMatchSnapshot(); }); + +test('suffix-label prop', () => { + const wrapper = mount(SubmitBar, { + context: { + props: { + price: 111, + label: 'Label', + suffixLabel: 'Suffix Label' + } + } + }); + + expect(wrapper).toMatchSnapshot(); +}); diff --git a/packages/submit-bar/zh-CN.md b/packages/submit-bar/zh-CN.md index bcf73e704..fb80932c5 100644 --- a/packages/submit-bar/zh-CN.md +++ b/packages/submit-bar/zh-CN.md @@ -69,7 +69,8 @@ Vue.use(SubmitBar); | 参数 | 说明 | 类型 | 默认值 | 版本 | |------|------|------|------|------| | price | 价格(单位分) | `Number` | - | - | -| label | 价格文案 | `String` | `合计:` | - | +| label | 价格左侧文案 | `String` | `合计:` | - | +| suffix-label | 价格右侧文案 | `String` | - | 2.0.0 | | button-text | 按钮文字 | `String` | - | - | | button-type | 按钮类型 | `String` | `danger` | - | | tip | 提示文案 | `String` | - | - |