feat: first commit

src/components/picker-toolbar/index.less

@@ -0,0 +1,37 @@
+@import '@/styles/variables.less';
+
+.picker-toolbar {
+  width: 100%;
+  padding: 16px 24px;
+  border-top: solid 1px #E0E0E0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+
+  .button(@borderColor) {
+    width: calc(50% - 36px);
+    height: 80px;
+    line-height: 78px;
+    border-radius: 48px;
+    padding: 0;
+    margin: 0;
+    border: solid 1px @borderColor;
+  }
+
+  &__button-cancel {
+    .button(#E0E0E0);
+    margin-right: 24px;
+    color: @blColor;
+    background: #FFFFFF;
+
+    &::after {
+      border-color: transparent
+    }
+  }
+
+  &__button-confirm {
+    .button(@blHighlightColor);
+    color: #FFFFFF;
+    background: @blHighlightColor;
+  }
+}

src/components/picker-toolbar/index.tsx

@@ -0,0 +1,31 @@
+import { Button } from '@tarojs/components';
+
+import classNames from 'classnames';
+
+import './index.less';
+
+interface IProps {
+  className?: string;
+  cancelText?: string;
+  confirmText?: string;
+  onClickCancel: () => void;
+  onClickConfirm: () => void;
+}
+
+const PREFIX = 'picker-toolbar';
+
+function PickerToolbar(props: IProps) {
+  const { className, cancelText = '取消', confirmText = '确定', onClickCancel, onClickConfirm } = props;
+  return (
+    <div className={classNames(PREFIX, className)}>
+      <Button className={`${PREFIX}__button-cancel`} onClick={onClickCancel}>
+        {cancelText}
+      </Button>
+      <Button className={`${PREFIX}__button-confirm`} onClick={onClickConfirm}>
+        {confirmText}
+      </Button>
+    </div>
+  );
+}
+
+export default PickerToolbar;