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

1

Browse Source
This commit is contained in:
czm 2022-04-18 13:41:17 +08:00
parent 9653ad4990
commit 36fe6f0c1d
9 changed files with 481 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/searchInput/index.module.scss Normal file
View File

@ -0,0 +1,33 @@
.searchInput_main{
display: flex;
align-items: center;
min-height: 62px;
padding: 10px 0;
border-bottom: 1px solid #f3f3f3;
.searchInput_title {
width: 150px;
font-size: 28px;
border-right: 1px solid #f3f3f3;
color: $color_font_on;
margin-right: 20px;
padding-left: 20px;
&::before{
content: "";
height: 50px;
width: 1px;
background-color: #f3f3f3;
}
}
.searchInput_con{
flex:1;
width: 100%;
input{
font-size: 26px;
}
}
.icon_more_self{
font-size: 28px;
color: $color_font_two;
}
}

45
src/components/searchInput/index.tsx Normal file
View File

@ -0,0 +1,45 @@
import { Input, View } from "@tarojs/components";
import { memo, useDebugValue, useMemo } from "react";
import styles from './index.module.scss';
type Params = {
showIcon?: false|true,
disabled?: false|true,
placeholder?: string,
title?: string,
showTitle?: false|true,
showBorder?: false|true,
changeOnInput?: (string) => void,
clickOnInput?: () => void
}
export default memo((props: Params) => {
let {
showTitle = true,
title = '标题',
showIcon = false,
disabled = false,
placeholder = '请输入',
showBorder = true,
changeOnInput,
clickOnInput
} = props
let stylen = useMemo(() => {
if(!showBorder) {
return { borderBottom: 0 }
}
return {}
}, [showBorder])
console.log('searchInput::')
return (
<View className={styles.searchInput_main} style={stylen}>
{showTitle&&<View className={styles.searchInput_title}>{title}</View>}
<View className={styles.searchInput_con}>
<Input disabled={disabled} placeholder={placeholder} onClick={() => clickOnInput?.()} onInput={(e) => changeOnInput?.(e.detail.value)}/>
</View>
{showIcon&&<View className={`iconfont icon-more ${styles.icon_more_self}`}></View>}
</View>
)
})

3
src/pages/searchList/hightSearchList.config.ts Normal file
View File

@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '搜索'
}

182
src/pages/searchList/hightSearchList.module.scss Normal file
View File

@ -0,0 +1,182 @@
.main{
display: flex;
flex-direction: column;
height: 100vh;
background-color: $color_bg_one;
.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;
::-webkit-scrollbar {
display:none;
width:0;
height:0;
color:transparent;
}
}
.filter_btn{
display: flex;
justify-content: space-between;
padding: 20px;
margin-right: 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;
}
&:nth-last-child(1) {
margin-right: 30px;
}
}
.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: 30px;
height: 100%;
position: absolute;
left: -15px;
background-image: linear-gradient(to right, rgba(248, 248, 248, 0.3), rgba(248, 248, 248, 1) 60% );
// z-index: 99;
}
.miconfont{
font-size: 27px;
}
}
}
.list{
flex:1;
display: flex;
flex-direction: column;
.list_num {
font-size: $font_size_min;
color:$color_font_two;
padding: 10px 38px;
}
.list_num_shadow {
box-shadow: 0px 5px 5px #ccc;
}
.scroll{
flex:1;
height:0;
padding-top: 3px;
}
.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;
}
}
}
}
}

98
src/pages/searchList/hightSearchList.tsx Normal file
View File

@ -0,0 +1,98 @@
import { 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 Tabs from "@/components/tabs";
import styles from './index.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:5},
{title: '系列', value:5},
{title: '系列', value:5},
{title: '系列', value:5},
{title: '系列', value:5},
])
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} >
<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}>
<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}></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>
)
}

2
src/pages/searchList/index.config.ts
View File

@ -1,3 +1,3 @@
export default {
navigationBarTitleText: '搜索'
navigationBarTitleText: '高级搜索'
}

3
src/pages/searchList/search.config.ts Normal file
View File

@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '搜索'
}

72
src/pages/searchList/search.module.scss Normal file
View File

@ -0,0 +1,72 @@
.main{
.search{
display: flex;
justify-content: space-between;
padding: 20px;
padding-bottom: 50px;
}
.hot {
padding: 0 20px;
.hot_header {
width:100%;
display: flex;
justify-content: space-between;
font-size: $font_size_medium;
.hot_header_title {
font-size: $font_size;
color: $color_font_one;
font-weight: 700;
}
.hot_header_up{
color: $color_main;
}
}
.list{
display: flex;
font-size: $font_size_medium;
flex-wrap: wrap;
padding: 20px 0;
.item{
margin-right: 20px;
margin-bottom: 20px;
padding: 10px 20px;
background-color: #F0F0F0;
color: $color_font_three;
border-radius: 50px;
}
}
}
.history {
padding: 0 20px;
.history_header {
width:100%;
display: flex;
justify-content: space-between;
font-size: $font_size_medium;
.history_header_title {
font-size: $font_size;
color: $color_font_one;
font-weight: 700;
}
.miconfont{
font-size: 30px;
color: $color_font_three;
}
}
.list{
display: flex;
font-size: $font_size_medium;
flex-wrap: wrap;
padding: 20px 0;
.item{
margin-right: 20px;
margin-bottom: 20px;
padding: 10px 20px;
background-color: #F0F0F0;
color: $color_font_three;
border-radius: 50px;
}
}
}
}

44
src/pages/searchList/search.tsx Normal file
View File

@ -0,0 +1,44 @@
import { View } from '@tarojs/components'
import Search from '@/components/search'
import { goLink } from '@/common/common';
import classnames from "classnames";
import styles from './index.module.scss'
export default () => {
return (
<View className={styles.main}>
<View className={styles.search}>
<Search style={{width: '100%'}} placeholder="请输入面料关键词" placeIcon="out" showBtn={true} clickOnSearch={() => goLink('/pages/searchList/index')}/>
</View>
<View className={styles.hot}>
<View className={styles.hot_header}>
<View className={styles.hot_header_title}>热门面料</View>
<View className={styles.hot_header_up}>高级搜索</View>
</View>
<View className={styles.list}>
<View className={styles.item}>9265</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>26s</View>
</View>
</View>
<View className={styles.history}>
<View className={styles.history_header}>
<View className={styles.history_header_title}>历史搜索</View>
<View className={classnames('iconfont icon-lajixiang', styles.miconfont)}></View>
</View>
<View className={styles.list}>
<View className={styles.item}>9265</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>26s</View>
</View>
</View>
</View>
)
}