221 lines
9.3 KiB
TypeScript
221 lines
9.3 KiB
TypeScript
import { Image, ScrollView, Text, View } from "@tarojs/components"
|
|
import classnames from "classnames";
|
|
import Filter from "@/components/filter";
|
|
import InfiniteScroll from '@/components/infiniteScroll'
|
|
import SortBtn from "@/components/sortBtn";
|
|
import SearchInput from "@/components/searchInput";
|
|
import LinkBlueTooth from "@/components/bluetooth/LinkBlueTooth";
|
|
import {useBluetooth} from "@/use/contextBlueTooth"
|
|
import {toRgb} from '@/common/bluetooth/color/colorSpace'
|
|
import styles from './hightSearchList.module.scss'
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
import Taro, { useDidShow, usePullDownRefresh, useReady } from "@tarojs/taro";
|
|
import {GetLabProductApi} from "@/api/material"
|
|
import { dataLoadingStatus, 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";
|
|
import SelectData, {ListProps} from "./components/selectData";
|
|
import LabAndImg from "@/components/LabAndImg";
|
|
import useCheckAuthorize from "@/use/useCheckAuthorize";
|
|
|
|
export default () => {
|
|
useLogin()
|
|
const [showFilter, setShowFilter] = useState(false)
|
|
//搜索参数
|
|
const [searchField, setSearchField] = useState({
|
|
l: '',
|
|
a: '',
|
|
b: '',
|
|
page : 1,
|
|
size : 10,
|
|
width: '',
|
|
weight_density: '',
|
|
product_kind_id: '',
|
|
component: '',
|
|
abstract_sort_key: ''
|
|
})
|
|
|
|
//获取面料列表
|
|
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 getScrolltolower = () => {
|
|
if(materialList.list.length < materialList.total) {
|
|
pageNum.current.page++
|
|
const size = pageNum.current.size * pageNum.current.page
|
|
setSearchField({...searchField, size })
|
|
}
|
|
}
|
|
|
|
|
|
//数据加载状态
|
|
const statusMore = useMemo(() => {
|
|
return dataLoadingStatus({list:materialList.list, total: materialList.total, status: materialState.loading})
|
|
}, [materialList])
|
|
|
|
const [scrollStatus, setScrollStatus] = useState(false)
|
|
const onscroll = useCallback((e) => {
|
|
if(e.detail.scrollTop > 20) {
|
|
setScrollStatus(true)
|
|
} else {
|
|
setScrollStatus(false)
|
|
}
|
|
},[])
|
|
|
|
const {state: colorState, measureAndGetLab} = useBluetooth()
|
|
const getLab = () => {
|
|
if(colorState.connected) {
|
|
measureAndGetLab()
|
|
} else {
|
|
Taro.showToast({
|
|
title: '请链接设备',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}
|
|
|
|
//监听lab数据变化
|
|
const [blueToothColor, setBlueToothColor] = useState('')
|
|
useEffect(() => {
|
|
if(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})
|
|
}
|
|
}, [colorState.deviceLab])
|
|
|
|
const goLinkPage = (item) => {
|
|
goLink('/pages/details/index',{id:item.product_id})
|
|
}
|
|
|
|
//获取筛选条件
|
|
const getFiltr = (e) => {
|
|
setMaterialList(() => ({list:[], total:0}))
|
|
const {data} = e
|
|
setSearchField({
|
|
...searchField,
|
|
width: data?.width,
|
|
weight_density: data?.weight,
|
|
size: 10,
|
|
component: data?.element,
|
|
product_kind_id: data?.seriesId
|
|
})
|
|
formatSelectList(e)
|
|
}
|
|
|
|
//筛选条件格式化
|
|
const [selectList , setSelectList] = useState<ListProps[]>()
|
|
const formatSelectList = (val = {data:{}, field:{}}) => {
|
|
let data:ListProps[] = []
|
|
for(let key in val.data) {
|
|
if(key !== 'seriesId'&& val.data[key] != '') {
|
|
data.push({title:val.field[key], value:val.data[key]})
|
|
}
|
|
}
|
|
setSelectList([...data])
|
|
}
|
|
|
|
//页面下拉刷新
|
|
usePullDownRefresh(() => {
|
|
setSearchField({...searchField ,size : 10})
|
|
})
|
|
|
|
//排序
|
|
type sortParam = 'none'|'top'|'bottom'
|
|
const sortComprehensiveRef = useRef<any>(null)
|
|
const sortCollectionRef = useRef<any>(null)
|
|
const [sortStatus, setSortStatus] = useState<{comprehensive:sortParam, collection:sortParam}>({
|
|
comprehensive: 'none',
|
|
collection: 'none'
|
|
})
|
|
const changeSort = (val) => {
|
|
if(val == 1) {
|
|
const {status, value} = sortComprehensiveRef.current.changeSort()
|
|
setSortStatus((e) => ({...e, comprehensive: status, collection: 'none'}))
|
|
setSearchField((e) => ({...e, abstract_sort_key: value}))
|
|
} else {
|
|
const {status, value} = sortCollectionRef.current.changeSort()
|
|
setSortStatus((e) => ({...e, collection: status, comprehensive: 'none'}))
|
|
setSearchField((e) => ({...e, abstract_sort_key: value}))
|
|
}
|
|
}
|
|
return (
|
|
<View className={styles.main}>
|
|
<View className={styles.search}>
|
|
<View className={styles.SearchInput}>
|
|
<LinkBlueTooth/>
|
|
<SearchInput title="提取颜色" showBorder={false}>
|
|
<View className={styles.bluetooth_color} onClick={() => getLab()}>
|
|
{blueToothColor&&<View className={classnames(styles.color_bock)} style={{background:blueToothColor}}></View>||
|
|
<View className={classnames(styles.color_bock_no)} >请取色</View>
|
|
}
|
|
</View>
|
|
</SearchInput>
|
|
</View>
|
|
</View>
|
|
<View className={styles.filter}>
|
|
<View className={styles.filter_all}>
|
|
<View className={styles.text_zh} onClick={() => changeSort(1)}>
|
|
<Text>综合</Text>
|
|
<SortBtn status={sortStatus.comprehensive} ref={sortComprehensiveRef} sortValue={{desc: '1', asc: '-1'}}/>
|
|
</View>
|
|
<View className={styles.text_sc} onClick={() => changeSort(2)}>
|
|
<Text>收藏</Text>
|
|
<SortBtn status={sortStatus.collection} ref={sortCollectionRef} sortValue={{desc: '2', asc: '-2'}}/>
|
|
</View>
|
|
|
|
</View>
|
|
<View className={styles.filter_btn_con}>
|
|
<View className={styles.filter_scroll}>
|
|
<SelectData list={selectList}/>
|
|
</View>
|
|
<View className={styles.filter_more} onClick={() => setShowFilter(true)}>
|
|
<Text>筛选</Text>
|
|
<Text className={classnames('iconfont icon-shaixuan', styles.miconfont)}></Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View className={styles.list}>
|
|
<View className={classnames(styles.list_num, scrollStatus&&styles.list_num_shadow)}>搜索结果 ({materialList.total}条记录)</View>
|
|
<View className={styles.scroll}>
|
|
|
|
<InfiniteScroll
|
|
selfonScrollToLower={() => getScrolltolower()}
|
|
selfOnScroll={(e) => onscroll(e)}
|
|
statusMore={statusMore}
|
|
>
|
|
<View className={styles.product_list}>
|
|
{materialList.list.map(item => {
|
|
return <View key={item.id} className={styles.product_item} onClick={() => goLinkPage(item)}>
|
|
<View className={styles.product_img}>
|
|
<LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}}/>
|
|
<View className={styles.color_num}>{(item.product_color_code)}#</View>
|
|
</View>
|
|
<View className={styles.product_info}>
|
|
<View className={styles.title}>{formatHashTag(item.product_code, item.product_name)}</View>
|
|
<View className={styles.introduce}>{item.product_kind_name}</View>
|
|
</View>
|
|
</View>
|
|
})}
|
|
</View>
|
|
</InfiniteScroll>
|
|
</View>
|
|
</View>
|
|
<Filter show={showFilter} onFiltr={(e) => getFiltr(e)} onClose={() => setShowFilter(false)}/>
|
|
</View>
|
|
)
|
|
} |