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

✨ feat(ID1000775):搜索功能优化

Browse Source
This commit is contained in:
Haiyi 2022-12-09 16:25:27 +08:00
parent f11336f6c7
commit 8b7e0c45d7
14 changed files with 1240 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -73,7 +73,7 @@
"babel-preset-taro": "3.5.8",
"classnames": "^2.3.2",
"cross-env": "^7.0.3",
"eslint": "^8.28.0",
"eslint": "^8.29.0",
"eslint-config-taro": "3.5.8",
"prettier": "^2.8.0",
"react-refresh": "0.14.0",

7
project.private.config.json
View File

@ -22,6 +22,13 @@
"query": "",
"launchMode": "default",
"scene": null
},
{
"name": "",
"pathName": "pages/searchList/hightSearchList",
"query": "",
"launchMode": "default",
"scene": null
}
]
}

8
src/api/material.ts
View File

@ -75,3 +75,11 @@ export const GetLabProductApi = () => {
// method: "get",
// })
// }
// 删除历史搜索
export const mallsearchHistorydelete = () => {
return useRequest({
url: '/v2/mall/searchHistory/delete',
method: 'delete',
})
}

14
src/components/bluetooth/LinkBlueTooth.tsx
View File

@ -47,12 +47,24 @@ const LinkBlueTooth = () => {
const onFindDevice = () => {
check().then((res) => {
if (linkStatus == 1) {
// 暂时不开放蓝牙 有需要屏蔽此段代码
return Taro.showToast({
icon: 'none',
title: '【蓝牙设备】暂未对外开放敬请期待',
})
Taro.showToast({
title: '请打开手机蓝牙',
icon: 'none',
})
}
else {
// 暂时不开放蓝牙 有需要屏蔽此段代码
return Taro.showToast({
icon: 'none',
title: '【蓝牙设备】暂未对外开放敬请期待',
})
setPopupShow(true)
onFindEven()
}
@ -68,7 +80,7 @@ const LinkBlueTooth = () => {
return (
<>
<View className={styles.main}>
<SearchInput title="蓝牙设备" showIcon>
<SearchInput title="取色设备" showIcon>
<View className={styles.bluetooth_link} onClick={onFindDevice}>
<View className={classnames(styles.link_status, linkStatus == 3 && styles.link_statused, linkStatus == 2 && styles.link_statused_no)}></View>
{

125
src/pages/searchList/components/goods/index.module.scss Normal file
View File

@ -0,0 +1,125 @@
.itemBox {
width: 686px;
padding-bottom: 18px;
border-bottom: 1px solid #e7e7e7;
display: flex;
margin-left: 32px;
margin-bottom: 24px;
.picBox {
margin-right: 24px;
width: 144px;
height: 144px;
border-radius: 8px;
position: relative;
.pic {
width: 144px;
height: 144px;
border-radius: 8px;
}
.posBox {
position: absolute;
bottom: 0px;
right: 0px;
width: 69px;
height: 29px;
background: #000000;
border-radius: 15px 0px 8px 0px;
font-size: 18px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
text-align: center;
line-height: 29px;
opacity: 0.55;
}
}
.leftBox {
width: 144px;
height: 144px;
border-radius: 8px;
position: relative;
margin-right: 24px;
.pic {
width: 144px;
height: 144px;
border-radius: 8px;
}
.posBox {
position: absolute;
bottom: 0px;
right: 0px;
width: 69px;
height: 29px;
background: #000000;
border-radius: 15px 0px 8px 0px;
font-size: 18px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
text-align: center;
line-height: 29px;
opacity: 0.55;
}
}
.rightBox {
.productName {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
margin-bottom: 6px;
}
.tips {
font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #a6a6a6;
margin-bottom: 17px;
}
.flexTag {
display: flex;
.tagOne {
padding-left: 8px;
padding-right: 8px;
padding-top: 3px;
padding-bottom: 3px;
background: #e3ecff;
border-radius: 8px;
font-size: 22px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #4581FF;
text-align: center;
margin-right: 16px;
}
.tagTwo {
padding-left: 8px;
padding-right: 8px;
padding-top: 3px;
padding-bottom: 3px;
background: #ffeedb;
border-radius: 8px;
font-size: 22px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FE8E0F;
text-align: center;
}
}
}
}

42
src/pages/searchList/components/goods/index.tsx Normal file
View File

@ -0,0 +1,42 @@
import { Image, View } from '@tarojs/components'
import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from '../goods/index.module.scss'
import LabAndImg from '@/components/LabAndImg'
const Goods = (props: any) => {
const labAndImgObj = useCallback((item) => {
return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url }
}, [])
return (
<View className={styles.itemBox} onClick={() => props?.clickItem?.()}>
{
props.data?.texture_url === '' && <>
<View className={styles.picBox}>
<Image className={styles.pic} mode="aspectFill" src="https://test.cdn.zzfzyc.com/mall/no_img.png"></Image>
<View className={styles.posBox}>{props.data?.product_color_count}色</View>
</View>
</>
}
{
props.data?.texture_url !== ''
&& <>
<View className={styles.leftBox}>
<LabAndImg value={labAndImgObj(props.data)} />
{/* <Image className={styles.pic} mode={'aspectFill'} src={props.data?.picUrl}></Image> */}
<View className={styles.posBox}>{props.data?.product_color_count}色</View>
</View>
</>
}
<View className={styles.rightBox}>
<View className={styles.productName}>{props.data?.code}#{props.data?.name}</View>
<View className={styles.tips}>{props.data?.component}</View>
<View className={styles.flexTag}>
<View className={styles.tagOne}>{props.data?.width}</View>
<View className={styles.tagTwo}>{props.data?.weight_density}</View>
</View>
</View>
</View>
)
}
export default memo(Goods)

125
src/pages/searchList/components/heightSearchGoods/index.module.scss Normal file
View File

@ -0,0 +1,125 @@
.itemBox {
width: 686px;
padding-bottom: 18px;
border-bottom: 1px solid #e7e7e7;
display: flex;
margin-left: 32px;
margin-bottom: 24px;
.picBox {
margin-right: 24px;
width: 144px;
height: 144px;
border-radius: 8px;
position: relative;
.pic {
width: 144px;
height: 144px;
border-radius: 8px;
}
.posBox {
position: absolute;
bottom: 0px;
right: 0px;
width: 69px;
height: 29px;
background: #000000;
border-radius: 15px 0px 8px 0px;
font-size: 18px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
text-align: center;
line-height: 29px;
opacity: 0.55;
}
}
.leftBox {
width: 144px;
height: 144px;
border-radius: 8px;
position: relative;
margin-right: 24px;
.pic {
width: 144px;
height: 144px;
border-radius: 8px;
}
.posBox {
position: absolute;
bottom: 0px;
right: 0px;
width: 69px;
height: 29px;
background: #000000;
border-radius: 15px 0px 8px 0px;
font-size: 18px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
text-align: center;
line-height: 29px;
opacity: 0.55;
}
}
.rightBox {
.productName {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
margin-bottom: 6px;
}
.tips {
font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #a6a6a6;
margin-bottom: 17px;
}
.flexTag {
display: flex;
.tagOne {
padding-left: 8px;
padding-right: 8px;
padding-top: 3px;
padding-bottom: 3px;
background: #e3ecff;
border-radius: 8px;
font-size: 22px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #4581FF;
text-align: center;
margin-right: 16px;
}
.tagTwo {
padding-left: 8px;
padding-right: 8px;
padding-top: 3px;
padding-bottom: 3px;
background: #ffeedb;
border-radius: 8px;
font-size: 22px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FE8E0F;
text-align: center;
}
}
}
}

42
src/pages/searchList/components/heightSearchGoods/index.tsx Normal file
View File

@ -0,0 +1,42 @@
import { Image, View } from '@tarojs/components'
import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from '../goods/index.module.scss'
import LabAndImg from '@/components/LabAndImg'
const Goods = (props: any) => {
const labAndImgObj = useCallback((item) => {
return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url }
}, [])
return (
<View className={styles.itemBox} onClick={() => props?.clickItem?.()}>
{
props.data?.texture_url === '' && <>
<View className={styles.picBox}>
<Image className={styles.pic} mode="aspectFill" src="https://test.cdn.zzfzyc.com/mall/no_img.png"></Image>
<View className={styles.posBox}>{props.data?.product_color_code}</View>
</View>
</>
}
{
props.data?.texture_url !== ''
&& <>
<View className={styles.leftBox}>
<LabAndImg value={labAndImgObj(props.data)} />
{/* <Image className={styles.pic} mode={'aspectFill'} src={props.data?.picUrl}></Image> */}
<View className={styles.posBox}>{props.data?.product_color_code}</View>
</View>
</>
}
<View className={styles.rightBox}>
<View className={styles.productName}>{props.data?.product_code}#{props.data?.product_name}</View>
<View className={styles.tips}>{props.data?.product_kind_name}</View>
{/* <View className={styles.flexTag}>
<View className={styles.tagOne}>{props.data?.width}</View>
<View className={styles.tagTwo}>{props.data?.weight_density}</View>
</View> */}
</View>
</View>
)
}
export default memo(Goods)

207
src/pages/searchList/components/searchPopup/index.module.scss Normal file
View File

@ -0,0 +1,207 @@
.main {
.topBox {
display: flex;
padding-left: 48px;
margin-top: 20px;
.leftTop {
.lefttopTitle {
font-size: 28px;
font-weight: 500;
color: #000000;
margin-bottom: 24px;
}
.inputBox {
padding-left: 20px;
display: flex;
align-items: center;
width: 654px;
height: 68px;
background: #e9e9e9;
border-radius: 8px;
background-color: #f6f6f6;
margin-right: 48px;
.inputClass {
width: 624px;
}
}
.lefttopSelectBox {
display: flex;
align-items: center;
width: 330px;
height: 68px;
background: #f6f6f6;
border-radius: 8px;
justify-content: space-between;
margin-right: 16px;
.inputstyle {
padding-left: 20px;
}
.danwei {
color: #676767;
font-size: 28px;
font-weight: 400;
margin-right: 16px;
}
.lefttopSelectNameactive {
font-size: 28px;
font-weight: 400;
color: #8b8b8b;
margin-left: 24px;
}
.lefttopSelectName {
font-size: 28px;
font-weight: 400;
color: #000000;
margin-left: 24px;
}
.icon_more {
margin-right: 24px;
font-size: 30px;
}
}
.activelefttopSelectBox {
width: 319px;
height: 68px;
background: rgba(51, 127, 255, 0.1);
border-radius: 8px;
border: 1px solid #337fff;
display: flex;
align-items: center;
justify-content: space-between;
margin-right: 16px;
.lefttopSelectName {
font-size: 28px;
font-weight: 400;
color: #337fff;
margin-left: 24px;
}
.icon_more {
margin-right: 24px;
font-size: 30px;
color: #337fff;
}
}
}
}
.thirdBox {
margin-top: 30px;
padding-left: 48px;
.thirdTopfont {
font-size: 28px;
font-weight: 500;
color: #000000;
}
.flexModebox {
min-width: 152px;
margin-top: 24px;
display: flex;
flex-wrap: wrap;
.activemodeBox {
min-width: 152px;
margin-bottom: 16px;
margin-right: 16px;
padding: 10px;
// width: 152px;
// height: 68px;
background: rgba(51, 127, 255, 0.1);
border-radius: 8px;
font-size: 28px;
font-weight: 400;
color: #337fff;
text-align: center;
line-height: 68px;
border: 1px solid #337fff;
box-sizing: border-box;
}
.modeBox {
min-width: 152px;
margin-bottom: 16px;
margin-right: 16px;
// width: 152px;
// height: 68px;
padding: 10px;
background: #f6f6f6;
border-radius: 8px;
font-size: 28px;
border: 1px solid #f6f6f6;
font-weight: 400;
color: #7d7d7d;
text-align: center;
line-height: 68px;
box-sizing: border-box;
// opacity: 0.4;
}
}
}
.safeBox {
height: 160px;
}
.bottomBox {
width: 100%;
height: 160px;
background: #ffffff;
z-index: 99;
position: fixed;
bottom: 0;
padding-bottom: 30px;
display: flex;
align-items: center;
justify-content: space-between;
.resetBox {
margin-left: 48px;
width: 311px;
height: 80px;
border-radius: 44px;
border: 1px solid #087eff;
font-size: 28px;
font-weight: 500;
color: #337fff;
text-align: center;
line-height: 80px;
background-color: #fff;
}
.button {
margin-right: 32px;
width: 311px;
height: 80px;
background: #68b4ff;
border-radius: 44px;
font-size: 32px;
font-weight: 500;
color: #ffffff;
text-align: center;
line-height: 80px;
}
.activeButton {
margin-right: 32px;
width: 311px;
height: 80px;
background: #337fff;
border-radius: 44px;
font-size: 32px;
border: 1px solid #337fff;
font-weight: 500;
color: #fff;
text-align: center;
line-height: 80px;
}
}
}

177
src/pages/searchList/components/searchPopup/index.tsx Normal file
View File

@ -0,0 +1,177 @@
import { Button, Image, Input, ScrollView, Text, View } from '@tarojs/components'
import Taro, { useDidShow, usePullDownRefresh, useReady } from '@tarojs/taro'
import classnames from 'classnames'
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import Popup from '@/components/popup'
import { GetProductKindListApi } from '@/api/material'
import { getFilterData } from '@/common/util'
import { alert } from '@/common/common'
interface Props {
showPopup: boolean
closePopup: () => void
handSearch: (any) => void
}
const SearchPopup = (props: Props) => {
const [searchObj, setsearchObj] = useState<any>({
width: '',
weight_density: '',
product_kind_ids: '',
component: '',
})
// 获取系列
const { fetchData: kindFetchData } = GetProductKindListApi()
const [kindList, setKindList] = useState<any[]>([])
const getCategoryList = async() => {
const { data } = await kindFetchData()
setKindList(data.list)
}
useEffect(() => {
getCategoryList()
}, [])
const handCheckMode = (it) => {
kindList.map((item) => {
if (item.id == it.id) {
item.check = !item.check
}
return item
})
setKindList([...kindList])
const arr: number[] = []
const res = kindList.filter((item) => { return item.check })
res.forEach((kb) => {
arr.push(kb.id)
})
setsearchObj(val => ({ ...val, product_kind_ids: arr.toString() }))
}
const handBlur = (e, index) => {
if (index == 1) {
setsearchObj(val => ({ ...val, width: Number(e.detail.value) }))
}
if (index == 2) {
setsearchObj(val => ({ ...val, weight_density: Number(e.detail.value) }))
}
if (index == 3) {
setsearchObj(val => ({ ...val, component: e.detail.value }))
}
}
// const isDisabled = useMemo(() => {
// if (searchObj.width !== ''
// || searchObj.weight_density !== ''
// || searchObj.product_kind_ids !== ''
// || searchObj.component !== ''
// ) {
// return false
// }
// else {
// return true
// }
// }, [searchObj])
const handReset = () => {
kindList.map((item) => {
item.check = false
return item
})
setKindList([...kindList])
setsearchObj({
width: '',
weight_density: '',
product_kind_ids: '',
component: '',
})
}
const handSure = () => {
if (searchObj.width === ''
&& searchObj.weight_density === ''
&& searchObj.product_kind_ids === ''
&& searchObj.component === ''
) {
alert.error('请选择筛选内容')
return true
}
props.handSearch(getFilterData(searchObj))
}
return (
<Popup title="全部筛选" show={props.showPopup} onClose={() => props.closePopup?.()}>
<ScrollView scrollY style={{ height: '600rpx' }}>
<View className={styles.main}>
<View className={styles.thirdBox}>
<View className={styles.thirdTopfont}>系列名称</View>
<View className={styles.flexModebox}>
{kindList.map((item, index) => {
return (
<View
onClick={() => {
handCheckMode(item)
}}
className={classnames(item.check ? styles.activemodeBox : styles.modeBox)}
key={index}
>
{item.name}
</View>
)
})}
</View>
</View>
<View className={styles.topBox}>
<View className={styles.leftTop} >
<View className={styles.lefttopTitle}>幅宽</View>
<View className={styles.lefttopSelectBox}>
<Input className={styles.inputstyle} type="number" value={searchObj.width} onBlur={e => handBlur(e, 1)} placeholder="请输入幅宽"></Input>
<View className={styles.danwei}>CM</View>
</View>
</View>
<View className={styles.leftTop} >
<View className={styles.lefttopTitle}>克重</View>
<View className={styles.lefttopSelectBox}>
<Input className={styles.inputstyle} type="number" value={searchObj.weight_density} onBlur={e => handBlur(e, 2)} placeholder="请输入克重"></Input>
<View className={styles.danwei}>KG</View>
</View>
</View>
</View>
<View className={styles.topBox}>
<View className={styles.leftTop} >
<View className={styles.lefttopTitle}>成分</View>
<View className={styles.inputBox}>
<Input className={styles.inputClass} type="text" value={searchObj.component} onBlur={e => handBlur(e, 3)} placeholder="请输入成分"></Input>
</View>
</View>
</View>
<View className={styles.safeBox}></View>
<View className={styles.bottomBox}>
<Button
className={styles.resetBox}
plain
onClick={() =>
handReset()
}
>
重置
</Button>
<Button
className={styles.activeButton}
plain
// disabled={isDisabled}
onClick={() =>
handSure?.()
}
>
确认
</Button>
</View>
</View>
</ScrollView>
</Popup>
)
}
export default memo(SearchPopup)

212
src/pages/searchList/hightSearchList.module.scss
View File

@ -23,6 +23,70 @@
}
}
}
.topBox {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
// width: 100%;
padding: 40px;
.topLeft {
font-size: 28px;
font-weight: 500;
color: #000000;
}
.filter_more {
font-size: 28px;
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 {
margin-right: 10px;
font-size: 32px;
}
.activemiconfont {
margin-right: 10px;
color: #327fff;
font-size: 32px;
}
.activeFont {
color: #327fff;
}
}
}
.filterBox {
display: flex;
align-items: center;
background-color: #fff;
padding-left: 40px;
padding-bottom: 32px;
.text_sc,
.text_zh {
width: 148px;
height: 56px;
background: #f9f6f6;
border-radius: 28px;
display: flex;
align-items: center;
justify-content: center;
color: #636262;
font-size: 28px;
font-weight: 400;
margin-right: 24px;
}
}
.filter {
.filter_all {
display: flex;
@ -112,30 +176,10 @@
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 {
height: calc(100vh - 440px);
background-color: #fff;
.list_num {
font-size: $font_size_min;
color: $color_font_two;
@ -147,68 +191,68 @@
height: 100%;
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;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
.product_img {
width: 100%;
height: 224px;
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 30px;
font-size: $font_size_min;
color: #fff;
position: absolute;
left: 0;
bottom: 0;
padding: 5px 20px;
box-sizing: border-box;
}
}
}
.product_info {
padding: 20px;
.title {
font-size: $font_size;
color: $color_font_three;
@include common_ellipsis();
}
.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;
@include common_ellipsis();
}
}
}
// .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;
// box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
// .product_img {
// width: 100%;
// height: 224px;
// 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 30px;
// font-size: $font_size_min;
// color: #fff;
// position: absolute;
// left: 0;
// bottom: 0;
// padding: 5px 20px;
// box-sizing: border-box;
// }
// }
// }
// .product_info {
// padding: 20px;
// .title {
// font-size: $font_size;
// color: $color_font_three;
// @include common_ellipsis();
// }
// .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;
// @include common_ellipsis();
// }
// }
// }
}
}

84
src/pages/searchList/hightSearchList.tsx
View File

@ -5,6 +5,8 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './hightSearchList.module.scss'
import type { ListProps } from './components/selectData'
import SelectData from './components/selectData'
import Goods from './components/heightSearchGoods'
import SearchPopup from './components/searchPopup'
import Filter from '@/components/filter'
import InfiniteScroll from '@/components/infiniteScroll'
import SortBtn from '@/components/sortBtn'
@ -33,7 +35,7 @@ export default () => {
size: 10,
width: '',
weight_density: '',
product_kind_id: '',
product_kind_ids: '',
component: '',
abstract_sort_key: '',
})
@ -108,7 +110,7 @@ export default () => {
weight_density: data?.weight,
size: 10,
component: data?.element,
product_kind_id: data?.seriesId,
product_kind_ids: data?.seriesId,
})
formatSelectList(e)
}
@ -160,6 +162,37 @@ export default () => {
},
[materialList],
)
const [showPopup, setshowPopup] = useState(false)
const handSearch = (val) => {
console.log(val, '222')
pageNum.current.page = 1
setMaterialList(() => ({ list: [], total: 0 }))
setSearchField({
...searchField,
width: val?.width,
weight_density: val?.weight_density,
size: 10,
component: val?.component,
product_kind_ids: val?.product_kind_ids,
})
setshowPopup(false)
}
const isShow = useMemo(() => {
if (searchField.width !== ''
|| searchField.weight_density !== ''
|| searchField.component !== ''
|| searchField.product_kind_ids !== ''
) {
return false
}
else {
return true
}
}, [searchField])
return (
<View className={styles.main}>
<View className={styles.search}>
@ -174,7 +207,24 @@ export default () => {
</SearchInput>
</View>
</View>
<View className={styles.filter}>
<View className={styles.topBox}>
<View className={styles.topLeft}>搜索结果</View>
<View className={styles.filter_more} onClick={() => setshowPopup(true)}>
<Text className={classnames('iconfont icon-shaixuan', isShow ? styles.miconfont : styles.activemiconfont)}></Text>
<Text className={classnames(!isShow ? styles.activeFont : '')}>筛选</Text>
</View>
</View>
<View className={styles.filterBox}>
<View className={styles.text_zh} onClick={() => changeSort(1)}>
<Text style={{ marginRight: '5px' }}>综合</Text>
<SortBtn status={sortStatus.comprehensive} ref={sortComprehensiveRef} sortValue={{ desc: '1', asc: '-1' }} />
</View>
<View className={styles.text_sc} onClick={() => changeSort(2)}>
<Text style={{ marginRight: '5px' }}>收藏</Text>
<SortBtn status={sortStatus.collection} ref={sortCollectionRef} sortValue={{ desc: '2', asc: '-2' }} />
</View>
</View>
{/* <View className={styles.filter}>
<View className={styles.filter_all}>
<View className={styles.text_zh} onClick={() => changeSort(1)}>
<Text>综合</Text>
@ -194,31 +244,33 @@ export default () => {
<Text className={classnames('iconfont icon-shaixuan', styles.miconfont)}></Text>
</View>
</View>
</View>
</View> */}
<View className={styles.list}>
<View className={classnames(styles.list_num, styles.list_num_shadow)}>搜索结果 ({materialList.total}条记录)</View>
{/* <View className={classnames(styles.list_num, styles.list_num_shadow)}>搜索结果 ({materialList.total}条记录)</View> */}
<View className={styles.scroll}>
<InfiniteScroll selfonScrollToLower={getScrolltolower} statusMore={statusMore}>
<View className={styles.product_list}>
{materialList.list.map((item) => {
return (
<View key={item.id} className={styles.product_item} onClick={() => goLinkPage(item)}>
<View className={styles.product_img}>
<LabAndImg value={labAndImgObj(item)} />
<View className={styles.color_num}>{item.product_color_code}</View>
</View>
<View className={styles.product_info}>
<View className={styles.title}>{formatHashTag(item.product_code, item.product_name)}</View>
<View className={styles.introduce}>{item.product_kind_name}</View>
</View>
</View>
<Goods key={item} data={item}></Goods>
// <View key={item.id} className={styles.product_item} onClick={() => goLinkPage(item)}>
// <View className={styles.product_img}>
// <LabAndImg value={labAndImgObj(item)} />
// <View className={styles.color_num}>{item.product_color_code}</View>
// </View>
// <View className={styles.product_info}>
// <View className={styles.title}>{formatHashTag(item.product_code, item.product_name)}</View>
// <View className={styles.introduce}>{item.product_kind_name}</View>
// </View>
// </View>
)
})}
</View>
</InfiniteScroll>
</View>
</View>
<Filter show={showFilter} onFiltr={e => getFiltr(e)} onClose={() => setShowFilter(false)} />
{/* <Filter show={showFilter} onFiltr={e => getFiltr(e)} onClose={() => setShowFilter(false)} /> */}
<SearchPopup showPopup={showPopup} closePopup={() => setshowPopup(false)} handSearch={val => handSearch(val)}></SearchPopup>
</View>
)
}

49
src/pages/searchList/search.module.scss
View File

@ -5,6 +5,15 @@
justify-content: space-between;
padding: 20px;
padding-bottom: 50px;
align-items: center;
.searchBox {
width: 606px;
}
.cancelFont {
font-size: 28px;
font-weight: 400;
color: #b1b1b1;
}
}
.up_search {
color: $color_main;
@ -24,7 +33,6 @@
color: $color_font_one;
font-weight: 700;
}
}
.list {
@ -36,9 +44,9 @@
margin-right: 20px;
margin-bottom: 20px;
padding: 10px 20px;
background-color: #F0F0F0;
background-color: #f0f0f0;
color: $color_font_three;
border-radius: 50px;
border-radius: 8px;
}
}
}
@ -47,7 +55,7 @@
.history_header {
width: 100%;
display: flex;
// justify-content: space-between;
justify-content: space-between;
font-size: $font_size_medium;
.history_header_title {
font-size: $font_size;
@ -69,10 +77,39 @@
margin-right: 20px;
margin-bottom: 20px;
padding: 10px 20px;
background-color: #F0F0F0;
background-color: #f0f0f0;
color: $color_font_three;
border-radius: 50px;
border-radius: 8px;
}
}
}
.reslutBox {
.reslutTitle {
margin-bottom: 20px;
margin-left: 20px;
font-size: $font_size;
color: $color_font_one;
font-weight: 700;
}
.scrollBox {
height: calc(100vh - 250px);
}
}
.topFlex {
display: flex;
align-items: center;
// margin-top: 35px;
justify-content: space-between;
.historyFont {
margin-left: 32px;
font-size: $font_size;
color: $color_font_one;
font-weight: 700;
}
.up_search {
color: $color_main;
font-size: $font_size;
margin-right: 20px;
}
}
}

177
src/pages/searchList/search.tsx
View File

@ -1,21 +1,37 @@
import { Text, View } from '@tarojs/components'
import Taro, { useDidShow, useShareAppMessage } from '@tarojs/taro'
import { Text, View } from '@tarojs/components'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import classnames from 'classnames'
import { useEffect, useRef, useState } from 'react'
import styles from './search.module.scss'
import Goods from './components/goods'
import Search from '@/components/search'
import { alert, goLink } from '@/common/common'
import { AddSearchHistoryApi, GetHotSearchApi, GetSearchHistoryApi } from '@/api/search'
import { SCENE } from '@/common/constant'
import { SCENE, SEARCH_EMPTY_IMAGE } from '@/common/constant'
import useLogin from '@/use/useLogin'
import Empty from '@/components/empty'
import { dataLoadingStatus, debounce, getFilterData } from '@/common/util'
import InfiniteScroll from '@/components/infiniteScroll'
import { GetProductListApi, mallsearchHistorydelete } from '@/api/material'
interface searchDataParam { search_key: '' }
export default () => {
useLogin()
const [searchData, setSearchData] = useState<{ hotField: searchDataParam[]; historyField: searchDataParam[] }>({
const [searchData, setSearchData] = useState<{
hotField: searchDataParam[]
historyField: searchDataParam[]
showIndex: number
code_or_name: string
page: number
size: number
}>({
hotField: [],
historyField: [],
showIndex: 1, // 1代表输入框没内容搜索 2是有
code_or_name: '',
page: 1,
size: 10,
})
// 获取热门搜索数据
@ -45,36 +61,134 @@ export default () => {
// goLink('/pages/searchList/searchList', {key: addSearchField.current.key})
}
// 默认输入框词
const [defaultValue, setdefaultValue] = useState('')
// 搜索事件, status = true 添加搜索， status = false 直接跳转
const searchEvent = (e, status = true) => {
if (e == '') {
alert.error('请输入关键词')
return false
}
addSearchField.current.key = e
status && addSearchHistory()
Taro.navigateTo({
url: `/pages/searchList/searchList?key=${addSearchField.current.key}`,
setdefaultValue(e)
// if (e == '') {
// alert.error('请输入关键词')
// return false
// }
// addSearchField.current.key = e
// status && addSearchHistory()
// Taro.navigateTo({
// url: `/pages/searchList/searchList?key=${addSearchField.current.key}`,
// })
addSearchHistory()
setSearchData(val => ({ ...val, showIndex: 2, page: 1, size: 10, code_or_name: e }))
// getProductList()
}
const changeSearch = useCallback(debounce((e) => {
if (e.trim().length == 0 && e != '') {
alert.error('请输入关键词')
}
if (e.trim().length != 0) {
addSearchField.current.key = e
addSearchHistory()
getSearchHistory()
setSearchData(val => ({ ...val, showIndex: 2, page: 1, size: 10, code_or_name: e }))
// getProductList()
}
if (e == '') {
getSearchHistory()
setSearchData(val => ({ ...val, showIndex: 1 }))
}
}, 300), [])
// 返回
const handCancel = () => {
Taro.navigateBack({
delta: 1,
})
}
// 获取面料列表
const [materialList, setMaterialList] = useState<{ list: any[]; total: number }>({ list: [], total: 0 })
const { fetchData: materialFetchData, state: materialState } = GetProductListApi()
const getProductList = async() => {
const { data } = await materialFetchData(getFilterData(searchData))
setMaterialList({ list: data.list, total: data.total })
Taro.stopPullDownRefresh()
}
// 上拉加载数据
const pageNum = useRef({ size: searchData.size, page: searchData.page })
const getScrolltolower = () => {
if (materialList.list.length < materialList.total) {
pageNum.current.page++
const size = pageNum.current.size * pageNum.current.page
setSearchData({ ...searchData, size })
}
}
// 监听筛选条件变化
useEffect(() => {
if (searchData.code_or_name !== '') {
getProductList()
}
}, [searchData.code_or_name])
// 数据加载状态
const statusMore = useMemo(() => {
return dataLoadingStatus({ list: materialList.list, total: materialList.total, status: materialState.loading })
}, [materialList, materialState])
// 删除历史搜索
const { fetchData: deleteFetch } = mallsearchHistorydelete()
const handDelete = async() => {
const res = await deleteFetch()
Taro.showLoading({
title: '请稍等...',
})
if (res) {
alert.success('删除成功')
getSearchHistory()
setSearchData(val => ({ ...val, showIndex: 1 }))
Taro.hideLoading()
}
else {
alert.error('删除失败')
Taro.hideLoading()
}
}
return (
<View className={styles.main}>
<View className={styles.search}>
<Search style={{ width: '100%' }} placeholder="请输入面料关键词" placeIcon="out" showBtn clickOnSearch={e => searchEvent(e)} />
<View className={styles.searchBox}>
<Search
changeOnSearch={changeSearch}
placeholder="请输入面料关键词"
defaultValue={defaultValue}
/>
</View>
<View className={styles.cancelFont} onClick={() => handCancel()}>取消</View>
</View>
{
searchData.showIndex === 1 && <>
{
searchData?.historyField.length === 0
&& <View className={styles.topFlex}>
<View className={styles.historyFont}>历史搜索</View>
<View className={styles.up_search} onClick={() => goLink('/pages/searchList/hightSearchList')}>
高级搜索
{'高级搜索 >'}
</View>
</View>
}
{searchData?.hotField.length > 0 && (
<View className={styles.hot}>
<View className={styles.hot_header}>
<View className={styles.hot_header_title}>热门面料</View>
</View>
<View className={styles.list}>
{searchData.hotField.map((item) => {
{searchData.hotField.map((item, index) => {
return (
<View className={styles.item} onClick={() => searchEvent(item.search_key, false)}>
<View className={styles.item} onClick={() => searchEvent(item.search_key, false)} key={index}>
{item.search_key}
</View>
)
@ -86,17 +200,44 @@ export default () => {
<View className={styles.history}>
<View className={styles.history_header}>
<View className={styles.history_header_title}>历史搜索</View>
{/* <View className={classnames('iconfont icon-shanchu', styles.miconfont)}></View> */}
{
searchData?.historyField.length > 0 && <View className={classnames('iconfont icon-shanchu', styles.miconfont)} onClick={() => handDelete()}></View>
}
</View>
<View className={styles.list}>
{searchData?.historyField?.map(item => (
<View className={styles.item} onClick={() => searchEvent(item.search_key, false)}>
{searchData?.historyField?.map((item, index) => (
<View className={styles.item} onClick={() => searchEvent(item.search_key, false)} key={index}>
{item.search_key}
</View>
))}
</View>
<View className={styles.up_search} onClick={() => goLink('/pages/searchList/hightSearchList')}>
{'高级搜索 >'}
</View>
</View>
)}
{
searchData?.historyField.length === 0 && <Empty picUrl={SEARCH_EMPTY_IMAGE} text="无搜索历史"></Empty>
}
</>
}
{
searchData.showIndex === 2 && <View className={styles.reslutBox}>
<View className={styles.reslutTitle}>搜索结果</View>
<View className={styles.scrollBox}>
<InfiniteScroll selfonScrollToLower={getScrolltolower} statusMore={statusMore}>
{
materialList?.list.map((item) => {
return (
<Goods key={item} data={item}></Goods>
)
})
}
</InfiniteScroll>
</View>
</View>
}
</View>
)
}