[Improvement] SubmitBar: upgrade style (#1631)

packages/submit-bar/en-US.md

@@ -84,4 +84,5 @@ Use slot to add custom contents.
 | Name | Description |
 |-----------|-----------|
 | default | Custom left content |
+| top | Custom top content |
 | tip | Custom tips |

packages/submit-bar/index.vue

@@ -1,15 +1,15 @@
 <template>
   <div :class="b()">
+    <slot name="top" />
     <div :class="b('tip')" v-if="tip || $slots.tip">
       {{ tip }}<slot name="tip" />
     </div>
     <div :class="b('bar')">
       <slot />
-      <div :class="b('price')">
+      <div :class="b('text')">
         <template v-if="hasPrice">
           <span>{{ label || $t('label') }}</span>
-          <span :class="b('price-integer')">{{ currency }}{{ priceInterger }}.</span>
+          <span :class="b('price')">{{ currency }} {{ price | format }}</span>
-          <span :class="b('price-decimal')">{{ priceDecimal }}</span>
         </template>
       </div>
       <van-button :type="buttonType" :disabled="disabled" :loading="loading" @click="$emit('submit')">
@@ -51,13 +51,12 @@ export default create({
   computed: {
     hasPrice() {
       return typeof this.price === 'number';
+    }
   },
-    priceInterger() {
+
-      return Math.floor(this.price / 100);
+  filters: {
-    },
+    format(price) {
-    priceDecimal() {
+      return (price / 100).toFixed(2);
-      const decimal = Math.floor(this.price % 100);
-      return (decimal < 10 ? '0' : '') + decimal;
     }
   }
 });

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

@@ -6,7 +6,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-submit-bar">
       <!---->
       <div class="van-submit-bar__bar">
-        <div class="van-submit-bar__price"><span>合计：</span> <span class="van-submit-bar__price-integer">¥30.</span> <span class="van-submit-bar__price-decimal">50</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--normal">
           <!----><span class="van-button__text">
       提交订单
@@ -19,7 +19,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-submit-bar__tip">
         您的收货地址不支持同城送, 我们已为您推荐快递</div>
       <div class="van-submit-bar__bar">
-        <div class="van-submit-bar__price"><span>合计：</span> <span class="van-submit-bar__price-integer">¥30.</span> <span class="van-submit-bar__price-decimal">50</span></div>
+        <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--normal van-button--disabled van-button--unclickable">
           <!----><span class="van-button__text">
       提交订单
@@ -31,7 +31,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-submit-bar">
       <!---->
       <div class="van-submit-bar__bar">
-        <div class="van-submit-bar__price"><span>合计：</span> <span class="van-submit-bar__price-integer">¥30.</span> <span class="van-submit-bar__price-decimal">50</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--normal van-button--loading van-button--unclickable">
           <div class="van-loading van-loading--circular van-loading--white" style="width:20px;height:20px;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div> <span class="van-button__text">
       
@@ -52,7 +52,7 @@ exports[`renders demo correctly 1`] = `
               <!---->
             </i>
           </div> <span class="van-checkbox__label">全选</span></div>
-        <div class="van-submit-bar__price"><span>合计：</span> <span class="van-submit-bar__price-integer">¥30.</span> <span class="van-submit-bar__price-decimal">50</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--normal">
           <!----><span class="van-button__text">
       提交订单

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

@@ -4,7 +4,7 @@ exports[`submit 1`] = `
 <div class="van-submit-bar">
   <!---->
   <div class="van-submit-bar__bar">
-    <div class="van-submit-bar__price"><span>合计：</span> <span class="van-submit-bar__price-integer">¥0.</span> <span class="van-submit-bar__price-decimal">00</span></div>
+    <div class="van-submit-bar__text"><span>合计：</span> <span class="van-submit-bar__price">¥ 0.00</span></div>
     <button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--disabled van-button--unclickable">
       <!----><span class="van-button__text">
       

packages/submit-bar/zh-CN.md

@@ -84,4 +84,5 @@ Vue.use(SubmitBar);
 | 名称 | 说明 |
 |-----------|-----------|
 | default | 自定义订单栏左侧内容 |
+| top | 自定义订单栏上方内容 |
 | tip | 提示文案中的额外操作和说明 |

packages/vant-css/src/submit-bar.css

@@ -19,15 +19,16 @@
   &__bar {
     height: 50px;
     display: flex;
-    font-size: 16px;
+    font-size: 14px;
     align-items: center;
     background-color: $white;
   }
 
-  &__price {
+  &__text {
     flex: 1;
+    font-weight: bold;
     text-align: right;
-    color: $gray-darker;
+    color: $text-color;
     padding-right: 12px;
 
     span {
@@ -35,15 +36,10 @@
     }
   }
 
-  &__price-integer {
+  &__price {
     color: $red;
   }
 
-  &__price-decimal {
-    color: $red;
-    font-size: 12px;
-  }
-
   .van-button {
     width: 110px;
     height: 100%;