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

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

Browse Source
This commit is contained in:
xuan 2022-11-02 17:53:13 +08:00
parent 7eb3394cd8
commit b5de3a031b
14 changed files with 299 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
project.private.config.json
View File

@ -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
}
]
}

1
src/api/product/findColor.ts
View File

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

2
src/api/product/product.ts
View File

@ -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',
})
}

100
src/pages/colorRelated/findColor/components/HistoryColor/index.tsx
View File

@ -1,69 +1,97 @@
import Popup from "@/components/popup"
import { ScrollView, View } from "@tarojs/components"
import { FC, useEffect, useState } from "react"
import Popup from '@/components/popup'
import { ScrollView, View } from '@tarojs/components'
import { FC, forwardRef, useEffect, useImperativeHandle, useState } from 'react'
import styles from './index.module.scss'
import { formatDateTime} from "@/common/format";
import {toRgb} from '@/common/bluetooth/color/colorSpace'
import Taro from "@tarojs/taro";
import { formatDateTime, formatHashTag } from '@/common/format'
import { toRgb } from '@/common/bluetooth/color/colorSpace'
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 { onColor, showModal } = props
const [show, setShow] = useState(false)
const [visible, setVisible] = usePropsValue({
value: showModal,
defaultValue: showModal,
onChange: onVisibleChange,
})
useEffect(() => {
setShow(showModal)
}, [showModal])
if (visible) {
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([
{
p_time: 0,
lab: [],
code: '',
name: ''
}
])
//获取本地列表（无差别存储版本）
const getList = () => {
let historyColorList = Taro.getStorageSync('historyColor')
console.log('historyColorList==>', historyColorList)
setList(historyColorList || [])
}
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) => {
onColor && onColor(item)
const getInfo = val => {
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

2
src/pages/colorRelated/findColor/components/LabColor/index.tsx
View File

@ -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}>

6
src/pages/colorRelated/findColor/components/RecommendColor/index.module.scss
View File

@ -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;

67
src/pages/colorRelated/findColor/index.tsx
View File

@ -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 () => {
setList([])
await ApiFindColorList({
const getData = async lab => {
const res = await ApiFindColorList({
product_id: product.id,
l: labArray[0],
a: labArray[1],
b: labArray[2],
l: lab[0],
a: lab[1],
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)
useEffect(() => {
setListLoading(colorState.loading)
}, [colorState])
const handleVisibleChange = (visible) => {
setShowHistory(visible)
}
const [showHistory, setShowHistory] = useState(false)
const ResultContainer = () => {
if (!listLoading && list?.length > 0) {
const ResultContainer = useMemo(() => {
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()
getData()
localSave([bluetoothState.deviceLab.L, bluetoothState.deviceLab.a, bluetoothState.deviceLab.b])
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,
lab: labArray,
p_time: +new Date(),
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} />
{ResultContainer()}
<HistoryColor showModal={showHistory} onColor={getColor} onVisibleChange={handleVisibleChange} />
{ResultContainer}
<View className='common_safe_area_y'></View>
</View>
)

21
src/pages/colorRelated/sampleComparison/index.tsx
View File

@ -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
two?: any
one?: Record<string, any> | null
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 rgb = toRgb([(colorList as any).one?.L, (colorList as any).one?.a, (colorList as any).one?.b])
const one = colorList.one
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) {
const rgb = toRgb([(colorList as any).two?.L, (colorList as any).two?.a, (colorList as any).two?.b])
if (isObject(two)) {
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)
}
}

82
src/pages/colorRelated/takeColor/components/ColorCard/index.tsx
View File

@ -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 { item = {}, index, onTakeColor, onPreviewRgb, key } = params
const truncation = (ev) => {
const ColorCard: FC<PropsType> = params => {
const { item = {}, index, onTakeColor, onPreviewRgb, currentTakeColorIndex, measureAndGetLab, bluetoothState } = params
console.log('Rerender component: ColorCard', params)
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 = () => {
onTakeColor && onTakeColor(index)
useEffect(() => {
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.vertical, { 'move-vertical': item.moveBorder == 2 })}>
<View className={classnames(styles['color-list'], { [styles['flash']]: moveBorder === 1 })}>
<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},
${item.currnetRgb?.g},
${item.currnetRgb?.b}
${color.currnetRgb?.r},
${color.currnetRgb?.g},
${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>a*: {truncation(item?.currentLab?.a)}</View>
<View>b*: {truncation(item?.currentLab?.b)}</View>
<View>L*: {truncation(color?.currentLab?.l)}</View>
<View>a*: {truncation(color?.currentLab?.a)}</View>
<View>b*: {truncation(color?.currentLab?.b)}</View>
</View>
</View>
</View>

65
src/pages/colorRelated/takeColor/index.module.scss
View File

@ -36,36 +36,42 @@ page {
align-items: center;
}
.lb-t-serach {
flex: 0 1 60%;
@include flex-vertical-center;
}
.lb-t-serach .icon-a-sousuo1 {
font-size: 38px;
color: #cccccc;
}
.lb-t-serach .lb-t-search-content {
display: flex;
justify-content: flex-end;
align-items: center;
.lb-t-search-content {
position: relative;
width: 100%;
display: flex;
.input-bar {
width: 100%;
box-sizing: border-box;
padding-left: 36px;
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;

136
src/pages/colorRelated/takeColor/index.tsx
View File

@ -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) => {
setShowScreen(bool)
}
const handlePrViewRgb = event => {
const handlePrViewRgb = useCallback(event => {
setLabPreview(event)
setShowLabPreview(true)
}, [])
const [currentTakeColorIndex, setCurrentTakeColorIndex] = useState<number | null>(null)
const handleTakeColor = (index: number) => {
setCurrentTakeColorIndex(index)
}
const lastTakeColorIndex = useRef(null)
const handleTakeColor = async index => {
if (bluetoothState.connected) {
if (lastTakeColorIndex.current != null) {
state.data.list[lastTakeColorIndex.current].moveBorder = 0
}
lastTakeColorIndex.current = index
let item = state.data.list[index]
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 [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 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 => {
item.moveBorder = 0
item.currnetRgb = item.rgb
item.currentLab = item.lab
item.sampling = !(item.currentLab?.l == 0 && item.currentLab?.a == 0 && item.currentLab?.b == 0)
return item
})
setListData(
state.data.list.map(item => {
item.moveBorder = 0
item.currnetRgb = item.rgb
item.currentLab = item.lab
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>
<Input value={searchValue} type='text' onInput={onSearchInput} placeholder='筛选颜色或颜色编号' />
<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 className={styles['lb-t-search-content']}>
<Input type='text' className={styles['input-bar']} onInput={onSearchInput} placeholder='筛选颜色或颜色编号' />
<View onClick={clearSearchValue} className={styles['lb-t-sc-clear']}>
{searchValue.length > 0 && <IconFont name='icon-guanbi' size={36}></IconFont>}
</View>
) : (
<View onClick={() => handleTransfSearch(true)}>
<IconFont name='icon-sousuo' size={40}></IconFont>
</View>
)}
</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>

3
src/styles/common.scss
View File

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

4
src/use/contextBlueTooth.tsx
View File

@ -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(),
/** 正在扫描设备 */

14
src/use/useHttp.ts
View File

@ -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, // 第几次请求