✨ feat(热门搜索):更换筛选弹窗

src/pages/classList/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;
+    }
+  }
+}

src/pages/classList/components/searchPopup/index.tsx

@@ -0,0 +1,168 @@
+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 = true
+      }
+      else {
+        item.check = false
+      }
+      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() }))
+    setsearchObj(val => ({ ...val, product_kind_ids: res[0]?.id }))
+  }
+
+  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 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)

src/pages/classList/index.tsx

@@ -5,6 +5,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import type { ListProps } from '../searchList/components/selectData'
 import SelectData from '../searchList/components/selectData'
 import styles from './index.module.scss'
+import SearchPopup from './components/searchPopup'
 import Search from '@/components/search'
 import Product from '@/components/product'
 import InfiniteScroll from '@/components/infiniteScroll'
@@ -117,6 +118,22 @@ export default () => {
     pageNum.current = { size: 10, page: 1 }
   }
 
+  const [showsearchPopup, setshowsearchPopup] = useState(false)
+
+  const handSearch = (val) => {
+    pageNum.current.page = 1
+    setCategoryList(() => ({ list: [], total: 0 }))
+    setSearchField({
+      ...searchField,
+      width: val?.width,
+      weight_density: val?.weight_density,
+      size: 10,
+      component: val?.component,
+      product_kind_id: val?.product_kind_ids,
+    })
+    setshowsearchPopup(false)
+  }
+
   return (
     <View className={styles.main}>
       <View className={styles.search}>
@@ -128,7 +145,7 @@ export default () => {
             <Text>综合</Text>
             <SortBtn status={sortStatus.comprehensive} ref={sortComprehensiveRef} sortValue={{ desc: '1', asc: '-1' }} />
           </View>
-          <View className={styles.text_two} onClick={() => setShowPopup(true)}>
+          <View className={styles.text_two} onClick={() => setshowsearchPopup(true)}>
             <Text>筛选</Text>
             <Text className={classnames('iconfont icon-bianji_bianji', styles.miconfont)}></Text>
           </View>
@@ -142,7 +159,8 @@ export default () => {
           <Product desStatus={false} productList={categoryList.list} />
         </InfiniteScroll>
       </View>
-      <Filter show={showPopup} onClose={() => setShowPopup(false)} onFiltr={getFiltr} />
+      {/* <Filter show={showPopup} onClose={() => setShowPopup(false)} onFiltr={getFiltr} /> */}
+      <SearchPopup showPopup={showsearchPopup} closePopup={() => setshowsearchPopup(false)} handSearch={val => handSearch(val)}></SearchPopup>
     </View>
   )
 }