提交代码

src/pages/index/MySearch.tsx

@@ -0,0 +1,57 @@
+import {Search} from '@nutui/icons-react-taro'
+import {Button, Input} from '@nutui/nutui-react-taro'
+import {useState} from "react";
+import Taro from '@tarojs/taro';
+function MySearch(props) {
+  const [keywords, setKeywords] = useState<string>('')
+
+  const onKeywords = (keywords: string) => {
+    setKeywords(keywords)
+  }
+
+  const onQuery = () => {
+    if(!keywords){
+      Taro.showToast({
+        title: '请输入关键字',
+        icon: 'none'
+      });
+      return false;
+    }
+    props.done(keywords);
+  }
+
+
+  return (
+    <div className={'z-20 left-0 w-full'}>
+      <div className={'px-2'}>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            background: '#fff',
+            padding: '0 7px',
+            borderRadius: '20px'
+          }}
+        >
+          <Search size={18} className={'ml-2 text-gray-400'}/>
+          <Input
+            placeholder="搜索商品"
+            value={keywords}
+            onChange={onKeywords}
+            onConfirm={onQuery}
+            style={{ padding: '9px 8px'}}
+          />
+          <div
+            className={'flex items-center'}
+          >
+            <Button type="success" style={{background: 'linear-gradient(to bottom, #1cd98a, #24ca94)'}} onClick={onQuery}>
+              搜索
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default MySearch;