feat(SubmitBar): 增加submit-bar组件 @zhongnan (#597)

docs/src/Preview.vue

@@ -42,7 +42,8 @@ const MAP = {
   tabbar: 'tabbar-201808160922.png',
   toast: 'toast-201808191046.png',
   transition: 'transition-20180821.png',
-  'tree-select': 'tree-select-201808092138.png'
+  'tree-select': 'tree-select-201808092138.png',
+  'submit-bar': 'submit-bar-20180919.jpeg'
 };
 
 export default {

example/app.json

@@ -29,7 +29,8 @@
     "pages/toast/index",
     "pages/transition/index",
     "pages/tree-select/index",
-    "pages/area/index"
+    "pages/area/index",
+    "pages/submit-bar/index"
   ],
   "window": {
     "navigationBarBackgroundColor": "#f8f8f8",

example/config.js

@@ -137,6 +137,10 @@ export default [
       {
         path: '/card',
         title: 'Card 卡片'
+      },
+      {
+        path: '/submit-bar',
+        title: 'SubmitBar 提交订单栏'
       }
     ]
   }

example/pages/submit-bar/index.js

@@ -0,0 +1,11 @@
+import Page from '../../common/page';
+import Toast from '../../dist/toast/toast';
+
+Page({
+  onClickButton() {
+    Toast('点击按钮');
+  },
+  onClickLink() {
+    Toast('修改地址');
+  }
+});

example/pages/submit-bar/index.json

@@ -0,0 +1,9 @@
+{
+  "navigationBarTitleText": "Steps 步骤条",
+  "usingComponents": {
+    "demo-block": "../../components/demo-block/index",
+    "van-submit-bar": "../../dist/submit-bar/index",
+    "van-tag": "../../dist/tag/index",
+    "van-toast": "../../dist/toast/index"
+  }
+}

example/pages/submit-bar/index.wxml

@@ -0,0 +1,47 @@
+<demo-block title="基础用法">
+  <van-submit-bar
+    price="{{ 3050 }}"
+    button-text="提交订单"
+    bind:submit="onClickButton"
+    custom-class="van-submit-bar"
+  />
+</demo-block>
+
+<demo-block title="禁用状态">
+  <van-submit-bar
+    disabled
+    price="{{ 3050 }}"
+    button-text="提交订单"
+    tip="您的收货地址不支持同城送, 我们已为您推荐快递"
+    bind:submit="onClickButton"
+    custom-class="van-submit-bar"
+  />
+</demo-block>
+
+<demo-block title="加载状态">
+  <van-submit-bar
+    loading
+    price="{{ 3050 }}"
+    button-text="提交订单"
+    bind:submit="onClickButton"
+    custom-class="van-submit-bar"
+  />
+</demo-block>
+
+<demo-block title="高级用法">
+  <van-submit-bar
+    price="{{ 3050 }}"
+    button-text="提交订单"
+    bind:submit="onClickButton"
+    custom-class="van-submit-bar"
+    tip="{{ true }}"
+  >
+    <van-tag type="primary" custom-class="van-tag">标签</van-tag>
+    <view slot="tip">
+      您的收货地址不支持同城送
+      <text class="van-edit-address" bindtap="onClickLink">修改地址</text>
+    </view>
+  </van-submit-bar>
+</demo-block>
+
+<van-toast id="van-toast" />

example/pages/submit-bar/index.wxss

@@ -0,0 +1,11 @@
+.van-submit-bar {
+  position: relative !important;
+}
+
+.van-edit-address {
+  color: #38f;
+}
+
+.van-tag {
+  margin-left: 15px;
+}

packages/submit-bar/README.md

@@ -0,0 +1,98 @@
+## SubmitBar 提交订单栏
+
+### 使用指南
+在 index.json 中引入组件
+```json
+"usingComponents": {
+  "van-submit-bar": "path/to/vant-weapp/dist/submit-bar/index"
+}
+```
+
+### 代码演示
+
+#### 基础用法
+
+```html
+<van-submit-bar
+  price="{{ 3050 }}"
+  button-text="提交订单"
+  bind:submit="onSubmit"
+/>
+```
+
+#### 禁用状态
+禁用状态下不会触发`submit`事件
+
+```html
+<van-submit-bar
+  disabled
+  price="{{ 3050 }}"
+  button-text="提交订单"
+  tip="您的收货地址不支持同城送, 我们已为您推荐快递"
+  bind:submit="onSubmit"
+/>
+```
+
+#### 加载状态
+加载状态下不会触发`submit`事件
+
+```html
+<van-submit-bar
+  loading
+  price="{{ 3050 }}"
+  button-text="提交订单"
+  bind:submit="onSubmit"
+/>
+```
+
+#### 高级用法
+通过插槽插入自定义内容
+
+```html
+<van-submit-bar
+  price="{{ 3050 }}"
+  button-text="提交订单"
+  bind:submit="onClickButton"
+  tip="{{ true }}"
+>
+  <van-tag type="primary">标签</van-tag>
+  <view slot="tip">
+    您的收货地址不支持同城送, <text>修改地址</text>
+  </view>
+</van-submit-bar>
+```
+
+### API
+
+| 参数 | 说明 | 类型 | 默认值 |
+|-----------|-----------|-----------|-------------|
+| price | 价格（单位分） |  `Number` | - |
+| label | 价格文案 |  `String` | `合计：` |
+| button-text | 按钮文字 | `String` | - |
+| button-type | 按钮类型 |  `String` | `danger` |
+| tip | 提示文案 |  `String` / `Boolean` | - |
+| disabled | 是否禁用按钮 |  `Boolean` | `false` |
+| loading | 是否显示加载中的按钮 |  `Boolean` | `false` |
+| currency | 货币符号 |  `String` | `¥` |
+
+### Event
+
+| 事件名 | 说明 | 参数 |
+|-----------|-----------|-----------|
+| submit | 按钮点击事件回调 | - |
+
+### Slot
+
+| 名称 | 说明 |
+|-----------|-----------|
+| - | 自定义订单栏左侧内容 |
+| top | 自定义订单栏上方内容 |
+| tip | 提示文案中的额外操作和说明，`tip` 不为空时才显示 |
+
+### 外部样式类
+
+| 类名 | 说明 |
+|-----------|-----------|
+| custom-class | 根节点样式类 |
+| price-class | 价格样式类 |
+| button-class | 按钮样式类 |

packages/submit-bar/index.js

@@ -0,0 +1,45 @@
+import { create } from '../common/create';
+
+create({
+  classes: [
+    'price-class',
+    'button-class'
+  ],
+  props: {
+    tip: [String, Boolean],
+    type: Number,
+    price: Number,
+    label: String,
+    loading: Boolean,
+    disabled: Boolean,
+    buttonText: String,
+    currency: {
+      type: String,
+      value: '¥'
+    },
+    buttonType: {
+      type: String,
+      value: 'danger'
+    }
+  },
+  options: {
+    multipleSlots: true
+  },
+  computed: {
+    hasPrice() {
+      return typeof this.data.price === 'number';
+    },
+    priceStr() {
+      return (this.data.price / 100).toFixed(2);
+    },
+    tipStr() {
+      const { tip } = this.data;
+      return typeof tip === 'string' ? tip : '';
+    }
+  },
+  methods: {
+    onSubmit(event) {
+      this.$emit('submit', event.detail);
+    }
+  }
+});

packages/submit-bar/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-button": "../button/index"
+  }
+}

packages/submit-bar/index.pcss

@@ -0,0 +1,52 @@
+@import '../common/style/var.pcss';
+
+.van-submit-bar {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  z-index: 100;
+  position: fixed;
+  user-select: none;
+
+  &__tip {
+    color: $orange;
+    padding: 10px;
+    font-size: 12px;
+    line-height: 18px;
+    background-color: #fff7cc;
+  }
+
+  &__bar {
+    height: 50px;
+    display: flex;
+    font-size: 14px;
+    align-items: center;
+    background-color: $white;
+  }
+
+  &__text {
+    flex: 1;
+    font-weight: 500;
+    text-align: right;
+    color: $text-color;
+    padding-right: 12px;
+
+    span {
+      display: inline-block;
+    }
+  }
+
+  &__price {
+    color: $red;
+  }
+
+  &__button {
+    button {
+      width: 110px;
+    }
+
+    &--disabled button {
+      border: none !important;
+    }
+  }
+}

packages/submit-bar/index.wxml

@@ -0,0 +1,29 @@
+<view class="van-submit-bar custom-class">
+  <slot name="top" />
+
+  <view wx:if="{{ tip }}" class="van-submit-bar__tip">
+    {{ tipStr }}<slot name="tip" />
+  </view>
+
+  <view class="van-submit-bar__bar">
+    <slot />
+    <view class="van-submit-bar__text">
+      <block wx:if="{{ hasPrice }}">
+        <text>{{ label || '合计：' }}</text>
+        <text class="van-submit-bar__price price-class">{{ currency }} {{ priceStr }}</text>
+      </block>
+    </view>
+    <van-button
+      type="{{ buttonType }}"
+      disabled="{{ disabled }}"
+      loading="{{ loading }}"
+      bind:click="onSubmit"
+      square
+      size="large"
+      class="van-submit-bar__button {{ disabled ? 'van-submit-bar__button--disabled' : '' }}"
+      custom-class="button-class"
+    >
+      {{ loading ? '' : buttonText }}
+    </van-button>
+  </view>
+</view>