🎈 perf(我的页面优化):

src/pages/searchList/hightSearchList.tsx

@@ -1,220 +1,221 @@
-import { Image, ScrollView, Text, View } from "@tarojs/components"
-import classnames from "classnames";
-import Filter from "@/components/filter";
+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 useLogin from "@/use/useLogin";
-import { goLink } from "@/common/common";
-import SelectData, {ListProps} from "./components/selectData";
-import LabAndImg from "@/components/LabAndImg";
+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 useLogin from '@/use/useLogin'
+import { goLink } from '@/common/common'
+import SelectData, { ListProps } from './components/selectData'
+import LabAndImg from '@/components/LabAndImg'
 
 export default () => {
-    useLogin()
+  useLogin()
 
-    const firstOpen = useRef(true)
-    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 firstOpen = useRef(true)
+  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()
+    firstOpen.current = false
+  }
+
+  //监听筛选条件变化
+  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, materialState])
+
+  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 && !firstOpen.current) {
+      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, page: 1 })
+      setMaterialList(() => ({ list: [], total: 0 }))
+      pageNum.current = { size: 10, page: 1 }
+    }
+  }, [colorState.deviceLab])
+
+  const goLinkPage = (item) => {
+    goLink('/pages/details/index', { id: item.product_id })
+  }
+
+  //获取筛选条件
+  const getFiltr = (e) => {
+    pageNum.current.page = 1
+    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 [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()
-        firstOpen.current = false
+  //筛选条件格式化
+  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])
+  }
 
-    //监听筛选条件变化
-    useEffect(() => {
-        getProductList()
-    }, [searchField])
+  //页面下拉刷新
+  usePullDownRefresh(() => {
+    setSearchField({ ...searchField, size: 10 })
+  })
 
-    //上拉加载数据
-    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 })
-        }
+  //排序
+  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) => {
+    setMaterialList(() => ({ list: [], total: 0 }))
+    if (val == 1) {
+      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' }))
+      setSearchField((e) => ({ ...e, abstract_sort_key: value, size: 10, page: 1 }))
     }
+    pageNum.current = { size: 10, page: 1 }
+  }
 
-    //数据加载状态
-    const statusMore = useMemo(() => {
-        return dataLoadingStatus({list:materialList.list, total: materialList.total, status: materialState.loading})
-    }, [materialList, materialState])
-
-    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 && !firstOpen.current) {
-            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, page:1})
-            setMaterialList(() => ({list:[], total:0}))
-            pageNum.current = {size: 10, page: 1}
-        }
-    }, [colorState.deviceLab])
-
-    const goLinkPage = (item) => {
-        goLink('/pages/details/index',{id:item.product_id})
-    }
-
-    //获取筛选条件
-    const getFiltr = (e) => {
-        pageNum.current.page = 1
-        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) => {
-        setMaterialList(() => ({list:[], total:0}))
-        if(val == 1) {
-            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'}))
-            setSearchField((e) => ({...e, abstract_sort_key: value, size:10, page:1}))
-        }
-        pageNum.current = {size: 10, page: 1}
-    }
-
-    const labAndImgObj = useCallback((item) => {
-        const img =  item?item.texture_url.split(',')[0]:''
-        return {lab:item.lab,rgb:item.rgb,texture_url:img}
-    }, [materialList])
-    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>
+  const labAndImgObj = useCallback(
+    (item) => {
+      const img = item ? item.texture_url.split(',')[0] : ''
+      return { lab: item.lab, rgb: item.rgb, texture_url: img }
+    },
+    [materialList],
+  )
+  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>
-            <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, styles.list_num_shadow)}>搜索结果 ({materialList.total}条记录)</View>
-                <View className={styles.scroll}>
-                    <InfiniteScroll 
-                        selfonScrollToLower={getScrolltolower} 
-                        statusMore={statusMore}
-                    >
-                        <View className={styles.product_list}>
-                            {materialList.list.map(item => {
-                                return <View key={item.id} className={styles.product_item} onClick={() => goLinkPage(item)}>
-                                    <View className={styles.product_img}>
-                                        <LabAndImg value={labAndImgObj(item)}/>
-                                        <View className={styles.color_num}>{(item.product_color_code)}</View>
-                                    </View>
-                                    <View className={styles.product_info}>
-                                        <View className={styles.title}>{formatHashTag(item.product_code, item.product_name)}</View>
-                                        <View className={styles.introduce}>{item.product_kind_name}</View>
-                                    </View>
-                                </View>
-                            })}
-                        </View>
-                    </InfiniteScroll>
-                </View>
-            </View>
-            <Filter show={showFilter} onFiltr={(e) => getFiltr(e)} onClose={() => setShowFilter(false)}/>
+          </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, styles.list_num_shadow)}>搜索结果 ({materialList.total}条记录)</View>
+        <View className={styles.scroll}>
+          <InfiniteScroll selfonScrollToLower={getScrolltolower} statusMore={statusMore}>
+            <View className={styles.product_list}>
+              {materialList.list.map((item) => {
+                return (
+                  <View key={item.id} className={styles.product_item} onClick={() => goLinkPage(item)}>
+                    <View className={styles.product_img}>
+                      <LabAndImg value={labAndImgObj(item)} />
+                      <View className={styles.color_num}>{item.product_color_code}</View>
+                    </View>
+                    <View className={styles.product_info}>
+                      <View className={styles.title}>{formatHashTag(item.product_code, item.product_name)}</View>
+                      <View className={styles.introduce}>{item.product_kind_name}</View>
+                    </View>
+                  </View>
+                )
+              })}
+            </View>
+          </InfiniteScroll>
+        </View>
+      </View>
+      <Filter show={showFilter} onFiltr={(e) => getFiltr(e)} onClose={() => setShowFilter(false)} />
+    </View>
+  )
+}

src/pages/searchList/search.tsx

@@ -1,36 +1,35 @@
-
 import { Text, View } from '@tarojs/components'
 import Search from '@/components/search'
-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, useShareAppMessage } from '@tarojs/taro';
+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, useShareAppMessage } from '@tarojs/taro'
 
-type searchDataParam = {'search_key':''}
+type searchDataParam = { search_key: '' }
 export default () => {
   useLogin()
 
-  const [searchData, setSearchData] = useState<{hotField: searchDataParam[], historyField: searchDataParam[]}>({
+  const [searchData, setSearchData] = useState<{ hotField: searchDataParam[]; historyField: searchDataParam[] }>({
     hotField: [],
-    historyField: []
+    historyField: [],
   })
 
   //获取热门搜索数据
-  const {fetchData:hotFetchData} = GetHotSearchApi()
+  const { fetchData: hotFetchData } = GetHotSearchApi()
   const getHotSearch = async () => {
-    let {data} = await hotFetchData({page:1, size:10})
-    setSearchData((val) => ({...val, hotField: data.list}))
+    let { data } = await hotFetchData({ page: 1, size: 10 })
+    setSearchData((val) => ({ ...val, hotField: data.list }))
   }
 
   //获取历史搜索数据
-  const {fetchData:HistoryFetchData} = GetSearchHistoryApi()
+  const { fetchData: HistoryFetchData } = GetSearchHistoryApi()
   const getSearchHistory = async () => {
-    let {data} = await HistoryFetchData({page:1, size:10})
-    setSearchData((val) => ({...val, historyField: data.list}))
+    let { data } = await HistoryFetchData({ page: 1, size: 10 })
+    setSearchData((val) => ({ ...val, historyField: data.list }))
   }
 
   useDidShow(() => {
@@ -39,53 +38,65 @@ export default () => {
   })
 
   //添加搜索关键字
-  const addSearchField = useRef({key: '', screen: SCENE.SearchScene})
-  const {fetchData:addFetchData} = AddSearchHistoryApi()
+  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 == "") {
+    if (e == '') {
       alert.error('请输入关键词')
       return false
-    } 
+    }
     addSearchField.current.key = e
-    status&&addSearchHistory()
+    status && addSearchHistory()
     Taro.navigateTo({
-        url: `/pages/searchList/searchList?key=${addSearchField.current.key}`
+      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={(e) => searchEvent(e)}/>
+        <Search style={{ width: '100%' }} placeholder='请输入面料关键词' placeIcon='out' showBtn={true} clickOnSearch={(e) => searchEvent(e)} />
       </View>
-      <View className={styles.up_search} onClick={() => goLink('/pages/searchList/hightSearchList')}>高级搜索</View>
-      {searchData?.hotField.length > 0 && <View className={styles.hot}>
-        <View className={styles.hot_header}>
-          <View className={styles.hot_header_title}>热门面料</View>
+      <View className={styles.up_search} onClick={() => goLink('/pages/searchList/hightSearchList')}>
+        高级搜索
+      </View>
+      {searchData?.hotField.length > 0 && (
+        <View className={styles.hot}>
+          <View className={styles.hot_header}>
+            <View className={styles.hot_header_title}>热门面料</View>
+          </View>
+          <View className={styles.list}>
+            {searchData.hotField.map((item) => {
+              return (
+                <View className={styles.item} onClick={() => searchEvent(item.search_key, false)}>
+                  {item.search_key}
+                </View>
+              )
+            })}
+          </View>
         </View>
-        <View className={styles.list}>
-          {searchData.hotField.map((item, index) => {
-            return <View key={index} className={styles.item} onClick={() => searchEvent(item.search_key, false)}>{item.search_key}</View>
-          })}
+      )}
+      {searchData?.historyField.length > 0 && (
+        <View className={styles.history}>
+          <View className={styles.history_header}>
+            <View className={styles.history_header_title}>历史搜索</View>
+            {/* <View className={classnames('iconfont icon-shanchu', styles.miconfont)}></View> */}
+          </View>
+          <View className={styles.list}>
+            {searchData?.historyField?.map((item) => (
+              <View className={styles.item} onClick={() => searchEvent(item.search_key, false)}>
+                {item.search_key}
+              </View>
+            ))}
+          </View>
         </View>
-      </View>}
-      {searchData?.historyField.length > 0 && <View className={styles.history}>
-        <View className={styles.history_header}>
-          <View className={styles.history_header_title}>历史搜索</View>
-          {/* <View className={classnames('iconfont icon-shanchu', styles.miconfont)}></View> */}
-        </View>
-        <View className={styles.list}>
-          {searchData?.historyField?.map((item, index) => <View key={index} className={styles.item} onClick={() => searchEvent(item.search_key, false)}>{item.search_key}</View>)}
-        </View>
-      </View>}
+      )}
     </View>
   )
 }

src/pages/searchList/searchList.tsx

@@ -1,198 +1,199 @@
-import { Image, ScrollView, Text, View } from "@tarojs/components"
-import classnames from "classnames";
+import { Image, ScrollView, Text, View } from '@tarojs/components'
+import classnames from 'classnames'
 import Search from '@/components/search'
-import Filter from "@/components/filter";
+import Filter from '@/components/filter'
 import InfiniteScroll from '@/components/infiniteScroll'
-import SortBtn from "@/components/sortBtn";
-import SelectData, {ListProps} from "./components/selectData";
-import { goLink } from "@/common/common";
-import styles  from './searchList.module.scss'
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import {GetProductListApi} from "@/api/material"
-import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro";
-import { formatHashTag, formatImgUrl } from "@/common/fotmat";
-import { dataLoadingStatus, getFilterData } from "@/common/util";
-import useLogin from "@/use/useLogin";
-import LabAndImg from "@/components/LabAndImg";
+import SortBtn from '@/components/sortBtn'
+import SelectData, { ListProps } from './components/selectData'
+import { goLink } from '@/common/common'
+import styles from './searchList.module.scss'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { GetProductListApi } from '@/api/material'
+import Taro, { useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro'
+import { formatHashTag, formatImgUrl } from '@/common/fotmat'
+import { dataLoadingStatus, getFilterData } from '@/common/util'
+import useLogin from '@/use/useLogin'
+import LabAndImg from '@/components/LabAndImg'
 
 export default () => {
-    useLogin()
+  useLogin()
 
-    const [showFilter, setShowFilter] = useState(false)
-    const router = useRouter()
+  const [showFilter, setShowFilter] = useState(false)
+  const router = useRouter()
 
-    //搜索参数
-    const [searchField, setSearchField] = useState({
-        code_or_name: router.params.key,
-        page : 1,
-        size : 10,
-        width: '',
-        weight_density: '',
-        product_kind_id: '',
-        component: '',
-        abstract_sort_key: ''
+  //搜索参数
+  const [searchField, setSearchField] = useState({
+    code_or_name: router.params.key,
+    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 } = 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 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, materialState])
+
+  //输入了搜索关键字
+  const getSearchData = useCallback((e) => {
+    pageNum.current.page = 1
+    setMaterialList(() => ({ list: [], total: 0 }))
+    setSearchField((val) => ({ ...val, code_or_name: e, size: 10 }))
+    pageNum.current = { size: 10, page: 1 }
+  }, [])
+
+  const goLinkPage = (item) => {
+    goLink('/pages/details/index', { id: item.id })
+  }
+
+  //页面下拉刷新
+  usePullDownRefresh(() => {
+    setSearchField({ ...searchField, size: 10 })
+  })
+
+  //获取筛选条件
+  const getFiltr = (e) => {
+    pageNum.current.page = 1
+    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,
     })
-    
-    //获取面料列表
-    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()
+    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])
+  }
 
-    //监听筛选条件变化
-    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 })
-        }
+  //排序
+  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, size: 10, page: 1 }))
+    } else {
+      const { status, value } = sortCollectionRef.current.changeSort()
+      setSortStatus((e) => ({ ...e, collection: status, comprehensive: 'none' }))
+      setSearchField((e) => ({ ...e, abstract_sort_key: value, size: 10, page: 1 }))
     }
+    pageNum.current = { size: 10, page: 1 }
+  }
 
-    //数据加载状态
-    const statusMore = useMemo(() => {
-        return dataLoadingStatus({list:materialList.list, total: materialList.total, status: materialState.loading})
-    }, [materialList, materialState])
-
-    //输入了搜索关键字
-    const getSearchData = useCallback((e) => {
-        pageNum.current.page = 1
-        setMaterialList(() => ({list:[], total:0}))
-        setSearchField((val) => ({...val, code_or_name:e, size:10}))
-        pageNum.current = {size: 10, page: 1}
-    }, [])
-
-    const goLinkPage = (item) => {
-        goLink('/pages/details/index',{id:item.id})
-    }
-
-    //页面下拉刷新
-    usePullDownRefresh(() => {
-        setSearchField({...searchField ,size : 10})
-    })
-    
-    //获取筛选条件
-    const getFiltr = (e) => {
-        pageNum.current.page = 1
-        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])
-    }
-
-    //排序
-    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, size:10, page:1}))
-        } else {
-            const {status, value} = sortCollectionRef.current.changeSort()
-            setSortStatus((e) => ({...e, collection: status, comprehensive: 'none'}))
-            setSearchField((e) => ({...e, abstract_sort_key: value, size:10, page:1}))
-        }
-        pageNum.current = {size: 10, page: 1}
-    }
-
-    const labAndImgObj = useCallback((item) => {
-        const img =  item?item.texture_url.split(',')[0]:''
-        return {lab:item.lab,rgb:item.rgb,texture_url:img}
-    }, [materialList])
-    return (
-        <View className={styles.main}>
-            <View className={styles.search}>
-                <Search placeIcon="out" placeholder="请输入面料关键词"  defaultValue={router.params.key} changeOnSearch={getSearchData} debounceTime={300}/>
-            </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 className={styles.text_ss} onClick={() => goLink('/pages/searchList/hightSearchList')}>
-                        <Text>高级搜索</Text>
-                        <Text className={classnames('iconfont icon-sousuo', styles.miconfont)}></Text>
-                    </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, styles.list_num_shadow)}>搜索结果 ({materialList.total}条记录)</View>
-                <View className={styles.scroll}>
-                    <InfiniteScroll 
-                        selfonScrollToLower={getScrolltolower} 
-                        statusMore={statusMore}
-                    >
-                        <View className={styles.product_list}>
-                            {materialList.list.map(item => {
-                                return <View key={item.id} className={styles.product_item} onClick={() => goLinkPage(item)}>
-                                    <View className={styles.product_img}>
-                                        <LabAndImg value={labAndImgObj(item)}/>
-                                        <View className={styles.color_num}>{(item.product_color_count)}色</View>
-                                    </View>
-                                    <View className={styles.product_info}>
-                                        <View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
-                                        <View className={styles.tag_list}>
-                                            <View className={styles.tag}>{item.width}</View>
-                                            <View className={styles.tag}>{item.weight_density}</View>
-                                        </View>
-                                        <View className={styles.introduce}>{item.component}</View>
-                                    </View>
-                                </View>
-                            })}
-                        </View>
-                    </InfiniteScroll>
-                </View>
-            </View>
-            <Filter show={showFilter} onClose={() => setShowFilter(false)} onFiltr={(e) => getFiltr(e)} />
+  const labAndImgObj = useCallback(
+    (item) => {
+      const img = item ? item.texture_url.split(',')[0] : ''
+      return { lab: item.lab, rgb: item.rgb, texture_url: img }
+    },
+    [materialList],
+  )
+  return (
+    <View className={styles.main}>
+      <View className={styles.search}>
+        <Search placeIcon='out' placeholder='请输入面料关键词' defaultValue={router.params.key} changeOnSearch={getSearchData} debounceTime={300} />
+      </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 className={styles.text_ss} onClick={() => goLink('/pages/searchList/hightSearchList')}>
+            <Text>高级搜索</Text>
+            <Text className={classnames('iconfont icon-sousuo', styles.miconfont)}></Text>
+          </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, styles.list_num_shadow)}>搜索结果 ({materialList.total}条记录)</View>
+        <View className={styles.scroll}>
+          <InfiniteScroll selfonScrollToLower={getScrolltolower} statusMore={statusMore}>
+            <View className={styles.product_list}>
+              {materialList.list.map((item) => {
+                return (
+                  <View key={item.id} className={styles.product_item} onClick={() => goLinkPage(item)}>
+                    <View className={styles.product_img}>
+                      <LabAndImg value={labAndImgObj(item)} />
+                      <View className={styles.color_num}>{item.product_color_count}色</View>
+                    </View>
+                    <View className={styles.product_info}>
+                      <View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
+                      <View className={styles.tag_list}>
+                        <View className={styles.tag}>{item.width}</View>
+                        <View className={styles.tag}>{item.weight_density}</View>
+                      </View>
+                      <View className={styles.introduce}>{item.component}</View>
+                    </View>
+                  </View>
+                )
+              })}
+            </View>
+          </InfiniteScroll>
+        </View>
+      </View>
+      <Filter show={showFilter} onClose={() => setShowFilter(false)} onFiltr={(e) => getFiltr(e)} />
+    </View>
+  )
+}