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

对接确认订单

Browse Source
This commit is contained in:
czm 2022-05-16 19:14:09 +08:00
parent 91934d0905
commit 754b3330a9
17 changed files with 761 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/api/material.ts
View File

@ -45,3 +45,13 @@ export const GetProductDetailApi = () => {
})
}
/**
* 根据LAB匹配色卡基础资料
* @returns
*/
export const GetLabProductApi = () => {
return useRequest({
url: `/v1/mall/product/color/absorb/match`,
method: "get",
})
}

26
src/api/search.ts
View File

@ -3,9 +3,31 @@ import { useRequest } from "@/use/useHttp"
/**
* 获取热门搜索
*/
export const getHotSearchApi = () => {
export const GetHotSearchApi = () => {
return useRequest({
url: `/v1/mall/hotSearch`,
url: `/v1/mall/hotSearch/list`,
method: "get",
})
}
/**
* 获取历史搜索
*/
export const GetSearchHistoryApi = () => {
return useRequest({
url: `/v1/mall/searchHistory/list`,
method: "get",
})
}
/**
* 添加搜索关键字
*/
export const AddSearchHistoryApi = () => {
return useRequest({
url: `/v1/mall/searchHistory`,
method: "post",
})
}

7
src/common/constant.js
View File

@ -24,4 +24,9 @@ export const IMG_CND_Prefix = "http://test.cdn.zzfzyc.com"
export const CDN_UPLOAD_IMG = `${UPLOAD_CDN_URL || ''}`;
//appid
export const WX_APPID = 'wx68d92d7cbf0b6963'
export const WX_APPID = 'wx68d92d7cbf0b6963'
//场景值
export const SCENE = {
SearchScene : 0 //商城面料搜索
}

2
src/common/fotmat.js
View File

@ -142,5 +142,5 @@ export const toDecimal2 = (x) => {
* @returns
*/
export const formatImgUrl = (url) => {
return IMG_CND_Prefix + url
return url?IMG_CND_Prefix + url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d'
}

130
src/components/filter copy/index copy.tsx Normal file
View File

@ -0,0 +1,130 @@
import { GetProductKindListApi } from "@/api/material";
import Popup, {Params as PopuParams} from "@/components/popup"
import { Input, ScrollView, Text, Textarea, View } from "@tarojs/components"
import { useDidShow } from "@tarojs/taro";
import classnames from "classnames";
import { useEffect, useState } from "react";
import styles from './index.module.scss'
type params = {
onFiltr?: (val:object) => void
} & PopuParams
export default ({onClose, onFiltr, show = false}:params) => {
//搜索条件
const [filterObj, setFilterObj] = useState({
seriesId: '',
minWidth: '',
maxWidth: '',
minWeight: '',
maxWeight: '',
element: ''
})
//获取系列
const {fetchData: kindFetchData} = GetProductKindListApi()
const [kindList, setKindList] = useState<any[]>([])
const getCategoryList = async () => {
let {data} = await kindFetchData()
setKindList(data.list)
}
useEffect(() => {
show&&getCategoryList()
}, [show])
//切换系列
const changeKind = (e) => {
setFilterObj({...filterObj, seriesId:e.id})
}
const onCloseEven = () => {
onClose?.()
}
const onRest = () => {
console.log('12123')
setFilterObj({
seriesId: '',
minWidth: '',
maxWidth: '',
minWeight: '',
maxWeight: '',
element: ''
})
}
useEffect(() => {
console.log(filterObj)
}, [filterObj])
const onVerify = () => {
console.log(filterObj)
onFiltr?.(filterObj)
}
const setNumber = (e, field) => {
console.log(e)
let num = parseFloat(e.detail.value)
if(isNaN(num)) {
filterObj[field] = null
} else {
filterObj[field] = parseFloat(num.toFixed(2))
}
setFilterObj({...filterObj})
}
const setElement = (e) => {
let res = e.detail.value
setFilterObj({...filterObj, element:res})
}
return (
<Popup position="right" show={show} showTitle={false} onClose={() => onCloseEven()} showIconButton={true}>
<View className={styles.popup_main}>
<View className={styles.popup_title}>全部筛选</View>
<ScrollView scrollY className={styles.scroll}>
<View className={styles.popup_filter}>
<View className={styles.popup_filter_item}>
<View className={styles.title}>系列</View>
<View className={styles.btn_list}>
{kindList.map(item => <View key={item.id} onClick={() => changeKind(item)} className={classnames(styles.btn_item, (filterObj.seriesId == item.id)&&styles.select_btn_item)}>{item.name}</View>)}
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>幅宽</View>
<View className={styles.btn_list_input}>
<View className={styles.btn_width}><Input value={filterObj.minWidth} type="digit" onBlur={(e) => setNumber(e,'minWidth')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/></View>
<Text>—</Text>
<View className={styles.btn_width}><Input value={filterObj.maxWidth} type="digit" onBlur={(e) => setNumber(e,'maxWidth')} placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/></View>
<View className={styles.unit}>cm</View>
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>克重</View>
<View className={styles.btn_list_input}>
<View className={styles.btn_width}><Input type="digit" value={filterObj.minWeight} onBlur={(e) => setNumber(e,'minWeight')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/></View>
<Text>—</Text>
<View className={styles.btn_width}><Input type="digit" value={filterObj.maxWeight} onBlur={(e) => setNumber(e,'maxWeight')} placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/></View>
<View className={styles.unit}>g</View>
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>成分</View>
<View className={styles.btn_list_element}>
<Textarea placeholder="请输入" cursorSpacing={60} value={filterObj.element} onInput={(e) => setElement(e)}/>
</View>
</View>
<View className="common_safe_area_y"></View>
</View>
</ScrollView>
<View className={styles.btns_con}>
<View className={styles.btns_two}>
<View className={styles.rest_btn} onClick={() => onRest()}>重置</View>
<View className={styles.verify_btn } onClick={() => onVerify()}>确认</View>
</View>
</View>
</View>
</Popup>
)
}

126
src/components/filter copy/index.module.scss Normal file
View File

@ -0,0 +1,126 @@
.popup_main{
width: 608px;
height: 100vh;
padding: 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
.popup_title{
font-size: $font_size;
font-weight: 700;
text-align: center;
padding: 20px 0;
}
.scroll{
flex:1;
height: 0;
}
.popup_filter{
padding-bottom: 100px;
}
.popup_filter_item{
margin-bottom: 20px;
.title{
font-size: $font_size;
color: $color_font_one;
font-weight: 700;
padding: 20px 0;
}
.btn_list{
display: grid;
grid-template-columns: repeat(3, 165.75px);
justify-content: space-between;
.btn_item{
// width: 165.75px;
height: 69.2px;
background: #f0f0f0;
border-radius: 34px;
text-align: center;
line-height: 69.2px;
font-size: $font_size_medium;
color: $color_font_one;
margin-bottom: 20px;
}
.select_btn_item{
color: $color_main;
background: #ecf5ff;
border: 2px solid #007aff;
width: 161.75px;
height: 65.2px;
}
}
.btn_list_input{
display: flex;
// justify-content: space-between;
align-items: center;
.btn_width {
width: 220px;
height: 70px;
background: #f0f0f0;
border-radius: 50px;
padding: 10px 20px;
box-sizing: border-box;
input{
width: 100%;
height: 100%;
font-size: $font_size_medium;
}
}
.unit{
color: $color_font_one;
font-size: $font_size;
margin-left: 20px;
}
text{
color: #ccc;
padding: 0 20px;
}
.width_main{
}
}
.btn_list_element{
background-color: #F0F0F0;
border-radius: 30px;
padding: 20px;
box-sizing: border-box;
textarea{
width: 100%;
height: 126px;
font-size: $font_size_medium;
}
}
}
.btns_con{
width: 100%;
position: fixed;
bottom:0;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.btns_two{
display: flex;
width: 552px;
height: 82px;
border: 2px solid #cde5ff;
font-size: $font_size_big;
border-radius: 40px;
margin-bottom: 20px;
.rest_btn{
flex:1;
border-radius: 0px 40px 40px 0px;
text-align: center;
line-height: 82px;
color: $color_main;
}
.verify_btn{
flex:1;
border-radius: 0px 40px 40px 0px;
background: #007aff;
text-align: center;
line-height: 82px;
color: #fff;
}
}
}
}

128
src/components/filter copy/index.tsx Normal file
View File

@ -0,0 +1,128 @@
import { GetProductKindListApi } from "@/api/material";
import Popup, {Params as PopuParams} from "@/components/popup"
import { Input, ScrollView, Text, Textarea, View } from "@tarojs/components"
import { useDidShow } from "@tarojs/taro";
import classnames from "classnames";
import { useEffect, useState } from "react";
import styles from './index.module.scss'
type params = {
onFiltr?: (val:object) => void
} & PopuParams
export default ({onClose, onFiltr, show = false}:params) => {
//搜索条件
const [filterObj, setFilterObj] = useState({
seriesId: '',
minWidth: '',
maxWidth: '',
minWeight: '',
maxWeight: '',
element: ''
})
//获取系列
const {fetchData: kindFetchData} = GetProductKindListApi()
const [kindList, setKindList] = useState<any[]>([])
const getCategoryList = async () => {
let {data} = await kindFetchData()
setKindList(data.list)
}
useEffect(() => {
show&&getCategoryList()
}, [show])
//切换系列
const changeKind = (e) => {
setFilterObj({...filterObj, seriesId:e.id})
}
const onCloseEven = () => {
onClose?.()
}
const onRest = () => {
console.log('12123')
setFilterObj({
seriesId: '',
minWidth: '',
maxWidth: '',
minWeight: '',
maxWeight: '',
element: ''
})
}
useEffect(() => {
console.log(filterObj)
}, [filterObj])
const onVerify = () => {
console.log(filterObj)
onFiltr?.(filterObj)
}
const setNumber = (e, field) => {
console.log(e)
let num = parseFloat(e.detail.value)
if(isNaN(num)) {
filterObj[field] = null
} else {
filterObj[field] = parseFloat(num.toFixed(2))
}
setFilterObj({...filterObj})
}
const setElement = (e) => {
let res = e.detail.value
setFilterObj({...filterObj, element:res})
}
return (
<Popup position="right" show={show} showTitle={false} onClose={() => onCloseEven()} showIconButton={true}>
<View className={styles.popup_main}>
<View className={styles.popup_title}>全部筛选</View>
<ScrollView scrollY className={styles.scroll}>
<View className={styles.popup_filter}>
<View className={styles.popup_filter_item}>
<View className={styles.title}>系列</View>
<View className={styles.btn_list}>
{kindList.map(item => <View key={item.id} onClick={() => changeKind(item)} className={classnames(styles.btn_item, (filterObj.seriesId == item.id)&&styles.select_btn_item)}>{item.name}</View>)}
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>幅宽</View>
<View className={styles.btn_list_input}>
<View className={styles.btn_width}><Input value={filterObj.minWidth} type="digit" onBlur={(e) => setNumber(e,'minWidth')} placeholder="请输入幅宽" placeholderStyle="font-size: 26rpx"/></View>
<View className={styles.unit}>cm</View>
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>克重</View>
<View className={styles.btn_list_input}>
<View className={styles.btn_width}><Input type="digit" value={filterObj.minWeight} onBlur={(e) => setNumber(e,'minWeight')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/></View>
<Text>—</Text>
<View className={styles.btn_width}><Input type="digit" value={filterObj.maxWeight} onBlur={(e) => setNumber(e,'maxWeight')} placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/></View>
<View className={styles.unit}>g</View>
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>成分</View>
<View className={styles.btn_list_element}>
<Textarea placeholder="请输入" cursorSpacing={60} value={filterObj.element} onInput={(e) => setElement(e)}/>
</View>
</View>
<View className="common_safe_area_y"></View>
</View>
</ScrollView>
<View className={styles.btns_con}>
<View className={styles.btns_two}>
<View className={styles.rest_btn} onClick={() => onRest()}>重置</View>
<View className={styles.verify_btn } onClick={() => onVerify()}>确认</View>
</View>
</View>
</View>
</Popup>
)
}

4
src/components/filter/index.module.scss
View File

@ -31,7 +31,7 @@
grid-template-columns: repeat(3, 165.75px);
justify-content: space-between;
.btn_item{
width: 165.75px;
// width: 165.75px;
height: 69.2px;
background: #f0f0f0;
border-radius: 34px;
@ -54,7 +54,7 @@
// justify-content: space-between;
align-items: center;
.btn_width {
width: 220px;
flex:1;
height: 70px;
background: #f0f0f0;
border-radius: 50px;

111
src/components/filter/index.tsx
View File

@ -1,101 +1,102 @@
import { GetProductKindListApi } from "@/api/material";
import Popup, {Params as PopuParams} from "@/components/popup"
import { Input, ScrollView, Text, Textarea, View } from "@tarojs/components"
import { useDidShow } from "@tarojs/taro";
import classnames from "classnames";
import { useEffect, useState } from "react";
import styles from './index.module.scss'
type params = {
onFiltr?: (val:object) => void
onFiltr?: (val:object) => void //确定搜索
onRest?: (val:Object) => void //重置
} & PopuParams
export default ({onClose, onFiltr, show = false}:params) => {
const [filterObj, setFilterObj] = useState({
series: '',
minWidth: '',
maxWidth: '',
minWeight: '',
maxWeight: '',
element: ''
export default ({onClose, onFiltr, show = false, onRest}:params) => {
//搜索条件
const [filterObj, setFilterObj] = useState({
seriesId: '',
width: '',
weight: '',
element: ''
})
//获取系列
const {fetchData: kindFetchData} = GetProductKindListApi()
const [kindList, setKindList] = useState<any[]>([])
const getCategoryList = async () => {
let {data} = await kindFetchData()
setKindList(data.list)
}
useEffect(() => {
show&&getCategoryList()
}, [show])
//切换系列
const changeKind = (e) => {
setFilterObj({...filterObj, seriesId:e.id})
}
const onCloseEven = () => {
onClose?.()
}
const onRest = () => {
console.log('12123')
setFilterObj({
series: '',
minWidth: '',
maxWidth: '',
minWeight: '',
maxWeight: '',
//重置数据
const onRestEven = () => {
let res = {
seriesId: '',
width: '',
weight: '',
element: ''
})
}
useEffect(() => {
console.log(filterObj)
}, [filterObj])
const onVerify = () => {
console.log(filterObj)
onFiltr?.(filterObj)
}
const setNumber = (e, field) => {
console.log(e)
let num = parseFloat(e.detail.value)
if(isNaN(num)) {
filterObj[field] = null
} else {
filterObj[field] = parseFloat(num.toFixed(2))
}
setFilterObj(res)
onFiltr?.(filterObj)
onClose?.()
}
//提交搜索
const onVerify = () => {
onFiltr?.(filterObj)
onClose?.()
}
//获取幅宽或克重输入值或成分
const setFieldData = (e, field) => {
filterObj[field] = e.detail.value
setFilterObj({...filterObj})
}
const setElement = (e) => {
let res = e.detail.value
setFilterObj({...filterObj, element:res})
}
return (
<Popup position="right" show={show} showTitle={false} onClose={() => onCloseEven()} showIconButton={true}>
<View className={styles.popup_main}>
<View className={styles.popup_title}>全部筛选</View>
<ScrollView scrollY className={styles.scroll}>
<View className={styles.popup_filter}>
<View className={styles.popup_filter_item}>
<View className={styles.title}>系列</View>
<View className={styles.btn_list}>
<View className={classnames(styles.btn_item, styles.select_btn_item)}>不限</View>
<View className={styles.btn_item}>不限</View>
<View className={styles.btn_item}>不限</View>
<View className={styles.btn_item}>不限</View>
<View className={styles.btn_item}>不限</View>
<View className={styles.btn_item}>不限</View>
{kindList.map(item => <View key={item.id} onClick={() => changeKind(item)} className={classnames(styles.btn_item, (filterObj.seriesId == item.id)&&styles.select_btn_item)}>{item.name}</View>)}
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>幅宽</View>
<View className={styles.btn_list_input}>
<View className={styles.btn_width}><Input value={filterObj.minWidth} type="digit" onBlur={(e) => setNumber(e,'minWidth')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/></View>
<Text>—</Text>
<View className={styles.btn_width}><Input value={filterObj.maxWidth} type="digit" onBlur={(e) => setNumber(e,'maxWidth')} placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/></View>
<View className={styles.btn_width}><Input value={filterObj.width} type="digit" onBlur={(e) => setFieldData(e,'width')} placeholder="请输入幅宽" placeholderStyle="font-size: 26rpx"/></View>
<View className={styles.unit}>cm</View>
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>克重</View>
<View className={styles.btn_list_input}>
<View className={styles.btn_width}><Input type="digit" value={filterObj.minWeight} onBlur={(e) => setNumber(e,'minWeight')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/></View>
<Text>—</Text>
<View className={styles.btn_width}><Input type="digit" value={filterObj.maxWeight} onBlur={(e) => setNumber(e,'maxWeight')} placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/></View>
<View className={styles.unit}>g</View>
<View className={styles.btn_width}><Input type="digit" value={filterObj.weight} onBlur={(e) => setFieldData(e,'weight')} placeholder="请输入克重" placeholderStyle="font-size: 26rpx"/></View>
<View className={styles.unit}>kg</View>
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>成分</View>
<View className={styles.btn_list_element}>
<Textarea placeholder="请输入" cursorSpacing={60} value={filterObj.element} onInput={(e) => setElement(e)}/>
<Textarea placeholder="请输入" cursorSpacing={60} value={filterObj.element} onInput={(e) => setFieldData(e, 'element')}/>
</View>
</View>
@ -104,7 +105,7 @@ export default ({onClose, onFiltr, show = false}:params) => {
</ScrollView>
<View className={styles.btns_con}>
<View className={styles.btns_two}>
<View className={styles.rest_btn} onClick={() => onRest()}>重置</View>
<View className={styles.rest_btn} onClick={() => onRestEven()}>重置</View>
<View className={styles.verify_btn } onClick={() => onVerify()}>确认</View>
</View>
</View>

8
src/components/loadingCard/index.tsx
View File

@ -5,17 +5,19 @@ import { memo } from "react";
type Params = {
styleLoading?: Object,
title?: string
title?: string,
loadingIcon?: false|true
}
export default memo(({
styleLoading = {},
title = "加载中..."
title = "加载中...", //显示的文字
loadingIcon = true //是否显示加载图标
}:Params) => {
console.log('loadingCard:::')
return (
<>
<View className={style.loadingCard_main}>
<Loading/>
{loadingIcon&&<Loading/>}
<View className={style.loading_text}>{title}</View>
</View>
</>

26
src/components/search/index.tsx
View File

@ -17,23 +17,29 @@ type Params = {
btnStyle?: Object,
btnTitle?: string,
debounceTime?: number //防抖时间，不设默认为零
defaultValue?: string
}
export default forwardRef(({
clickOnSearch,
changeOnSearch,
disabled = false,
clickOnSearch, //点击筛选按钮触发
changeOnSearch, //输入文字触发
disabled = false, //是否禁用
placeholder = '输入搜索内容',
showIcon = true,
showBtn = false,
btnStyle = {},
placeIcon = 'inner',
btnTitle = '搜索',
debounceTime = 0,
showIcon = true, //是否显示关闭图标
showBtn = false, //是否显示搜索按钮
btnStyle = {},
placeIcon = 'inner',
btnTitle = '搜索', //搜索文字
debounceTime = 0, //防抖时间，不设默认为零
defaultValue = '' //默认值
}:Params, ref) => {
const [inputCon , setInputCon] = useState('')
const debounceTimeRef = useRef(0)
useEffect(() => {
setInputCon(defaultValue)
}, [defaultValue])
useEffect(() => {
debounceTimeRef.current = debounceTime
}, [debounceTime])
@ -63,7 +69,7 @@ export default forwardRef(({
return (
<>
<View className={styles.search_main} onClick={() => clickOnSearch?.(inputCon)}>
<View className={styles.search_main} >
<View className={styles.search_con}>
{showIcon&&<View className={classnames('iconfont', 'icon-sousuo', styles.icon_a_sousuo1_self, placeIcon=='inner'?styles.icon_inner:styles.icon_out)}></View>}
<Input placeholderStyle='color:#ABABAB; font-size:26rpx' className={classnames(placeIcon=='out'&&styles.input_out)} disabled={disabled} value={inputCon} placeholder={placeholder} onInput={(e) => onInputEven(e)}></Input>

11
src/pages/index/index.tsx
View File

@ -17,7 +17,6 @@ import useLogin from '@/use/useLogin'
export default () => {
const {checkLogin} = useLogin()
useDidShow(async () => {
await checkLogin()
})
@ -42,7 +41,7 @@ export default () => {
const [productData, setProductData] = useState({list:[], total:0})
const [hasMore, setHasMore] = useState(true)
const [filtrate, setFiltrate] = useState({product_kind_id:0, size: 5,page: 1})
const pageNum = useRef(1)
const pageNum = useRef({size:filtrate.size, page:filtrate.page})
const {fetchData: productFetchData, state: productState} = GetProductListApi()
//获取数据方法
const getProductList = async () => {
@ -58,7 +57,7 @@ export default () => {
//点击面料类型
const getProductKindId = async (e) => {
pageNum.current = 1
pageNum.current.page = 1
setFiltrate({...filtrate, size:5, product_kind_id:e.id})
setHasMore(true)
}
@ -68,8 +67,8 @@ export default () => {
if(productData.list.length >= productData.total) {
setHasMore(false)
} else {
pageNum.current++
const newSize = filtrate.size * pageNum.current
pageNum.current.page++
const newSize = pageNum.current.size * pageNum.current.page
setFiltrate({...filtrate, size:newSize})
}
}
@ -80,7 +79,7 @@ export default () => {
//列表下拉刷新
const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
const getRefresherRefresh = async () => {
pageNum.current = 1
pageNum.current.size = 1
setFiltrate({...filtrate, size:5})
setHasMore(true)
setRefresherTriggeredStatus(true)

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

@ -190,6 +190,7 @@
.title{
font-size: $font_size;
color: $color_font_three;
@include common_ellipsis()
}
.tag_list{
display: flex;
@ -209,6 +210,7 @@
font-size: $font_size_medium;
color: $color_font_two;
margin-top: 16px;
@include common_ellipsis()
}
}
}

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

@ -10,11 +10,22 @@ import {useBluetooth} from "@/use/contextBlueTooth"
import {toRgb} from '@/common/bluetooth/color/colorSpace'
import Tabs from "@/components/tabs";
import styles from './hightSearchList.module.scss'
import { useCallback, useEffect, useState } from "react";
import Taro, { useReady } from "@tarojs/taro";
import { useCallback, useEffect, useRef, useState } from "react";
import Taro, { useDidShow, usePullDownRefresh, useReady } from "@tarojs/taro";
import useManualPullDownRefresh from "@/use/useManualPullDownRefresh";
import {GetLabProductApi} from "@/api/material"
import { getFilterData } from "@/common/util";
import { formatHashTag, formatImgUrl } from "@/common/fotmat";
import LoadingCard from "@/components/loadingCard";
import useLogin from "@/use/useLogin";
import { goLink } from "@/common/common";
export default () => {
const {checkLogin} = useLogin()
useDidShow(async () => {
await checkLogin()
})
const [showFilter, setShowFilter] = useState(false)
const [selectList, setSelectList] = useState([
{title: '系列', value:1},
@ -27,6 +38,47 @@ export default () => {
{title: '系列', value:5},
{title: '系列', value:5},
])
//搜索参数
const [searchField, setSearchField] = useState({
l: '',
a: '',
b: '',
page : 1,
size : 10
})
//获取面料列表
const [materialList, setMaterialList] = useState<{list:any[], total:number}>({list:[], total:0})
const {fetchData: materialFetchData, state: materialState} = GetLabProductApi()
const getProductList = async () => {
let {data} = await materialFetchData(getFilterData(searchField))
setMaterialList({list:data.list, total:data.total})
Taro.stopPullDownRefresh()
}
//监听筛选条件变化
useEffect(() => {
getProductList()
}, [searchField])
//上拉加载数据
const pageNum = useRef({size: searchField.size, page: searchField.page})
const [hasMore, setHasMore] = useState(true)
const getScrolltolower = () => {
if(materialList.list.length < materialList.total) {
pageNum.current.page++
const size = pageNum.current.size * pageNum.current.page
setSearchField({...searchField, size })
}
}
//监听获得的数据变化
useEffect(() => {
(materialList.list.length < materialList.total)?setHasMore(true):setHasMore(false)
}, [materialList])
const [scrollStatus, setScrollStatus] = useState(false)
const onscroll = useCallback((e) => {
if(e.detail.scrollTop > 20) {
@ -36,9 +88,9 @@ export default () => {
}
},[])
const {state, measureAndGetLab} = useBluetooth()
const {state: colorState, measureAndGetLab} = useBluetooth()
const getLab = () => {
if(state.connected) {
if(colorState.connected) {
measureAndGetLab()
} else {
Taro.showToast({
@ -50,15 +102,22 @@ export default () => {
const [blueToothColor, setBlueToothColor] = useState('')
useEffect(() => {
if(state.deviceLab) {
console.log('颜色：',state.deviceLab)
const rgb = toRgb([state.deviceLab.L, state.deviceLab.a, state.deviceLab.b])
if(colorState.deviceLab) {
console.log('颜色：',colorState.deviceLab)
const rgb = toRgb([colorState.deviceLab.L, colorState.deviceLab.a, colorState.deviceLab.b])
setBlueToothColor(`rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`)
setSearchField({...searchField, l:rgb[0], a:rgb[1], b:rgb[2], size:10})
}
}, [state.deviceLab])
}, [colorState.deviceLab])
const goLinkPage = (item) => {
goLink('/pages/details/index',{id:item.id})
}
//页面下拉刷新
const res = useManualPullDownRefresh()
usePullDownRefresh(() => {
setSearchField({...searchField ,size : 10})
})
return (
<View className={styles.main}>
<View className={styles.search}>
@ -103,27 +162,30 @@ export default () => {
</View>
</View>
<View className={styles.list}>
<View className={classnames(styles.list_num, scrollStatus&&styles.list_num_shadow)}>搜索结果 (2条记录)</View>
<View className={classnames(styles.list_num, scrollStatus&&styles.list_num_shadow)}>搜索结果 ({materialList.total}条记录)</View>
<View className={styles.scroll}>
<InfiniteScroll
selfonScrollToLower={() => console.log('123123')}
{(materialList.list.length == 0&&materialState.loading)&&<LoadingCard/>}
{(materialList.list.length == 0 && !materialState.loading)&&<LoadingCard title="暂无数据" loadingIcon={false}/>}
{(materialList.list.length > 0)&&<InfiniteScroll
selfonScrollToLower={() => getScrolltolower()}
selfOnScroll={(e) => onscroll(e)}
hasMore={hasMore}
>
<View className={styles.product_list}>
{new Array(9).fill(' ').map(item => {
return <View className={styles.product_item}>
{materialList.list.map(item => {
return <View key={item.id} className={styles.product_item} onClick={() => goLinkPage(item)}>
<View className={styles.product_img}>
<Image mode="aspectFill" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d"></Image>
<View className={styles.color_num}>25色</View>
<Image mode="aspectFill" src={formatImgUrl(item.texture_url)}></Image>
<View className={styles.color_num}>{(item.product_color_code)}#</View>
</View>
<View className={styles.product_info}>
<View className={styles.title}>0770#21S精棉平纹</View>
<View className={styles.introduce}>平纹系列</View>
<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>
</InfiniteScroll>}
</View>
</View>
<Filter show={showFilter} onClose={() => setShowFilter(false)}/>

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

@ -1,15 +1,73 @@
import { View } from '@tarojs/components'
import Search from '@/components/search'
import { goLink } from '@/common/common';
import { alert, goLink } from '@/common/common';
import classnames from "classnames";
import styles from './search.module.scss'
import { useEffect, useRef, useState } from 'react';
import {GetHotSearchApi, GetSearchHistoryApi, AddSearchHistoryApi} from "@/api/search"
import { SCENE } from '@/common/constant';
import useLogin from '@/use/useLogin';
import Taro, { useDidShow } from '@tarojs/taro';
type searchDataParam = {'search_key':''}
export default () => {
const {checkLogin} = useLogin()
useDidShow(async () => {
await checkLogin()
})
const [searchData, setSearchData] = useState<{hotField: searchDataParam[], historyField: searchDataParam[]}>({
hotField: [],
historyField: []
})
//获取热门搜索数据
const {fetchData:hotFetchData} = GetHotSearchApi()
const getHotSearch = async () => {
let {data} = await hotFetchData()
setSearchData((val) => ({...val, hotField: data.list}))
}
//获取历史搜索数据
const {fetchData:HistoryFetchData} = GetSearchHistoryApi()
const getSearchHistory = async () => {
let {data} = await HistoryFetchData()
setSearchData((val) => ({...val, historyField: data.list}))
}
useEffect(() => {
getHotSearch(),
getSearchHistory()
}, [])
//添加搜索关键字
const addSearchField = useRef({key: '', screen: SCENE.SearchScene})
const {fetchData:addFetchData} = AddSearchHistoryApi()
const addSearchHistory = async () => {
await addFetchData(addSearchField.current)
// goLink('/pages/searchList/searchList', {key: addSearchField.current.key})
}
//搜索事件, 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}`
})
}
return (
<View className={styles.main}>
<View className={styles.search}>
<Search style={{width: '100%'}} placeholder="请输入面料关键词" placeIcon="out" showBtn={true} clickOnSearch={() => {}}/>
<Search style={{width: '100%'}} placeholder="请输入面料关键词" placeIcon="out" showBtn={true} clickOnSearch={(e) => searchEvent(e)}/>
</View>
<View className={styles.hot}>
<View className={styles.hot_header}>
@ -17,12 +75,9 @@ export default () => {
<View className={styles.hot_header_up} onClick={() => goLink('/pages/searchList/searchList')}>高级搜索</View>
</View>
<View className={styles.list}>
<View className={styles.item}>9265</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>26s</View>
{searchData?.hotField?.map((item, index) => {
return <View key={index} className={styles.item} onClick={() => searchEvent(item.search_key, false)}>{item.search_key}</View>
})}
</View>
</View>
<View className={styles.history}>
@ -31,12 +86,7 @@ export default () => {
<View className={classnames('iconfont icon-lajixiang', styles.miconfont)}></View>
</View>
<View className={styles.list}>
<View className={styles.item}>9265</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>26s</View>
{searchData?.historyField?.map((item, index) => <View key={index} className={styles.item} onClick={() => searchEvent(item.search_key, false)}>{item.search_key}</View>)}
</View>
</View>
</View>

3
src/pages/searchList/searchList.module.scss
View File

@ -174,6 +174,7 @@
.title{
font-size: $font_size;
color: $color_font_three;
@include common_ellipsis();
}
.tag_list{
display: flex;
@ -184,6 +185,7 @@
font-size: $font_size_min;
border-radius: 5px;
color: $color_main;
@include common_ellipsis();
&:nth-child(2) {
margin-left: 10px;
}
@ -193,6 +195,7 @@
font-size: $font_size_medium;
color: $color_font_two;
margin-top: 16px;
@include common_ellipsis();
}
}
}

131
src/pages/searchList/searchList.tsx
View File

@ -7,22 +7,83 @@ import SortBtn from "@/components/sortBtn";
import SelectData from "./components/selectData";
import { goLink } from "@/common/common";
import styles from './searchList.module.scss'
import { useCallback, useState } from "react";
import { useCallback, useEffect, useRef, useState } from "react";
import useManualPullDownRefresh from "@/use/useManualPullDownRefresh";
import {GetProductListApi} from "@/api/material"
import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro";
import { formatHashTag, formatImgUrl } from "@/common/fotmat";
import { getFilterData } from "@/common/util";
import LoadingCard from "@/components/loadingCard";
import useLogin from "@/use/useLogin";
export default () => {
const {checkLogin} = useLogin()
useDidShow(async () => {
await checkLogin()
})
const [showFilter, setShowFilter] = useState(false)
const [selectList, setSelectList] = useState([
{title: '系列', value:1},
{title: '系列', value:2},
{title: '系列', value:3},
{title: '系列', value:4},
{title: '系列', value:6},
{title: '系列', value:7},
{title: '系列', value:8},
{title: '系列', value:9},
{title: '系列', value:10},
])
const router = useRouter()
const [selectList, setSelectList] = useState<any>([])
//搜索参数
const [searchField, setSearchField] = useState({
code_or_name: router.params.key,
page : 1,
size : 10,
width: '',
weight_density: '',
product_kind_id: '',
component: ''
})
//获取面料列表
const [materialList, setMaterialList] = useState<{list:any[], total:number}>({list:[], total:0})
const {fetchData: materialFetchData, state: materialState} = GetProductListApi()
const getProductList = async () => {
let {data} = await materialFetchData(getFilterData(searchField))
setMaterialList({list:data.list, total:data.total})
Taro.stopPullDownRefresh()
}
//监听筛选条件变化
useEffect(() => {
getProductList()
}, [searchField])
//上拉加载数据
const pageNum = useRef({size: searchField.size, page: searchField.page})
const [hasMore, setHasMore] = useState(true)
const getScrolltolower = () => {
if(materialList.list.length < materialList.total) {
pageNum.current.page++
const size = pageNum.current.size * pageNum.current.page
setSearchField({...searchField, size })
}
}
//监听获得的数据变化
useEffect(() => {
(materialList.list.length < materialList.total)?setHasMore(true):setHasMore(false)
}, [materialList])
//输入了搜索关键字
const getSearchData = (e) => {
setMaterialList(() => ({list:[], total:0}))
setSearchField({...searchField, code_or_name:e, size:10})
}
const goLinkPage = (item) => {
goLink('/pages/details/index',{id:item.id})
}
//页面下拉刷新
usePullDownRefresh(() => {
setSearchField({...searchField ,size : 10})
})
//监听滚动
const [scrollStatus, setScrollStatus] = useState(false)
const onscroll = useCallback((e) => {
if(e.detail.scrollTop > 20) {
@ -32,12 +93,21 @@ export default () => {
}
},[])
//页面下拉刷新
const res = useManualPullDownRefresh()
//获取筛选条件
const getFiltr = (e) => {
setSearchField({
...searchField,
width: e?.width,
weight_density: e?.weight,
size: 10,
component: e.element
})
}
return (
<View className={styles.main}>
<View className={styles.search}>
<Search placeIcon="out" btnStyle={{color: '#007AFF'}}/>
<Search placeIcon="out" placeholder="请输入面料关键词" btnStyle={{color: '#007AFF'}} defaultValue={router.params.key} changeOnSearch={(e) => getSearchData(e)} debounceTime={300}/>
</View>
<View className={styles.filter}>
<View className={styles.filter_all}>
@ -45,7 +115,7 @@ export default () => {
<Text>综合</Text>
<SortBtn status="top"/>
</View>
<View className={styles.text_sc} >
<View className={styles.text_sc}>
<Text>收藏</Text>
<SortBtn status="top"/>
</View>
@ -66,34 +136,37 @@ export default () => {
</View>
</View>
<View className={styles.list}>
<View className={classnames(styles.list_num, scrollStatus&&styles.list_num_shadow)}>搜索结果 (2条记录)</View>
<View className={classnames(styles.list_num, scrollStatus&&styles.list_num_shadow)}>搜索结果 ({materialList.total}条记录)</View>
<View className={styles.scroll}>
<InfiniteScroll
selfonScrollToLower={() => console.log('123123')}
{(materialList.list.length == 0&&materialState.loading)&&<LoadingCard/>}
{(materialList.list.length == 0 && !materialState.loading)&&<LoadingCard title="暂无数据" loadingIcon={false}/>}
{(materialList.list.length > 0)&&<InfiniteScroll
selfonScrollToLower={() => getScrolltolower()}
hasMore={hasMore}
selfOnScroll={(e) => onscroll(e)}
>
<View className={styles.product_list}>
{new Array(9).fill(' ').map(item => {
return <View className={styles.product_item}>
{materialList.list.map(item => {
return <View key={item.id} className={styles.product_item} onClick={() => goLinkPage(item)}>
<View className={styles.product_img}>
<Image mode="aspectFill" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d"></Image>
<View className={styles.color_num}>25色</View>
<Image mode="aspectFill" src={formatImgUrl(item.texture_url)}></Image>
<View className={styles.color_num}>{(item.product_color_count)}色</View>
</View>
<View className={styles.product_info}>
<View className={styles.title}>0770#21S精棉平纹</View>
<View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
<View className={styles.tag_list}>
<View className={styles.tag}>160cm</View>
<View className={styles.tag}>110g</View>
<View className={styles.tag}>{item.width}</View>
<View className={styles.tag}>{item.weight_density}</View>
</View>
<View className={styles.introduce}>67.6%棉24%涤纶6.4%氨纶</View>
<View className={styles.introduce}>{item.component}</View>
</View>
</View>
})}
</View>
</InfiniteScroll>
</InfiniteScroll>}
</View>
</View>
<Filter show={showFilter} onClose={() => setShowFilter(false)}/>
<Filter show={showFilter} onClose={() => setShowFilter(false)} onFiltr={(e) => getFiltr(e)} />
</View>
)
}