From 861cf506f3b660c8e98186836917683410829131 Mon Sep 17 00:00:00 2001 From: czm <2192718639@qq.com> Date: Fri, 15 Apr 2022 19:31:16 +0800 Subject: [PATCH] =?UTF-8?q?=E6=90=9C=E7=B4=A2=E5=88=97=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/filter/index.module.scss | 126 ++++++++++++++++++ src/components/filter/index.tsx | 115 +++++++++++++++++ src/components/sortBtn/index.module.scss | 36 ++++++ src/components/sortBtn/index.tsx | 17 +++ src/components/tabs/index.module.scss | 41 ++++++ src/components/tabs/index.tsx | 60 +++++++++ src/pages/searchList/index.module.scss | 157 ++++++++++++++++++++++- src/pages/searchList/index.tsx | 78 ++++++++++- src/styles/iconfont.scss | 22 +++- src/styles/iconfont.ttf | Bin 4988 -> 5764 bytes 10 files changed, 644 insertions(+), 8 deletions(-) create mode 100644 src/components/filter/index.module.scss create mode 100644 src/components/filter/index.tsx create mode 100644 src/components/sortBtn/index.module.scss create mode 100644 src/components/sortBtn/index.tsx create mode 100644 src/components/tabs/index.module.scss create mode 100644 src/components/tabs/index.tsx diff --git a/src/components/filter/index.module.scss b/src/components/filter/index.module.scss new file mode 100644 index 0000000..599cdd0 --- /dev/null +++ b/src/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; + } + } + } +} \ No newline at end of file diff --git a/src/components/filter/index.tsx b/src/components/filter/index.tsx new file mode 100644 index 0000000..d64ab87 --- /dev/null +++ b/src/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 ( + + onCloseEven()} showIconButton={true}> + + 全部筛选 + + + + + 系列 + + 不限 + 不限 + 不限 + 不限 + 不限 + 不限 + + + + 幅宽 + + setNumber(e,'minWidth')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/> + + setNumber(e,'maxWidth')} placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/> + cm + + + + 克重 + + setNumber(e,'minWeight')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/> + + setNumber(e,'maxWeight')} placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/> + g + + + + 成分 + +