✨ feat(热门搜索):更换筛选弹窗
This commit is contained in:
Haiyi
parent
c9fa150ec7
commit
21b4f9df8c
207
src/pages/classList/components/searchPopup/index.module.scss
Normal file
207
src/pages/classList/components/searchPopup/index.module.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
168
src/pages/classList/components/searchPopup/index.tsx
Normal file
168
src/pages/classList/components/searchPopup/index.tsx
Normal file
@ -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)
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user