分类筛选完成

src/app.config.ts

@@ -4,6 +4,7 @@ export default {
     'pages/search/index',
     'pages/user/index',
     'pages/searchList/index',
+    'pages/classList/index',
     'pages/details/index',
   ],
   window: {

src/components/popup/index.module.scss

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

src/components/popup/index.tsx

@@ -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}> 

src/components/swiper/index.tsx

@@ -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>

src/pages/classList/components/filter/index.module.scss

@@ -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;
+            }
+        }
+    }
+}

src/pages/classList/components/filter/index.tsx

@@ -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>
+
+    )
+}

src/pages/classList/index.config.ts

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

src/pages/classList/index.module.scss

@@ -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;
+                }
+            }
+        }
+    }
+}

src/pages/classList/index.tsx

@@ -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>
+    )
+}

src/pages/details/index.tsx

@@ -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'

src/styles/common.scss

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