对接确认订单

src/api/material.ts

@@ -45,3 +45,13 @@ export const GetProductDetailApi = () => {
     })
 }
 
+/**
+ *  根据LAB匹配色卡基础资料
+ * @returns 
+*/
+export const GetLabProductApi = () => {
+    return useRequest({
+        url: `/v1/mall/product/color/absorb/match`,
+        method: "get",
+    })
+}

src/api/search.ts

@@ -3,9 +3,31 @@ import { useRequest } from "@/use/useHttp"
 /**
  * 获取热门搜索
  */
- export const getHotSearchApi = () => {
+ export const GetHotSearchApi = () => {
     return useRequest({
-        url: `/v1/mall/hotSearch`,
+        url: `/v1/mall/hotSearch/list`,
         method: "get",
     })
+}
+
+
+/**
+ * 获取历史搜索
+ */
+ export const GetSearchHistoryApi = () => {
+    return useRequest({
+        url: `/v1/mall/searchHistory/list`,
+        method: "get",
+    })
+}
+
+
+/**
+ * 添加搜索关键字
+ */
+ export const AddSearchHistoryApi = () => {
+    return useRequest({
+        url: `/v1/mall/searchHistory`,
+        method: "post",
+    })
 }

src/common/constant.js

@@ -24,4 +24,9 @@ export const IMG_CND_Prefix = "http://test.cdn.zzfzyc.com"
 export const CDN_UPLOAD_IMG = `${UPLOAD_CDN_URL || ''}`;
 
 //appid
-export const WX_APPID = 'wx68d92d7cbf0b6963'
+export const WX_APPID = 'wx68d92d7cbf0b6963'
+
+//场景值
+export const SCENE = {
+    SearchScene : 0 //商城面料搜索
+}

src/common/fotmat.js

@@ -142,5 +142,5 @@ export const toDecimal2 = (x) => {
  * @returns 
  */
 export const formatImgUrl = (url) => {
-    return IMG_CND_Prefix + url
+    return url?IMG_CND_Prefix + url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d'
 }

src/components/filter copy/index copy.tsx

@@ -0,0 +1,130 @@
+import { GetProductKindListApi } from "@/api/material";
+import Popup, {Params as PopuParams} from "@/components/popup"
+import { Input, ScrollView, Text, Textarea, View } from "@tarojs/components"
+import { useDidShow } from "@tarojs/taro";
+import classnames from "classnames";
+import { useEffect, useState } from "react";
+import styles  from './index.module.scss'
+
+type params = {
+    onFiltr?: (val:object) => void
+} & PopuParams
+export default ({onClose, onFiltr, show = false}:params) => {
+
+    //搜索条件
+    const [filterObj, setFilterObj] = useState({
+        seriesId: '',
+        minWidth: '',
+        maxWidth: '',
+        minWeight: '',
+        maxWeight: '',
+        element: ''
+    })
+
+    //获取系列
+    const {fetchData: kindFetchData} = GetProductKindListApi()
+    const [kindList, setKindList] = useState<any[]>([])
+    const getCategoryList = async () => {
+        let {data} = await kindFetchData()
+        setKindList(data.list)
+    }
+
+    useEffect(() => {
+        show&&getCategoryList()
+    }, [show])
+
+    //切换系列
+    const changeKind = (e) => {
+        setFilterObj({...filterObj, seriesId:e.id})
+    }
+
+    const onCloseEven = () => {
+       onClose?.()
+    }
+    const onRest = () => {
+        console.log('12123')
+        setFilterObj({
+            seriesId: '',
+            minWidth: '',
+            maxWidth: '',
+            minWeight: '',
+            maxWeight: '',
+            element: ''
+        })
+    }
+    useEffect(() => {
+        console.log(filterObj)
+    }, [filterObj])
+
+    const onVerify = () => {
+        console.log(filterObj)
+        onFiltr?.(filterObj)
+    }
+
+    const setNumber = (e, field) => {
+        console.log(e)
+        let num = parseFloat(e.detail.value)
+        if(isNaN(num)) {
+            filterObj[field] = null
+        } else {
+            filterObj[field] = parseFloat(num.toFixed(2))
+        }
+        setFilterObj({...filterObj})
+    }
+
+    const setElement = (e) => {
+        let res = e.detail.value
+        setFilterObj({...filterObj, element:res})
+    }
+    return (
+        
+        <Popup position="right" show={show} showTitle={false} onClose={() => onCloseEven()} showIconButton={true}>
+            <View className={styles.popup_main}>
+                <View className={styles.popup_title}>全部筛选</View>
+                <ScrollView scrollY className={styles.scroll}>
+                    <View className={styles.popup_filter}>
+                        <View className={styles.popup_filter_item}>
+                            <View className={styles.title}>系列</View>
+                            <View className={styles.btn_list}>
+                                {kindList.map(item => <View key={item.id} onClick={() => changeKind(item)} className={classnames(styles.btn_item, (filterObj.seriesId == item.id)&&styles.select_btn_item)}>{item.name}</View>)}
+                            </View>
+                        </View>
+                        <View className={styles.popup_filter_item}>
+                            <View className={styles.title}>幅宽</View>
+                            <View className={styles.btn_list_input}>
+                                <View className={styles.btn_width}><Input value={filterObj.minWidth} type="digit" onBlur={(e) => setNumber(e,'minWidth')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/></View>
+                                <Text>—</Text>
+                                <View className={styles.btn_width}><Input value={filterObj.maxWidth} type="digit" onBlur={(e) => setNumber(e,'maxWidth')}  placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/></View>
+                                <View className={styles.unit}>cm</View>
+                            </View>
+                        </View>
+                        <View className={styles.popup_filter_item}>
+                            <View className={styles.title}>克重</View>
+                            <View className={styles.btn_list_input}>
+                                <View className={styles.btn_width}><Input type="digit" value={filterObj.minWeight} onBlur={(e) => setNumber(e,'minWeight')}  placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/></View>
+                                <Text>—</Text>
+                                <View className={styles.btn_width}><Input type="digit" value={filterObj.maxWeight} onBlur={(e) => setNumber(e,'maxWeight')}  placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/></View>
+                                <View className={styles.unit}>g</View>
+                            </View>
+                        </View>
+                        <View className={styles.popup_filter_item}>
+                            <View className={styles.title}>成分</View>
+                            <View className={styles.btn_list_element}>
+                                <Textarea placeholder="请输入" cursorSpacing={60} value={filterObj.element} onInput={(e) => setElement(e)}/>
+                            </View>
+                        </View>
+                        
+                        <View className="common_safe_area_y"></View>
+                    </View>
+                </ScrollView>
+                <View className={styles.btns_con}>
+                    <View className={styles.btns_two}>
+                        <View className={styles.rest_btn} onClick={() => onRest()}>重置</View>
+                        <View className={styles.verify_btn } onClick={() => onVerify()}>确认</View>
+                    </View>
+                </View>
+            </View>
+        </Popup>
+
+    )
+}

src/components/filter copy/index.module.scss

@@ -0,0 +1,126 @@
+.popup_main{
+    width: 608px;
+    height: 100vh;
+    padding: 20px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    .popup_title{
+        font-size: $font_size;
+        font-weight: 700;
+        text-align: center;
+        padding: 20px 0;
+    }
+    .scroll{
+        flex:1;
+        height: 0;
+    }
+    .popup_filter{
+        padding-bottom: 100px;
+    }
+    .popup_filter_item{
+        margin-bottom: 20px;
+        .title{
+            font-size: $font_size;
+            color: $color_font_one;
+            font-weight: 700;
+            padding: 20px 0;
+        }
+        .btn_list{
+            display: grid;
+            grid-template-columns: repeat(3, 165.75px);
+            justify-content: space-between;
+            .btn_item{
+                // width: 165.75px;
+                height: 69.2px;
+                background: #f0f0f0;
+                border-radius: 34px;
+                text-align: center;
+                line-height: 69.2px;
+                font-size: $font_size_medium;
+                color: $color_font_one;
+                margin-bottom: 20px;
+            }
+            .select_btn_item{
+                color: $color_main;
+                background: #ecf5ff;
+                border: 2px solid #007aff;
+                width: 161.75px;
+                height: 65.2px;
+            }
+        }
+        .btn_list_input{
+            display: flex;
+            // justify-content: space-between;
+            align-items: center;
+            .btn_width {
+                width: 220px;
+                height: 70px;
+                background: #f0f0f0;
+                border-radius: 50px;
+                padding: 10px 20px;
+                box-sizing: border-box;
+                input{
+                    width: 100%;
+                    height: 100%;
+                    font-size: $font_size_medium;
+                }
+            }
+            .unit{
+                color: $color_font_one;
+                font-size: $font_size;
+                margin-left: 20px;
+            }
+            text{
+                color: #ccc;
+                padding: 0 20px;
+            }
+            .width_main{
+
+            }
+        }
+        .btn_list_element{
+            background-color: #F0F0F0;
+            border-radius: 30px;
+            padding: 20px;
+            box-sizing: border-box;
+            textarea{
+                width: 100%;
+                height: 126px;
+                font-size: $font_size_medium;
+            }
+        }
+    }
+    .btns_con{
+        width: 100%;
+        position: fixed;
+        bottom:0;
+        padding-bottom: constant(safe-area-inset-bottom); 
+        padding-bottom: env(safe-area-inset-bottom);
+        .btns_two{
+            display: flex;
+            width: 552px;
+            height: 82px;
+            border: 2px solid #cde5ff;
+            font-size: $font_size_big;
+            border-radius: 40px;
+            margin-bottom: 20px;
+            .rest_btn{
+                flex:1;
+                border-radius: 0px 40px 40px 0px;
+                text-align: center;
+                line-height: 82px;
+                color: $color_main;
+                
+            }
+            .verify_btn{
+                flex:1;
+                border-radius: 0px 40px 40px 0px;
+                background: #007aff;
+                text-align: center;
+                line-height: 82px;
+                color: #fff;
+            }
+        }
+    }
+}

src/components/filter copy/index.tsx

@@ -0,0 +1,128 @@
+import { GetProductKindListApi } from "@/api/material";
+import Popup, {Params as PopuParams} from "@/components/popup"
+import { Input, ScrollView, Text, Textarea, View } from "@tarojs/components"
+import { useDidShow } from "@tarojs/taro";
+import classnames from "classnames";
+import { useEffect, useState } from "react";
+import styles  from './index.module.scss'
+
+type params = {
+    onFiltr?: (val:object) => void
+} & PopuParams
+export default ({onClose, onFiltr, show = false}:params) => {
+
+    //搜索条件
+    const [filterObj, setFilterObj] = useState({
+        seriesId: '',
+        minWidth: '',
+        maxWidth: '',
+        minWeight: '',
+        maxWeight: '',
+        element: ''
+    })
+
+    //获取系列
+    const {fetchData: kindFetchData} = GetProductKindListApi()
+    const [kindList, setKindList] = useState<any[]>([])
+    const getCategoryList = async () => {
+        let {data} = await kindFetchData()
+        setKindList(data.list)
+    }
+
+    useEffect(() => {
+        show&&getCategoryList()
+    }, [show])
+
+    //切换系列
+    const changeKind = (e) => {
+        setFilterObj({...filterObj, seriesId:e.id})
+    }
+
+    const onCloseEven = () => {
+       onClose?.()
+    }
+    const onRest = () => {
+        console.log('12123')
+        setFilterObj({
+            seriesId: '',
+            minWidth: '',
+            maxWidth: '',
+            minWeight: '',
+            maxWeight: '',
+            element: ''
+        })
+    }
+    useEffect(() => {
+        console.log(filterObj)
+    }, [filterObj])
+
+    const onVerify = () => {
+        console.log(filterObj)
+        onFiltr?.(filterObj)
+    }
+
+    const setNumber = (e, field) => {
+        console.log(e)
+        let num = parseFloat(e.detail.value)
+        if(isNaN(num)) {
+            filterObj[field] = null
+        } else {
+            filterObj[field] = parseFloat(num.toFixed(2))
+        }
+        setFilterObj({...filterObj})
+    }
+
+    const setElement = (e) => {
+        let res = e.detail.value
+        setFilterObj({...filterObj, element:res})
+    }
+    return (
+        
+        <Popup position="right" show={show} showTitle={false} onClose={() => onCloseEven()} showIconButton={true}>
+            <View className={styles.popup_main}>
+                <View className={styles.popup_title}>全部筛选</View>
+                <ScrollView scrollY className={styles.scroll}>
+                    <View className={styles.popup_filter}>
+                        <View className={styles.popup_filter_item}>
+                            <View className={styles.title}>系列</View>
+                            <View className={styles.btn_list}>
+                                {kindList.map(item => <View key={item.id} onClick={() => changeKind(item)} className={classnames(styles.btn_item, (filterObj.seriesId == item.id)&&styles.select_btn_item)}>{item.name}</View>)}
+                            </View>
+                        </View>
+                        <View className={styles.popup_filter_item}>
+                            <View className={styles.title}>幅宽</View>
+                            <View className={styles.btn_list_input}>
+                                <View className={styles.btn_width}><Input value={filterObj.minWidth} type="digit" onBlur={(e) => setNumber(e,'minWidth')} placeholder="请输入幅宽" placeholderStyle="font-size: 26rpx"/></View>
+                                <View className={styles.unit}>cm</View>
+                            </View>
+                        </View>
+                        <View className={styles.popup_filter_item}>
+                            <View className={styles.title}>克重</View>
+                            <View className={styles.btn_list_input}>
+                                <View className={styles.btn_width}><Input type="digit" value={filterObj.minWeight} onBlur={(e) => setNumber(e,'minWeight')}  placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/></View>
+                                <Text>—</Text>
+                                <View className={styles.btn_width}><Input type="digit" value={filterObj.maxWeight} onBlur={(e) => setNumber(e,'maxWeight')}  placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/></View>
+                                <View className={styles.unit}>g</View>
+                            </View>
+                        </View>
+                        <View className={styles.popup_filter_item}>
+                            <View className={styles.title}>成分</View>
+                            <View className={styles.btn_list_element}>
+                                <Textarea placeholder="请输入" cursorSpacing={60} value={filterObj.element} onInput={(e) => setElement(e)}/>
+                            </View>
+                        </View>
+                        
+                        <View className="common_safe_area_y"></View>
+                    </View>
+                </ScrollView>
+                <View className={styles.btns_con}>
+                    <View className={styles.btns_two}>
+                        <View className={styles.rest_btn} onClick={() => onRest()}>重置</View>
+                        <View className={styles.verify_btn } onClick={() => onVerify()}>确认</View>
+                    </View>
+                </View>
+            </View>
+        </Popup>
+
+    )
+}

src/components/filter/index.module.scss

@@ -31,7 +31,7 @@
             grid-template-columns: repeat(3, 165.75px);
             justify-content: space-between;
             .btn_item{
-                width: 165.75px;
+                // width: 165.75px;
                 height: 69.2px;
                 background: #f0f0f0;
                 border-radius: 34px;
@@ -54,7 +54,7 @@
             // justify-content: space-between;
             align-items: center;
             .btn_width {
-                width: 220px;
+                flex:1;
                 height: 70px;
                 background: #f0f0f0;
                 border-radius: 50px;

src/components/filter/index.tsx

@@ -1,101 +1,102 @@
+import { GetProductKindListApi } from "@/api/material";
 import Popup, {Params as PopuParams} from "@/components/popup"
 import { Input, ScrollView, Text, Textarea, View } from "@tarojs/components"
+import { useDidShow } from "@tarojs/taro";
 import classnames from "classnames";
 import { useEffect, useState } from "react";
 import styles  from './index.module.scss'
 
 type params = {
-    onFiltr?: (val:object) => void
+    onFiltr?: (val:object) => void //确定搜索
+    onRest?: (val:Object) => void //重置
 } & PopuParams
-export default ({onClose, onFiltr, show = false}:params) => {
+export default ({onClose, onFiltr, show = false, onRest}:params) => {
-    const [filterObj, setFilterObj] = useState({
-        series: '',
-        minWidth: '',
-        maxWidth: '',
-        minWeight: '',
-        maxWeight: '',
-        element: ''
 
+    //搜索条件
+    const [filterObj, setFilterObj] = useState({
+        seriesId: '',
+        width: '',
+        weight: '',
+        element: ''
     })
+
+    //获取系列
+    const {fetchData: kindFetchData} = GetProductKindListApi()
+    const [kindList, setKindList] = useState<any[]>([])
+    const getCategoryList = async () => {
+        let {data} = await kindFetchData()
+        setKindList(data.list)
+    }
+
+    useEffect(() => {
+        show&&getCategoryList()
+    }, [show])
+
+    //切换系列
+    const changeKind = (e) => {
+        setFilterObj({...filterObj, seriesId:e.id})
+    }
+
     const onCloseEven = () => {
        onClose?.()
     }
-    const onRest = () => {
+
-        console.log('12123')
+    //重置数据
-        setFilterObj({
+    const onRestEven = () => {
-            series: '',
+        let res = {
-            minWidth: '',
+            seriesId: '',
-            maxWidth: '',
+            width: '',
-            minWeight: '',
+            weight: '',
-            maxWeight: '',
             element: ''
-        })
-    }
-    useEffect(() => {
-        console.log(filterObj)
-    }, [filterObj])
-
-    const onVerify = () => {
-        console.log(filterObj)
-        onFiltr?.(filterObj)
-    }
-
-    const setNumber = (e, field) => {
-        console.log(e)
-        let num = parseFloat(e.detail.value)
-        if(isNaN(num)) {
-            filterObj[field] = null
-        } else {
-            filterObj[field] = parseFloat(num.toFixed(2))
         }
+        setFilterObj(res)
+        onFiltr?.(filterObj)
+        onClose?.()
+    }
+
+    //提交搜索
+    const onVerify = () => {
+        onFiltr?.(filterObj)
+        onClose?.()
+    }
+
+    //获取幅宽或克重输入值或成分
+    const setFieldData = (e, field) => {
+        filterObj[field] = e.detail.value
         setFilterObj({...filterObj})
     }
 
-    const setElement = (e) => {
-        let res = e.detail.value
-        setFilterObj({...filterObj, element:res})
-    }
     return (
         
         <Popup position="right" show={show} showTitle={false} onClose={() => onCloseEven()} showIconButton={true}>
             <View className={styles.popup_main}>
                 <View className={styles.popup_title}>全部筛选</View>
-                
                 <ScrollView scrollY className={styles.scroll}>
                     <View className={styles.popup_filter}>
                         <View className={styles.popup_filter_item}>
                             <View className={styles.title}>系列</View>
                             <View className={styles.btn_list}>
-                                <View className={classnames(styles.btn_item, styles.select_btn_item)}>不限</View>
+                                {kindList.map(item => <View key={item.id} onClick={() => changeKind(item)} className={classnames(styles.btn_item, (filterObj.seriesId == item.id)&&styles.select_btn_item)}>{item.name}</View>)}
-                                <View className={styles.btn_item}>不限</View>
-                                <View className={styles.btn_item}>不限</View>
-                                <View className={styles.btn_item}>不限</View>
-                                <View className={styles.btn_item}>不限</View>
-                                <View className={styles.btn_item}>不限</View>
                             </View>
                         </View>
                         <View className={styles.popup_filter_item}>
                             <View className={styles.title}>幅宽</View>
                             <View className={styles.btn_list_input}>
-                                <View className={styles.btn_width}><Input value={filterObj.minWidth} type="digit" onBlur={(e) => setNumber(e,'minWidth')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/></View>
+                                <View className={styles.btn_width}><Input value={filterObj.width} type="digit" onBlur={(e) => setFieldData(e,'width')} placeholder="请输入幅宽" placeholderStyle="font-size: 26rpx"/></View>
-                                <Text>—</Text>
-                                <View className={styles.btn_width}><Input value={filterObj.maxWidth} type="digit" onBlur={(e) => setNumber(e,'maxWidth')}  placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/></View>
                                 <View className={styles.unit}>cm</View>
                             </View>
                         </View>
                         <View className={styles.popup_filter_item}>
                             <View className={styles.title}>克重</View>
                             <View className={styles.btn_list_input}>
-                                <View className={styles.btn_width}><Input type="digit" value={filterObj.minWeight} onBlur={(e) => setNumber(e,'minWeight')}  placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/></View>
+                                <View className={styles.btn_width}><Input type="digit" value={filterObj.weight} onBlur={(e) => setFieldData(e,'weight')}  placeholder="请输入克重" placeholderStyle="font-size: 26rpx"/></View>
-                                <Text>—</Text>
+                                <View className={styles.unit}>kg</View>
-                                <View className={styles.btn_width}><Input type="digit" value={filterObj.maxWeight} onBlur={(e) => setNumber(e,'maxWeight')}  placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/></View>
-                                <View className={styles.unit}>g</View>
                             </View>
                         </View>
                         <View className={styles.popup_filter_item}>
                             <View className={styles.title}>成分</View>
                             <View className={styles.btn_list_element}>
-                                <Textarea placeholder="请输入" cursorSpacing={60} value={filterObj.element} onInput={(e) => setElement(e)}/>
+                                <Textarea placeholder="请输入" cursorSpacing={60} value={filterObj.element} onInput={(e) => setFieldData(e, 'element')}/>
                             </View>
                         </View>
                         
@@ -104,7 +105,7 @@ export default ({onClose, onFiltr, show = false}:params) => {
                 </ScrollView>
                 <View className={styles.btns_con}>
                     <View className={styles.btns_two}>
-                        <View className={styles.rest_btn} onClick={() => onRest()}>重置</View>
+                        <View className={styles.rest_btn} onClick={() => onRestEven()}>重置</View>
                         <View className={styles.verify_btn } onClick={() => onVerify()}>确认</View>
                     </View>
                 </View>

src/components/loadingCard/index.tsx

@@ -5,17 +5,19 @@ import { memo } from "react";
 
 type Params = {
     styleLoading?: Object,
-    title?: string
+    title?: string,
+    loadingIcon?: false|true
 }
 export default memo(({
     styleLoading = {},
-    title = "加载中..."
+    title = "加载中...", //显示的文字
+    loadingIcon = true //是否显示加载图标
 }:Params) => {
     console.log('loadingCard:::')
     return (
         <>
             <View className={style.loadingCard_main}>
-                <Loading/>
+                {loadingIcon&&<Loading/>}
                 <View className={style.loading_text}>{title}</View>
             </View>
         </>

src/components/search/index.tsx

@@ -17,23 +17,29 @@ type Params = {
     btnStyle?: Object,
     btnTitle?: string,
     debounceTime?: number //防抖时间，不设默认为零
+    defaultValue?: string
 }
 
 export default forwardRef(({
-    clickOnSearch,
+    clickOnSearch,  //点击筛选按钮触发
-    changeOnSearch,
+    changeOnSearch, //输入文字触发
-    disabled = false,
+    disabled = false, //是否禁用
     placeholder = '输入搜索内容',
-    showIcon = true,
+    showIcon = true, //是否显示关闭图标
-    showBtn = false,
+    showBtn = false, //是否显示搜索按钮
-    btnStyle = {},
+    btnStyle = {}, 
-    placeIcon = 'inner',
+    placeIcon = 'inner', 
-    btnTitle = '搜索',
+    btnTitle = '搜索', //搜索文字
-    debounceTime = 0,
+    debounceTime = 0, //防抖时间，不设默认为零
+    defaultValue = '' //默认值
 }:Params, ref) => {
     const [inputCon , setInputCon] = useState('')
     const debounceTimeRef = useRef(0)
 
+    useEffect(() => {
+        setInputCon(defaultValue)
+    }, [defaultValue])
+
     useEffect(() => {
         debounceTimeRef.current = debounceTime
     }, [debounceTime])
@@ -63,7 +69,7 @@ export default forwardRef(({
 
     return (
         <>
-            <View className={styles.search_main} onClick={() => clickOnSearch?.(inputCon)}>
+            <View className={styles.search_main} >
                 <View className={styles.search_con}>
                     {showIcon&&<View className={classnames('iconfont', 'icon-sousuo', styles.icon_a_sousuo1_self, placeIcon=='inner'?styles.icon_inner:styles.icon_out)}></View>}
                     <Input placeholderStyle='color:#ABABAB; font-size:26rpx' className={classnames(placeIcon=='out'&&styles.input_out)} disabled={disabled} value={inputCon} placeholder={placeholder} onInput={(e) => onInputEven(e)}></Input>

src/pages/index/index.tsx

@@ -17,7 +17,6 @@ import useLogin from '@/use/useLogin'
 export default () => {
 
   const {checkLogin} = useLogin()
-
   useDidShow(async () => {
     await checkLogin()
   })
@@ -42,7 +41,7 @@ export default () => {
   const [productData, setProductData] = useState({list:[], total:0})
   const [hasMore, setHasMore] = useState(true)
   const [filtrate, setFiltrate] = useState({product_kind_id:0, size: 5,page: 1})
-  const pageNum = useRef(1)
+  const pageNum = useRef({size:filtrate.size, page:filtrate.page})
   const {fetchData: productFetchData, state: productState} = GetProductListApi()
   //获取数据方法
   const getProductList = async () => {
@@ -58,7 +57,7 @@ export default () => {
 
   //点击面料类型
   const getProductKindId = async (e) => {
-    pageNum.current = 1
+    pageNum.current.page = 1
     setFiltrate({...filtrate, size:5, product_kind_id:e.id})
     setHasMore(true)
   }
@@ -68,8 +67,8 @@ export default () => {
     if(productData.list.length >= productData.total) {
       setHasMore(false)
     } else {
-      pageNum.current++
+      pageNum.current.page++
-      const newSize = filtrate.size * pageNum.current
+      const newSize = pageNum.current.size * pageNum.current.page
       setFiltrate({...filtrate, size:newSize})
     }
   }
@@ -80,7 +79,7 @@ export default () => {
   //列表下拉刷新
   const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
   const getRefresherRefresh = async () => {
-    pageNum.current = 1
+    pageNum.current.size = 1
     setFiltrate({...filtrate, size:5})
     setHasMore(true)
     setRefresherTriggeredStatus(true)

src/pages/searchList/hightSearchList.module.scss

@@ -190,6 +190,7 @@
                 .title{
                     font-size: $font_size;
                     color: $color_font_three;
+                    @include common_ellipsis()
                 }
                 .tag_list{
                     display: flex;
@@ -209,6 +210,7 @@
                     font-size: $font_size_medium;
                     color: $color_font_two;
                     margin-top: 16px;
+                    @include common_ellipsis()
                 }
             }
         }

src/pages/searchList/hightSearchList.tsx

@@ -10,11 +10,22 @@ import {useBluetooth} from "@/use/contextBlueTooth"
 import {toRgb} from '@/common/bluetooth/color/colorSpace'
 import Tabs from "@/components/tabs";
 import styles  from './hightSearchList.module.scss'
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
-import Taro, { useReady } from "@tarojs/taro";
+import Taro, { useDidShow, usePullDownRefresh, useReady } from "@tarojs/taro";
 import useManualPullDownRefresh from "@/use/useManualPullDownRefresh";
+import {GetLabProductApi} from "@/api/material"
+import { getFilterData } from "@/common/util";
+import { formatHashTag, formatImgUrl } from "@/common/fotmat";
+import LoadingCard from "@/components/loadingCard";
+import useLogin from "@/use/useLogin";
+import { goLink } from "@/common/common";
 
 export default () => {
+    const {checkLogin} = useLogin()
+    useDidShow(async () => {
+        await checkLogin()
+    })
+
     const [showFilter, setShowFilter] = useState(false)
     const [selectList, setSelectList] = useState([
         {title: '系列', value:1},
@@ -27,6 +38,47 @@ export default () => {
         {title: '系列', value:5},
         {title: '系列', value:5},
     ])
+
+    //搜索参数
+    const [searchField, setSearchField] = useState({
+        l: '',
+        a: '',
+        b: '',
+        page : 1,
+        size : 10
+    })
+
+    //获取面料列表
+    const [materialList, setMaterialList] = useState<{list:any[], total:number}>({list:[], total:0})
+    const {fetchData: materialFetchData, state: materialState} = GetLabProductApi()
+    const getProductList = async () => {
+        let {data} = await materialFetchData(getFilterData(searchField))
+        setMaterialList({list:data.list, total:data.total})
+        Taro.stopPullDownRefresh()
+    }
+
+    //监听筛选条件变化
+    useEffect(() => {
+        getProductList()
+    }, [searchField])
+
+    //上拉加载数据
+    const pageNum = useRef({size: searchField.size, page: searchField.page})
+    const [hasMore, setHasMore] = useState(true)
+    const getScrolltolower = () => {
+        if(materialList.list.length < materialList.total) {
+            pageNum.current.page++
+            const size = pageNum.current.size * pageNum.current.page
+            setSearchField({...searchField, size })
+        }
+    }
+
+     //监听获得的数据变化
+     useEffect(() => {
+        (materialList.list.length < materialList.total)?setHasMore(true):setHasMore(false)
+    }, [materialList])
+
+
     const [scrollStatus, setScrollStatus] = useState(false)
     const onscroll = useCallback((e) => {
         if(e.detail.scrollTop > 20) {
@@ -36,9 +88,9 @@ export default () => {
         }
     },[])
 
-    const {state, measureAndGetLab} = useBluetooth()
+    const {state: colorState, measureAndGetLab} = useBluetooth()
     const getLab = () => {
-        if(state.connected) {
+        if(colorState.connected) {
             measureAndGetLab()
         } else {
             Taro.showToast({
@@ -50,15 +102,22 @@ export default () => {
 
     const [blueToothColor, setBlueToothColor] = useState('')
     useEffect(() => {
-        if(state.deviceLab) {
+        if(colorState.deviceLab) {
-            console.log('颜色：',state.deviceLab)
+            console.log('颜色：',colorState.deviceLab)
-            const rgb = toRgb([state.deviceLab.L, state.deviceLab.a, state.deviceLab.b])
+            const rgb = toRgb([colorState.deviceLab.L, colorState.deviceLab.a, colorState.deviceLab.b])
             setBlueToothColor(`rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`)
+            setSearchField({...searchField, l:rgb[0], a:rgb[1], b:rgb[2], size:10})
         }
-    }, [state.deviceLab])
+    }, [colorState.deviceLab])
+
+    const goLinkPage = (item) => {
+        goLink('/pages/details/index',{id:item.id})
+    }
 
     //页面下拉刷新
-    const res = useManualPullDownRefresh()
+    usePullDownRefresh(() => {
+        setSearchField({...searchField ,size : 10})
+    })
     return (
         <View className={styles.main}>
             <View className={styles.search}>
@@ -103,27 +162,30 @@ export default () => {
                 </View>
             </View>
             <View className={styles.list}>
-                <View className={classnames(styles.list_num, scrollStatus&&styles.list_num_shadow)}>搜索结果 (2条记录)</View>
+                <View className={classnames(styles.list_num, scrollStatus&&styles.list_num_shadow)}>搜索结果 ({materialList.total}条记录)</View>
                 <View className={styles.scroll}>
-                    <InfiniteScroll 
+                    {(materialList.list.length == 0&&materialState.loading)&&<LoadingCard/>}
-                        selfonScrollToLower={() => console.log('123123')} 
+                    {(materialList.list.length == 0 && !materialState.loading)&&<LoadingCard title="暂无数据" loadingIcon={false}/>}
+                    {(materialList.list.length > 0)&&<InfiniteScroll 
+                        selfonScrollToLower={() => getScrolltolower()} 
                         selfOnScroll={(e) => onscroll(e)}
+                        hasMore={hasMore}
                     >
                         <View className={styles.product_list}>
-                            {new Array(9).fill(' ').map(item => {
+                            {materialList.list.map(item => {
-                                return <View className={styles.product_item}>
+                                return <View key={item.id} className={styles.product_item} onClick={() => goLinkPage(item)}>
                                     <View className={styles.product_img}>
-                                        <Image mode="aspectFill" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d"></Image>
+                                        <Image mode="aspectFill" src={formatImgUrl(item.texture_url)}></Image>
-                                        <View className={styles.color_num}>25色</View>
+                                        <View className={styles.color_num}>{(item.product_color_code)}#</View>
                                     </View>
                                     <View className={styles.product_info}>
-                                        <View className={styles.title}>0770#21S精棉平纹</View>
+                                        <View className={styles.title}>{formatHashTag(item.product_code, item.product_name)}</View>
-                                        <View className={styles.introduce}>平纹系列</View>
+                                        <View className={styles.introduce}>{item.product_kind_name}</View>
                                     </View>
                                 </View>
                             })}
                         </View>
-                    </InfiniteScroll>
+                    </InfiniteScroll>}
                 </View>
             </View>
             <Filter show={showFilter} onClose={() => setShowFilter(false)}/>

src/pages/searchList/search.tsx

@@ -1,15 +1,73 @@
 
 import { View } from '@tarojs/components'
 import Search from '@/components/search'
-import { goLink } from '@/common/common';
+import { alert, goLink } from '@/common/common';
 import classnames from "classnames";
 import styles  from './search.module.scss'
+import { useEffect, useRef, useState } from 'react';
+import {GetHotSearchApi, GetSearchHistoryApi, AddSearchHistoryApi} from "@/api/search"
+import { SCENE } from '@/common/constant';
+import useLogin from '@/use/useLogin';
+import Taro, { useDidShow } from '@tarojs/taro';
 
+type searchDataParam = {'search_key':''}
 export default () => {
+  const {checkLogin} = useLogin()
+  useDidShow(async () => {
+    await checkLogin()
+  })
+
+  const [searchData, setSearchData] = useState<{hotField: searchDataParam[], historyField: searchDataParam[]}>({
+    hotField: [],
+    historyField: []
+  })
+
+  //获取热门搜索数据
+  const {fetchData:hotFetchData} = GetHotSearchApi()
+  const getHotSearch = async () => {
+    let {data} = await hotFetchData()
+    setSearchData((val) => ({...val, hotField: data.list}))
+  }
+
+  //获取历史搜索数据
+  const {fetchData:HistoryFetchData} = GetSearchHistoryApi()
+  const getSearchHistory = async () => {
+    let {data} = await HistoryFetchData()
+    setSearchData((val) => ({...val, historyField: data.list}))
+  }
+
+  useEffect(() => {
+    getHotSearch(),
+    getSearchHistory()
+  }, [])
+
+  //添加搜索关键字
+  const addSearchField = useRef({key: '', screen: SCENE.SearchScene})
+  const {fetchData:addFetchData} = AddSearchHistoryApi()
+  const addSearchHistory = async () => {
+    await addFetchData(addSearchField.current)
+    // goLink('/pages/searchList/searchList', {key: addSearchField.current.key})
+    
+  }
+
+  //搜索事件, status = true 添加搜索， status = false 直接跳转
+  const searchEvent = (e, status = true) => {
+    if(e == "") {
+      alert.error('请输入关键词')
+      return false
+    } 
+    addSearchField.current.key = e
+    status&&addSearchHistory()
+    Taro.navigateTo({
+        url: `/pages/searchList/searchList?key=${addSearchField.current.key}`
+    })
+  }
+
+
   return (
     <View className={styles.main}>
       <View className={styles.search}>
-        <Search style={{width: '100%'}} placeholder="请输入面料关键词" placeIcon="out" showBtn={true} clickOnSearch={() => {}}/>
+        <Search style={{width: '100%'}} placeholder="请输入面料关键词" placeIcon="out" showBtn={true} clickOnSearch={(e) => searchEvent(e)}/>
       </View>
       <View className={styles.hot}>
         <View className={styles.hot_header}>
@@ -17,12 +75,9 @@ export default () => {
           <View className={styles.hot_header_up} onClick={() => goLink('/pages/searchList/searchList')}>高级搜索</View>
         </View>
         <View className={styles.list}>
-          <View className={styles.item}>9265</View>
+          {searchData?.hotField?.map((item, index) => {
-          <View className={styles.item}>全棉双卫衣</View>
+            return <View key={index} className={styles.item} onClick={() => searchEvent(item.search_key, false)}>{item.search_key}</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}>
@@ -31,12 +86,7 @@ export default () => {
           <View className={classnames('iconfont icon-lajixiang', styles.miconfont)}></View>
         </View>
         <View className={styles.list}>
-          <View className={styles.item}>9265</View>
+          {searchData?.historyField?.map((item, index) => <View key={index} className={styles.item} onClick={() => searchEvent(item.search_key, false)}>{item.search_key}</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>

src/pages/searchList/searchList.module.scss

@@ -174,6 +174,7 @@
                 .title{
                     font-size: $font_size;
                     color: $color_font_three;
+                    @include common_ellipsis();
                 }
                 .tag_list{
                     display: flex;
@@ -184,6 +185,7 @@
                         font-size: $font_size_min;
                         border-radius: 5px;
                         color: $color_main;
+                        @include common_ellipsis();
                         &:nth-child(2) {
                             margin-left: 10px;
                         }
@@ -193,6 +195,7 @@
                     font-size: $font_size_medium;
                     color: $color_font_two;
                     margin-top: 16px;
+                    @include common_ellipsis();
                 }
             }
         }

src/pages/searchList/searchList.tsx

@@ -7,22 +7,83 @@ import SortBtn from "@/components/sortBtn";
 import SelectData from "./components/selectData";
 import { goLink } from "@/common/common";
 import styles  from './searchList.module.scss'
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import useManualPullDownRefresh from "@/use/useManualPullDownRefresh";
+import {GetProductListApi} from "@/api/material"
+import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro";
+import { formatHashTag, formatImgUrl } from "@/common/fotmat";
+import { getFilterData } from "@/common/util";
+import LoadingCard from "@/components/loadingCard";
+import useLogin from "@/use/useLogin";
 
 export default () => {
+    const {checkLogin} = useLogin()
+    useDidShow(async () => {
+        await checkLogin()
+    })
+
     const [showFilter, setShowFilter] = useState(false)
-    const [selectList, setSelectList] = useState([
+    const router = useRouter()
-        {title: '系列', value:1},
+    const [selectList, setSelectList] = useState<any>([])
-        {title: '系列', value:2},
+
-        {title: '系列', value:3},
+    //搜索参数
-        {title: '系列', value:4},
+    const [searchField, setSearchField] = useState({
-        {title: '系列', value:6},
+        code_or_name: router.params.key,
-        {title: '系列', value:7},
+        page : 1,
-        {title: '系列', value:8},
+        size : 10,
-        {title: '系列', value:9},
+        width: '',
-        {title: '系列', value:10},
+        weight_density: '',
-    ])
+        product_kind_id: '',
+        component: ''
+    })
+    
+    //获取面料列表
+    const [materialList, setMaterialList] = useState<{list:any[], total:number}>({list:[], total:0})
+    const {fetchData: materialFetchData, state: materialState} = GetProductListApi()
+    const getProductList = async () => {
+        let {data} = await materialFetchData(getFilterData(searchField))
+        setMaterialList({list:data.list, total:data.total})
+        Taro.stopPullDownRefresh()
+    }
+
+    //监听筛选条件变化
+    useEffect(() => {
+        getProductList()
+    }, [searchField])
+
+    
+    //上拉加载数据
+    const pageNum = useRef({size: searchField.size, page: searchField.page})
+    const [hasMore, setHasMore] = useState(true)
+    const getScrolltolower = () => {
+        if(materialList.list.length < materialList.total) {
+            pageNum.current.page++
+            const size = pageNum.current.size * pageNum.current.page
+            setSearchField({...searchField, size })
+        }
+    }
+
+    //监听获得的数据变化
+    useEffect(() => {
+        (materialList.list.length < materialList.total)?setHasMore(true):setHasMore(false)
+    }, [materialList])
+
+    //输入了搜索关键字
+    const getSearchData = (e) => {
+        setMaterialList(() => ({list:[], total:0}))
+        setSearchField({...searchField, code_or_name:e, size:10})
+    }
+
+    const goLinkPage = (item) => {
+        goLink('/pages/details/index',{id:item.id})
+    }
+
+    //页面下拉刷新
+    usePullDownRefresh(() => {
+        setSearchField({...searchField ,size : 10})
+    })
+
+    //监听滚动
     const [scrollStatus, setScrollStatus] = useState(false)
     const onscroll = useCallback((e) => {
         if(e.detail.scrollTop > 20) {
@@ -32,12 +93,21 @@ export default () => {
         }
     },[])
 
-    //页面下拉刷新
+    //获取筛选条件
-    const res = useManualPullDownRefresh()
+    const getFiltr = (e) => {
+        setSearchField({
+            ...searchField,  
+            width: e?.width,
+            weight_density: e?.weight, 
+            size: 10,
+            component: e.element
+        })
+    }
+
     return (
         <View className={styles.main}>
             <View className={styles.search}>
-                <Search placeIcon="out"  btnStyle={{color: '#007AFF'}}/>
+                <Search placeIcon="out" placeholder="请输入面料关键词"  btnStyle={{color: '#007AFF'}} defaultValue={router.params.key} changeOnSearch={(e) => getSearchData(e)} debounceTime={300}/>
             </View>
             <View className={styles.filter}>
                 <View className={styles.filter_all}>
@@ -45,7 +115,7 @@ export default () => {
                         <Text>综合</Text>
                         <SortBtn status="top"/>
                     </View>
-                    <View className={styles.text_sc} >
+                    <View className={styles.text_sc}>
                         <Text>收藏</Text>
                         <SortBtn status="top"/>
                     </View>
@@ -66,34 +136,37 @@ export default () => {
                 </View>
             </View>
             <View className={styles.list}>
-                <View className={classnames(styles.list_num, scrollStatus&&styles.list_num_shadow)}>搜索结果 (2条记录)</View>
+                <View className={classnames(styles.list_num, scrollStatus&&styles.list_num_shadow)}>搜索结果 ({materialList.total}条记录)</View>
                 <View className={styles.scroll}>
-                    <InfiniteScroll 
+                    {(materialList.list.length == 0&&materialState.loading)&&<LoadingCard/>}
-                        selfonScrollToLower={() => console.log('123123')} 
+                    {(materialList.list.length == 0 && !materialState.loading)&&<LoadingCard title="暂无数据" loadingIcon={false}/>}
+                    {(materialList.list.length > 0)&&<InfiniteScroll 
+                        selfonScrollToLower={() => getScrolltolower()} 
+                        hasMore={hasMore}
                         selfOnScroll={(e) => onscroll(e)}
                     >
                         <View className={styles.product_list}>
-                            {new Array(9).fill(' ').map(item => {
+                            {materialList.list.map(item => {
-                                return <View className={styles.product_item}>
+                                return <View key={item.id} className={styles.product_item} onClick={() => goLinkPage(item)}>
                                     <View className={styles.product_img}>
-                                        <Image mode="aspectFill" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d"></Image>
+                                        <Image mode="aspectFill" src={formatImgUrl(item.texture_url)}></Image>
-                                        <View className={styles.color_num}>25色</View>
+                                        <View className={styles.color_num}>{(item.product_color_count)}色</View>
                                     </View>
                                     <View className={styles.product_info}>
-                                        <View className={styles.title}>0770#21S精棉平纹</View>
+                                        <View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
                                         <View className={styles.tag_list}>
-                                            <View className={styles.tag}>160cm</View>
+                                            <View className={styles.tag}>{item.width}</View>
-                                            <View className={styles.tag}>110g</View>
+                                            <View className={styles.tag}>{item.weight_density}</View>
                                         </View>
-                                        <View className={styles.introduce}>67.6%棉24%涤纶6.4%氨纶</View>
+                                        <View className={styles.introduce}>{item.component}</View>
                                     </View>
                                 </View>
                             })}
                         </View>
-                    </InfiniteScroll>
+                    </InfiniteScroll>}
                 </View>
             </View>
-            <Filter show={showFilter} onClose={() => setShowFilter(false)}/>
+            <Filter show={showFilter} onClose={() => setShowFilter(false)} onFiltr={(e) => getFiltr(e)} />
         </View>
     )
 }