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