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

高级搜索

Browse Source
This commit is contained in:
cheng
2022-04-18 18:47:22 +08:00
parent 7c299748c3
commit 4a7f7b316f
26 changed files with 1584 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/classList/index.module.scss
+4 -11
View File
@@ -15,6 +15,8 @@
color: $color_font_three;
.text_one{
color: $color_main;
display: flex;
align-items: center;
}
.text_two{
position: relative;
@@ -33,20 +35,11 @@
}
}
}
.filter_btn{
.filter_btns{
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;
src/pages/classList/index.tsx
+19 -6
View File
@@ -7,9 +7,22 @@ import Popup from "@/components/popup";
import styles from './index.module.scss'
import { useState } from "react";
import Filter from "./components/filter";
import Tabs from "@/components/tabs";
import SortBtn from "@/components/sortBtn";
export default () => {
const [showPopup, setShowPopup] = useState(false)
const [selectList, setSelectList] = useState([
{title: '系列', value:1},
{title: '系列', value:2},
{title: '系列', value:3},
{title: '系列', value:4},
{title: '系列', value:6},
{title: '系列', value:7},
{title: '系列', value:8},
{title: '系列', value:9},
{title: '系列', value:10},
])
return (
<View className={styles.main}>
<View className={styles.search}>
@@ -17,17 +30,17 @@ export default () => {
</View>
<View className={styles.filter}>
<View className={styles.filter_all}>
<View className={styles.text_one}>综合</View>
<View className={styles.text_one}>
<Text>综合</Text>
<SortBtn status="top"/>
</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 className={styles.filter_btns}>
<Tabs list={selectList} style={{}}/>
</View>
</View>
<View className={styles.list}>
src/pages/searchList/components/selectData/index.module.scss
+49
View File
@@ -0,0 +1,49 @@
.tabs_main{
display: flex;
width: 100%;
.tabs_scroll{
width: 100%;
display: flex;
white-space: nowrap;
::-webkit-scrollbar {
display:none;
width:0;
height:0;
color:transparent;
}
.tabs_item{
flex:1;
display: inline-block;
font-size: 24rpx;
background-color: #F0F0F0;
border-radius: 24rpx;
min-width: 126rpx;
height: 46.93rpx;
text-align: center;
line-height: 46.93rpx;
color: #707070;
margin-right: 20px;
.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;
}
}
}
}
src/pages/searchList/components/selectData/index.tsx
+57
View File
@@ -0,0 +1,57 @@
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 [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}) => {
tabsOnClick?.(item)
setTabId(index.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={index} id={`tabs_${index}`} className={styles.tabs_item} onClick={() => clickEvent({item,index})}>
<View className={classnames(styles.tabs_item_con)}>{item.title}</View>
</View>
)
})
}
</View>
</ScrollView>
</View>
</>
)
})
src/pages/searchList/hightSearchList.module.scss
+35 -1
View File
@@ -5,13 +5,30 @@
background-color: $color_bg_one;
.search{
padding: 20px;
.SearchInput{
background-color: #fff;
padding: 10px 20px;
box-sizing: border-box;
border-radius: 10px;
}
.bluetooth_color{
.color_bock{
width: 100px;
height: 46px;
}
.color_bock_no{
font-size: $font_size_medium;
color: $color_font_three;
}
}
}
.filter{
.filter_all {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 50px;
padding: 20px 130px;
font-size: $font_size_medium;
color: $color_font_three;
.text_zh, .text_sc{
@@ -149,6 +166,23 @@
height: 224px;
background: #e5ad3a;
border-radius: 20px 20px 0px 0px;
position: relative;
image{
width: 100%;
height: 100%;
border-radius: 20px 20px 0px 0px;
}
.color_num {
background: rgba(0,0,0, 0.5);
border-radius: 0px 50px 0px 0px;
font-size: $font_size_min;
color: #fff;
position: absolute;
left:0;
bottom:0;
padding: 5px 20px;
box-sizing: border-box;
}
}
}
.product_info{
src/pages/searchList/hightSearchList.tsx
+44 -13
View File
@@ -1,12 +1,17 @@
import { ScrollView, Text, View } from "@tarojs/components"
import { Image, 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 SearchInput from "@/components/searchInput";
import LinkBlueTooth from "@/components/bluetooth/LinkBlueTooth";
import {useBluetooth} from "@/use/contextBlueTooth"
import {toRgb} from '@/common/bluetooth/color/colorSpace'
import Tabs from "@/components/tabs";
import styles from './hightSearchList.module.scss'
import { useCallback, useState } from "react";
import { useCallback, useEffect, useState } from "react";
import Taro, { useReady } from "@tarojs/taro";
export default () => {
const [showFilter, setShowFilter] = useState(false)
@@ -29,10 +34,40 @@ export default () => {
setScrollStatus(false)
}
},[])
const {state, measureAndGetLab} = useBluetooth()
const getLab = () => {
if(state.connected) {
measureAndGetLab()
} else {
Taro.showToast({
title: '请链接设备',
icon: 'none'
})
}
}
const [blueToothColor, setBlueToothColor] = useState('')
useEffect(() => {
if(state.deviceLab) {
console.log('颜色：',state.deviceLab)
const rgb = toRgb([state.deviceLab.L, state.deviceLab.a, state.deviceLab.b])
setBlueToothColor(`rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`)
}
}, [state.deviceLab])
return (
<View className={styles.main}>
<View className={styles.search}>
<Search placeIcon="out" btnStyle={{color: '#007AFF'}}/>
<View className={styles.SearchInput}>
<LinkBlueTooth/>
<SearchInput title="提取颜色" showBorder={false}>
<View className={styles.bluetooth_color} onClick={() => getLab()}>
{blueToothColor&&<View className={classnames(styles.color_bock)} style={{background:blueToothColor}}></View>||
<View className={classnames(styles.color_bock_no)} >请取色</View>
}
</View>
</SearchInput>
</View>
</View>
<View className={styles.filter}>
<View className={styles.filter_all}>
@@ -44,10 +79,7 @@ export default () => {
<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}>
@@ -76,14 +108,13 @@ export default () => {
<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_img}>
<Image mode="aspectFill" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d"></Image>
<View className={styles.color_num}>25色</View>
</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 className={styles.introduce}>平纹系列</View>
</View>
</View>
})}
src/pages/searchList/searchList.module.scss
+18
View File
@@ -57,6 +57,7 @@
.filter_scroll{
flex:1;
width: 0;
padding-left: 20px;
::-webkit-scrollbar {
display:none;
width:0;
@@ -149,6 +150,23 @@
height: 224px;
background: #e5ad3a;
border-radius: 20px 20px 0px 0px;
position: relative;
image{
width: 100%;
height: 100%;
border-radius: 20px 20px 0px 0px;
}
.color_num {
background: rgba(0,0,0, 0.5);
border-radius: 50px 0px 0px 0px;
font-size: $font_size_min;
color: #fff;
position: absolute;
right:0;
bottom:0;
padding: 5px 20px;
box-sizing: border-box;
}
}
}
.product_info{
src/pages/searchList/searchList.tsx
+17 -18
View File
@@ -1,10 +1,12 @@
import { ScrollView, Text, View } from "@tarojs/components"
import { Image, 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 SelectData from "./components/selectData";
import Tabs from "@/components/tabs";
import { goLink } from "@/common/common";
import styles from './searchList.module.scss'
import { useCallback, useState } from "react";
@@ -15,11 +17,11 @@ export default () => {
{title: '系列', value:2},
{title: '系列', value:3},
{title: '系列', value:4},
{title: '系列', value:5},
{title: '系列', value:5},
{title: '系列', value:5},
{title: '系列', value:5},
{title: '系列', value:5},
{title: '系列', value:6},
{title: '系列', value:7},
{title: '系列', value:8},
{title: '系列', value:9},
{title: '系列', value:10},
])
const [scrollStatus, setScrollStatus] = useState(false)
const onscroll = useCallback((e) => {
@@ -44,22 +46,16 @@ export default () => {
<Text>收藏</Text>
<SortBtn status="top"/>
</View>
<View className={styles.text_ss} >
<View className={styles.text_ss} onClick={() => goLink('/pages/searchList/hightSearchList')}>
<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_scroll}>
<SelectData list={selectList}/>
</View>
<View className={styles.filter_more} onClick={() => setShowFilter(true)}>
<Text>筛选</Text>
<Text className={classnames('iconfont icon-shaixuan', styles.miconfont)}></Text>
@@ -76,7 +72,10 @@ export default () => {
<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_img}>
<Image mode="aspectFill" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d"></Image>
<View className={styles.color_num}>25色</View>
</View>
<View className={styles.product_info}>
<View className={styles.title}>0770#21S精棉平纹</View>
<View className={styles.tag_list}>