✨ feat(ID1000775):搜索功能优化

2022-12-09 16:25:27 +08:00 · 2022-12-09 16:25:27 +08:00 · 8b7e0c45d7
commit 8b7e0c45d7
parent f11336f6c7
14 changed files with 1240 additions and 221 deletions
--- a/package.json
+++ b/package.json
@ -73,7 +73,7 @@
    "babel-preset-taro": "3.5.8",
    "classnames": "^2.3.2",
    "cross-env": "^7.0.3",
-    "eslint": "^8.28.0",
+    "eslint": "^8.29.0",
    "eslint-config-taro": "3.5.8",
    "prettier": "^2.8.0",
    "react-refresh": "0.14.0",
--- a/project.private.config.json
+++ b/project.private.config.json
@ -22,6 +22,13 @@
          "query": "",
          "launchMode": "default",
          "scene": null
+        },
+        {
+          "name": "",
+          "pathName": "pages/searchList/hightSearchList",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
        }
      ]
    }
--- a/src/api/material.ts
+++ b/src/api/material.ts
@ -75,3 +75,11 @@ export const GetLabProductApi = () => {
 //         method: "get",
 //     })
 // }
+
+// 删除历史搜索
+export const mallsearchHistorydelete = () => {
+  return useRequest({
+    url: '/v2/mall/searchHistory/delete',
+    method: 'delete',
+  })
+}
--- a/src/components/bluetooth/LinkBlueTooth.tsx
+++ b/src/components/bluetooth/LinkBlueTooth.tsx
@ -47,12 +47,24 @@ const LinkBlueTooth = () => {
  const onFindDevice = () => {
    check().then((res) => {
      if (linkStatus == 1) {
+        // 暂时不开放蓝牙 有需要屏蔽此段代码
+        return Taro.showToast({
+          icon: 'none',
+          title: '【蓝牙设备】暂未对外开放敬请期待',
+        })
+
        Taro.showToast({
          title: '请打开手机蓝牙',
          icon: 'none',
        })
      }
      else {
+        // 暂时不开放蓝牙 有需要屏蔽此段代码
+        return Taro.showToast({
+          icon: 'none',
+          title: '【蓝牙设备】暂未对外开放敬请期待',
+        })
+
        setPopupShow(true)
        onFindEven()
      }
@ -68,7 +80,7 @@ const LinkBlueTooth = () => {
  return (
    <>
      <View className={styles.main}>
-        <SearchInput title="蓝牙设备" showIcon>
+        <SearchInput title="取色设备" showIcon>
          <View className={styles.bluetooth_link} onClick={onFindDevice}>
            <View className={classnames(styles.link_status, linkStatus == 3 && styles.link_statused, linkStatus == 2 && styles.link_statused_no)}></View>
            {
--- a/src/pages/searchList/components/goods/index.module.scss
+++ b/src/pages/searchList/components/goods/index.module.scss
@ -0,0 +1,125 @@
+.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;
+
+        .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;
+        }
+    }
+
+    .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;
+            }
+        }
+    }
+
+}
--- a/src/pages/searchList/components/goods/index.tsx
+++ b/src/pages/searchList/components/goods/index.tsx
@ -0,0 +1,42 @@
+import { Image, View } from '@tarojs/components'
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import styles from '../goods/index.module.scss'
+import LabAndImg from '@/components/LabAndImg'
+
+const Goods = (props: any) => {
+  const labAndImgObj = useCallback((item) => {
+    return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url }
+  }, [])
+  return (
+    <View className={styles.itemBox} onClick={() => props?.clickItem?.()}>
+      {
+        props.data?.texture_url === '' && <>
+
+          <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.data?.texture_url !== ''
+                && <>
+                  <View className={styles.leftBox}>
+                    <LabAndImg value={labAndImgObj(props.data)} />
+                    {/* <Image className={styles.pic} mode={'aspectFill'} src={props.data?.picUrl}></Image> */}
+                    <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>
+  )
+}
+export default memo(Goods)
--- a/src/pages/searchList/components/heightSearchGoods/index.module.scss
+++ b/src/pages/searchList/components/heightSearchGoods/index.module.scss
@ -0,0 +1,125 @@
+.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;
+
+        .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;
+        }
+    }
+
+    .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;
+            }
+        }
+    }
+
+}
--- a/src/pages/searchList/components/heightSearchGoods/index.tsx
+++ b/src/pages/searchList/components/heightSearchGoods/index.tsx
@ -0,0 +1,42 @@
+import { Image, View } from '@tarojs/components'
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import styles from '../goods/index.module.scss'
+import LabAndImg from '@/components/LabAndImg'
+
+const Goods = (props: any) => {
+  const labAndImgObj = useCallback((item) => {
+    return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url }
+  }, [])
+  return (
+    <View className={styles.itemBox} onClick={() => props?.clickItem?.()}>
+      {
+        props.data?.texture_url === '' && <>
+
+          <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_code}</View>
+          </View>
+        </>
+      }
+      {
+        props.data?.texture_url !== ''
+                && <>
+                  <View className={styles.leftBox}>
+                    <LabAndImg value={labAndImgObj(props.data)} />
+                    {/* <Image className={styles.pic} mode={'aspectFill'} src={props.data?.picUrl}></Image> */}
+                    <View className={styles.posBox}>{props.data?.product_color_code}</View>
+                  </View>
+                </>
+      }
+      <View className={styles.rightBox}>
+        <View className={styles.productName}>{props.data?.product_code}#{props.data?.product_name}</View>
+        <View className={styles.tips}>{props.data?.product_kind_name}</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>
+  )
+}
+export default memo(Goods)
--- a/src/pages/searchList/components/searchPopup/index.module.scss
+++ b/src/pages/searchList/components/searchPopup/index.module.scss
@ -0,0 +1,207 @@
+.main {
+  .topBox {
+    display: flex;
+    padding-left: 48px;
+    margin-top: 20px;
+    .leftTop {
+      .lefttopTitle {
+        font-size: 28px;
+
+        font-weight: 500;
+        color: #000000;
+        margin-bottom: 24px;
+      }
+      .inputBox {
+        padding-left: 20px;
+        display: flex;
+        align-items: center;
+        width: 654px;
+        height: 68px;
+        background: #e9e9e9;
+        border-radius: 8px;
+        background-color: #f6f6f6;
+        margin-right: 48px;
+        .inputClass {
+          width: 624px;
+        }
+      }
+      .lefttopSelectBox {
+        display: flex;
+        align-items: center;
+        width: 330px;
+        height: 68px;
+        background: #f6f6f6;
+        border-radius: 8px;
+        justify-content: space-between;
+        margin-right: 16px;
+        .inputstyle {
+          padding-left: 20px;
+        }
+        .danwei {
+          color: #676767;
+          font-size: 28px;
+          font-weight: 400;
+          margin-right: 16px;
+        }
+        .lefttopSelectNameactive {
+          font-size: 28px;
+
+          font-weight: 400;
+          color: #8b8b8b;
+          margin-left: 24px;
+        }
+
+        .lefttopSelectName {
+          font-size: 28px;
+
+          font-weight: 400;
+          color: #000000;
+          margin-left: 24px;
+        }
+
+        .icon_more {
+          margin-right: 24px;
+          font-size: 30px;
+        }
+      }
+
+      .activelefttopSelectBox {
+        width: 319px;
+        height: 68px;
+        background: rgba(51, 127, 255, 0.1);
+        border-radius: 8px;
+        border: 1px solid #337fff;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-right: 16px;
+
+        .lefttopSelectName {
+          font-size: 28px;
+
+          font-weight: 400;
+          color: #337fff;
+          margin-left: 24px;
+        }
+
+        .icon_more {
+          margin-right: 24px;
+          font-size: 30px;
+          color: #337fff;
+        }
+      }
+    }
+  }
+  .thirdBox {
+    margin-top: 30px;
+    padding-left: 48px;
+    .thirdTopfont {
+      font-size: 28px;
+
+      font-weight: 500;
+      color: #000000;
+    }
+
+    .flexModebox {
+      min-width: 152px;
+      margin-top: 24px;
+      display: flex;
+      flex-wrap: wrap;
+      .activemodeBox {
+        min-width: 152px;
+        margin-bottom: 16px;
+        margin-right: 16px;
+        padding: 10px;
+        // width: 152px;
+        // height: 68px;
+        background: rgba(51, 127, 255, 0.1);
+        border-radius: 8px;
+        font-size: 28px;
+
+        font-weight: 400;
+        color: #337fff;
+        text-align: center;
+        line-height: 68px;
+        border: 1px solid #337fff;
+        box-sizing: border-box;
+      }
+
+      .modeBox {
+        min-width: 152px;
+        margin-bottom: 16px;
+        margin-right: 16px;
+        // width: 152px;
+        // height: 68px;
+        padding: 10px;
+        background: #f6f6f6;
+        border-radius: 8px;
+        font-size: 28px;
+        border: 1px solid #f6f6f6;
+        font-weight: 400;
+        color: #7d7d7d;
+        text-align: center;
+        line-height: 68px;
+        box-sizing: border-box;
+        // opacity: 0.4;
+      }
+    }
+  }
+  .safeBox {
+    height: 160px;
+  }
+  .bottomBox {
+    width: 100%;
+    height: 160px;
+    background: #ffffff;
+    z-index: 99;
+    position: fixed;
+    bottom: 0;
+    padding-bottom: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .resetBox {
+      margin-left: 48px;
+      width: 311px;
+      height: 80px;
+      border-radius: 44px;
+      border: 1px solid #087eff;
+      font-size: 28px;
+
+      font-weight: 500;
+      color: #337fff;
+      text-align: center;
+      line-height: 80px;
+      background-color: #fff;
+    }
+
+    .button {
+      margin-right: 32px;
+      width: 311px;
+      height: 80px;
+      background: #68b4ff;
+      border-radius: 44px;
+      font-size: 32px;
+
+      font-weight: 500;
+      color: #ffffff;
+      text-align: center;
+      line-height: 80px;
+    }
+
+    .activeButton {
+      margin-right: 32px;
+      width: 311px;
+      height: 80px;
+      background: #337fff;
+      border-radius: 44px;
+      font-size: 32px;
+      border: 1px solid #337fff;
+      font-weight: 500;
+      color: #fff;
+      text-align: center;
+      line-height: 80px;
+    }
+  }
+}
--- a/src/pages/searchList/components/searchPopup/index.tsx
+++ b/src/pages/searchList/components/searchPopup/index.tsx
@ -0,0 +1,177 @@
+import { Button, Image, Input, ScrollView, Text, View } from '@tarojs/components'
+import Taro, { useDidShow, usePullDownRefresh, useReady } from '@tarojs/taro'
+import classnames from 'classnames'
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import styles from './index.module.scss'
+import Popup from '@/components/popup'
+import { GetProductKindListApi } from '@/api/material'
+import { getFilterData } from '@/common/util'
+import { alert } from '@/common/common'
+
+interface Props {
+  showPopup: boolean
+  closePopup: () => void
+  handSearch: (any) => void
+}
+
+const SearchPopup = (props: Props) => {
+  const [searchObj, setsearchObj] = useState<any>({
+    width: '',
+    weight_density: '',
+    product_kind_ids: '',
+    component: '',
+  })
+
+  // 获取系列
+  const { fetchData: kindFetchData } = GetProductKindListApi()
+  const [kindList, setKindList] = useState<any[]>([])
+  const getCategoryList = async() => {
+    const { data } = await kindFetchData()
+    setKindList(data.list)
+  }
+
+  useEffect(() => {
+    getCategoryList()
+  }, [])
+
+  const handCheckMode = (it) => {
+    kindList.map((item) => {
+      if (item.id == it.id) {
+        item.check = !item.check
+      }
+      return item
+    })
+    setKindList([...kindList])
+    const arr: number[] = []
+    const res = kindList.filter((item) => { return item.check })
+    res.forEach((kb) => {
+      arr.push(kb.id)
+    })
+    setsearchObj(val => ({ ...val, product_kind_ids: arr.toString() }))
+  }
+
+  const handBlur = (e, index) => {
+    if (index == 1) {
+      setsearchObj(val => ({ ...val, width: Number(e.detail.value) }))
+    }
+    if (index == 2) {
+      setsearchObj(val => ({ ...val, weight_density: Number(e.detail.value) }))
+    }
+    if (index == 3) {
+      setsearchObj(val => ({ ...val, component: e.detail.value }))
+    }
+  }
+
+  //   const isDisabled = useMemo(() => {
+  //     if (searchObj.width !== ''
+  //     || searchObj.weight_density !== ''
+  //     || searchObj.product_kind_ids !== ''
+  //     || searchObj.component !== ''
+  //     ) {
+  //       return false
+  //     }
+  //     else {
+  //       return true
+  //     }
+  //   }, [searchObj])
+
+  const handReset = () => {
+    kindList.map((item) => {
+      item.check = false
+      return item
+    })
+    setKindList([...kindList])
+    setsearchObj({
+      width: '',
+      weight_density: '',
+      product_kind_ids: '',
+      component: '',
+    })
+  }
+
+  const handSure = () => {
+    if (searchObj.width === ''
+    && searchObj.weight_density === ''
+    && searchObj.product_kind_ids === ''
+    && searchObj.component === ''
+    ) {
+      alert.error('请选择筛选内容')
+      return true
+    }
+    props.handSearch(getFilterData(searchObj))
+  }
+
+  return (
+    <Popup title="全部筛选" show={props.showPopup} onClose={() => props.closePopup?.()}>
+      <ScrollView scrollY style={{ height: '600rpx' }}>
+        <View className={styles.main}>
+          <View className={styles.thirdBox}>
+            <View className={styles.thirdTopfont}>系列名称</View>
+            <View className={styles.flexModebox}>
+              {kindList.map((item, index) => {
+                return (
+                  <View
+                    onClick={() => {
+                      handCheckMode(item)
+                    }}
+                    className={classnames(item.check ? styles.activemodeBox : styles.modeBox)}
+                    key={index}
+                  >
+                    {item.name}
+                  </View>
+                )
+              })}
+            </View>
+          </View>
+          <View className={styles.topBox}>
+            <View className={styles.leftTop} >
+              <View className={styles.lefttopTitle}>幅宽</View>
+              <View className={styles.lefttopSelectBox}>
+                <Input className={styles.inputstyle} type="number" value={searchObj.width} onBlur={e => handBlur(e, 1)} placeholder="请输入幅宽"></Input>
+                <View className={styles.danwei}>CM</View>
+              </View>
+            </View>
+            <View className={styles.leftTop} >
+              <View className={styles.lefttopTitle}>克重</View>
+              <View className={styles.lefttopSelectBox}>
+                <Input className={styles.inputstyle} type="number" value={searchObj.weight_density} onBlur={e => handBlur(e, 2)} placeholder="请输入克重"></Input>
+                <View className={styles.danwei}>KG</View>
+              </View>
+            </View>
+          </View>
+          <View className={styles.topBox}>
+            <View className={styles.leftTop} >
+              <View className={styles.lefttopTitle}>成分</View>
+              <View className={styles.inputBox}>
+                <Input className={styles.inputClass} type="text" value={searchObj.component} onBlur={e => handBlur(e, 3)} placeholder="请输入成分"></Input>
+              </View>
+            </View>
+          </View>
+          <View className={styles.safeBox}></View>
+          <View className={styles.bottomBox}>
+            <Button
+              className={styles.resetBox}
+              plain
+              onClick={() =>
+                handReset()
+              }
+            >
+              重置
+            </Button>
+            <Button
+              className={styles.activeButton}
+              plain
+              //   disabled={isDisabled}
+              onClick={() =>
+                handSure?.()
+              }
+            >
+              确认
+            </Button>
+          </View>
+        </View>
+      </ScrollView>
+    </Popup>
+  )
+}
+export default memo(SearchPopup)
--- a/src/pages/searchList/hightSearchList.module.scss
+++ b/src/pages/searchList/hightSearchList.module.scss
@ -23,6 +23,70 @@
      }
    }
  }
+  .topBox {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #fff;
+    // width: 100%;
+    padding: 40px;
+    .topLeft {
+      font-size: 28px;
+      font-weight: 500;
+      color: #000000;
+    }
+    .filter_more {
+      font-size: 28px;
+      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 {
+        margin-right: 10px;
+        font-size: 32px;
+      }
+      .activemiconfont {
+        margin-right: 10px;
+        color: #327fff;
+        font-size: 32px;
+      }
+      .activeFont {
+        color: #327fff;
+      }
+    }
+  }
+  .filterBox {
+    display: flex;
+    align-items: center;
+    background-color: #fff;
+    padding-left: 40px;
+    padding-bottom: 32px;
+    .text_sc,
+    .text_zh {
+      width: 148px;
+      height: 56px;
+      background: #f9f6f6;
+      border-radius: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #636262;
+      font-size: 28px;
+      font-weight: 400;
+      margin-right: 24px;
+    }
+  }
  .filter {
    .filter_all {
      display: flex;
@ -112,30 +176,10 @@
        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 {
    height: calc(100vh - 440px);
+    background-color: #fff;
    .list_num {
      font-size: $font_size_min;
      color: $color_font_two;
@ -147,68 +191,68 @@
      height: 100%;
      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;
-        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
-        .product_img {
-          width: 100%;
-          height: 224px;
-          border-radius: 20px 20px 0px 0px;
-          position: relative;
-          image {
-            width: 100%;
-            height: 100%;
-            border-radius: 20px 20px 0px 0px;
-          }
-          .color_num {
-            background: rgba(0, 0, 0, 0.5);
-            border-radius: 0px 50px 0px 30px;
-            font-size: $font_size_min;
-            color: #fff;
-            position: absolute;
-            left: 0;
-            bottom: 0;
-            padding: 5px 20px;
-            box-sizing: border-box;
-          }
-        }
-      }
-      .product_info {
-        padding: 20px;
-        .title {
-          font-size: $font_size;
-          color: $color_font_three;
-          @include common_ellipsis();
-        }
-        .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;
-          @include common_ellipsis();
-        }
-      }
-    }
+    // .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;
+    //     box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+    //     .product_img {
+    //       width: 100%;
+    //       height: 224px;
+    //       border-radius: 20px 20px 0px 0px;
+    //       position: relative;
+    //       image {
+    //         width: 100%;
+    //         height: 100%;
+    //         border-radius: 20px 20px 0px 0px;
+    //       }
+    //       .color_num {
+    //         background: rgba(0, 0, 0, 0.5);
+    //         border-radius: 0px 50px 0px 30px;
+    //         font-size: $font_size_min;
+    //         color: #fff;
+    //         position: absolute;
+    //         left: 0;
+    //         bottom: 0;
+    //         padding: 5px 20px;
+    //         box-sizing: border-box;
+    //       }
+    //     }
+    //   }
+    //   .product_info {
+    //     padding: 20px;
+    //     .title {
+    //       font-size: $font_size;
+    //       color: $color_font_three;
+    //       @include common_ellipsis();
+    //     }
+    //     .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;
+    //       @include common_ellipsis();
+    //     }
+    //   }
+    // }
  }
 }
--- a/src/pages/searchList/hightSearchList.tsx
+++ b/src/pages/searchList/hightSearchList.tsx
@ -5,6 +5,8 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styles from './hightSearchList.module.scss'
 import type { ListProps } from './components/selectData'
 import SelectData from './components/selectData'
+import Goods from './components/heightSearchGoods'
+import SearchPopup from './components/searchPopup'
 import Filter from '@/components/filter'
 import InfiniteScroll from '@/components/infiniteScroll'
 import SortBtn from '@/components/sortBtn'
@ -33,7 +35,7 @@ export default () => {
    size: 10,
    width: '',
    weight_density: '',
-    product_kind_id: '',
+    product_kind_ids: '',
    component: '',
    abstract_sort_key: '',
  })
@ -108,7 +110,7 @@ export default () => {
      weight_density: data?.weight,
      size: 10,
      component: data?.element,
-      product_kind_id: data?.seriesId,
+      product_kind_ids: data?.seriesId,
    })
    formatSelectList(e)
  }
@ -160,6 +162,37 @@ export default () => {
    },
    [materialList],
  )
+
+  const [showPopup, setshowPopup] = useState(false)
+
+  const handSearch = (val) => {
+    console.log(val, '222')
+    pageNum.current.page = 1
+    setMaterialList(() => ({ list: [], total: 0 }))
+    setSearchField({
+      ...searchField,
+      width: val?.width,
+      weight_density: val?.weight_density,
+      size: 10,
+      component: val?.component,
+      product_kind_ids: val?.product_kind_ids,
+    })
+    setshowPopup(false)
+  }
+
+  const isShow = useMemo(() => {
+    if (searchField.width !== ''
+    || searchField.weight_density !== ''
+    || searchField.component !== ''
+    || searchField.product_kind_ids !== ''
+    ) {
+      return false
+    }
+    else {
+      return true
+    }
+  }, [searchField])
+
  return (
    <View className={styles.main}>
      <View className={styles.search}>
@ -174,7 +207,24 @@ export default () => {
          </SearchInput>
        </View>
      </View>
-      <View className={styles.filter}>
+      <View className={styles.topBox}>
+        <View className={styles.topLeft}>搜索结果</View>
+        <View className={styles.filter_more} onClick={() => setshowPopup(true)}>
+          <Text className={classnames('iconfont icon-shaixuan', isShow ? styles.miconfont : styles.activemiconfont)}></Text>
+          <Text className={classnames(!isShow ? styles.activeFont : '')}>筛选</Text>
+        </View>
+      </View>
+      <View className={styles.filterBox}>
+        <View className={styles.text_zh} onClick={() => changeSort(1)}>
+          <Text style={{ marginRight: '5px' }}>综合</Text>
+          <SortBtn status={sortStatus.comprehensive} ref={sortComprehensiveRef} sortValue={{ desc: '1', asc: '-1' }} />
+        </View>
+        <View className={styles.text_sc} onClick={() => changeSort(2)}>
+          <Text style={{ marginRight: '5px' }}>收藏</Text>
+          <SortBtn status={sortStatus.collection} ref={sortCollectionRef} sortValue={{ desc: '2', asc: '-2' }} />
+        </View>
+      </View>
+      {/* <View className={styles.filter}>
        <View className={styles.filter_all}>
          <View className={styles.text_zh} onClick={() => changeSort(1)}>
            <Text>综合</Text>
@ -194,31 +244,33 @@ export default () => {
            <Text className={classnames('iconfont icon-shaixuan', styles.miconfont)}></Text>
          </View>
        </View>
-      </View>
+      </View> */}
      <View className={styles.list}>
-        <View className={classnames(styles.list_num, styles.list_num_shadow)}>搜索结果 ({materialList.total}条记录)</View>
+        {/* <View className={classnames(styles.list_num, styles.list_num_shadow)}>搜索结果 ({materialList.total}条记录)</View> */}
        <View className={styles.scroll}>
          <InfiniteScroll selfonScrollToLower={getScrolltolower} statusMore={statusMore}>
            <View className={styles.product_list}>
              {materialList.list.map((item) => {
                return (
-                  <View key={item.id} className={styles.product_item} onClick={() => goLinkPage(item)}>
-                    <View className={styles.product_img}>
-                      <LabAndImg value={labAndImgObj(item)} />
-                      <View className={styles.color_num}>{item.product_color_code}</View>
-                    </View>
-                    <View className={styles.product_info}>
-                      <View className={styles.title}>{formatHashTag(item.product_code, item.product_name)}</View>
-                      <View className={styles.introduce}>{item.product_kind_name}</View>
-                    </View>
-                  </View>
+                  <Goods key={item} data={item}></Goods>
+                  // <View key={item.id} className={styles.product_item} onClick={() => goLinkPage(item)}>
+                  //   <View className={styles.product_img}>
+                  //     <LabAndImg value={labAndImgObj(item)} />
+                  //     <View className={styles.color_num}>{item.product_color_code}</View>
+                  //   </View>
+                  //   <View className={styles.product_info}>
+                  //     <View className={styles.title}>{formatHashTag(item.product_code, item.product_name)}</View>
+                  //     <View className={styles.introduce}>{item.product_kind_name}</View>
+                  //   </View>
+                  // </View>
                )
              })}
            </View>
          </InfiniteScroll>
        </View>
      </View>
-      <Filter show={showFilter} onFiltr={e => getFiltr(e)} onClose={() => setShowFilter(false)} />
+      {/* <Filter show={showFilter} onFiltr={e => getFiltr(e)} onClose={() => setShowFilter(false)} /> */}
+      <SearchPopup showPopup={showPopup} closePopup={() => setshowPopup(false)} handSearch={val => handSearch(val)}></SearchPopup>
    </View>
  )
 }
--- a/src/pages/searchList/search.module.scss
+++ b/src/pages/searchList/search.module.scss
@ -1,78 +1,115 @@
-.main{
-    position: relative;
-    .search{
-        display: flex;
-        justify-content: space-between;
-        padding: 20px;
-        padding-bottom: 50px;
+.main {
+  position: relative;
+  .search {
+    display: flex;
+    justify-content: space-between;
+    padding: 20px;
+    padding-bottom: 50px;
+    align-items: center;
+    .searchBox {
+      width: 606px;
    }
-    .up_search{
-        color: $color_main;
+    .cancelFont {
+      font-size: 28px;
+      font-weight: 400;
+      color: #b1b1b1;
+    }
+  }
+  .up_search {
+    color: $color_main;
+    font-size: $font_size;
+    position: absolute;
+    right: 20px;
+  }
+  .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;
-        position: absolute;
-        right: 20px;
+        color: $color_font_one;
+        font-weight: 700;
+      }
    }
-    .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;
-            }

-        }
-        
-        .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;
-            }
-        }
+    .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: 8px;
+      }
    }
-    .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: 40px;
-                color: $color_font_three;
-                margin-left: 20px;
-            }
-        }
-        .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: 40px;
+        color: $color_font_three;
+        margin-left: 20px;
+      }
    }
+    .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: 8px;
+      }
+    }
+  }
+  .reslutBox {
+    .reslutTitle {
+      margin-bottom: 20px;
+      margin-left: 20px;
+      font-size: $font_size;
+      color: $color_font_one;
+      font-weight: 700;
+    }
+    .scrollBox {
+      height: calc(100vh - 250px);
+    }
+  }
+  .topFlex {
+    display: flex;
+    align-items: center;
+    // margin-top: 35px;
+    justify-content: space-between;
+    .historyFont {
+      margin-left: 32px;
+      font-size: $font_size;
+      color: $color_font_one;
+      font-weight: 700;
+    }
+    .up_search {
+      color: $color_main;
+      font-size: $font_size;
+      margin-right: 20px;
+    }
+  }
 }
--- a/src/pages/searchList/search.tsx
+++ b/src/pages/searchList/search.tsx
@ -1,21 +1,37 @@
-import { Text, View } from '@tarojs/components'
 import Taro, { useDidShow, useShareAppMessage } from '@tarojs/taro'
+import { Text, View } from '@tarojs/components'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import classnames from 'classnames'
-import { useEffect, useRef, useState } from 'react'
 import styles from './search.module.scss'
+import Goods from './components/goods'
 import Search from '@/components/search'
 import { alert, goLink } from '@/common/common'
 import { AddSearchHistoryApi, GetHotSearchApi, GetSearchHistoryApi } from '@/api/search'
-import { SCENE } from '@/common/constant'
+import { SCENE, SEARCH_EMPTY_IMAGE } from '@/common/constant'
 import useLogin from '@/use/useLogin'
+import Empty from '@/components/empty'
+import { dataLoadingStatus, debounce, getFilterData } from '@/common/util'
+import InfiniteScroll from '@/components/infiniteScroll'
+import { GetProductListApi, mallsearchHistorydelete } from '@/api/material'

 interface searchDataParam { search_key: '' }
 export default () => {
  useLogin()

-  const [searchData, setSearchData] = useState<{ hotField: searchDataParam[]; historyField: searchDataParam[] }>({
+  const [searchData, setSearchData] = useState<{
+    hotField: searchDataParam[]
+    historyField: searchDataParam[]
+    showIndex: number
+    code_or_name: string
+    page: number
+    size: number
+  }>({
    hotField: [],
    historyField: [],
+    showIndex: 1, // 1代表输入框没内容搜索 2是有
+    code_or_name: '',
+    page: 1,
+    size: 10,
  })

  // 获取热门搜索数据
@ -45,58 +61,183 @@ export default () => {
    // goLink('/pages/searchList/searchList', {key: addSearchField.current.key})
  }

+  // 默认输入框词
+  const [defaultValue, setdefaultValue] = useState('')
+
  // 搜索事件, 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}`,
+    setdefaultValue(e)
+    // if (e == '') {
+    //   alert.error('请输入关键词')
+    //   return false
+    // }
+    // addSearchField.current.key = e
+    // status && addSearchHistory()
+    // Taro.navigateTo({
+    //   url: `/pages/searchList/searchList?key=${addSearchField.current.key}`,
+    // })
+
+    addSearchHistory()
+    setSearchData(val => ({ ...val, showIndex: 2, page: 1, size: 10, code_or_name: e }))
+    // getProductList()
+  }
+
+  const changeSearch = useCallback(debounce((e) => {
+    if (e.trim().length == 0 && e != '') {
+      alert.error('请输入关键词')
+    }
+    if (e.trim().length != 0) {
+      addSearchField.current.key = e
+      addSearchHistory()
+      getSearchHistory()
+      setSearchData(val => ({ ...val, showIndex: 2, page: 1, size: 10, code_or_name: e }))
+      // getProductList()
+    }
+    if (e == '') {
+      getSearchHistory()
+      setSearchData(val => ({ ...val, showIndex: 1 }))
+    }
+  }, 300), [])
+
+  // 返回
+  const handCancel = () => {
+    Taro.navigateBack({
+      delta: 1,
    })
  }

+  // 获取面料列表
+  const [materialList, setMaterialList] = useState<{ list: any[]; total: number }>({ list: [], total: 0 })
+  const { fetchData: materialFetchData, state: materialState } = GetProductListApi()
+  const getProductList = async() => {
+    const { data } = await materialFetchData(getFilterData(searchData))
+    setMaterialList({ list: data.list, total: data.total })
+    Taro.stopPullDownRefresh()
+  }
+
+  // 上拉加载数据
+  const pageNum = useRef({ size: searchData.size, page: searchData.page })
+  const getScrolltolower = () => {
+    if (materialList.list.length < materialList.total) {
+      pageNum.current.page++
+      const size = pageNum.current.size * pageNum.current.page
+      setSearchData({ ...searchData, size })
+    }
+  }
+
+  // 监听筛选条件变化
+  useEffect(() => {
+    if (searchData.code_or_name !== '') {
+      getProductList()
+    }
+  }, [searchData.code_or_name])
+
+  // 数据加载状态
+  const statusMore = useMemo(() => {
+    return dataLoadingStatus({ list: materialList.list, total: materialList.total, status: materialState.loading })
+  }, [materialList, materialState])
+
+  // 删除历史搜索
+  const { fetchData: deleteFetch } = mallsearchHistorydelete()
+  const handDelete = async() => {
+    const res = await deleteFetch()
+    Taro.showLoading({
+      title: '请稍等...',
+    })
+    if (res) {
+      alert.success('删除成功')
+      getSearchHistory()
+      setSearchData(val => ({ ...val, showIndex: 1 }))
+      Taro.hideLoading()
+    }
+    else {
+      alert.error('删除失败')
+      Taro.hideLoading()
+    }
+  }
+
  return (
    <View className={styles.main}>
      <View className={styles.search}>
-        <Search style={{ width: '100%' }} placeholder="请输入面料关键词" placeIcon="out" showBtn clickOnSearch={e => searchEvent(e)} />
-      </View>
-      <View className={styles.up_search} onClick={() => goLink('/pages/searchList/hightSearchList')}>
-        高级搜索
-      </View>
-      {searchData?.hotField.length > 0 && (
-        <View className={styles.hot}>
-          <View className={styles.hot_header}>
-            <View className={styles.hot_header_title}>热门面料</View>
-          </View>
-          <View className={styles.list}>
-            {searchData.hotField.map((item) => {
-              return (
-                <View className={styles.item} onClick={() => searchEvent(item.search_key, false)}>
-                  {item.search_key}
-                </View>
-              )
-            })}
-          </View>
+        <View className={styles.searchBox}>
+          <Search
+            changeOnSearch={changeSearch}
+            placeholder="请输入面料关键词"
+            defaultValue={defaultValue}
+          />
        </View>
-      )}
-      {searchData?.historyField.length > 0 && (
-        <View className={styles.history}>
-          <View className={styles.history_header}>
-            <View className={styles.history_header_title}>历史搜索</View>
-            {/* <View className={classnames('iconfont icon-shanchu', styles.miconfont)}></View> */}
-          </View>
-          <View className={styles.list}>
-            {searchData?.historyField?.map(item => (
-              <View className={styles.item} onClick={() => searchEvent(item.search_key, false)}>
-                {item.search_key}
+        <View className={styles.cancelFont} onClick={() => handCancel()}>取消</View>
+      </View>
+      {
+        searchData.showIndex === 1 && <>
+          {
+            searchData?.historyField.length === 0
+            && <View className={styles.topFlex}>
+              <View className={styles.historyFont}>历史搜索</View>
+              <View className={styles.up_search} onClick={() => goLink('/pages/searchList/hightSearchList')}>
+                {'高级搜索 >'}
              </View>
-            ))}
+            </View>
+          }
+          {searchData?.hotField.length > 0 && (
+            <View className={styles.hot}>
+              <View className={styles.hot_header}>
+                <View className={styles.hot_header_title}>热门面料</View>
+              </View>
+              <View className={styles.list}>
+                {searchData.hotField.map((item, index) => {
+                  return (
+                    <View className={styles.item} onClick={() => searchEvent(item.search_key, false)} key={index}>
+                      {item.search_key}
+                    </View>
+                  )
+                })}
+              </View>
+            </View>
+          )}
+          {searchData?.historyField.length > 0 && (
+            <View className={styles.history}>
+              <View className={styles.history_header}>
+                <View className={styles.history_header_title}>历史搜索</View>
+                {
+                  searchData?.historyField.length > 0 && <View className={classnames('iconfont icon-shanchu', styles.miconfont)} onClick={() => handDelete()}></View>
+                }
+
+              </View>
+              <View className={styles.list}>
+                {searchData?.historyField?.map((item, index) => (
+                  <View className={styles.item} onClick={() => searchEvent(item.search_key, false)} key={index}>
+                    {item.search_key}
+                  </View>
+                ))}
+              </View>
+              <View className={styles.up_search} onClick={() => goLink('/pages/searchList/hightSearchList')}>
+                {'高级搜索 >'}
+              </View>
+            </View>
+          )}
+          {
+            searchData?.historyField.length === 0 && <Empty picUrl={SEARCH_EMPTY_IMAGE} text="无搜索历史"></Empty>
+          }
+        </>
+      }
+      {
+        searchData.showIndex === 2 && <View className={styles.reslutBox}>
+          <View className={styles.reslutTitle}>搜索结果</View>
+          <View className={styles.scrollBox}>
+            <InfiniteScroll selfonScrollToLower={getScrolltolower} statusMore={statusMore}>
+              {
+                materialList?.list.map((item) => {
+                  return (
+                    <Goods key={item} data={item}></Goods>
+                  )
+                })
+              }
+            </InfiniteScroll>
          </View>
        </View>
-      )}
+      }
    </View>
  )
 }