diff --git a/package.json b/package.json index 3d5253e..8c66942 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/project.private.config.json b/project.private.config.json index 89e3126..c428241 100644 --- a/project.private.config.json +++ b/project.private.config.json @@ -22,6 +22,13 @@ "query": "", "launchMode": "default", "scene": null + }, + { + "name": "", + "pathName": "pages/searchList/hightSearchList", + "query": "", + "launchMode": "default", + "scene": null } ] } diff --git a/src/api/material.ts b/src/api/material.ts index e89363f..a74f9f6 100644 --- a/src/api/material.ts +++ b/src/api/material.ts @@ -75,3 +75,11 @@ export const GetLabProductApi = () => { // method: "get", // }) // } + +// 删除历史搜索 +export const mallsearchHistorydelete = () => { + return useRequest({ + url: '/v2/mall/searchHistory/delete', + method: 'delete', + }) +} diff --git a/src/components/bluetooth/LinkBlueTooth.tsx b/src/components/bluetooth/LinkBlueTooth.tsx index b7d15ae..ecabcbc 100644 --- a/src/components/bluetooth/LinkBlueTooth.tsx +++ b/src/components/bluetooth/LinkBlueTooth.tsx @@ -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 ( <> - + { diff --git a/src/pages/searchList/components/goods/index.module.scss b/src/pages/searchList/components/goods/index.module.scss new file mode 100644 index 0000000..6fdeb36 --- /dev/null +++ b/src/pages/searchList/components/goods/index.module.scss @@ -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; + } + } + } + +} \ No newline at end of file diff --git a/src/pages/searchList/components/goods/index.tsx b/src/pages/searchList/components/goods/index.tsx new file mode 100644 index 0000000..18c9b16 --- /dev/null +++ b/src/pages/searchList/components/goods/index.tsx @@ -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 ( + props?.clickItem?.()}> + { + props.data?.texture_url === '' && <> + + + + {props.data?.product_color_count}色 + + + } + { + props.data?.texture_url !== '' + && <> + + + {/* */} + {props.data?.product_color_count}色 + + + } + + {props.data?.code}#{props.data?.name} + {props.data?.component} + + {props.data?.width} + {props.data?.weight_density} + + + + ) +} +export default memo(Goods) diff --git a/src/pages/searchList/components/heightSearchGoods/index.module.scss b/src/pages/searchList/components/heightSearchGoods/index.module.scss new file mode 100644 index 0000000..6fdeb36 --- /dev/null +++ b/src/pages/searchList/components/heightSearchGoods/index.module.scss @@ -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; + } + } + } + +} \ No newline at end of file diff --git a/src/pages/searchList/components/heightSearchGoods/index.tsx b/src/pages/searchList/components/heightSearchGoods/index.tsx new file mode 100644 index 0000000..23ff411 --- /dev/null +++ b/src/pages/searchList/components/heightSearchGoods/index.tsx @@ -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 ( + props?.clickItem?.()}> + { + props.data?.texture_url === '' && <> + + + + {props.data?.product_color_code} + + + } + { + props.data?.texture_url !== '' + && <> + + + {/* */} + {props.data?.product_color_code} + + + } + + {props.data?.product_code}#{props.data?.product_name} + {props.data?.product_kind_name} + {/* + {props.data?.width} + {props.data?.weight_density} + */} + + + ) +} +export default memo(Goods) diff --git a/src/pages/searchList/components/searchPopup/index.module.scss b/src/pages/searchList/components/searchPopup/index.module.scss new file mode 100644 index 0000000..49291d3 --- /dev/null +++ b/src/pages/searchList/components/searchPopup/index.module.scss @@ -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; + } + } +} diff --git a/src/pages/searchList/components/searchPopup/index.tsx b/src/pages/searchList/components/searchPopup/index.tsx new file mode 100644 index 0000000..11ce58b --- /dev/null +++ b/src/pages/searchList/components/searchPopup/index.tsx @@ -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({ + width: '', + weight_density: '', + product_kind_ids: '', + component: '', + }) + + // 获取系列 + const { fetchData: kindFetchData } = GetProductKindListApi() + const [kindList, setKindList] = useState([]) + 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 ( + props.closePopup?.()}> + + + + 系列名称 + + {kindList.map((item, index) => { + return ( + { + handCheckMode(item) + }} + className={classnames(item.check ? styles.activemodeBox : styles.modeBox)} + key={index} + > + {item.name} + + ) + })} + + + + + 幅宽 + + handBlur(e, 1)} placeholder="请输入幅宽"> + CM + + + + 克重 + + handBlur(e, 2)} placeholder="请输入克重"> + KG + + + + + + 成分 + + handBlur(e, 3)} placeholder="请输入成分"> + + + + + + + + + + + + ) +} +export default memo(SearchPopup) diff --git a/src/pages/searchList/hightSearchList.module.scss b/src/pages/searchList/hightSearchList.module.scss index da2d667..0866f55 100644 --- a/src/pages/searchList/hightSearchList.module.scss +++ b/src/pages/searchList/hightSearchList.module.scss @@ -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(); + // } + // } + // } } } diff --git a/src/pages/searchList/hightSearchList.tsx b/src/pages/searchList/hightSearchList.tsx index 9ba6869..0ae2c2a 100644 --- a/src/pages/searchList/hightSearchList.tsx +++ b/src/pages/searchList/hightSearchList.tsx @@ -3,8 +3,10 @@ import Taro, { useDidShow, usePullDownRefresh, useReady } from '@tarojs/taro' import classnames from 'classnames' import { useCallback, useEffect, useMemo, useRef, useState } from 'react' import styles from './hightSearchList.module.scss' -import type { ListProps } from './components/selectData' +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: '', }) @@ -72,7 +74,7 @@ export default () => { const getLab = () => { if (colorState.connected) { measureAndGetLab() - } + } else { Taro.showToast({ title: '请链接设备', @@ -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) } @@ -144,7 +146,7 @@ export default () => { const { status, value } = sortComprehensiveRef.current.changeSort() setSortStatus(e => ({ ...e, comprehensive: status, collection: 'none' })) setSearchField(e => ({ ...e, abstract_sort_key: value, size: 10, page: 1 })) - } + } else { const { status, value } = sortCollectionRef.current.changeSort() setSortStatus(e => ({ ...e, collection: status, comprehensive: 'none' })) @@ -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 ( @@ -174,7 +207,24 @@ export default () => { - + + 搜索结果 + setshowPopup(true)}> + + 筛选 + + + + changeSort(1)}> + 综合 + + + changeSort(2)}> + 收藏 + + + + {/* changeSort(1)}> 综合 @@ -194,31 +244,33 @@ export default () => { - + */} - 搜索结果 ({materialList.total}条记录) + {/* 搜索结果 ({materialList.total}条记录) */} {materialList.list.map((item) => { return ( - goLinkPage(item)}> - - - {item.product_color_code} - - - {formatHashTag(item.product_code, item.product_name)} - {item.product_kind_name} - - + + // goLinkPage(item)}> + // + // + // {item.product_color_code} + // + // + // {formatHashTag(item.product_code, item.product_name)} + // {item.product_kind_name} + // + // ) })} - getFiltr(e)} onClose={() => setShowFilter(false)} /> + {/* getFiltr(e)} onClose={() => setShowFilter(false)} /> */} + setshowPopup(false)} handSearch={val => handSearch(val)}> ) } diff --git a/src/pages/searchList/search.module.scss b/src/pages/searchList/search.module.scss index b539403..3b006ae 100644 --- a/src/pages/searchList/search.module.scss +++ b/src/pages/searchList/search.module.scss @@ -1,78 +1,115 @@ -.main{ - position: relative; - .search{ - display: flex; - justify-content: space-between; - padding: 20px; - padding-bottom: 50px; +.main { + position: relative; + .search { + display: flex; + justify-content: space-between; + padding: 20px; + padding-bottom: 50px; + align-items: center; + .searchBox { + width: 606px; } - .up_search{ - color: $color_main; + .cancelFont { + font-size: 28px; + font-weight: 400; + color: #b1b1b1; + } + } + .up_search { + color: $color_main; + font-size: $font_size; + position: absolute; + right: 20px; + } + .hot { + padding: 0 20px; + .hot_header { + width: 100%; + display: flex; + justify-content: space-between; + font-size: $font_size_medium; + .hot_header_title { font-size: $font_size; - position: absolute; - right: 20px; + color: $color_font_one; + font-weight: 700; + } } - .hot { - padding: 0 20px; - .hot_header { - width:100%; - display: flex; - justify-content: space-between; - font-size: $font_size_medium; - .hot_header_title { - font-size: $font_size; - color: $color_font_one; - font-weight: 700; - } - - } - - .list{ - display: flex; - font-size: $font_size_medium; - flex-wrap: wrap; - padding: 20px 0; - .item{ - margin-right: 20px; - margin-bottom: 20px; - padding: 10px 20px; - background-color: #F0F0F0; - color: $color_font_three; - border-radius: 50px; - } - } + + .list { + display: flex; + font-size: $font_size_medium; + flex-wrap: wrap; + padding: 20px 0; + .item { + margin-right: 20px; + margin-bottom: 20px; + padding: 10px 20px; + background-color: #f0f0f0; + color: $color_font_three; + border-radius: 8px; + } } - .history { - padding: 0 20px; - .history_header { - width:100%; - display: flex; - // justify-content: space-between; - font-size: $font_size_medium; - .history_header_title { - font-size: $font_size; - color: $color_font_one; - font-weight: 700; - } - .miconfont{ - font-size: 40px; - color: $color_font_three; - margin-left: 20px; - } - } - .list{ - display: flex; - font-size: $font_size_medium; - flex-wrap: wrap; - padding: 20px 0; - .item{ - margin-right: 20px; - margin-bottom: 20px; - padding: 10px 20px; - background-color: #F0F0F0; - color: $color_font_three; - border-radius: 50px; - } - } + } + .history { + padding: 0 20px; + .history_header { + width: 100%; + display: flex; + justify-content: space-between; + font-size: $font_size_medium; + .history_header_title { + font-size: $font_size; + color: $color_font_one; + font-weight: 700; + } + .miconfont { + font-size: 40px; + color: $color_font_three; + margin-left: 20px; + } } -} \ No newline at end of file + .list { + display: flex; + font-size: $font_size_medium; + flex-wrap: wrap; + padding: 20px 0; + .item { + margin-right: 20px; + margin-bottom: 20px; + padding: 10px 20px; + background-color: #f0f0f0; + color: $color_font_three; + 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; + } + } +} diff --git a/src/pages/searchList/search.tsx b/src/pages/searchList/search.tsx index 057cd28..c70577c 100644 --- a/src/pages/searchList/search.tsx +++ b/src/pages/searchList/search.tsx @@ -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,58 +61,183 @@ 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 ( - searchEvent(e)} /> - - goLink('/pages/searchList/hightSearchList')}> - 高级搜索 - - {searchData?.hotField.length > 0 && ( - - - 热门面料 - - - {searchData.hotField.map((item) => { - return ( - searchEvent(item.search_key, false)}> - {item.search_key} - - ) - })} - + + - )} - {searchData?.historyField.length > 0 && ( - - - 历史搜索 - {/* */} - - - {searchData?.historyField?.map(item => ( - searchEvent(item.search_key, false)}> - {item.search_key} + handCancel()}>取消 + + { + searchData.showIndex === 1 && <> + { + searchData?.historyField.length === 0 + && + 历史搜索 + goLink('/pages/searchList/hightSearchList')}> + {'高级搜索 >'} - ))} + + } + {searchData?.hotField.length > 0 && ( + + + 热门面料 + + + {searchData.hotField.map((item, index) => { + return ( + searchEvent(item.search_key, false)} key={index}> + {item.search_key} + + ) + })} + + + )} + {searchData?.historyField.length > 0 && ( + + + 历史搜索 + { + searchData?.historyField.length > 0 && handDelete()}> + } + + + + {searchData?.historyField?.map((item, index) => ( + searchEvent(item.search_key, false)} key={index}> + {item.search_key} + + ))} + + goLink('/pages/searchList/hightSearchList')}> + {'高级搜索 >'} + + + )} + { + searchData?.historyField.length === 0 && + } + + } + { + searchData.showIndex === 2 && + 搜索结果 + + + { + materialList?.list.map((item) => { + return ( + + ) + }) + } + - )} + } ) }