[new feature] SubmitBar: add tip-icon prop (#3249)

README.zh-CN.md

@@ -115,7 +115,7 @@ Vue.use(Vant);
 
 ## 贡献代码
 
-修改代码请阅读我们的 [开发指南](https://www.youzanyun.com/zanui/vant#/zh-CN/contribution)。
+修改代码请阅读我们的 [开发指南](https://youzan.github.io/vant/#/zh-CN/contribution)。
 
 使用过程中发现任何问题都可以提 [Issue](https://github.com/youzan/vant/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://github.com/youzan/vant/pulls)。
 

packages/submit-bar/demo/index.vue

@@ -14,6 +14,7 @@
         :price="3050"
         :button-text="$t('submit')"
         :tip="$t('tip1')"
+        tip-icon="info-o"
         @submit="onClickButton"
       />
     </demo-block>

packages/submit-bar/en-US.md

@@ -28,6 +28,7 @@ Vue.use(SubmitBar);
   :price="3050"
   button-text="Submit"
   tip="Some tips"
+  tip-icon="info-o"
   @submit="onSubmit"
 />
 ```
@@ -69,6 +70,7 @@ Use slot to add custom contents.
 | button-text | Button text | `String` | - |
 | button-type | Button type |  `String` | `danger` |
 | tip | Tip |  `String` | - |
+| tip-icon | Icon |  `String` | - |
 | disabled | Whether to disable button |  `Boolean` | `false` |
 | loading | Whether to show loading icon |  `Boolean` | `false` |
 | currency | Currency symbol |  `String` | `¥` |

packages/submit-bar/index.less

@@ -17,6 +17,16 @@
     background-color: #fff7cc;
   }
 
+  &__tip-icon {
+    font-size: 12px;
+    min-width: 18px;
+    vertical-align: middle;
+  }
+
+  &__tip-text {
+    vertical-align: middle;
+  }
+
   &__bar {
     height: 50px;
     display: flex;

packages/submit-bar/index.tsx

@@ -1,6 +1,7 @@
 import { use } from '../utils';
 import { emit, inherit } from '../utils/functional';
 import Button, { ButtonType } from '../button';
+import Icon from '../icon';
 
 // Types
 import { CreateElement, RenderContext } from 'vue/types';
@@ -8,6 +9,7 @@ import { ScopedSlot, DefaultSlots } from '../utils/use/sfc';
 
 export type SubmitBarProps = {
   tip?: string;
+  tipIcon?: string;
   label?: string;
   price?: number;
   loading?: boolean;
@@ -32,7 +34,7 @@ function SubmitBar(
   slots: SubmitBarSlots,
   ctx: RenderContext<SubmitBarProps>
 ) {
-  const { tip, price } = props;
+  const { tip, price, tipIcon } = props;
   const hasPrice = typeof price === 'number';
 
   return (
@@ -43,7 +45,12 @@ function SubmitBar(
       {slots.top && slots.top()}
       {(slots.tip || tip) && (
         <div class={bem('tip')}>
-          {tip}
+          {tipIcon && (
+            <Icon class={bem('tip-icon')} name={tipIcon} />
+          )}
+          {tip && (
+            <span class={bem('tip-text')}>{tip}</span>
+          )}
           {slots.tip && slots.tip()}
         </div>
       )}
@@ -75,6 +82,7 @@ function SubmitBar(
 
 SubmitBar.props = {
   tip: String,
+  tipIcon: String,
   label: String,
   loading: Boolean,
   disabled: Boolean,

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

@@ -11,7 +11,8 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-submit-bar">
-      <div class="van-submit-bar__tip">你的收货地址不支持同城送, 我们已为你推荐快递</div>
+      <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"><span class="van-button__text">提交订单</span></button>
       </div>

packages/submit-bar/zh-CN.md

@@ -29,6 +29,7 @@ Vue.use(SubmitBar);
   :price="3050"
   button-text="提交订单"
   tip="你的收货地址不支持同城送, 我们已为你推荐快递"
+  tip-icon="info-o"
   @submit="onSubmit"
 />
 ```
@@ -72,6 +73,7 @@ Vue.use(SubmitBar);
 | button-text | 按钮文字 | `String` | - | - |
 | button-type | 按钮类型 | `String` | `danger` | - |
 | tip | 提示文案 |  `String` | - | - |
+| tip-icon | 左侧图标名称或图片链接，可选值见 Icon 组件 |  `String` | - | - |
 | disabled | 是否禁用按钮 | `Boolean` | `false` | - |
 | loading | 是否显示加载中的按钮 |  `Boolean` | `false` | - |
 | currency | 货币符号 | `String` | `¥` | 1.0.6 |