[improvement] SubmitBar: jsx (#2625)

packages/submit-bar/index.js

@@ -0,0 +1,63 @@
+import { use } from '../utils';
+import Button from '../button';
+
+const [sfc, bem, t] = use('submit-bar');
+
+export default sfc({
+  props: {
+    tip: String,
+    label: String,
+    loading: Boolean,
+    disabled: Boolean,
+    buttonText: String,
+    price: {
+      type: Number,
+      default: null
+    },
+    currency: {
+      type: String,
+      default: '¥'
+    },
+    buttonType: {
+      type: String,
+      default: 'danger'
+    }
+  },
+
+  render(h) {
+    const { tip, price, $slots } = this;
+    const hasPrice = typeof price === 'number';
+
+    return (
+      <div class={bem()}>
+        {$slots.top}
+        {($slots.tip || tip) && (
+          <div class={bem('tip')}>
+            {tip}
+            {$slots.tip}
+          </div>
+        )}
+        <div class={bem('bar')}>
+          {$slots.default}
+          <div class={bem('text')}>
+            {hasPrice && [
+              <span>{this.label || t('label')}</span>,
+              <span class={bem('price')}>{`${this.currency} ${(price / 100).toFixed(2)}`}</span>
+            ]}
+          </div>
+          <Button
+            square
+            size="large"
+            type={this.buttonType}
+            loading={this.loading}
+            disabled={this.disabled}
+            text={this.loading ? '' : this.buttonText}
+            onClick={() => {
+              this.$emit('submit');
+            }}
+          />
+        </div>
+      </div>
+    );
+  }
+});

packages/submit-bar/index.vue

@@ -1,74 +0,0 @@
-<template>
-  <div :class="b()">
-    <slot name="top" />
-    <div
-      v-if="tip || $slots.tip"
-      :class="b('tip')"
-    >
-      {{ tip }}<slot name="tip" />
-    </div>
-    <div :class="b('bar')">
-      <slot />
-      <div :class="b('text')">
-        <template v-if="hasPrice">
-          <span v-text="label || $t('label')" />
-          <span :class="b('price')">{{ currency }} {{ price | format }}</span>
-        </template>
-      </div>
-      <van-button
-        square
-        size="large"
-        :type="buttonType"
-        :disabled="disabled"
-        :loading="loading"
-        :text="loading ? '' : buttonText"
-        @click="$emit('submit')"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import VanButton from '../button';
-import create from '../utils/create';
-
-export default create({
-  name: 'submit-bar',
-
-  components: {
-    VanButton
-  },
-
-  props: {
-    tip: String,
-    label: String,
-    loading: Boolean,
-    disabled: Boolean,
-    buttonText: String,
-    price: {
-      type: Number,
-      default: null
-    },
-    currency: {
-      type: String,
-      default: '¥'
-    },
-    buttonType: {
-      type: String,
-      default: 'danger'
-    }
-  },
-
-  computed: {
-    hasPrice() {
-      return typeof this.price === 'number';
-    }
-  },
-
-  filters: {
-    format(price) {
-      return (price / 100).toFixed(2);
-    }
-  }
-});
-</script>

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

@@ -4,26 +4,23 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-submit-bar">
-      <!---->
       <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 class="van-button van-button--danger van-button--large van-button--square"><span class="van-button__text">提交订单</span></button>
+        <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--large van-button--square"><span class="van-button__text">提交订单</span></button>
       </div>
     </div>
   </div>
   <div>
     <div class="van-submit-bar">
-      <div class="van-submit-bar__tip">
+      <div class="van-submit-bar__tip">你的收货地址不支持同城送, 我们已为你推荐快递</div>
-        你的收货地址不支持同城送, 我们已为你推荐快递</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--square van-button--disabled"><span class="van-button__text">提交订单</span></button>
+        <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--square van-button--disabled"><span class="van-button__text">提交订单</span></button>
       </div>
     </div>
   </div>
   <div>
     <div class="van-submit-bar">
-      <!---->
       <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 class="van-button van-button--danger van-button--large van-button--square van-button--loading">
+        <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--large van-button--square van-button--loading">
           <div class="van-loading van-loading--circular van-loading" style="color:;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>
         </button>
       </div>
@@ -31,8 +28,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-submit-bar">
-      <div class="van-submit-bar__tip">
+      <div class="van-submit-bar__tip"><span>
-        <span>
         你的收货地址不支持同城送, 
         <span class="edit-address">
           修改地址
@@ -42,7 +38,7 @@ exports[`renders demo correctly 1`] = `
           <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
               <!----></i></div><span class="van-checkbox__label">全选</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--large van-button--square"><span class="van-button__text">提交订单</span></button>
+        <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--large van-button--square"><span class="van-button__text">提交订单</span></button>
       </div>
     </div>
   </div>

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

@@ -2,9 +2,8 @@
 
 exports[`submit 1`] = `
 <div class="van-submit-bar">
-  <!---->
   <div class="van-submit-bar__bar">
-    <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--large van-button--square van-button--disabled"><span class="van-button__text"></span></button>
+    <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--large van-button--square van-button--disabled"><span class="van-button__text"></span></button>
   </div>
 </div>
 `;