1

src/components/searchInput/index.module.scss

@@ -0,0 +1,33 @@
+
+.searchInput_main{
+    display: flex;
+    align-items: center;
+    min-height: 62px;
+    padding: 10px 0;
+    border-bottom: 1px solid #f3f3f3;
+    .searchInput_title {
+        width: 150px;
+        font-size: 28px;
+        border-right: 1px solid #f3f3f3;
+        color: $color_font_on;
+        margin-right: 20px;
+        padding-left: 20px;
+        &::before{
+            content: "";
+            height: 50px;
+            width: 1px;
+            background-color: #f3f3f3;
+        }
+    }
+    .searchInput_con{
+        flex:1;
+        width: 100%;
+        input{
+            font-size: 26px;
+        }
+    }
+    .icon_more_self{
+        font-size: 28px;
+        color: $color_font_two;
+    }
+}

src/components/searchInput/index.tsx

@@ -0,0 +1,45 @@
+import { Input, View } from "@tarojs/components";
+import { memo, useDebugValue, useMemo } from "react";
+import styles from  './index.module.scss';
+
+type Params = {
+    showIcon?: false|true,
+    disabled?: false|true,
+    placeholder?: string,
+    title?: string,
+    showTitle?: false|true,
+    showBorder?: false|true,
+    changeOnInput?: (string) => void,
+    clickOnInput?: () => void
+
+}
+
+export default memo((props: Params) => {
+    let {
+        showTitle = true,
+        title = '标题', 
+        showIcon = false, 
+        disabled = false, 
+        placeholder = '请输入',
+        showBorder = true,
+        changeOnInput,
+        clickOnInput
+    } = props
+
+    let stylen = useMemo(() => {
+        if(!showBorder) {
+            return { borderBottom: 0 }
+        }
+        return {}
+    }, [showBorder])
+    console.log('searchInput::')
+    return (
+        <View className={styles.searchInput_main} style={stylen}>
+            {showTitle&&<View className={styles.searchInput_title}>{title}</View>}
+            <View className={styles.searchInput_con}>
+                <Input disabled={disabled} placeholder={placeholder} onClick={() => clickOnInput?.()} onInput={(e) => changeOnInput?.(e.detail.value)}/>
+            </View>
+            {showIcon&&<View className={`iconfont icon-more ${styles.icon_more_self}`}></View>}
+        </View>
+    )
+})