feat: 增加发货单过滤

src/pages/list/filter/field/index.jsx

@@ -0,0 +1,42 @@
+import {Input, Picker, Text, View} from '@tarojs/components';
+import {useMemo} from 'react';
+import {Switch} from '@antmjs/vantui';
+
+export default function Field({title, value, disabled, date, anomaly}) {
+  const Info = useMemo(
+    function () {
+      if (date) {
+        return (
+          <Picker mode='date'>
+            <Input
+              className='border-0 border-b border-solid border-gray-200 mt-1 py-1'
+              placeholder={`请选择${title}`}
+              disabled
+            />
+          </Picker>
+        );
+      }
+
+      if (anomaly) {
+        return <Switch size='24px' className='mt-1' />;
+      }
+
+      return (
+        <Input
+          className='border-0 border-b border-solid border-gray-200 mt-1 py-1'
+          placeholder={`请输入${title}`}
+          value={value}
+          disabled={disabled}
+        />
+      );
+    },
+    [anomaly, date, disabled, title, value],
+  );
+
+  return (
+    <View className='mt-2 first:mt-0'>
+      <Text className='text-lg font-semibold color-[#333] block'>{title}</Text>
+      {Info}
+    </View>
+  );
+}

src/pages/list/filter/index.jsx

@@ -0,0 +1,21 @@
+import {Popup} from '@antmjs/vantui';
+import Field from './field';
+
+export default function Filter({visible, onClose}) {
+  return (
+    <Popup
+      show={visible}
+      onClose={onClose}
+      closeable
+      position='bottom'
+      round
+      className='pt-8 px-4 !pb-10'
+    >
+      <Field title='卡车号' />
+      <Field title='客户号' />
+      <Field title='发货时间' disabled date />
+      <Field title='收货时间' disabled date />
+      <Field title='是否异常' disabled anomaly />
+    </Popup>
+  );
+}

src/pages/list/index.jsx

@@ -4,9 +4,12 @@ import classNames from 'classnames';
 import {Button} from '@antmjs/vantui';
 import {usePreview} from './hooks';
 import filterIcon from '@assets/filter.svg';
+import Filter from './filter';
+import {useBoolean} from 'ahooks';
 
 export default function List() {
   const onClick = usePreview();
+  const [visible, {setFalse: onClose, setTrue: onShow}] = useBoolean();
 
   return (
     <>
@@ -83,6 +86,7 @@ export default function List() {
       </View>
 
       <View
+        onClick={onShow}
         className={classNames(
           'fixed right-3 bottom-8 flex items-center justify-center bg-white rounded-3xl',
           'w-10 h-10 shadow-lg z-10',
@@ -90,6 +94,8 @@ export default function List() {
       >
         <Image src={filterIcon} mode='widthFix' className='w-5' />
       </View>
+
+      <Filter visible={visible} onClose={onClose} />
     </>
   );
 }

src/styles/app.css

@@ -52,3 +52,7 @@ page {
   --button-normal-font-size: 14px;
   --button-normal-border-radius: 6px;
 }
+
+input {
+  font-size: 14px;
+}