🦄 refactor:搜索80%

project.private.config.json

@@ -21,6 +21,13 @@
           "query": "",
           "launchMode": "default",
           "scene": null
+        },
+        {
+          "name": "",
+          "pathName": "pages/searchPage/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
         }
       ]
     }

src/api/search.ts

@@ -0,0 +1,8 @@
+import { useRequest } from "@/use/useHttp"
+//搜索商品
+export const mpproductlist = () => {
+    return useRequest({
+        url: `/v1/mp/product/list`,
+        method: "get",
+    })
+}

src/app.config.ts

@@ -1,5 +1,5 @@
 export default defineAppConfig({
-  pages: ['pages/user/index', 'pages/index/index', 'pages/order/index', 'pages/shopping/index'],
+  pages: ['pages/user/index', 'pages/index/index', 'pages/order/index', 'pages/shopping/index', 'pages/searchPage/index'],
   window: {
     backgroundTextStyle: 'light',
     navigationBarBackgroundColor: '#fff',

src/pages/index/index.tsx

@@ -10,6 +10,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { kindListApi, ProductListApi } from '@/api/index'
 // import useLogin from '@/use/useLogin'
 import { dataLoadingStatus } from '@/common/util'
+import Taro from '@tarojs/taro'
 
 export default () => {
     useEffect(() => {
@@ -85,8 +86,8 @@ export default () => {
                 {/* <View className={styles.search_collect} onClick={() => goLink('/pages/collection/index')}>
                         我的收藏
                     </View> */}
-                <View className={styles.search_input} onClick={() => goLink('/pages/searchList/search')}>
+                <View className={styles.search_input} onClick={() => goLink('/pages/searchPage/index')}>
-                    <Search disabled={true} style={{ width: '263rpx' }} />
+                    <Search disabled={true} style={{ width: '263rpx' }}/>
                 </View>
             </View>
             <View className={styles.products}>

src/pages/searchPage/compoents/empty/index.module.scss

@@ -0,0 +1,22 @@
+.mainBox {
+    height: calc(100vh - 200px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    .pic {
+        width: 322px;
+        height: 322px;
+        background: #D8D8D8;
+        opacity: 0.3;
+        margin-bottom: 24px;
+    }
+
+    .fonst {
+        font-size: 28px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #000000;
+    }
+}

src/pages/searchPage/compoents/empty/index.tsx

@@ -0,0 +1,22 @@
+import { View, Image } from '@tarojs/components'
+import React, { useCallback, memo, useEffect, useMemo, useRef, useState } from 'react'
+import styles from "../empty/index.module.scss"
+
+interface PropsObj {
+    picUrl?: string,
+    fonst?: string
+}
+
+export default memo((pros: PropsObj) => {
+    const {
+        picUrl = '',
+        fonst = '无搜索历史'
+    } = pros
+    console.log(pros,8888)
+    return (
+        <View className={styles.mainBox}>
+            <Image className={styles.pic} mode='aspectFill' lazyLoad src={picUrl}></Image>
+            <View className={styles.fonst}>{fonst}</View>
+        </View>
+    )
+})

src/pages/searchPage/compoents/goods/index.module.scss

@@ -0,0 +1,119 @@
+.itemBox {
+    width: 686px;
+    padding-bottom: 18px;
+    border-bottom: 1px solid #e7e7e7;
+    display: flex;
+    margin-left: 32px;
+    margin-bottom: 24px;
+
+    .picBox {
+        margin-right: 24px;
+        width: 144px;
+        height: 144px;
+        border-radius: 8px;
+        position: relative;
+
+        .pic {
+            width: 144px;
+            height: 144px;
+            border-radius: 8px;
+        }
+
+        .posBox {
+            position: absolute;
+            bottom: 0px;
+            right: 0px;
+            width: 69px;
+            height: 29px;
+            background: #000000;
+            border-radius: 15px 0px 8px 0px;
+            font-size: 18px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #FFFFFF;
+            text-align: center;
+            line-height: 29px;
+
+            opacity: 0.55;
+        }
+    }
+
+
+    .leftBox {
+        width: 144px;
+        height: 144px;
+        border-radius: 8px;
+        position: relative;
+        margin-right: 24px;
+
+        .posBox {
+            position: absolute;
+            bottom: 0px;
+            right: 0px;
+            width: 69px;
+            height: 29px;
+            background: #000000;
+            border-radius: 15px 0px 8px 0px;
+            font-size: 18px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #FFFFFF;
+            text-align: center;
+            line-height: 29px;
+
+            opacity: 0.55;
+        }
+    }
+
+    .rightBox {
+        .productName {
+            font-size: 28px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #000000;
+            margin-bottom: 6px;
+        }
+
+        .tips {
+            font-size: 24px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #a6a6a6;
+            margin-bottom: 17px;
+        }
+
+        .flexTag {
+            display: flex;
+
+            .tagOne {
+                padding-left: 8px;
+                padding-right: 8px;
+                padding-top: 3px;
+                padding-bottom: 3px;
+                background: #e3ecff;
+                border-radius: 8px;
+                font-size: 22px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #4581FF;
+                text-align: center;
+                margin-right: 16px;
+            }
+
+            .tagTwo {
+                padding-left: 8px;
+                padding-right: 8px;
+                padding-top: 3px;
+                padding-bottom: 3px;
+                background: #ffeedb;
+                border-radius: 8px;
+                font-size: 22px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #FE8E0F;
+                text-align: center;
+            }
+        }
+    }
+
+}

src/pages/searchPage/compoents/goods/index.tsx

@@ -0,0 +1,36 @@
+import { View, Image } from '@tarojs/components'
+import React, { useCallback, memo, useEffect, useMemo, useRef, useState } from 'react'
+import styles from "../goods/index.module.scss"
+
+
+export default memo((props: any) => {
+    return (
+        <View className={styles.itemBox}>
+            {
+                !props.lab && <>
+
+                    <View className={styles.picBox}>
+                        <Image className={styles.pic} mode={'aspectFill'} src={'https://test.cdn.zzfzyc.com/mall/no_img.png'}></Image>
+                        <View className={styles.posBox}>{props.data?.product_color_count}色</View>
+                    </View>
+                </>
+            }
+            {
+                props.lab &&
+                <>
+                    <View className={styles.leftBox}>
+                        <View className={styles.posBox}>{props.data?.product_color_count}色</View>
+                    </View>
+                </>
+            }
+            <View className={styles.rightBox}>
+                <View className={styles.productName}>{props.data?.code}#{props.data?.name}</View>
+                <View className={styles.tips}>{props.data?.component}</View>
+                <View className={styles.flexTag}>
+                    <View className={styles.tagOne}>{props.data?.width}</View>
+                    <View className={styles.tagTwo}>{props.data?.weight_density}</View>
+                </View>
+            </View>
+        </View>
+    )
+})

src/pages/searchPage/index.config.ts

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

src/pages/searchPage/index.module.scss

@@ -0,0 +1,66 @@
+.main {
+    background: #ffff;
+
+    .cancelFont {
+        width: 76px;
+        font-size: 28px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #000000;
+        margin-left: 32px;
+        margin-right: 32px;
+    }
+
+    .line {
+        width: 750px;
+        height: 1px;
+        background: #000000;
+        opacity: 0.05;
+        margin-top: 16px;
+        margin-bottom: 32px;
+    }
+
+    .topBox {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 32px;
+
+        .histroyFonts {
+            margin-left: 32px;
+            font-size: 28px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #000000;
+        }
+
+        .icon_delect {
+            margin-right: 45px;
+            color: #f7f7f7;
+        }
+    }
+
+
+    .bigBox {
+        display: flex;
+        flex-wrap: wrap;
+        padding-left: 32px;
+
+        .itemBox {
+            background: #F7F7F7;
+            border-radius: 8px;
+            text-align: center;
+            padding-top: 12px;
+            padding-bottom: 12px;
+            padding-left: 17px;
+            padding-right: 17px;
+            font-size: 24px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #000000;
+            margin-right: 16px;
+            margin-bottom: 16px;
+        }
+    }
+
+}

src/pages/searchPage/index.tsx

@@ -0,0 +1,93 @@
+import { View } from '@tarojs/components'
+import React, { useCallback, memo, useEffect, useMemo, useRef, useState } from 'react'
+import Search from '@/components/search'
+import styles from "./index.module.scss"
+import classnames from "classnames";
+import Empty from './compoents/empty'
+import Taro from '@tarojs/taro';
+import Goods from './compoents/goods'
+import { mpproductlist } from "@/api/search"
+
+export default memo(() => {
+    //获取数据
+    const [histroyList, setHistroyList] = useState<any[]>(['a','b'])
+    //搜索商品的数组
+    const [searchList, setSearchList] = useState<any[]>(['a'])
+    //是否有值输入框
+    const [hasFonts, setHasFonts] = useState(false)
+
+    //输入了搜索关键字
+    const getSearchData = useCallback((e) => {
+        if (e) {
+            setHasFonts(true)
+            getProduct(e)
+        } else {
+            setHasFonts(false)
+            setSearchList([])
+        }
+        // pageNum.current.page = 1
+        // setOrderData(() => ({ list: [], total: 0 }))
+        // setSearchField((val) => ({ ...val, name: e, size: 10 }))
+    }, [])
+    //搜索获取商品数据
+    const { fetchData: productFetch } = mpproductlist()
+    const getProduct = async (e) => {
+        const res = await productFetch({ code_or_name: e })
+        setSearchList([...res.data.list])
+    }
+    //返回
+    const back = () => {
+        Taro.navigateBack({
+            delta: 1
+        })
+    }
+
+    return (
+        <View className={styles.main}>
+            <Search placeholder='请输入搜索布料' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} >
+                <View className={styles.cancelFont} onClick={() => back()}>取消</View>
+            </Search>
+            <View className={styles.line}></View>
+            {
+                !hasFonts && <>
+                    <View className={styles.topBox}>
+                        <View className={styles.histroyFonts}>历史搜索</View>
+                        <View className={classnames('iconfont', 'icon-shaixuan', styles.icon_delect)}></View>
+                    </View>
+                    {!!histroyList.length &&
+                        <View className={styles.bigBox}>
+                            {histroyList.map((item, index) => {
+                                return (
+                                    <View key={index} className={styles.itemBox}>{item}</View>
+                                )
+                            })}
+                        </View>
+                    }
+                    {
+                        !histroyList.length && <Empty fonst={'无搜索历史'}></Empty>
+                    }
+                </>
+            }
+            {
+                hasFonts && <>
+                    <View className={styles.topBox}>
+                        <View className={styles.histroyFonts}>搜索结果</View>
+                    </View>
+                    {
+                        !!searchList.length && searchList.map((item, index) => {
+                            return (
+                                <Goods key={index} data={item}></Goods>
+                            )
+                        })
+                    }
+                    {
+                        !searchList.length && <Empty fonst={'暂无数据'}></Empty>
+                    }
+                </>
+            }
+
+
+        </View>
+
+    )
+})