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>
+    )
+})

src/pages/searchList/hightSearchList.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '搜索'
+}

src/pages/searchList/hightSearchList.module.scss

@@ -0,0 +1,182 @@
+.main{
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    background-color: $color_bg_one;
+    .search{
+        padding: 20px;
+    }
+    .filter{
+        .filter_all {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 20px 50px;
+            font-size: $font_size_medium;
+            color: $color_font_three;
+            .text_zh, .text_sc{
+                color: $color_main;
+                display: flex;
+                align-items: center;
+                .sortIcon{
+                    display: flex;
+                    flex-direction: column;
+                    position: relative;
+                    .icon_one{
+                        font-size: $font_size_medium;
+                        position: absolute;
+                        margin:auto;
+                        top:0;
+                    }
+                }
+            }
+            .text_ss{
+                position: relative;
+                .miconfont{
+                    font-size: 20px;
+                    margin-left: 5px;
+                }
+                &::before{
+                    content: '';
+                    width: 2px;
+                    height: 32px;
+                    background-color: #C2C2C2;
+                    position: absolute;
+                    top: 0;
+                    left: -30px;
+                }
+            }
+        }
+        .filter_btn_con{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            height: 86px;
+            
+        }
+        .filter_scroll{
+            flex:1;
+            width: 0;
+            ::-webkit-scrollbar {
+                display:none;
+                width:0;
+                height:0;
+                color:transparent;
+            }
+        }
+        .filter_btn{
+            display: flex;
+            justify-content: space-between;
+            padding: 20px;
+            margin-right: 20px;
+            flex:1;
+            view{
+                font-size: $font_size_medium;
+                background-color: #F0F0F0;
+                border-radius: 24px;
+                min-width: 126px;
+                height: 46.93px;
+                text-align: center;
+                line-height: 46.93px;
+                color: $color_font_three;
+                &:nth-last-child(n+2) {
+                    margin-right: 10px;
+                }
+                &:nth-last-child(1) {
+                    margin-right: 30px;
+                }
+            }
+            .selected{
+                background-color: #ecf5ff;
+                border: 2px solid #cde5ff;
+                color: $color_main;
+                width: 122px;
+                height: 42.93px;
+            }
+        }
+        .filter_more{
+            font-size: $font_size_medium;
+            color: $color_font_three;
+            padding: 0 30px 0 20px;
+            position: relative;
+            height: 100%;
+            line-height: 86px;
+            &::before{
+                content: '';
+                opacity: 1;
+                width: 30px;
+                height: 100%;
+                position: absolute;
+                left: -15px;
+                background-image: linear-gradient(to right, rgba(248, 248, 248, 0.3), rgba(248, 248, 248, 1) 60% );
+                // z-index: 99;
+            }
+            .miconfont{
+                font-size: 27px;
+            }
+        }
+    }
+    .list{
+        flex:1;
+        display: flex;
+        flex-direction: column;
+        .list_num {
+            font-size: $font_size_min;
+            color:$color_font_two;
+            padding: 10px 38px;
+            
+        }
+        .list_num_shadow {
+            box-shadow: 0px 5px 5px #ccc;
+        }
+        .scroll{
+            flex:1;
+            height:0;
+            padding-top: 3px;
+        }
+        .product_list{
+            padding: 38px;
+            display: grid;
+            grid-template-columns: 321px 321px;
+            justify-content: space-between;
+            .product_item{
+                width: 321px;
+                background-color: #fff;
+                border-radius: 20px;
+                margin-bottom: 20px;
+                .product_img{
+                    width: 100%;
+                    height: 224px;
+                    background: #e5ad3a;
+                    border-radius: 20px 20px 0px 0px;
+                }
+            }
+            .product_info{
+                padding: 20px;
+                .title{
+                    font-size: $font_size;
+                    color: $color_font_three;
+                }
+                .tag_list{
+                    display: flex;
+                    margin-top: 16px;
+                    .tag{
+                        padding: 3px 10px;
+                        background-color: #CDE5FF;
+                        font-size: $font_size_min;
+                        border-radius: 5px;
+                        color: $color_main;
+                        &:nth-child(2) {
+                            margin-left: 10px;
+                        }
+                    }
+                }
+                .introduce{
+                    font-size: $font_size_medium;
+                    color: $color_font_two;
+                    margin-top: 16px;
+                }
+            }
+        }
+    }
+}

src/pages/searchList/hightSearchList.tsx

@@ -0,0 +1,98 @@
+import { ScrollView, Text, View } from "@tarojs/components"
+import classnames from "classnames";
+import Search from '@/components/search'
+import Filter from "@/components/filter";
+import InfiniteScroll from '@/components/infiniteScroll'
+import SortBtn from "@/components/sortBtn";
+import Tabs from "@/components/tabs";
+import styles  from './index.module.scss'
+import { useCallback, useState } from "react";
+
+export default () => {
+    const [showFilter, setShowFilter] = useState(false)
+    const [selectList, setSelectList] = useState([
+        {title: '系列', value:1},
+        {title: '系列', value:2},
+        {title: '系列', value:3},
+        {title: '系列', value:4},
+        {title: '系列', value:5},
+        {title: '系列', value:5},
+        {title: '系列', value:5},
+        {title: '系列', value:5},
+        {title: '系列', value:5},
+    ])
+    const [scrollStatus, setScrollStatus] = useState(false)
+    const onscroll = useCallback((e) => {
+        if(e.detail.scrollTop > 20) {
+            setScrollStatus(true)
+        } else {
+            setScrollStatus(false)
+        }
+    },[])
+    return (
+        <View className={styles.main}>
+            <View className={styles.search}>
+                <Search placeIcon="out"  btnStyle={{color: '#007AFF'}}/>
+            </View>
+            <View className={styles.filter}>
+                <View className={styles.filter_all}>
+                    <View className={styles.text_zh}>
+                        <Text>综合</Text>
+                        <SortBtn status="top"/>
+                    </View>
+                    <View className={styles.text_sc} >
+                        <Text>收藏</Text>
+                        <SortBtn status="top"/>
+                    </View>
+                    <View className={styles.text_ss} >
+                        <Text>高级搜索</Text>
+                        <Text className={classnames('iconfont icon-sousuo', styles.miconfont)}></Text>
+                    </View>
+                </View>
+                <View className={styles.filter_btn_con}>
+                    <ScrollView scrollX className={styles.filter_scroll}>
+                        <View className={styles.filter_btn}>
+                                <View>系列</View>
+                                <View>幅宽</View>
+                                <View>克重</View>
+                                <View>克重</View>
+                                <View>克重</View>
+                                <View className={styles.selected}>成分</View>
+                        </View>
+                    </ScrollView>
+                    <View className={styles.filter_more} onClick={() => setShowFilter(true)}>
+                        <Text>筛选</Text>
+                        <Text className={classnames('iconfont icon-shaixuan', styles.miconfont)}></Text>
+                    </View>
+                </View>
+
+            </View>
+            <View className={styles.list}>
+                <View className={classnames(styles.list_num, scrollStatus&&styles.list_num_shadow)}>搜索结果 (2条记录)</View>
+                <View className={styles.scroll}>
+                    <InfiniteScroll 
+                        selfonScrollToLower={() => console.log('123123')} 
+                        selfOnScroll={(e) => onscroll(e)}
+                    >
+                        <View className={styles.product_list}>
+                            {new Array(9).fill(' ').map(item => {
+                                return <View className={styles.product_item}>
+                                    <View className={styles.product_img}></View>
+                                    <View className={styles.product_info}>
+                                        <View className={styles.title}>0770#21S精棉平纹</View>
+                                        <View className={styles.tag_list}>
+                                            <View className={styles.tag}>160cm</View>
+                                            <View className={styles.tag}>110g</View>
+                                        </View>
+                                        <View className={styles.introduce}>67.6%棉24%涤纶6.4%氨纶</View>
+                                    </View>
+                                </View>
+                            })}
+                        </View>
+                    </InfiniteScroll>
+                </View>
+            </View>
+            <Filter show={showFilter} onClose={() => setShowFilter(false)}/>
+        </View>
+    )
+}

src/pages/searchList/index.config.ts

@@ -1,3 +1,3 @@
 export default {
-  navigationBarTitleText: '搜索'
+  navigationBarTitleText: '高级搜索'
 }

src/pages/searchList/search.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '搜索'
+}

src/pages/searchList/search.module.scss

@@ -0,0 +1,72 @@
+.main{
+    .search{
+        display: flex;
+        justify-content: space-between;
+        padding: 20px;
+        padding-bottom: 50px;
+    }
+    
+    .hot {
+        padding: 0 20px;
+        .hot_header {
+            width:100%;
+            display: flex;
+            justify-content: space-between;
+            font-size: $font_size_medium;
+            .hot_header_title {
+                font-size: $font_size;
+                color: $color_font_one;
+                font-weight: 700;
+            }
+            .hot_header_up{
+                color: $color_main;
+            }
+        }
+        .list{
+            display: flex;
+            font-size:  $font_size_medium;
+            flex-wrap: wrap;
+            padding: 20px 0;
+            .item{
+                margin-right: 20px;
+                margin-bottom: 20px;
+                padding: 10px 20px;
+                background-color: #F0F0F0;
+                color: $color_font_three;
+                border-radius: 50px;
+            }
+        }
+    }
+    .history {
+        padding: 0 20px;
+        .history_header {
+            width:100%;
+            display: flex;
+            justify-content: space-between;
+            font-size: $font_size_medium;
+            .history_header_title {
+                font-size: $font_size;
+                color: $color_font_one;
+                font-weight: 700;
+            }
+            .miconfont{
+                font-size: 30px;
+                color: $color_font_three;
+            }
+        }
+        .list{
+            display: flex;
+            font-size:  $font_size_medium;
+            flex-wrap: wrap;
+            padding: 20px 0;
+            .item{
+                margin-right: 20px;
+                margin-bottom: 20px;
+                padding: 10px 20px;
+                background-color: #F0F0F0;
+                color: $color_font_three;
+                border-radius: 50px;
+            }
+        }
+    }
+}

src/pages/searchList/search.tsx

@@ -0,0 +1,44 @@
+
+import { View } from '@tarojs/components'
+import Search from '@/components/search'
+import { goLink } from '@/common/common';
+import classnames from "classnames";
+import styles  from './index.module.scss'
+
+export default () => {
+  return (
+    <View className={styles.main}>
+      <View className={styles.search}>
+        <Search style={{width: '100%'}} placeholder="请输入面料关键词" placeIcon="out" showBtn={true} clickOnSearch={() => goLink('/pages/searchList/index')}/>
+      </View>
+      <View className={styles.hot}>
+        <View className={styles.hot_header}>
+          <View className={styles.hot_header_title}>热门面料</View>
+          <View className={styles.hot_header_up}>高级搜索</View>
+        </View>
+        <View className={styles.list}>
+          <View className={styles.item}>9265</View>
+          <View className={styles.item}>全棉双卫衣</View>
+          <View className={styles.item}>全棉双卫衣</View>
+          <View className={styles.item}>全棉双卫衣</View>
+          <View className={styles.item}>全棉双卫衣</View>
+          <View className={styles.item}>26s</View>
+        </View>
+      </View>
+      <View className={styles.history}>
+        <View className={styles.history_header}>
+          <View className={styles.history_header_title}>历史搜索</View>
+          <View className={classnames('iconfont icon-lajixiang', styles.miconfont)}></View>
+        </View>
+        <View className={styles.list}>
+          <View className={styles.item}>9265</View>
+          <View className={styles.item}>全棉双卫衣</View>
+          <View className={styles.item}>全棉双卫衣</View>
+          <View className={styles.item}>全棉双卫衣</View>
+          <View className={styles.item}>全棉双卫衣</View>
+          <View className={styles.item}>26s</View>
+        </View>
+      </View>
+    </View>
+  )
+}