96 lines
4.8 KiB
TypeScript
96 lines
4.8 KiB
TypeScript
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";
|
|
import SelectData from "./components/selectData";
|
|
import Tabs from "@/components/tabs";
|
|
import { goLink } from "@/common/common";
|
|
import styles from './searchList.module.scss'
|
|
import { useCallback, useState } from "react";
|
|
|
|
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:6},
|
|
{title: '系列', value:7},
|
|
{title: '系列', value:8},
|
|
{title: '系列', value:9},
|
|
{title: '系列', value:10},
|
|
])
|
|
const [scrollStatus, setScrollStatus] = useState(false)
|
|
const onscroll = useCallback((e) => {
|
|
if(e.detail.scrollTop > 20) {
|
|
setScrollStatus(true)
|
|
} else {
|
|
setScrollStatus(false)
|
|
}
|
|
},[])
|
|
return (
|
|
<View className={styles.main}>
|
|
<View className={styles.search}>
|
|
<Search placeIcon="out" btnStyle={{color: '#007AFF'}}/>
|
|
</View>
|
|
<View className={styles.filter}>
|
|
<View className={styles.filter_all}>
|
|
<View className={styles.text_zh}>
|
|
<Text>综合</Text>
|
|
<SortBtn status="top"/>
|
|
</View>
|
|
<View className={styles.text_sc} >
|
|
<Text>收藏</Text>
|
|
<SortBtn status="top"/>
|
|
</View>
|
|
<View className={styles.text_ss} onClick={() => goLink('/pages/searchList/hightSearchList')}>
|
|
<Text>高级搜索</Text>
|
|
<Text className={classnames('iconfont icon-sousuo', styles.miconfont)}></Text>
|
|
</View>
|
|
</View>
|
|
|
|
<View className={styles.filter_btn_con}>
|
|
<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>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View className={styles.list}>
|
|
<View className={classnames(styles.list_num, scrollStatus&&styles.list_num_shadow)}>搜索结果 (2条记录)</View>
|
|
<View className={styles.scroll}>
|
|
<InfiniteScroll
|
|
selfonScrollToLower={() => console.log('123123')}
|
|
selfOnScroll={(e) => onscroll(e)}
|
|
>
|
|
<View className={styles.product_list}>
|
|
{new Array(9).fill(' ').map(item => {
|
|
return <View className={styles.product_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>
|
|
<View className={styles.color_num}>25色</View>
|
|
</View>
|
|
<View className={styles.product_info}>
|
|
<View className={styles.title}>0770#21S精棉平纹</View>
|
|
<View className={styles.tag_list}>
|
|
<View className={styles.tag}>160cm</View>
|
|
<View className={styles.tag}>110g</View>
|
|
</View>
|
|
<View className={styles.introduce}>67.6%棉24%涤纶6.4%氨纶</View>
|
|
</View>
|
|
</View>
|
|
})}
|
|
</View>
|
|
</InfiniteScroll>
|
|
</View>
|
|
</View>
|
|
<Filter show={showFilter} onClose={() => setShowFilter(false)}/>
|
|
</View>
|
|
)
|
|
} |