[new feature] SubmitBar: add suffix-label prop

docs/markdown/v2-progress-tracking.md

@@ -104,6 +104,7 @@
 ### SubmitBar
 
 - 新增`tip-icon`属性
+- 新增`suffix-label`属性
 
 ### Steps
 

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` | - |

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;

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<SubmitBarProps>
 ) {
   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 (
+        <div class={bem('text')}>
+          <span>{props.label || t('label')}</span>
+          <span class={bem('price')}>{priceText}</span>
+          {props.suffixLabel && (
+            <span class={bem('suffix-label')}>{props.suffixLabel}</span>
+          )}
+        </div>
+      );
+    }
+  }
+
+  function Tip() {
+    if (slots.tip || tip) {
+      return (
+        <div class={bem('tip')}>
+          {tipIcon && <Icon class={bem('tip-icon')} name={tipIcon} />}
+          {tip && <span class={bem('tip-text')}>{tip}</span>}
+          {slots.tip && slots.tip()}
+        </div>
+      );
+    }
+  }
 
   return (
     <div
@@ -43,27 +71,10 @@ function SubmitBar(
       {...inherit(ctx)}
     >
       {slots.top && slots.top()}
-      {(slots.tip || tip) && (
+      {Tip()}
-        <div class={bem('tip')}>
-          {tipIcon && (
-            <Icon class={bem('tip-icon')} name={tipIcon} />
-          )}
-          {tip && (
-            <span class={bem('tip-text')}>{tip}</span>
-          )}
-          {slots.tip && slots.tip()}
-        </div>
-      )}
       <div class={bem('bar')}>
         {slots.default && slots.default()}
-        <div class={bem('text')}>
+        {Text()}
-          {hasPrice && [
-            <span>{props.label || t('label')}</span>,
-            <span class={bem('price')}>{`${props.currency} ${(
-              (price as number) / 100
-            ).toFixed(props.decimalLength)}`}</span>
-          ]}
-        </div>
         <Button
           square
           size="large"
@@ -87,6 +98,7 @@ SubmitBar.props = {
   loading: Boolean,
   disabled: Boolean,
   buttonText: String,
+  suffixLabel: String,
   safeAreaInsetBottom: Boolean,
   price: {
     type: Number,

packages/submit-bar/test/__snapshots__/index.spec.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`decimal length 1`] = `
+exports[`decimal-length prop 1`] = `
 <div class="van-submit-bar">
   <div class="van-submit-bar__bar">
     <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥ 1.1</span></div><button class="van-button van-button--danger van-button--large van-button--square"><span class="van-button__text"></span></button>
@@ -15,3 +15,22 @@ exports[`disable submit 1`] = `
   </div>
 </div>
 `;
+
+exports[`suffix-label prop 1`] = `
+<div class="van-submit-bar">
+  <div class="van-submit-bar__bar">
+    <div class="van-submit-bar__text"><span>Label</span><span class="van-submit-bar__price">¥ 1.11</span><span class="van-submit-bar__suffix-label">Suffix Label</span></div><button class="van-button van-button--danger van-button--large van-button--square"><span class="van-button__text"></span></button>
+  </div>
+</div>
+`;
+
+exports[`top slot 1`] = `
+<div class="van-submit-bar">top<div class="van-submit-bar__bar"><button class="van-button van-button--danger van-button--large van-button--square"><span class="van-button__text"></span></button></div>
+</div>
+`;
+
+exports[`without price 1`] = `
+<div class="van-submit-bar">
+  <div class="van-submit-bar__bar"><button class="van-button van-button--danger van-button--large van-button--square"><span class="van-button__text"></span></button></div>
+</div>
+`;

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();
+});

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` | - | - |