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

搜索列表

Browse Source
This commit is contained in:
czm 2022-04-15 19:31:16 +08:00 committed by li tong bao
parent df6052eca4
commit 861cf506f3
10 changed files with 644 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
src/components/filter/index.module.scss Normal file
View File

@ -0,0 +1,126 @@
.popup_main{
width: 608px;
height: 100vh;
padding: 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
.popup_title{
font-size: $font_size;
font-weight: 700;
text-align: center;
padding: 20px 0;
}
.scroll{
flex:1;
height: 0;
}
.popup_filter{
padding-bottom: 100px;
}
.popup_filter_item{
margin-bottom: 20px;
.title{
font-size: $font_size;
color: $color_font_one;
font-weight: 700;
padding: 20px 0;
}
.btn_list{
display: grid;
grid-template-columns: repeat(3, 165.75px);
justify-content: space-between;
.btn_item{
width: 165.75px;
height: 69.2px;
background: #f0f0f0;
border-radius: 34px;
text-align: center;
line-height: 69.2px;
font-size: $font_size_medium;
color: $color_font_one;
margin-bottom: 20px;
}
.select_btn_item{
color: $color_main;
background: #ecf5ff;
border: 2px solid #007aff;
width: 161.75px;
height: 65.2px;
}
}
.btn_list_input{
display: flex;
// justify-content: space-between;
align-items: center;
.btn_width {
width: 220px;
height: 70px;
background: #f0f0f0;
border-radius: 50px;
padding: 10px 20px;
box-sizing: border-box;
input{
width: 100%;
height: 100%;
font-size: $font_size_medium;
}
}
.unit{
color: $color_font_one;
font-size: $font_size;
margin-left: 20px;
}
text{
color: #ccc;
padding: 0 20px;
}
.width_main{
}
}
.btn_list_element{
background-color: #F0F0F0;
border-radius: 30px;
padding: 20px;
box-sizing: border-box;
textarea{
width: 100%;
height: 126px;
font-size: $font_size_medium;
}
}
}
.btns_con{
width: 100%;
position: fixed;
bottom:0;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.btns_two{
display: flex;
width: 552px;
height: 82px;
border: 2px solid #cde5ff;
font-size: $font_size_big;
border-radius: 40px;
margin-bottom: 20px;
.rest_btn{
flex:1;
border-radius: 0px 40px 40px 0px;
text-align: center;
line-height: 82px;
color: $color_main;
}
.verify_btn{
flex:1;
border-radius: 0px 40px 40px 0px;
background: #007aff;
text-align: center;
line-height: 82px;
color: #fff;
}
}
}
}

115
src/components/filter/index.tsx Normal file
View File

@ -0,0 +1,115 @@
import Popup, {Params as PopuParams} from "@/components/popup"
import { Input, ScrollView, Text, Textarea, View } from "@tarojs/components"
import classnames from "classnames";
import { useEffect, useState } from "react";
import styles from './index.module.scss'
type params = {
onFiltr?: (val:object) => void
} & PopuParams
export default ({onClose, onFiltr, show = false}:params) => {
const [filterObj, setFilterObj] = useState({
series: '',
minWidth: '',
maxWidth: '',
minWeight: '',
maxWeight: '',
element: ''
})
const onCloseEven = () => {
onClose?.()
}
const onRest = () => {
console.log('12123')
setFilterObj({
series: '',
minWidth: '',
maxWidth: '',
minWeight: '',
maxWeight: '',
element: ''
})
}
useEffect(() => {
console.log(filterObj)
}, [filterObj])
const onVerify = () => {
console.log(filterObj)
onFiltr?.(filterObj)
}
const setNumber = (e, field) => {
console.log(e)
let num = parseFloat(e.detail.value)
if(isNaN(num)) {
filterObj[field] = null
} else {
filterObj[field] = parseFloat(num.toFixed(2))
}
setFilterObj({...filterObj})
}
const setElement = (e) => {
let res = e.detail.value
setFilterObj({...filterObj, element:res})
}
return (
<Popup position="right" show={show} showTitle={false} onClose={() => onCloseEven()} showIconButton={true}>
<View className={styles.popup_main}>
<View className={styles.popup_title}>全部筛选</View>
<ScrollView scrollY className={styles.scroll}>
<View className={styles.popup_filter}>
<View className={styles.popup_filter_item}>
<View className={styles.title}>系列</View>
<View className={styles.btn_list}>
<View className={classnames(styles.btn_item, styles.select_btn_item)}>不限</View>
<View className={styles.btn_item}>不限</View>
<View className={styles.btn_item}>不限</View>
<View className={styles.btn_item}>不限</View>
<View className={styles.btn_item}>不限</View>
<View className={styles.btn_item}>不限</View>
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>幅宽</View>
<View className={styles.btn_list_input}>
<View className={styles.btn_width}><Input value={filterObj.minWidth} type="digit" onBlur={(e) => setNumber(e,'minWidth')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/></View>
<Text>—</Text>
<View className={styles.btn_width}><Input value={filterObj.maxWidth} type="digit" onBlur={(e) => setNumber(e,'maxWidth')} placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/></View>
<View className={styles.unit}>cm</View>
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>克重</View>
<View className={styles.btn_list_input}>
<View className={styles.btn_width}><Input type="digit" value={filterObj.minWeight} onBlur={(e) => setNumber(e,'minWeight')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/></View>
<Text>—</Text>
<View className={styles.btn_width}><Input type="digit" value={filterObj.maxWeight} onBlur={(e) => setNumber(e,'maxWeight')} placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/></View>
<View className={styles.unit}>g</View>
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>成分</View>
<View className={styles.btn_list_element}>
<Textarea placeholder="请输入" cursorSpacing={60} value={filterObj.element} onInput={(e) => setElement(e)}/>
</View>
</View>
<View className="common_safe_area_y"></View>
</View>
</ScrollView>
<View className={styles.btns_con}>
<View className={styles.btns_two}>
<View className={styles.rest_btn} onClick={() => onRest()}>重置</View>
<View className={styles.verify_btn } onClick={() => onVerify()}>确认</View>
</View>
</View>
</View>
</Popup>
)
}

36
src/components/sortBtn/index.module.scss Normal file
View File

@ -0,0 +1,36 @@
.click {
height: 40px;
display: flex;
justify-content: center;
flex-direction: column;
position: relative;
}
.bottom {
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px;
border-color: transparent transparent #999999;
transform: rotate(180deg);
}
.top:hover {
cursor: pointer;
border-color: transparent transparent #333333;
}
.top {
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px;
border-color: transparent transparent #999999;
margin-bottom: 5px;
}
.bottom:hover {
cursor: pointer;
border-color: transparent transparent #333333;
}
.selected{
border-color: transparent transparent $color_main;
}

17
src/components/sortBtn/index.tsx Normal file
View File

@ -0,0 +1,17 @@
import { View } from "@tarojs/components"
import classnames from "classnames";
import styles from './index.module.scss'
type params = {
status?: 'top'|'bottom'|'none'
}
export default ({status = 'none'}: params) => {
return (
<>
<View className={styles.click}>
<View className={classnames(styles.top, status == 'top'&&styles.selected)} ></View>
<View className={classnames(styles.bottom, status == 'bottom'&&styles.selected)}></View>
</View>
</>
)
}

41
src/components/tabs/index.module.scss Normal file
View File

@ -0,0 +1,41 @@
.tabs_main{
display: flex;
.tabs_scroll{
width: 100%;
display: flex;
white-space: nowrap;
border-bottom: 1px solid $color_font_two;
border-top: 1px solid $color_font_two;
height: 102px;
.tabs_item{
flex:1;
display: inline-block;
padding: 10px 20px;
height: 100%;
box-sizing: border-box;
position: relative;
.tabs_item_con{
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: $font_size_medium;
}
.tabs_index{
height: 5px;
width: 100%;
background-color:$color_main;
position:absolute;
bottom: 0;
left:0;
border-radius: 50px;
}
.tabs_item_select{
color: $color_main;
}
}
}
}

60
src/components/tabs/index.tsx Normal file
View File

@ -0,0 +1,60 @@
import { ScrollView, View } from "@tarojs/components";
import { memo, useState, ReactNode, useEffect } from "react";
import classnames from "classnames";
import styles from './index.module.scss'
type ListProps = {
title: string,
value: number
}
type Params = {
list?: ListProps[],
defaultValue?: number|string,
children?: ReactNode,
tabsOnClick?: (ListProps) => void
}
export default memo(({list = [], defaultValue = 0, tabsOnClick}: Params) => {
const [selected, setSelected] = useState(defaultValue)
const [tabId, setTabId] = useState('')
useEffect(() => {
const index = list?.findIndex(item => {
return item.value == defaultValue
})
if(index !== -1) {
const num = index > 0?( index - 1) : 0
setTabId(list[num].value.toString())
}
}, [])
const clickEvent = ({item, index}: {item:ListProps, index:number}) => {
setSelected(item.value)
tabsOnClick?.(item)
const num = index > 0?( index - 1) : 0
setTabId(list[num].value.toString())
}
return (
<>
<View className={styles.tabs_main} id="tabs_main_ref">
<ScrollView className={styles.tabs_scroll} scrollX scrollWithAnimation={true} scrollIntoView={`tabs_${tabId}`}>
<View className={styles.tabs_scroll}>
{
list.map((item, index) => {
return (
<View key={item.value} id={`tabs_${item.value}`} className={styles.tabs_item} onClick={() => clickEvent({item,index})}>
<View className={classnames(styles.tabs_item_con, {[styles.tabs_item_select]:selected == item.value})}>{item.title}</View>
{(selected == item.value) && <View className={styles.tabs_index}></View>}
</View>
)
})
}
</View>
</ScrollView>
</View>
</>
)
})

157
src/pages/searchList/index.module.scss
View File

@ -6,8 +6,163 @@
.search{
padding: 20px;
}
.filter{
.filter_all {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 50px;
font-size: $font_size_medium;
color: $color_font_three;
.text_zh, .text_sc{
color: $color_main;
display: flex;
align-items: center;
.sortIcon{
display: flex;
flex-direction: column;
position: relative;
.icon_one{
font-size: $font_size_medium;
position: absolute;
margin:auto;
top:0;
}
}
}
.text_ss{
position: relative;
.miconfont{
font-size: 20px;
margin-left: 5px;
}
&::before{
content: '';
width: 2px;
height: 32px;
background-color: #C2C2C2;
position: absolute;
top: 0;
left: -30px;
}
}
}
.filter_btn_con{
display: flex;
justify-content: space-between;
align-items: center;
height: 86px;
}
.filter_scroll{
flex:1;
width: 0;
}
.filter_btn{
display: flex;
justify-content: space-between;
padding: 20px;
flex:1;
view{
font-size: $font_size_medium;
background-color: #F0F0F0;
border-radius: 24px;
min-width: 126px;
height: 46.93px;
text-align: center;
line-height: 46.93px;
color: $color_font_three;
&:nth-last-child(n+2) {
margin-right: 10px;
}
}
.selected{
background-color: #ecf5ff;
border: 2px solid #cde5ff;
color: $color_main;
width: 122px;
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: 60px;
height: 100%;
position: absolute;
left: -15px;
background-color: red;
background: linear-gradient(270deg, #fff 30%, rgba(255,255,255, 0.3) );
// z-index: 99;
}
.miconfont{
font-size: 27px;
}
}
}
.list{
flex:1;
height: 0;
display: flex;
flex-direction: column;
.list_num {
font-size: $font_size_min;
color:$color_font_two;
padding: 10px 38px;
}
.scroll{
flex:1;
height:0;
}
.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;
.product_img{
width: 100%;
height: 224px;
background: #e5ad3a;
border-radius: 20px 20px 0px 0px;
}
}
.product_info{
padding: 20px;
.title{
font-size: $font_size;
color: $color_font_three;
}
.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;
}
}
}
}
}

78
src/pages/searchList/index.tsx
View File

@ -1,21 +1,87 @@
import { View } from "@tarojs/components"
import { ScrollView, Text, View } from "@tarojs/components"
import classnames from "classnames";
import Search from '@/components/search'
import Product from '@/components/product'
import Filter from "@/components/filter";
import InfiniteScroll from '@/components/infiniteScroll'
import SortBtn from "@/components/sortBtn";
import Tabs from "@/components/tabs";
import styles from './index.module.scss'
import { 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:5},
{title: '系列', value:5},
{title: '系列', value:5},
{title: '系列', value:5},
{title: '系列', value:5},
])
return (
<View className={styles.main}>
<View className={styles.search}>
<Search placeIcon="out" showBtn={true} btnStyle={{color: '#007AFF'}}/>
<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} >
<Text>高级搜索</Text>
<Text className={classnames('iconfont icon-sousuo', styles.miconfont)}></Text>
</View>
</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_more} onClick={() => setShowFilter(true)}>
<Text>筛选</Text>
<Text className={classnames('iconfont icon-shaixuan', styles.miconfont)}></Text>
</View>
</View>
</View>
<View className={styles.list}>
<InfiniteScroll selfonScrollToLower={() => console.log('123123')}>
<Product desStatus={false}/>
</InfiniteScroll>
<View className={styles.list_num}>搜索结果 (2条记录)</View>
<View className={styles.scroll}>
<InfiniteScroll selfonScrollToLower={() => console.log('123123')}>
<View className={styles.product_list}>
{new Array(9).fill(' ').map(item => {
return <View className={styles.product_item}>
<View className={styles.product_img}></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>
)
}

22
src/styles/iconfont.scss
View File

@ -1,7 +1,7 @@
@font-face {
font-family: "iconfont"; /* Project id 2987621 */
src:
url('iconfont.ttf?t=1649906813989') format('truetype');
url('iconfont.ttf?t=1650013104232') format('truetype');
}
.iconfont {
@ -12,6 +12,18 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-shaixuan:before {
content: "\e689";
}
.icon-sort-up-full:before {
content: "\ea4c";
}
.icon-sort-down-full:before {
content: "\ea4d";
}
.icon-shoucang:before {
content: "\e63e";
}
@ -44,6 +56,14 @@
content: "\e633";
}
.icon-wode-copy:before {
content: "\e6cb";
}
.icon-fenlei-copy:before {
content: "\e6ca";
}
.icon-tick_gou:before {
content: "\e62e";
}

BIN
src/styles/iconfont.ttf
View File

Binary file not shown.