add PayOrder component

packages/index.js

@@ -19,6 +19,7 @@ import Lazyload from './lazyload';
 import Loading from './loading';
 import NoticeBar from './notice-bar';
 import Panel from './panel';
+import PayOrder from './pay-order';
 import Picker from './picker';
 import Popup from './popup';
 import Progress from './progress';
@@ -60,6 +61,7 @@ const components = [
   Loading,
   NoticeBar,
   Panel,
+  PayOrder,
   Picker,
   Popup,
   Progress,
@@ -117,6 +119,7 @@ export {
   Loading,
   NoticeBar,
   Panel,
+  PayOrder,
   Picker,
   Popup,
   Progress,

packages/pay-order/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="van-pay-order">
+    <div class="van-pay-order__tip" v-show="tip">{{ tip }}</div>
+    <div class="van-pay-order__bar">
+      <div class="van-pay-order__price">
+        <span class="van-pay-order__price-text">合计：</span>
+        <span class="van-pay-order__price-interger">¥{{ priceInterger }}.</span>
+        <span class="van-pay-order__price-decimal">{{ priceDecimal }}</span>
+      </div>
+      <van-button :type="buttonType" :disabled="disabled" :loading="loading" @click="onSubmit">
+        {{ loading ? '' : buttonText }}
+      </van-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import Button from '../button';
+
+export default {
+  name: 'van-pay-order',
+
+  components: {
+    [Button.name]: Button
+  },
+
+  props: {
+    tip: String,
+    disabled: Boolean,
+    loading: Boolean,
+    buttonText: {
+      type: String,
+      required: true
+    },
+    buttonType: {
+      type: String,
+      default: 'danger'
+    },
+    price: {
+      type: Number,
+      required: true
+    }
+  },
+
+  computed: {
+    priceInterger() {
+      return Math.floor(this.price / 100);
+    },
+    priceDecimal() {
+      const decimal = this.price % 100;
+      return (decimal < 10 ? '0' : '') + decimal;
+    }
+  },
+
+  methods: {
+    onSubmit() {
+      if (!this.disabled && !this.loading) {
+        this.$emit('submit');
+      }
+    }
+  }
+};
+</script>

packages/vant-css/src/index.css

@@ -33,3 +33,4 @@
 @import './notice-bar.css';
 @import './switch-cell.css';
 @import './express-way.css';
+@import './pay-order.css';

packages/vant-css/src/pay-order.css

@@ -0,0 +1,59 @@
+.van-pay-order {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  z-index: 100;
+  position: fixed;
+  user-select: none;
+
+  &__tip {
+    color: #f60;
+    font-size: 12px;
+    line-height: 18px;
+    padding: 10px 10px;
+    background-color: #fff6e1;
+  }
+
+  &__bar {
+    height: 50px;
+    display: flex;
+    line-height: 50px;
+    background-color: #fff;
+  }
+
+  &__price {
+    flex: 1;
+    text-align: right;
+    padding-right: 10px;
+  }
+
+  &__price-text {
+    color: #666;
+    font-size: 16px;
+  }
+
+  &__price-interger {
+    color: #f44;
+    font-size: 16px;
+  }
+
+  &__price-decimal {
+    color: #f44;
+    font-size: 12px;
+  }
+
+  .van-button {
+    width: 110px;
+    height: 100%;
+    border-radius: 0;
+
+    &--disabled {
+      border: none;
+    }
+
+    .van-loading__spinner--white {
+      border-color: rgba(255,255,255, .8);
+      border-top-color: transparent;
+    }
+  }
+}