feat(SubmitBar): SubmitBar组件样式调整及新增文案对齐方向属性 (#5130)

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;

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

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

src/submit-bar/demo/index.vue

@@ -102,7 +102,7 @@ export default {
   }
 
   .van-checkbox {
-    margin-left: @padding-sm;
+    margin-right: @padding-sm;
   }
 }
 </style>

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 {
+    &--integer {
-      font-size: @submit-bar-currency-font-size;
+      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 {

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 (
-        <div class={bem('text')}>
+        <div style={{ textAlign: props.textAlign ? props.textAlign : '' }} class={bem('text')}>
           <span>{props.label || t('label')}</span>
-          <span class={bem('price')}>{priceText}</span>
+          <span class={bem('price')}>
+            {props.currency}
+            <span class={bem('price', 'integer')}>{priceArr[0]}</span>.{priceArr[1]}
+          </span>
           {props.suffixLabel && (
             <span class={bem('suffix-label')}>{props.suffixLabel}</span>
           )}
@@ -76,9 +79,8 @@ function SubmitBar(
         {slots.default && slots.default()}
         {Text()}
         <Button
-          square
+          round
-          size="large"
+          class={bem('button', props.buttonType)}
-          class={bem('button')}
           type={props.buttonType}
           loading={props.loading}
           disabled={props.disabled}
@@ -113,7 +115,8 @@ SubmitBar.props = {
   buttonType: {
     type: String,
     default: 'danger'
-  }
+  },
+  textAlign: String,
 };
 
 export default createComponent<SubmitBarProps, {}, SubmitBarSlots>(SubmitBar);

src/submit-bar/test/__snapshots__/demo.spec.js.snap

@@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <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">¥ 30.50</span></div><button class="van-button van-button--danger van-button--large van-button--square van-submit-bar__button"><span class="van-button__text">提交订单</span></button>
+        <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">30</span>.50</span></div><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger"><span class="van-button__text">提交订单</span></button>
       </div>
     </div>
   </div>
@@ -14,14 +14,14 @@ exports[`renders demo correctly 1`] = `
       <div class="van-submit-bar__tip"><i class="van-icon van-icon-info-o van-submit-bar__tip-icon">
           <!----></i><span class="van-submit-bar__tip-text">你的收货地址不支持同城送, 我们已为你推荐快递</span></div>
       <div class="van-submit-bar__bar">
-        <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥ 30.50</span></div><button disabled="disabled" class="van-button van-button--danger van-button--large van-button--disabled van-button--square van-submit-bar__button"><span class="van-button__text">提交订单</span></button>
+        <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">30</span>.50</span></div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--disabled van-button--round van-submit-bar__button van-submit-bar__button--danger"><span class="van-button__text">提交订单</span></button>
       </div>
     </div>
   </div>
   <div>
     <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">¥ 30.50</span></div><button class="van-button van-button--danger van-button--large van-button--square van-submit-bar__button">
+        <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">30</span>.50</span></div><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger">
           <div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
         </button>
       </div>
@@ -39,7 +39,7 @@ exports[`renders demo correctly 1`] = `
           <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
               <!----></i></div><span class="van-checkbox__label">全选</span>
         </div>
-        <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥ 30.50</span></div><button class="van-button van-button--danger van-button--large van-button--square van-submit-bar__button"><span class="van-button__text">提交订单</span></button>
+        <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">30</span>.50</span></div><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger"><span class="van-button__text">提交订单</span></button>
       </div>
     </div>
   </div>

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

@@ -3,7 +3,7 @@
 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 van-submit-bar__button"></button>
+    <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">1</span>.1</span></div><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger"></button>
   </div>
 </div>
 `;
@@ -11,7 +11,7 @@ exports[`decimal-length prop 1`] = `
 exports[`disable submit 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">¥ 0.01</span></div><button disabled="disabled" class="van-button van-button--danger van-button--large van-button--disabled van-button--square van-submit-bar__button"></button>
+    <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">0</span>.01</span></div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--disabled van-button--round van-submit-bar__button van-submit-bar__button--danger"></button>
   </div>
 </div>
 `;
@@ -19,18 +19,26 @@ exports[`disable submit 1`] = `
 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 van-submit-bar__button"></button>
+    <div class="van-submit-bar__text"><span>Label</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">1</span>.11</span><span class="van-submit-bar__suffix-label">Suffix Label</span></div><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger"></button>
+  </div>
+</div>
+`;
+
+exports[`text-align prop 1`] = `
+<div class="van-submit-bar">
+  <div class="van-submit-bar__bar">
+    <div class="van-submit-bar__text" style="text-align: left;"><span>合计：</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">1</span>.11</span></div><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger"></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 van-submit-bar__button"></button></div>
+<div class="van-submit-bar">top<div class="van-submit-bar__bar"><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger"></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 van-submit-bar__button"></button></div>
+  <div class="van-submit-bar__bar"><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger"></button></div>
 </div>
 `;

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