✨ feat(颜色取样|取色查找|样品对比): 已完成颜色对比|取色查找|样品对比100%】

project.private.config.json

@@ -197,6 +197,20 @@
           "query": "",
           "launchMode": "default",
           "scene": null
+        },
+        {
+          "name": "",
+          "pathName": "pages/colorRelated/findColor/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
+          "name": "",
+          "pathName": "pages/colorRelated/sampleComparison/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
         }
       ]
     }

src/api/product/findColor.ts

@@ -7,5 +7,6 @@ export const FindColorListApi = () => {
   return useRequest({
     url: `/v1/mp/product/color/absorb/match`,
     method: 'get',
+    pagination: true
   })
 }

src/api/product/product.ts

@@ -3,7 +3,7 @@ import { useRequest } from '@/use/useHttp'
 //取色对比
 export const productabsorbcontrast = () => {
   return useRequest({
-    url: `/v1/mall/product/color/absorb/contrast`,
+    url: `/v1/mp/product/color/absorb/contrast`,
     method: 'get',
   })
 }

src/pages/colorRelated/findColor/components/HistoryColor/index.tsx

@@ -1,69 +1,97 @@
-import Popup from "@/components/popup"
+import Popup from '@/components/popup'
-import { ScrollView, View } from "@tarojs/components"
+import { ScrollView, View } from '@tarojs/components'
-import { FC, useEffect, useState } from "react"
+import { FC, forwardRef, useEffect, useImperativeHandle, useState } from 'react'
 import styles from './index.module.scss'
-import { formatDateTime} from "@/common/format";
+import { formatDateTime, formatHashTag } from '@/common/format'
-import {toRgb} from '@/common/bluetooth/color/colorSpace'
+import { toRgb } from '@/common/bluetooth/color/colorSpace'
-import Taro from "@tarojs/taro";
+import Taro from '@tarojs/taro'
+import { usePropsValue } from '@/use/useCommon'
 
 type PropsType = {
   showModal: boolean
-  onColor?:Function
+  onVisibleChange?: (visible: boolean) => void
+  onColor?: Function
 }
+type HistoryListItem = {
+  p_time: number
+  lab: number[]
+  code: string
+  name: string
+}
+const HistoryColor: FC<PropsType> = forwardRef((props, ref) => {
+  const { onColor, showModal, onVisibleChange } = props
 
-const HistoryColor: FC<PropsType> = (props) => {
+  const [visible, setVisible] = usePropsValue({
-  
+    value: showModal,
-
+    defaultValue: showModal,
-  const { onColor, showModal } = props
+    onChange: onVisibleChange,
-  const [show, setShow] = useState(false)
+  })
-  
 
   useEffect(() => {
-    setShow(showModal)
+    if (visible) {
-  }, [showModal])
+      getList()
-  
+    }
+  }, [visible])
+
+  useImperativeHandle(
+    ref,
+    () => {
+      return {
+        show: () => setVisible(true),
+        hide: () => setVisible(false),
+        visible,
+      }
+    },
+    [visible],
+  )
 
   const closeEven = () => {
-    setShow(false)
+    console.log('closeEven')
+    setVisible(false)
   }
 
-  const [list, setList] = useState([
+  //获取本地列表（无差别存储版本）
-    {
+  const getList = () => {
-      p_time: 0,
+    let historyColorList = Taro.getStorageSync('historyColor')
-      lab: [],
+    console.log('historyColorList==>', historyColorList)
-      code: '',
+    setList(historyColorList || [])
-      name: ''
+  }
-    }
+
-  ])
+  const [list, setList] = useState<HistoryListItem[]>([])
 
   //保留1位小数
   const noScale = (val, num = 1) => {
     return val?.toFixed(num)
   }
   //rgb转换字符串
-  const labRoRgb = (val) => {
+  const labRoRgb = val => {
     const rgb = toRgb(val)
     return `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`
   }
 
-  const getInfo = (item) => {
+  const getInfo = val => {
-    onColor && onColor(item)
+    const index = list.findIndex(item => item.p_time == val.p_time)
+    let tempList = JSON.parse(JSON.stringify(list))
+    tempList.splice(index, 1)
+    tempList.unshift(val)
+    setList(tempList)
+    Taro.setStorageSync('historyColor', tempList)
+    onColor && onColor(val)
+    setVisible(false)
   }
 
-  
-
   return (
     <View className={styles.history_color}>
-      <Popup title='历史取样记录 ( 最近30条 )' show={show} onClose={closeEven}>
+      <Popup title='历史取样记录 ( 最近30条 )' show={visible} onClose={closeEven}>
         <ScrollView className={styles['selectList-scroll-color']} scrollY>
           <View className={styles.selectCon}>
-            {!!list?.length ? (
+            {list?.length ? (
               list.map((item, index) => {
                 return (
-                  <View key={item.p_time} className={styles.selectList} onClick={() => getInfo(item)}>
+                  <View key={index} className={styles.selectList} onClick={() => getInfo(item)}>
                     <View className={styles.rgbColor} style={{ background: labRoRgb(item.lab) }}></View>
                     <View className={styles.product_con}>
-                      <View className={styles.product_name}>{item.code + ' ' + item.name}</View>
+                      <View className={styles.product_name}>{formatHashTag(item.code, item.name)}</View>
                       <View className={styles.date}>{formatDateTime(item.p_time)}</View>
                     </View>
                     <View className={styles.labColor}>
@@ -78,12 +106,12 @@ const HistoryColor: FC<PropsType> = (props) => {
                 )
               })
             ) : (
-              <View className='noData'>暂无数据</View>
+              <View className={styles.noData}>暂无数据</View>
             )}
           </View>
         </ScrollView>
       </Popup>
     </View>
   )
-}
+})
 export default HistoryColor

src/pages/colorRelated/findColor/components/LabColor/index.tsx

@@ -37,7 +37,7 @@ const LabColor: FC<PropsType> = (props) => {
   return (
     <View className={styles.lab_color_main}>
       <View className={styles.btnColor} onClick={onLabEven} style={{ background: labObj.rgb }}>
-        {!!labObj.lab.length ? '' : '点击取色'}
+        {labObj.lab.length ? '' : '点击取色'}
       </View>
       <View className={styles.labCon}>
         <View className={styles.lab}>

src/pages/colorRelated/findColor/components/RecommendColor/index.module.scss

@@ -53,8 +53,9 @@
         .product_title {
           display: flex;
           justify-content: space-between;
+          align-items: center;
           .product_name {
-            @include common_ellipsis();
+            @include common_ellipsis(2);
             color: #0c68c5;
             font-weight: 700;
             font-size: 28px;
@@ -62,6 +63,9 @@
             margin-right: 10px;
           }
           .product_num {
+            display: flex;
+            justify-content: center;
+            align-items: center;
             background: #c9e4ff;
             color: #00499f;
             padding: 3px 6px;

src/pages/colorRelated/findColor/index.tsx

@@ -1,5 +1,5 @@
 import { View, Text } from '@tarojs/components'
-import { FC, useEffect, useState } from 'react'
+import { FC, useEffect, useMemo, useState } from 'react'
 import styles from './index.module.scss'
 import LineBluetooth from '../components/bluetooth/LinkBlueTooth'
 import HistoryColor from './components/HistoryColor'
@@ -13,29 +13,30 @@ import Taro from '@tarojs/taro'
 import { throttle } from '@/common/util'
 
 const FindColor: FC = () => {
-  const { measureAndGetLab, disconnect, connected, deviceLab } = useBluetooth()
+  const { measureAndGetLab, disconnect, state: bluetoothState } = useBluetooth()
   const { state: colorState, fetchData: ApiFindColorList } = FindColorListApi()
 
   const [list, setList] = useState([])
   const [product, setProduct] = useState<Record<string, any>>({})
 
   //获取数据
-  const getData = async () => {
+  const getData = async lab => {
-    setList([])
+    const res = await ApiFindColorList({
-    await ApiFindColorList({
       product_id: product.id,
-      l: labArray[0],
+      l: lab[0],
-      a: labArray[1],
+      a: lab[1],
-      b: labArray[2],
+      b: lab[2],
     })
-    setList(colorState.data.list)
+    if (res.success) {
+      setList(res.data.list)
+    }
   }
 
   const [labArray, setlabArray] = useState<Array<any>>([])
   const [labtime, setLabtime] = useState<any>(+new Date())
   //点击获取lab按钮
   const labEven = throttle(async () => {
-    if (!connected) {
+    if (!bluetoothState.connected) {
       Taro.showToast({ title: '请先链接设备', icon: 'none' })
       return
     }
@@ -45,6 +46,7 @@ const FindColor: FC = () => {
     }
     await measureAndGetLab()
   }, 500)
+
   const selectInput = (val) => {
     setProduct(val)
     setLabtime('')
@@ -53,6 +55,7 @@ const FindColor: FC = () => {
   }
 
   const getColor = (val) => {
+    console.log('val===>', val)
     setList([])
     setlabArray(val.lab)
     setLabtime(val.p_time)
@@ -62,28 +65,26 @@ const FindColor: FC = () => {
       id: val.id,
       name: val.name,
     })
-    getData()
+    getData(val.lab)
   }
 
-  const [listLoading, setListLoading] = useState(false)
+  const handleVisibleChange = (visible) => {
-
+    setShowHistory(visible)
-  useEffect(() => {
+  }
-    setListLoading(colorState.loading)
-  }, [colorState])
 
   const [showHistory, setShowHistory] = useState(false)
 
-  const ResultContainer = () => {
+  const ResultContainer = useMemo(() => {
-    if (!listLoading && list?.length > 0) {
+    if (!colorState.loading && list?.length > 0) {
       return <RecommendColor customStyle={{ flex: 1 }} list={list} />
-    } else if (!listLoading && labArray.length == 0) {
+    } else if (!colorState.loading && labArray.length == 0) {
       return <View className={styles.noList}>-请取色-</View>
-    } else if (!listLoading && labArray.length > 0 && list?.length == 0) {
+    } else if (!colorState.loading && labArray.length > 0 && list?.length == 0) {
       return <View className={styles.noList}>-暂无数据-</View>
-    } else if (listLoading) {
+    } else if (colorState.loading) {
       return <Loading />
     }
-  }
+  }, [colorState, list])
 
   //历史取样
   const historyShowEven = () => {
@@ -95,22 +96,22 @@ const FindColor: FC = () => {
       Taro.showToast({ title: '请选择面料', icon: 'none' })
       return
     }
-    if (deviceLab) {
+    if (bluetoothState.deviceLab) {
       setLabtime(+new Date())
-      setlabArray([deviceLab.L, deviceLab.a, deviceLab.b])
+      setlabArray([bluetoothState.deviceLab.L, bluetoothState.deviceLab.a, bluetoothState.deviceLab.b])
       // console.log('state.labArray::',state.labArray)
-      localSave()
+      localSave([bluetoothState.deviceLab.L, bluetoothState.deviceLab.a, bluetoothState.deviceLab.b])
-      getData()
+      getData([bluetoothState.deviceLab.L, bluetoothState.deviceLab.a, bluetoothState.deviceLab.b])
     }
-  }, [deviceLab])
+  }, [bluetoothState.deviceLab])
 
   //本地存储取色记录(无差别存储版本)
-  const localSave = () => {
+  const localSave = lab => {
     let historyColorList = Taro.getStorageSync('historyColor') || []
     let obj = {
       ...product,
-      p_time: labtime,
+      p_time: +new Date(),
-      lab: labArray,
+      lab,
     }
     historyColorList.unshift(obj)
     if (historyColorList.length > 30) historyColorList.pop()
@@ -121,7 +122,7 @@ const FindColor: FC = () => {
     <View className={styles.findColor_main}>
       <View className={styles.findColor_main_search}>
         <LineBluetooth></LineBluetooth>
-        <SelectProduct selectColorId={product?.id} noAll={true} onSelect={selectInput} />
+        <SelectProduct selectColorId={product?.id} onSelect={selectInput} />
       </View>
       <LabColor lab={labArray} time={labtime} onLab={labEven} />
       <View className={styles.findColor_main_title}>
@@ -130,8 +131,8 @@ const FindColor: FC = () => {
           <Text onClick={historyShowEven}>历史取样</Text>
         </View>
       </View>
-      <HistoryColor showModal={showHistory} onColor={getColor} />
+      <HistoryColor showModal={showHistory} onColor={getColor} onVisibleChange={handleVisibleChange} />
-      {ResultContainer()}
+      {ResultContainer}
       <View className='common_safe_area_y'></View>
     </View>
   )

src/pages/colorRelated/sampleComparison/index.tsx

@@ -7,6 +7,7 @@ import LinkBlueTooth from '../components/bluetooth/LinkBlueTooth'
 import { toRgb } from '@/common/bluetooth/color/colorSpace'
 import styles from './index.module.scss'
 import { productabsorbcontrast } from '@/api/index'
+import { isObject } from '@tarojs/shared'
 export default () => {
   //搜索参数
   const [searchField, setSearchField] = useState({
@@ -18,8 +19,8 @@ export default () => {
     b2: '',
   })
   type ColorList = {
-    one?: any
+    one?: Record<string, any> | null
-    two?: any
+    two?: Record<string, any> | null
   }
   const [colorList, setColorList] = useState<ColorList>({
     one: null,
@@ -27,7 +28,7 @@ export default () => {
   })
   const { state: colorState, measureAndGetLab } = useBluetooth()
 
-  const getLab = async (val) => {
+  const getLab = async val => {
     if (colorState.connected) {
       let res = await measureAndGetLab()
       if (val === 1) {
@@ -58,14 +59,16 @@ export default () => {
   const [timeTwo, setTimeTwo] = useState('')
   useEffect(() => {
     if (colorState.deviceLab) {
-      if ((colorList as any).one?.constructor === Object) {
+      const one = colorList.one
-        const rgb = toRgb([(colorList as any).one?.L, (colorList as any).one?.a, (colorList as any).one?.b])
+      const two = colorList.two
+      if (isObject(one)) {
+        const rgb = toRgb([one?.L, one?.a, one?.b])
         setBlueToothColor(`rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`)
         setTime(getNowTime())
         setSearchField({ ...searchField, l1: rgb[0], a1: rgb[1], b1: rgb[2] })
       }
-      if ((colorList as any).two?.constructor === Object) {
+      if (isObject(two)) {
-        const rgb = toRgb([(colorList as any).two?.L, (colorList as any).two?.a, (colorList as any).two?.b])
+        const rgb = toRgb([two?.L, two?.a, two?.b])
         setBlueToothColorTwo(`rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`)
         setTimeTwo(getNowTime())
         setSearchField({ ...searchField, l2: rgb[0], a2: rgb[1], b2: rgb[2] })
@@ -103,7 +106,7 @@ export default () => {
       ...searchField,
     }
     const res = await fetchData(query)
-    if (res.data) {
+    if (res.success) {
       setData(res.data)
       let diffarray = [
         res.data.reddish && '偏红',
@@ -113,7 +116,7 @@ export default () => {
         res.data.whitish && '偏亮',
         res.data.darker && '偏暗',
       ]
-      let resCont = diffarray.filter((item) => item).join(',')
+      let resCont = diffarray.filter(item => item).join(',')
       setResult(resCont)
     }
   }

src/pages/colorRelated/takeColor/components/ColorCard/index.tsx

@@ -1,22 +1,28 @@
 import { View, Text } from '@tarojs/components'
-import React, { FC } from 'react'
+import React, { FC, memo, useEffect, useRef, useState, useTransition } from 'react'
 import classnames from 'classnames'
 import styles from './index.module.scss'
 import { formatHashTag } from '@/common/format'
 import dayjs from 'dayjs'
+import { alert } from '@/common/common'
+import { BluetoothStateType } from '@/use/contextBlueTooth'
+import { toRgb } from '@/common/bluetooth/color/colorSpace'
 
 type PropsType = {
+  currentTakeColorIndex?: number | null
   item?: Record<string, any>
-  key?: any
   index?: number
   onPreviewRgb?: Function
   onTakeColor?: Function
+  measureAndGetLab: Function
+  bluetoothState: BluetoothStateType
 }
 
-const ColorCard: FC<PropsType> = (params) => {
+const ColorCard: FC<PropsType> = params => {
-  const { item = {}, index, onTakeColor, onPreviewRgb, key } = params
+  const { item = {}, index, onTakeColor, onPreviewRgb, currentTakeColorIndex, measureAndGetLab, bluetoothState } = params
-
+  console.log('Rerender component: ColorCard', params)
-  const truncation = (ev) => {
+  console.log('item===>', item)
+  const truncation = ev => {
     if (ev) {
       ev += ''
       let index = ev.lastIndexOf('.')
@@ -30,9 +36,45 @@ const ColorCard: FC<PropsType> = (params) => {
       return 0
     }
   }
+  const [moveBorder, setMoveBorder] = useState<number>(0)
+  const [color, setColor] = useState({
+    currnetRgb: item.rgb,
+    currentLab: item.lab,
+  })
 
-  const handleTakeColor = () => {
+  useEffect(() => {
-    onTakeColor && onTakeColor(index)
+    console.log('lastTakeColorIndex,index', currentTakeColorIndex, index)
+    if (currentTakeColorIndex != null && currentTakeColorIndex !== index) {
+      setMoveBorder(0)
+    }
+  }, [currentTakeColorIndex, index])
+
+  const handleTakeColor = async () => {
+    if (bluetoothState.connected) {
+      onTakeColor?.(index)
+
+      setMoveBorder(1)
+      console.log('moveBorder==> start measure', moveBorder)
+      let lab = await measureAndGetLab()
+      //转rgb
+      const rgb = toRgb([lab.L, lab.a, lab.b])
+      setColor({
+        currnetRgb: {
+          r: rgb[0],
+          g: rgb[1],
+          b: rgb[2],
+        },
+        currentLab: {
+          l: lab.L,
+          a: lab.a,
+          b: lab.b,
+        },
+      })
+      setMoveBorder(2)
+      console.log('moveBorder==> end measure', moveBorder)
+    } else {
+      alert.none('请连接蓝牙')
+    }
   }
 
   const handlePreviewRgb = () => {
@@ -40,26 +82,28 @@ const ColorCard: FC<PropsType> = (params) => {
   }
 
   return (
-    <View className={classnames(styles['color-list'], { flash: item.moveBorder == 1 })} key={key}>
+    <View className={classnames(styles['color-list'], { [styles['flash']]: moveBorder === 1 })}>
-      <View className={classnames(styles.vertical, { 'move-vertical': item.moveBorder == 2 })}>
+      <View className={classnames(styles.vertical, { [styles['move-vertical']]: moveBorder === 2 })}>
         <View></View>
       </View>
-      <View className={classnames(styles.horizontal, { 'move-horizontal': item.moveBorder == 2 })}></View>
+      <View className={classnames(styles.horizontal, { [styles['move-horizontal']]: moveBorder === 2 })}></View>
       <View
         onClick={handlePreviewRgb}
         className={styles['c-image']}
         style={{
           backgroundColor: `rgb(
-            ${item.currnetRgb?.r},
+            ${color.currnetRgb?.r},
-            ${item.currnetRgb?.g},
+            ${color.currnetRgb?.g},
-            ${item.currnetRgb?.b}
+            ${color.currnetRgb?.b}
         )`,
         }}>
-        {!item.sampling && <Text>末取样</Text>}
+        {color.currentLab?.l == 0 && color.currentLab?.a == 0 && color.currentLab?.b == 0 && <Text>末取样</Text>}
       </View>
       <View className={styles['c-info']}>
         <View className={styles['c-i-title']}>{formatHashTag(item.product_code, item.product_name)}</View>
-        <Text>{formatHashTag(item.product_color_code, item.product_color_name)}</Text>
+        <Text>
+          {formatHashTag(item.product_color_code, item.product_color_name)}({moveBorder})
+        </Text>
         <View className={styles['c-i-date']}>{item.absorb_lab_time && dayjs(item.absorb_lab_time).format('YYYY-MM-DD HH:mm:ss')}</View>
       </View>
       <View className={styles['c-lab']}>
@@ -67,9 +111,9 @@ const ColorCard: FC<PropsType> = (params) => {
           {item.sampling ? '重新取样' : '取样'}
         </View>
         <View className={styles['c-lab-text']}>
-          <View>L*: {truncation(item?.currentLab?.l)}</View>
+          <View>L*: {truncation(color?.currentLab?.l)}</View>
-          <View>a*: {truncation(item?.currentLab?.a)}</View>
+          <View>a*: {truncation(color?.currentLab?.a)}</View>
-          <View>b*: {truncation(item?.currentLab?.b)}</View>
+          <View>b*: {truncation(color?.currentLab?.b)}</View>
         </View>
       </View>
     </View>

src/pages/colorRelated/takeColor/index.module.scss

@@ -36,36 +36,42 @@ page {
   align-items: center;
 }
 .lb-t-serach {
+  flex: 0 1 60%;
   @include flex-vertical-center;
-}
+  .lb-t-search-content {
-.lb-t-serach .icon-a-sousuo1 {
+    position: relative;
-  font-size: 38px;
+    width: 100%;
-  color: #cccccc;
+    display: flex;
-}
+    .input-bar {
-.lb-t-serach .lb-t-search-content {
+      width: 100%;
-  display: flex;
+      box-sizing: border-box;
-  justify-content: flex-end;
+      padding-left: 36px;
-  align-items: center;
+      border-radius: 100px;
+      padding-right: 100px;
+    }
+    .lb-t-sc-clear {
+      position: absolute;
+      right: 36px;
+      top: 50%;
+      transform: translateY(-50%);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      @include flex-vertical-center;
+      height: 66px;
+      width: 66px;
+      border-radius: 50%;
+      background-color: #e7e7e7;
+      font-size: 28px;
+    }
+  }
 }
 .lb-t-serach .lb-t-search-content > text {
   padding: 10px 0;
   color: #707070;
   font-size: 24px;
 }
-.lb-t-search-content > view {
-  @include flex-vertical-center;
-  width: 280px;
-  height: 66px;
-  background-color: #e7e7e7;
-  border-radius: 30px;
-  margin-right: 10px;
-  font-size: 28px;
-  padding-left: 20px;
-  padding-right: 10px;
-  overflow: hidden;
-}
 .lb-title input {
-  width: 80%;
   height: 66px;
   background-color: #e7e7e7;
   font-size: 26px;
@@ -74,20 +80,7 @@ page {
   color: #fff;
   font-size: 30px;
 }
-.lb-t-sc-clear {
+
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.lb-t-sc-clear .icon-a-cuowuwrong {
-  width: 43px;
-  height: 43px;
-  text-align: center;
-  line-height: 43px;
-  border-radius: 50%;
-  background: #c7c7c7;
-  display: inline-block;
-}
 .not-list {
   font-size: 28px;
   font-weight: 400;

src/pages/colorRelated/takeColor/index.tsx

@@ -1,5 +1,5 @@
 import { View, Input, Text } from '@tarojs/components'
-import { FC, useMemo, useRef, useState } from 'react'
+import { FC, useCallback, useMemo, useRef, useState } from 'react'
 import LinkBlueTooth from '../components/bluetooth/LinkBlueTooth'
 import SelectProduct from '@/components/selectProduct/index'
 import styles from './index.module.scss'
@@ -36,73 +36,54 @@ const TakeColor: FC = () => {
           item.moveBorder = 0
           item.key = index
         })
-        // setListData(res.data?.list)
+        setListData(res.data?.list)
         await detailFetchData({ id: event.id })
       }
       alert.hideLoading()
     } else {
-      state.data.list = []
+      setListData([])
       alert.hideLoading()
     }
   }
 
   const clearSearchValue = () => {
+    console.log('asdfasdf')
     setSearchValue('')
   }
 
-  const handleTransfSearch = (bool: boolean) => {
+  const handlePrViewRgb = useCallback(event => {
-    setShowScreen(bool)
-  }
-  const handlePrViewRgb = event => {
     setLabPreview(event)
     setShowLabPreview(true)
+  }, [])
+
+  const [currentTakeColorIndex, setCurrentTakeColorIndex] = useState<number | null>(null)
+
+  const handleTakeColor = (index: number) => {
+
+    setCurrentTakeColorIndex(index)
   }
 
-  const lastTakeColorIndex = useRef(null)
+  const [listData, setListData] = useState<Record<string, any>[]>([])
-
+  // const listData = useMemo(() => {
-  const handleTakeColor = async index => {
+  //   return state.data?.list?.filter(item => {
-    if (bluetoothState.connected) {
+  //     if (searchValue) {
-      if (lastTakeColorIndex.current != null) {
+  //       return formatHashTag(item.product_color_name, item.product_color_code)!.includes(searchValue)
-        state.data.list[lastTakeColorIndex.current].moveBorder = 0
+  //     }
-      }
+  //     return true
-      lastTakeColorIndex.current = index
+  //   })
-      let item = state.data.list[index]
+  // }, [state.data?.list, state])
-      item.moveBorder = 1
-      let lab = await measureAndGetLab()
-      //转rgb
-      const rgb = toRgb([lab.L, lab.a, lab.b])
-
-      item.sampling = true
-      item.currnetRgb = {
-        r: rgb[0],
-        g: rgb[1],
-        b: rgb[2],
-      }
-      item.currentLab = {
-        l: lab.L,
-        a: lab.a,
-        b: lab.b,
-      }
-      item.moveBorder = 2
-    } else {
-      alert.none('请连接蓝牙')
-    }
-  }
-  // const [listData, setListData] = useState<Record<string, any>[]>([])
-  const listData = useMemo(() => {
-    return state.data?.list?.filter(item => {
-      if (searchValue) {
-        return formatHashTag(item.product_color_name, item.product_color_code)!.includes(searchValue)
-      }
-      return true
-    })
-  }, [state.data?.list, state])
-
-  const [showScreen, setShowScreen] = useState(false)
 
   const onSearchInput = event => {
     const current = event.detail.value
-    setSearchValue(current)
+    if (current === '') {
+      setListData(state.data.list)
+    } else {
+      setListData(
+        state.data?.list?.filter(item => {
+          return formatHashTag(item.product_color_name, item.product_color_code)!.includes(current)
+        }),
+      )
+    }
   }
   // 底部提交
   const handleSubmit = async () => {
@@ -136,14 +117,17 @@ const TakeColor: FC = () => {
   }
   // 重置
   const handleReset = () => {
+    console.log('handleReset')
     if (selectedProduct.id) {
-      state.data.list.map(item => {
+      setListData(
-        item.moveBorder = 0
+        state.data.list.map(item => {
-        item.currnetRgb = item.rgb
+          item.moveBorder = 0
-        item.currentLab = item.lab
+          item.currnetRgb = item.rgb
-        item.sampling = !(item.currentLab?.l == 0 && item.currentLab?.a == 0 && item.currentLab?.b == 0)
+          item.currentLab = item.lab
-        return item
+          item.sampling = !(item.currentLab?.l == 0 && item.currentLab?.a == 0 && item.currentLab?.b == 0)
-      })
+          return item
+        }),
+      )
     } else {
       productSelectEl.current.clickEvent()
       alert.none('请选择面料')
@@ -200,38 +184,42 @@ const TakeColor: FC = () => {
         <LinkBlueTooth />
         <SelectProduct selectColorId={selectedProduct?.id} onSelect={selectInput} ref={productSelectEl} />
       </View>
-      <Texture uploadConfirmState={uploadConfirmState} onUploadConfirm={handleUploadConfirm} list={state.data.list} detail={detail.data} />
+      <Texture uploadConfirmState={uploadConfirmState} onUploadConfirm={handleUploadConfirm} list={listData} detail={detail.data} />
       <View className={styles['list-box']}>
         <View className={styles['lb-title']}>
           <Text>颜色列表（{listData?.length ?? 0}）</Text>
           <View className={styles['lb-t-serach']}>
-            {showScreen ? (
+            <View className={styles['lb-t-search-content']}>
-              <View className={styles['lb-t-search-content']}>
+              <Input type='text' className={styles['input-bar']} onInput={onSearchInput} placeholder='筛选颜色或颜色编号' />
-                <View>
+              <View onClick={clearSearchValue} className={styles['lb-t-sc-clear']}>
-                  <Input value={searchValue} type='text' onInput={onSearchInput} placeholder='筛选颜色或颜色编号' />
+                {searchValue.length > 0 && <IconFont name='icon-guanbi' size={36}></IconFont>}
-                  <View onClick={clearSearchValue} className={styles['lb-t-sc-clear']}>
-                    {searchValue.length > 0 && <IconFont name='icon-guanbi' size={36}></IconFont>}
-                  </View>
-                </View>
-                <Text onClick={() => handleTransfSearch(false)}>取消</Text>
               </View>
-            ) : (
+            </View>
-              <View onClick={() => handleTransfSearch(true)}>
-                <IconFont name='icon-sousuo' size={40}></IconFont>
-              </View>
-            )}
           </View>
         </View>
-        {listData ? (
+        {listData.length ? (
           listData.map((item, index) => {
-            return <ColorCard onPreviewRgb={handlePrViewRgb} onTakeColor={handleTakeColor} key={index} item={item} index={item.key} />
+            return (
+              <ColorCard
+                currentTakeColorIndex={currentTakeColorIndex}
+                onPreviewRgb={handlePrViewRgb}
+                onTakeColor={handleTakeColor}
+                bluetoothState={bluetoothState}
+                measureAndGetLab={measureAndGetLab}
+                key={index}
+                item={item}
+                index={item.key}
+              />
+            )
           })
         ) : (
           <View className={styles['not-list']}>-请取色-</View>
         )}
       </View>
       <View className={styles['fixedBottom-container']}>
-        <View onClick={handleReset}>重置</View>
+        <View onClick={handleReset} hoverClass='filter'>
+          重置
+        </View>
         <View onClick={handleSubmit} className={styles['fb-confirm']}>
           提交
         </View>

src/styles/common.scss

@@ -92,3 +92,6 @@ $customTabBarHeight: 100px;
   content: 'E';
   font-size: $font_size;
 }
+.filter{
+  filter: blur(1);
+}

src/use/contextBlueTooth.tsx

@@ -14,7 +14,7 @@ interface params {
 }
 const Context = React.createContext<params | unknown>(null)
 
-interface stateStype {
+export interface BluetoothStateType {
   listeners: any
   discovering: boolean
   available: boolean
@@ -39,7 +39,7 @@ interface stateStype {
   deviceLab: any
 }
 
-let stateObj: stateStype = {
+let stateObj: BluetoothStateType = {
   /** 事件监听器 */
   listeners: new Set(),
   /** 正在扫描设备 */

src/use/useHttp.ts

@@ -8,16 +8,16 @@ import useLoginRequest from './useLoginRequest'
 
 type Params = {
   code: string | null
-  success: true | false
+  success: boolean
   data: any
   msg: string
-  loading: true | false
+  loading: boolean | null
   error: any
   query: any
   filter: any
   sort: any
   total: number
-  multiple: true | false // 请求多次
+  multiple: boolean // 请求多次
   count: number // 第几次请求
   token: string // token
   page?: number
@@ -31,9 +31,9 @@ type option = {
   data?: OptionData
   page?: number
   pageSize?: number
-  pagination?: true | false
+  pagination?: boolean
   base_url?: string
-  apiMsgStatus?: true | false
+  apiMsgStatus?: boolean
 }
 
 /**
@@ -110,11 +110,13 @@ export const useRequest = (
     success: false, // 请求是否成功
     data: {},
     msg: '',
-    loading: true,
+    loading: null,
     error: null,
     query: {},
     filter: null,
     sort: '',
+    page: options.page || 1,
+    pageSize: options.pageSize || 24,
     total: 0,
     multiple: true, // 请求多次
     count: 0, // 第几次请求