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-14 18:33:20 +08:00 committed by li tong bao
parent 5acf8dbd21
commit fee827447a
11 changed files with 461 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app.config.ts
View File

@ -36,6 +36,12 @@ export default {
"index"
]
},
{
root: "pages/classList",
pages: [
"index"
]
},
{
root: "pages/details",
pages: [

2
src/components/popup/index.module.scss
View File

@ -44,7 +44,7 @@ $am-ms: 200ms;
.common_close_btn_icon{
position: absolute;
top: 10px;
right: 10px;
left: 10px;
}
}
.drawer_container_active{

8
src/components/popup/index.tsx
View File

@ -4,11 +4,11 @@ import classnames from "classnames";
import { memo, ReactNode, useMemo } from "react";
import CloseBtnIcon from "@/components/closeBtn"
interface Params {
export interface Params {
title?: string,
show?: false|true,
showTitle?: false|true,
onClose?:(boolean) => void,
onClose?:() => void,
children?: ReactNode,
IconButton?: ReactNode,
showIconButton?: false|true,
@ -32,7 +32,7 @@ export default memo((
<View catchMove={true} className={`${style.drawer} ${show?style.drawer_active:''}` }>
<View
className={classnames(style.drawer_mask, {[style.drawer_mask_active]: show})}
onClick={() => onClose?.(false)}
onClick={() => onClose?.()}
>
<View
className={classnames(style.drawer_container, style['drawer_container_'+position], {[style.drawer_container_active]: show})}
@ -40,7 +40,7 @@ export default memo((
>
{showTitle&&<View className={style.drawer_container_title}>{title}</View>}
{showIconButton&&<View className={style.common_close_btn_icon}>
<CloseBtnIcon onClose={() => onClose?.(false)}/>
<CloseBtnIcon onClose={() => onClose?.()}/>
</View>}
<View className={style.drawer_container_context}>

10
src/components/swiper/index.tsx
View File

@ -1,4 +1,5 @@
import { Image, Swiper, SwiperItem, View } from "@tarojs/components"
import { goLink } from "@/common/common"
import Taro from "@tarojs/taro"
import styles from './index.module.scss'
@ -19,12 +20,7 @@ export default (props:params) => {
id:1
}
]
const goLink = (item) => {
swiperOnClick?.(item)
Taro.navigateTo({
url:'/pages/search/index'
})
}
return (
<View className={styles.swiper_con} style={style}>
<Swiper
@ -37,7 +33,7 @@ export default (props:params) => {
{
list.map(item => {
return <SwiperItem key={item.id}>
<View className={styles.image_item} onClick={() => goLink(item)}>
<View className={styles.image_item} onClick={() => goLink(`/pages/classList/index?id=${item.id}`)}>
<Image mode="aspectFill" src={item.img}></Image>
</View>
</SwiperItem>

126
src/pages/classList/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/pages/classList/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>
)
}

3
src/pages/classList/index.config.ts Normal file
View File

@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '分类标题'
}

157
src/pages/classList/index.module.scss Normal file
View File

@ -0,0 +1,157 @@
.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;
padding: 20px 50px;
font-size: $font_size_medium;
color: $color_font_three;
.text_one{
color: $color_main;
}
.text_two{
position: relative;
.miconfont{
font-size: 20px;
margin-left: 10px;
}
&::before{
content: '';
width: 2px;
height: 32px;
background-color: #C2C2C2;
position: absolute;
top: 0;
left: -50px;
}
}
}
.filter_btn{
display: flex;
justify-content: space-between;
padding: 20px;
view{
font-size: $font_size_medium;
background-color: #F0F0F0;
border-radius: 24px;
width: 126px;
height: 46.93px;
text-align: center;
line-height: 46.93px;
color: $color_font_three;
}
.selected{
background-color: #ecf5ff;
border: 2px solid #cde5ff;
color: $color_main;
width: 122px;
height: 42.93px;
}
}
}
.list{
flex:1;
height: 0;
}
.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{
}
.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;
}
}
}
}
}

41
src/pages/classList/index.tsx Normal file
View File

@ -0,0 +1,41 @@
import { Input, ScrollView, Text, Textarea, View } from "@tarojs/components"
import classnames from "classnames";
import Search from '@/components/search'
import Product from '@/components/product'
import InfiniteScroll from '@/components/infiniteScroll'
import Popup from "@/components/popup";
import styles from './index.module.scss'
import { useState } from "react";
import Filter from "./components/filter";
export default () => {
const [showPopup, setShowPopup] = useState(false)
return (
<View className={styles.main}>
<View className={styles.search}>
<Search placeIcon="out" showBtn={true} btnStyle={{color: '#007AFF'}}/>
</View>
<View className={styles.filter}>
<View className={styles.filter_all}>
<View className={styles.text_one}>综合</View>
<View className={styles.text_two} onClick={() => setShowPopup(true)}>
<Text>筛选</Text>
<Text className={classnames('iconfont icon-bianji_bianji', styles.miconfont)}></Text>
</View>
</View>
<View className={styles.filter_btn}>
<View>系列</View>
<View>幅宽</View>
<View>克重</View>
<View className={styles.selected}>成分</View>
</View>
</View>
<View className={styles.list}>
<InfiniteScroll selfonScrollToLower={() => console.log('123123')}>
<Product desStatus={false}/>
</InfiniteScroll>
</View>
<Filter show={showPopup} onClose={() => setShowPopup(false)} onFiltr={(e) => console.log('e:::',e)}/>
</View>
)
}

2
src/pages/details/index.tsx
View File

@ -3,7 +3,7 @@ import { Image, RichText, Swiper, SwiperItem, View } from '@tarojs/components'
import Taro from '@tarojs/taro';
import classnames from "classnames";
import DesSwiper from './components/swiper';
import OrderCount from './components/shopCart';
import OrderCount from './components/orderCount';
import ShopCart from '@/components/shopCart';
import Preview,{colorItem} from './components/preview';
import styles from './index.module.scss'

5
src/styles/common.scss
View File

@ -27,4 +27,7 @@ $font_size_min: 22px;
-webkit-line-clamp: $params;
text-overflow:ellipsis;
}
}
//按钮样式，未选择