[improvement] SubmitBar: price & tip 支持动态更新

fix 1676

packages/common/style/var.less

@@ -132,6 +132,23 @@
 @stepper-input-disabled-color: @active-color;
 @stepper-border-radius: 4px;
 
+// SubmitBar
+@submit-bar-height: 50px;
+@submit-bar-z-index: 100;
+@submit-bar-background-color: @white;
+@submit-bar-button-width: 110px;
+@submit-bar-price-color: @red;
+@submit-bar-price-font-size: 18px;
+@submit-bar-currency-font-size: 14px;
+@submit-bar-text-color: @text-color;
+@submit-bar-text-font-size: 14px;
+@submit-bar-tip-padding: 10px;
+@submit-bar-tip-font-size: 12px;
+@submit-bar-tip-line-height: 1.5;
+@submit-bar-tip-color: #f56723;
+@submit-bar-tip-background-color: #fff7cc;
+@submit-bar-tip-icon-size: 12px;
+
 // NavBar
 @nav-bar-height: 44px;
 

packages/submit-bar/README.md

@@ -78,6 +78,7 @@ es5
 |-----------|-----------|-----------|-------------|
 | price | 价格（单位分） |  `Number` | - |
 | label | 价格文案 |  `String` | `合计：` |
+| suffix-label | 价格右侧文案 | `String` | - |
 | button-text | 按钮文字 | `String` | - |
 | button-type | 按钮类型 |  `String` | `danger` |
 | tip | 提示文案 |  `String` / `Boolean` | - |
@@ -100,7 +101,7 @@ es5
 |-----------|-----------|
 | - | 自定义订单栏左侧内容 |
 | top | 自定义订单栏上方内容 |
-| tip | 提示文案中的额外操作和说明，`tip` 不为空时才显示 |
+| tip | 提示文案中的额外操作和说明 |
 
 ### 外部样式类
 

packages/submit-bar/index.less

@@ -1,25 +1,29 @@
 @import '../common/style/var.less';
 
 .van-submit-bar {
-  z-index: 100;
   position: fixed;
   bottom: 0;
   left: 0;
+  z-index: @submit-bar-z-index;
   width: 100%;
   user-select: none;
 
   &__tip {
-    padding: 10px;
+    padding: @submit-bar-tip-padding;
-    color: #f56723;
+    font-size: @submit-bar-tip-font-size;
-    font-size: 12px;
+    line-height: @submit-bar-tip-line-height;
-    line-height: 18px;
+    color: @submit-bar-tip-color;
-    background-color: #fff7cc;
+    background-color: @submit-bar-tip-background-color;
+
+    &:empty {
+      display: none;
+    }
   }
 
   &__tip-icon {
-    width:12px;
+    width: 12px;
-    height:12px;
+    height: 12px;
-    margin-right:4px;
+    margin-right: 4px;
     vertical-align: middle;
   }
 
@@ -30,10 +34,11 @@
 
   &__bar {
     display: flex;
+    height: @submit-bar-height;
+    font-size: @submit-bar-text-font-size;
+    background-color: @submit-bar-background-color;
     align-items: center;
-    height: 50px;
+    justify-content: flex-end;
-    background-color: @white;
-    font-size: 14px;
 
     &--safe {
       padding-bottom: @safe-area-inset-bottom;
@@ -41,23 +46,27 @@
   }
 
   &__text {
-    flex: 1;
+    padding-right: 12px;
-    color: @text-color;
     font-weight: 500;
+    color: @submit-bar-text-color;
+    flex: 1;
     text-align: right;
   }
 
   &__price {
-    color: @red;
+    font-size: @submit-bar-price-font-size;
-    font-size: 18px;
+    color: @submit-bar-price-color;
-    padding-right: 12px;
   }
 
   &__currency {
-    font-size: 14px;
+    font-size: @submit-bar-currency-font-size;
+  }
+
+  &__suffix-label {
+    margin-left: 5px;
   }
 
   &__button {
-    width: 110px;
+    width: @submit-bar-button-width;
   }
 }

packages/submit-bar/index.ts

@@ -11,10 +11,16 @@ VantComponent({
   ],
 
   props: {
-    tip: null,
+    tip: {
+      type: null,
+      observer: 'updateTip'
+    },
     tipIcon: String,
     type: Number,
-    price: null,
+    price: {
+      type: null,
+      observer: 'updatePrice'
+    },
     label: String,
     loading: Boolean,
     disabled: Boolean,
@@ -29,26 +35,25 @@ VantComponent({
     },
     decimalLength: {
       type: Number,
-      value: 2
+      value: 2,
-    }
+      observer: 'updatePrice'
-  },
-
-  computed: {
-    hasPrice() {
-      return typeof this.data.price === 'number';
     },
-
+    suffixLabel: String
-    priceStr() {
-      return (this.data.price / 100).toFixed(this.data.decimalLength);
-    },
-
-    tipStr() {
-      const { tip } = this.data;
-      return typeof tip === 'string' ? tip : '';
-    }
   },
 
   methods: {
+    updatePrice() {
+      const { price, decimalLength } = this.data;
+      this.set({
+        hasPrice: typeof price === 'number',
+        priceStr: (price / 100).toFixed(decimalLength)
+      });
+    },
+
+    updateTip() {
+      this.set({ hasTip: typeof this.data.tip === 'string' });
+    },
+
     onSubmit(event: Weapp.Event) {
       this.$emit('submit', event.detail);
     }

packages/submit-bar/index.wxml

@@ -3,28 +3,28 @@
 <view class="van-submit-bar custom-class">
   <slot name="top" />
 
-  <view wx:if="{{ tip }}" class="van-submit-bar__tip">
+  <view class="van-submit-bar__tip">
     <van-icon
       wx:if="{{ tipIcon }}"
       size="12px"
       name="{{ tipIcon }}"
       custom-class="van-submit-bar__tip-icon"
     />
-    <view wx:if="{{ tipStr }}" class="van-submit-bar__tip-text">
+    <view wx:if="{{ hasTip }}" class="van-submit-bar__tip-text">
-      {{ tipStr }}
+      {{ tip }}
     </view>
     <slot name="tip" />
   </view>
 
   <view class="bar-class {{ utils.bem('submit-bar__bar', { safe: safeAreaInsetBottom && isIPhoneX }) }}">
     <slot />
-    <view class="van-submit-bar__text">
+    <view wx:if="{{ hasPrice }}" class="van-submit-bar__text">
-      <block wx:if="{{ hasPrice }}">
+      <text>{{ label || '合计：' }}</text>
-        <text>{{ label || '合计：' }}</text>
+      <text class="van-submit-bar__price price-class">
-        <text class="van-submit-bar__price price-class">
+        <text class="van-submit-bar__currency">{{ currency }} </text>
-          <text class="van-submit-bar__currency">{{ currency }}</text> {{ priceStr }}
+        <text>{{ priceStr }}</text>
-        </text>
+      </text>
-      </block>
+      <text class="van-submit-bar__suffix-label">{{ suffixLabel }}</text>
     </view>
     <van-button
       square