feat: ✨ keep consistance with vant-weapp submit-bar

huang-xiao-jian · Jun 6, 2020 · 472c2c6 · 472c2c6
1 parent e8b795d
commit 472c2c6
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 18 deletions.
diff --git a/packages/SubmitBar/SubmitBar.tsx b/packages/SubmitBar/SubmitBar.tsx
@@ -4,7 +4,6 @@ import clsx from 'clsx';
 import { View, Text } from 'remax/wechat';
 // internal
 import Button from '../Button';
-import { ButtonType } from '../Button/Button';
 import Icon from '../Icon';
 import withDefaultProps from '../tools/with-default-props-advance';
 import { Select, Switch, Case } from '../tools/Switch';
@@ -19,20 +18,21 @@ interface NeutralSubmitBarProps {
   // button
   loading: boolean;
   disabled: boolean;
-  buttonType: ButtonType;
+  buttonType: 'default' | 'primary' | 'info' | 'warning' | 'danger';
 }
 
 interface ExogenousSubmitBarProps {
+  // 单位为分
+  price: number;
+  suffixLabel?: string;
+  buttonText: string;
   // 容器类名，用以覆盖内部
   className?: string;
   // tip block
-  tip?: ReactNode;
+  tip?: string | ReactNode;
   tipIcon?: string;
-  // 推荐精确到分
-  price: number;
-  suffixLabel?: string;
+
   // button
-  buttonText: string;
   onSubmit?: (event: any) => void;
 }
 
@@ -111,7 +111,7 @@ const SubmitBar: FunctionComponent<SubmitBarProps> = (props) => {
         <Select in={derivation.hasPrice}>
           <View className="van-submit-bar__text">
             <Text>{label}</Text>
-            <Text className="van-submit-bar__price price-class">
+            <Text className="van-submit-bar__price">
               <Text className="van-submit-bar__currency">{currency} </Text>
               <Text className="van-submit-bar__price-integer">
                 {derivation.integerStr}

diff --git a/public/app.css b/public/app.css
@@ -1,3 +1,7 @@
+page {
+  background-color: #f7f8fa;
+}
+
 .demo-block {
   width: 100%;
 }
@@ -105,3 +109,7 @@
 .demo-block__goods-action {
   position: static !important;
 }
+
+.demo-block__submit-bar {
+  position: static !important;
+}
diff --git a/public/pages/submit-bar/index.tsx b/public/pages/submit-bar/index.tsx
@@ -1,31 +1,61 @@
 // packages
-import React, { useState } from 'react';
+import React from 'react';
 import { View, Text } from 'remax/wechat';
 
 // internal
 import SubmitBar from '../../../packages/SubmitBar';
+import Tag from '../../../packages/Tag';
 
 export default () => {
-  const [loading, setLoading] = useState(false);
   const onSubmit = () => {
-    setLoading(true);
-
-    setTimeout(() => {
-      setLoading(false);
-    }, 1000);
+    wx.showToast({ title: '已提交' });
   };
+  const advancedTip = (
+    <>
+      您的收货地址不支持同城送，
+      <Text style={{ color: '#1989fa' }}>修改地址</Text>
+    </>
+  );
 
   return (
     <View className="demo-block">
       <Text className="demo-block__title">基础用法</Text>
       <SubmitBar
-        tip="您的收货地址不支持同城送, 我们已为您推荐快递"
-        tipIcon="question-o"
         price={2999}
         buttonText="提交订单"
-        loading={loading}
+        className="demo-block__submit-bar"
         onSubmit={onSubmit}
       />
+
+      <Text className="demo-block__title">禁用状态</Text>
+      <SubmitBar
+        disabled
+        price={2999}
+        className="demo-block__submit-bar"
+        buttonText="提交订单"
+        tip="您的收货地址不支持同城送, 我们已为您推荐快递"
+        tipIcon="//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"
+        safeAreaInsetBottom={false}
+      />
+
+      <Text className="demo-block__title">加载状态</Text>
+      <SubmitBar
+        loading
+        price={2999}
+        buttonText="提交订单"
+        safeAreaInsetBottom={false}
+        className="demo-block__submit-bar"
+      />
+
+      <Text className="demo-block__title">高级用法</Text>
+      <SubmitBar
+        price={2999}
+        buttonText="提交订单"
+        tip={advancedTip}
+        className="demo-block__submit-bar"
+      >
+        <Tag type="primary">标签</Tag>
+      </SubmitBar>
     </View>
   );
 };