xuan/TestRestructureWechatLymarketDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

筛选完成

Browse Source
This commit is contained in:
cheng
2022-05-17 20:31:53 +08:00
parent 754b3330a9
commit d639f2b23b
22 changed files with 458 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/searchList/components/selectData/index.module.scss
+5 -5
View File
@@ -3,7 +3,7 @@
width: 100%;
.tabs_scroll{
width: 100%;
display: flex;
// display: flex;
white-space: nowrap;
::-webkit-scrollbar {
display:none;
@@ -12,12 +12,12 @@
color:transparent;
}
.tabs_item{
flex:1;
min-width: 130px;
padding: 0 10px;
display: inline-block;
font-size: 24rpx;
font-size: 24px;
background-color: #ecf5ff;
border-radius: 24rpx;
min-width: 126rpx;
height: 46.93rpx;
text-align: center;
line-height: 46.93rpx;
@@ -30,7 +30,7 @@
align-items: center;
justify-content: center;
font-size: $font_size_medium;
@include common_ellipsis();
}
.tabs_index{
height: 5px;
src/pages/searchList/components/selectData/index.tsx
+2 -2
View File
@@ -4,7 +4,7 @@ import classnames from "classnames";
import styles from './index.module.scss'
type ListProps = {
export type ListProps = {
title: string,
value: number
}
@@ -44,7 +44,7 @@ export default memo(({list = [], defaultValue = 0, tabsOnClick}: Params) => {
list.map((item, index) => {
return (
<View key={index} id={`tabs_${index}`} className={styles.tabs_item} onClick={() => clickEvent({item,index})}>
<View className={classnames(styles.tabs_item_con)}>{item.title}</View>
<View className={classnames(styles.tabs_item_con)}>{`${item.title}: ${item.value}`}</View>
</View>
)
})
src/pages/searchList/hightSearchList.module.scss
+1
View File
@@ -74,6 +74,7 @@
.filter_scroll{
flex:1;
width: 0;
padding-left: 20px;
::-webkit-scrollbar {
display:none;
width:0;
src/pages/searchList/hightSearchList.tsx
+38 -26
View File
@@ -1,6 +1,5 @@
import { Image, ScrollView, Text, View } from "@tarojs/components"
import classnames from "classnames";
import Search from '@/components/search'
import Filter from "@/components/filter";
import InfiniteScroll from '@/components/infiniteScroll'
import SortBtn from "@/components/sortBtn";
@@ -8,17 +7,16 @@ import SearchInput from "@/components/searchInput";
import LinkBlueTooth from "@/components/bluetooth/LinkBlueTooth";
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, useRef, useState } from "react";
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";
import SelectData, {ListProps} from "./components/selectData";
export default () => {
const {checkLogin} = useLogin()
@@ -27,17 +25,6 @@ export default () => {
})
const [showFilter, setShowFilter] = useState(false)
const [selectList, setSelectList] = useState([
{title: '系列', value:1},
{title: '系列', value:2},
{title: '系列', value:3},
{title: '系列', value:4},
{title: '系列', value:5},
{title: '系列', value:5},
{title: '系列', value:5},
{title: '系列', value:5},
{title: '系列', value:5},
])
//搜索参数
const [searchField, setSearchField] = useState({
@@ -45,7 +32,11 @@ export default () => {
a: '',
b: '',
page : 1,
size : 10
size : 10,
width: '',
weight_density: '',
product_kind_id: '',
component: ''
})
//获取面料列表
@@ -100,6 +91,7 @@ export default () => {
}
}
//监听lab数据变化
const [blueToothColor, setBlueToothColor] = useState('')
useEffect(() => {
if(colorState.deviceLab) {
@@ -114,6 +106,33 @@ export default () => {
goLink('/pages/details/index',{id:item.id})
}
//获取筛选条件
const getFiltr = (e) => {
const {data} = e
setSearchField({
...searchField,
width: data?.width,
weight_density: data?.weight,
size: 10,
component: data?.element,
product_kind_id: data?.seriesId
})
formatSelectList(e)
}
//筛选条件格式化
const [selectList , setSelectList] = useState<ListProps[]>()
const formatSelectList = (val = {data:{}, field:{}}) => {
console.log('data123::',val.data)
let data:ListProps[] = []
for(let key in val.data) {
if(key !== 'seriesId'&& val.data[key] != '') {
data.push({title:val.field[key], value:val.data[key]})
}
}
setSelectList([...data])
}
//页面下拉刷新
usePullDownRefresh(() => {
setSearchField({...searchField ,size : 10})
@@ -145,16 +164,9 @@ export default () => {
</View>
<View className={styles.filter_btn_con}>
<ScrollView scrollX className={styles.filter_scroll}>
<View className={styles.filter_btn}>
<View>系列</View>
<View>幅宽</View>
<View>克重</View>
<View>克重</View>
<View>克重</View>
<View className={styles.selected}>成分</View>
</View>
</ScrollView>
<View className={styles.filter_scroll}>
<SelectData list={selectList}/>
</View>
<View className={styles.filter_more} onClick={() => setShowFilter(true)}>
<Text>筛选</Text>
<Text className={classnames('iconfont icon-shaixuan', styles.miconfont)}></Text>
@@ -188,7 +200,7 @@ export default () => {
</InfiniteScroll>}
</View>
</View>
<Filter show={showFilter} onClose={() => setShowFilter(false)}/>
<Filter show={showFilter} onFiltr={(e) => getFiltr(e)} onClose={() => setShowFilter(false)}/>
</View>
)
}
src/pages/searchList/searchList.tsx
+25 -9
View File
@@ -4,7 +4,7 @@ import Search from '@/components/search'
import Filter from "@/components/filter";
import InfiniteScroll from '@/components/infiniteScroll'
import SortBtn from "@/components/sortBtn";
import SelectData from "./components/selectData";
import SelectData, {ListProps} from "./components/selectData";
import { goLink } from "@/common/common";
import styles from './searchList.module.scss'
import { useCallback, useEffect, useRef, useState } from "react";
@@ -24,7 +24,6 @@ export default () => {
const [showFilter, setShowFilter] = useState(false)
const router = useRouter()
const [selectList, setSelectList] = useState<any>([])
//搜索参数
const [searchField, setSearchField] = useState({
@@ -69,10 +68,10 @@ export default () => {
}, [materialList])
//输入了搜索关键字
const getSearchData = (e) => {
const getSearchData = useCallback((e) => {
setMaterialList(() => ({list:[], total:0}))
setSearchField({...searchField, code_or_name:e, size:10})
}
setSearchField((val) => ({...val, code_or_name:e, size:10}))
}, [])
const goLinkPage = (item) => {
goLink('/pages/details/index',{id:item.id})
@@ -95,19 +94,36 @@ export default () => {
//获取筛选条件
const getFiltr = (e) => {
const {data} = e
setSearchField({
...searchField,
width: e?.width,
weight_density: e?.weight,
width: data?.width,
weight_density: data?.weight,
size: 10,
component: e.element
component: data?.element,
product_kind_id: data?.seriesId
})
formatSelectList(e)
}
//筛选条件格式化
const [selectList , setSelectList] = useState<ListProps[]>()
const formatSelectList = (val = {data:{}, field:{}}) => {
console.log('data123::',val.data)
let data:ListProps[] = []
for(let key in val.data) {
if(key !== 'seriesId'&& val.data[key] != '') {
data.push({title:val.field[key], value:val.data[key]})
}
}
console.log('data::',data)
setSelectList([...data])
}
return (
<View className={styles.main}>
<View className={styles.search}>
<Search placeIcon="out" placeholder="请输入面料关键词" btnStyle={{color: '#007AFF'}} defaultValue={router.params.key} changeOnSearch={(e) => getSearchData(e)} debounceTime={300}/>
<Search placeIcon="out" placeholder="请输入面料关键词" defaultValue={router.params.key} changeOnSearch={getSearchData} debounceTime={300}/>
</View>
<View className={styles.filter}>
<View className={styles.filter_all}>