diff --git a/iconfont.json b/iconfont.json index 8a9d6f7..d98966a 100644 --- a/iconfont.json +++ b/iconfont.json @@ -1,5 +1,5 @@ { - "symbol_url": "http://at.alicdn.com/t/c/font_3619513_kvbg4xjpk7.js", + "symbol_url": "http://at.alicdn.com/t/c/font_3619513_a8xfcrr18ef.js", "save_dir": "./src/components/iconfont", "trim_icon_prefix": "", "default_icon_size": 36, diff --git a/project.private.config.json b/project.private.config.json index 3deeee0..1da5fee 100644 --- a/project.private.config.json +++ b/project.private.config.json @@ -200,36 +200,15 @@ }, { "name": "", - "pathName": "pages/applyGoods/index", - "query": "orderId=31700", - "launchMode": "default", - "scene": null - }, - { - "name": "", - "pathName": "pages/customerManagement/index", + "pathName": "pages/colorRelated/findColor/index", "query": "", "launchMode": "default", "scene": null }, { "name": "", - "pathName": "pages/applyMoney/index", - "query": "orderId=31712", - "launchMode": "default", - "scene": null - }, - { - "name": "", - "pathName": "pages/applyGoods/index", - "query": "orderId=31708", - "launchMode": "default", - "scene": null - }, - { - "name": "", - "pathName": "pages/refundMoneyDetail/index", - "query": "id=697", + "pathName": "pages/colorRelated/sampleComparison/index", + "query": "", "launchMode": "default", "scene": null } diff --git a/src/api/product/findColor.ts b/src/api/product/findColor.ts index 19b3386..5cdcd4b 100644 --- a/src/api/product/findColor.ts +++ b/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 }) } diff --git a/src/api/product/product.ts b/src/api/product/product.ts index 2e1e927..e559de7 100644 --- a/src/api/product/product.ts +++ b/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', }) } diff --git a/src/components/checkbox/index.tsx b/src/components/checkbox/index.tsx index 9f5a690..6e776ef 100644 --- a/src/components/checkbox/index.tsx +++ b/src/components/checkbox/index.tsx @@ -38,7 +38,6 @@ export default forwardRef((props: params, ref) => { customTextClass = '', hiddenCheckboxIcon = false, } = props - console.log('Rerender component: checkbox', status) const [selected, setSelected] = usePropsValue({ value: status, defaultValue: false diff --git a/src/components/counter/index.tsx b/src/components/counter/index.tsx index 37d405c..f6d51f0 100644 --- a/src/components/counter/index.tsx +++ b/src/components/counter/index.tsx @@ -15,7 +15,6 @@ type params = { disable?: boolean, //是否禁用 } export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0, onChange, onBlue, onClickBtn, unit = '', disable = false}: params) => { - console.log('Rerender component: Counter'); const [value, setValue] = useState({count:defaultNum}) const onPlus = (event) => { @@ -34,7 +33,7 @@ export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0, if(disable) return false let {count} = value let num_res = Big(count).minus(step).toNumber() - num_res = num_res < minNum?minNum:num_res + num_res = num_res < minNum ? minNum : num_res setValue({...value, count:num_res}) onChange?.(parseFloat(num_res)) onClickBtn?.(parseFloat(num_res)) @@ -93,6 +92,8 @@ export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0, const onBluerEven = () => { let num = parseFloat(value.count) + console.log('onInputEven res===>', num) + if (!isNaN(num)) { let count = formatDigits(num) count = checkData(count) diff --git a/src/components/iconfont/iconfont.tsx b/src/components/iconfont/iconfont.tsx index 1a2bb9a..c06af4e 100644 --- a/src/components/iconfont/iconfont.tsx +++ b/src/components/iconfont/iconfont.tsx @@ -24,7 +24,7 @@ function hex2rgb(hex) { return "rgb(" + rgb.join(",") + ")"; } -export type IconNames = 'icon-dianhua' | 'icon-peibu' | 'icon-zhankai1' | 'icon-shouqi1' | 'icon-shouhou1' | 'icon-cangku1' | 'icon-saoma' | 'icon-dizhi1' | 'icon-huodaofukuan' | 'icon-yufukuan1' | 'icon-yue' | 'icon-zidingyi' | 'icon-jinetiaozheng' | 'icon-tuikuan1' | 'icon-zhankai' | 'icon-shouqi' | 'icon-lujing' | 'icon-jizhumima' | 'icon-a-jizhumima' | 'icon-weixindenglu' | 'icon-kehuxinxi' | 'icon-yewuyuanqizi' | 'icon-chakanquanbukehu' | 'icon-biyan' | 'icon-bianji' | 'icon-daikuan' | 'icon-cangku' | 'icon-guanlidingdan' | 'icon-mima' | 'icon-guanbi' | 'icon-jianshao' | 'icon-dingwei' | 'icon-saomiao' | 'icon-peihuo' | 'icon-shaixuan' | 'icon-paiming' | 'icon-shanchusousuoxinxi' | 'icon-shijian' | 'icon-sousuo' | 'icon-shouhou' | 'icon-sousuofanhui' | 'icon-sousuoshanchu' | 'icon-tuikuan' | 'icon-tishi' | 'icon-xianxiahuizong' | 'icon-xinzeng' | 'icon-yonghuming' | 'icon-yanjing' | 'icon-yufukuan' | 'icon-wodekefu' | 'icon-dizhi' | 'icon-shouhouzhongxin' | 'icon-wodeshoucang' | 'icon-shoukuanliebiao' | 'icon-madanguanli' | 'icon-qusechazhao' | 'icon-pandiansaoma' | 'icon-yaoqingma' | 'icon-duizhang' | 'icon-tihuoliebiao' | 'icon-yangpinduibi' | 'icon-yansequyang' | 'icon-fahuoliebiao' | 'icon-yuncangkucun' | 'icon-xiaoshou' | 'icon-qianzhicangkucun' | 'icon-lingquseka' | 'icon-gouwu1' | 'icon-dingdan1' | 'icon-gerenzhongxin1' | 'icon-shouye1' | 'icon-gerenzhongxin' | 'icon-dingdan' | 'icon-shouye' | 'icon-gouwu'; +export type IconNames = 'icon-shangchuanwenli' | 'icon-gouwuche' | 'icon-zixun' | 'icon-dianhua' | 'icon-peibu' | 'icon-zhankai1' | 'icon-shouqi1' | 'icon-shouhou1' | 'icon-cangku1' | 'icon-saoma' | 'icon-dizhi1' | 'icon-huodaofukuan' | 'icon-yufukuan1' | 'icon-yue' | 'icon-zidingyi' | 'icon-jinetiaozheng' | 'icon-tuikuan1' | 'icon-zhankai' | 'icon-shouqi' | 'icon-lujing' | 'icon-jizhumima' | 'icon-a-jizhumima' | 'icon-weixindenglu' | 'icon-kehuxinxi' | 'icon-yewuyuanqizi' | 'icon-chakanquanbukehu' | 'icon-biyan' | 'icon-bianji' | 'icon-daikuan' | 'icon-cangku' | 'icon-guanlidingdan' | 'icon-mima' | 'icon-guanbi' | 'icon-jianshao' | 'icon-dingwei' | 'icon-saomiao' | 'icon-peihuo' | 'icon-shaixuan' | 'icon-paiming' | 'icon-shanchusousuoxinxi' | 'icon-shijian' | 'icon-sousuo' | 'icon-shouhou' | 'icon-sousuofanhui' | 'icon-sousuoshanchu' | 'icon-tuikuan' | 'icon-tishi' | 'icon-xianxiahuizong' | 'icon-xinzeng' | 'icon-yonghuming' | 'icon-yanjing' | 'icon-yufukuan' | 'icon-wodekefu' | 'icon-dizhi' | 'icon-shouhouzhongxin' | 'icon-wodeshoucang' | 'icon-shoukuanliebiao' | 'icon-madanguanli' | 'icon-qusechazhao' | 'icon-pandiansaoma' | 'icon-yaoqingma' | 'icon-duizhang' | 'icon-tihuoliebiao' | 'icon-yangpinduibi' | 'icon-yansequyang' | 'icon-fahuoliebiao' | 'icon-yuncangkucun' | 'icon-xiaoshou' | 'icon-qianzhicangkucun' | 'icon-lingquseka' | 'icon-gouwu1' | 'icon-dingdan1' | 'icon-gerenzhongxin1' | 'icon-shouye1' | 'icon-gerenzhongxin' | 'icon-dingdan' | 'icon-shouye' | 'icon-gouwu'; type PropsType = { name: IconNames; @@ -82,7 +82,16 @@ const IconFont:FC = ({ className={classnames(icon, customClassName)} /> )} */} - {/* icon-dianhua */} + {/* icon-shangchuanwenli */} + + { name === 'icon-shangchuanwenli' && () } +{/* icon-gouwuche */} + + { name === 'icon-gouwuche' && () } +{/* icon-zixun */} + + { name === 'icon-zixun' && () } +{/* icon-dianhua */} { name === 'icon-dianhua' && () } {/* icon-peibu */} diff --git a/src/pages/colorRelated/findColor/components/HistoryColor/index.tsx b/src/pages/colorRelated/findColor/components/HistoryColor/index.tsx index 1335fcb..4a579aa 100644 --- a/src/pages/colorRelated/findColor/components/HistoryColor/index.tsx +++ b/src/pages/colorRelated/findColor/components/HistoryColor/index.tsx @@ -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 = forwardRef((props, ref) => { + const { onColor, showModal, onVisibleChange } = props -const HistoryColor: FC = (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([]) //保留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 ( - + - {!!list?.length ? ( + {list?.length ? ( list.map((item, index) => { return ( - getInfo(item)}> + getInfo(item)}> - {item.code + ' ' + item.name} + {formatHashTag(item.code, item.name)} {formatDateTime(item.p_time)} @@ -78,12 +106,12 @@ const HistoryColor: FC = (props) => { ) }) ) : ( - 暂无数据 + 暂无数据 )} ) -} +}) export default HistoryColor diff --git a/src/pages/colorRelated/findColor/components/LabColor/index.tsx b/src/pages/colorRelated/findColor/components/LabColor/index.tsx index 077fc22..cc56910 100644 --- a/src/pages/colorRelated/findColor/components/LabColor/index.tsx +++ b/src/pages/colorRelated/findColor/components/LabColor/index.tsx @@ -37,7 +37,7 @@ const LabColor: FC = (props) => { return ( - {!!labObj.lab.length ? '' : '点击取色'} + {labObj.lab.length ? '' : '点击取色'} diff --git a/src/pages/colorRelated/findColor/components/RecommendColor/index.module.scss b/src/pages/colorRelated/findColor/components/RecommendColor/index.module.scss index 0b1633a..a994187 100644 --- a/src/pages/colorRelated/findColor/components/RecommendColor/index.module.scss +++ b/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; diff --git a/src/pages/colorRelated/findColor/index.tsx b/src/pages/colorRelated/findColor/index.tsx index 344022a..a49e2f1 100644 --- a/src/pages/colorRelated/findColor/index.tsx +++ b/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>({}) //获取数据 - 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>([]) const [labtime, setLabtime] = useState(+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 - } else if (!listLoading && labArray.length == 0) { + } else if (!colorState.loading && labArray.length == 0) { return -请取色- - } else if (!listLoading && labArray.length > 0 && list?.length == 0) { + } else if (!colorState.loading && labArray.length > 0 && list?.length == 0) { return -暂无数据- - } else if (listLoading) { + } else if (colorState.loading) { return } - } + }, [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 = () => { - + @@ -130,8 +131,8 @@ const FindColor: FC = () => { 历史取样 - - {ResultContainer()} + + {ResultContainer} ) diff --git a/src/pages/colorRelated/sampleComparison/index.tsx b/src/pages/colorRelated/sampleComparison/index.tsx index 471c377..996152c 100644 --- a/src/pages/colorRelated/sampleComparison/index.tsx +++ b/src/pages/colorRelated/sampleComparison/index.tsx @@ -7,6 +7,8 @@ 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' +import { alert } from '@/common/common' export default () => { //搜索参数 const [searchField, setSearchField] = useState({ @@ -18,8 +20,8 @@ export default () => { b2: '', }) type ColorList = { - one?: any - two?: any + one?: Record | null + two?: Record | null } const [colorList, setColorList] = useState({ one: null, @@ -27,7 +29,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 +60,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] }) @@ -99,11 +103,12 @@ export default () => { }) return } + alert.showLoading('分析中') const query = { ...searchField, } const res = await fetchData(query) - if (res.data) { + if (res.success) { setData(res.data) let diffarray = [ res.data.reddish && '偏红', @@ -113,9 +118,10 @@ export default () => { res.data.whitish && '偏亮', res.data.darker && '偏暗', ] - let resCont = diffarray.filter((item) => item).join(',') + let resCont = diffarray.filter(item => item).join(',') setResult(resCont) } + alert.hideLoading() } return ( diff --git a/src/pages/colorRelated/takeColor/components/ColorCard/index.tsx b/src/pages/colorRelated/takeColor/components/ColorCard/index.tsx index 0a18dbd..77c14de 100644 --- a/src/pages/colorRelated/takeColor/components/ColorCard/index.tsx +++ b/src/pages/colorRelated/takeColor/components/ColorCard/index.tsx @@ -1,22 +1,27 @@ 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 - key?: any index?: number onPreviewRgb?: Function onTakeColor?: Function + measureAndGetLab: Function + bluetoothState: BluetoothStateType } -const ColorCard: FC = (params) => { - const { item = {}, index, onTakeColor, onPreviewRgb, key } = params - - const truncation = (ev) => { +const ColorCard: FC = params => { + const { item = {}, index, onTakeColor, onPreviewRgb, currentTakeColorIndex, measureAndGetLab, bluetoothState } = params + console.log('item===>', item) + const truncation = ev => { if (ev) { ev += '' let index = ev.lastIndexOf('.') @@ -30,9 +35,45 @@ const ColorCard: FC = (params) => { return 0 } } + const [moveBorder, setMoveBorder] = useState(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 +81,28 @@ const ColorCard: FC = (params) => { } return ( - - + + - + - {!item.sampling && 末取样} + {color.currentLab?.l == 0 && color.currentLab?.a == 0 && color.currentLab?.b == 0 && 末取样} {formatHashTag(item.product_code, item.product_name)} - {formatHashTag(item.product_color_code, item.product_color_name)} + + {formatHashTag(item.product_color_code, item.product_color_name)}({moveBorder}) + {item.absorb_lab_time && dayjs(item.absorb_lab_time).format('YYYY-MM-DD HH:mm:ss')} @@ -67,9 +110,9 @@ const ColorCard: FC = (params) => { {item.sampling ? '重新取样' : '取样'} - L*: {truncation(item?.currentLab?.l)} - a*: {truncation(item?.currentLab?.a)} - b*: {truncation(item?.currentLab?.b)} + L*: {truncation(color?.currentLab?.l)} + a*: {truncation(color?.currentLab?.a)} + b*: {truncation(color?.currentLab?.b)} diff --git a/src/pages/colorRelated/takeColor/components/Texture/index.tsx b/src/pages/colorRelated/takeColor/components/Texture/index.tsx index 1032eea..e45290c 100644 --- a/src/pages/colorRelated/takeColor/components/Texture/index.tsx +++ b/src/pages/colorRelated/takeColor/components/Texture/index.tsx @@ -5,6 +5,7 @@ import { FC, memo, useMemo, useRef, useState } from 'react' import Upload from '../Upload' import { screenshot } from '@/common/util' import { formatImgUrl, formatUrl } from '@/common/format' +import IconFont from '@/components/iconfont/iconfont' interface TextureEvent { onUploadConfirm?: (file: string) => void @@ -42,8 +43,7 @@ const Texture: FC = params => { {detail.texture_url && } - {/* TODO: 更换iconfont */} - + 上传纹理 diff --git a/src/pages/colorRelated/takeColor/index.module.scss b/src/pages/colorRelated/takeColor/index.module.scss index 6bdce04..d843e6c 100644 --- a/src/pages/colorRelated/takeColor/index.module.scss +++ b/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-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; diff --git a/src/pages/colorRelated/takeColor/index.tsx b/src/pages/colorRelated/takeColor/index.tsx index dc43b24..7f4cf91 100644 --- a/src/pages/colorRelated/takeColor/index.tsx +++ b/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) => { - setShowScreen(bool) - } - const handlePrViewRgb = event => { + const handlePrViewRgb = useCallback(event => { setLabPreview(event) setShowLabPreview(true) + }, []) + + const [currentTakeColorIndex, setCurrentTakeColorIndex] = useState(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[]>([]) - 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[]>([]) + // 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 = () => { - + 颜色列表（{listData?.length ?? 0}） - {showScreen ? ( - - - - - {searchValue.length > 0 && } - - - handleTransfSearch(false)}>取消 + + + + {searchValue.length > 0 && } - ) : ( - handleTransfSearch(true)}> - - - )} + - {listData ? ( + {listData.length ? ( listData.map((item, index) => { - return + return ( + + ) }) ) : ( -请取色- )} - 重置 + + 重置 + 提交 diff --git a/src/pages/shopping/components/colorKindItem/index.tsx b/src/pages/shopping/components/colorKindItem/index.tsx index e0cb12d..88e1e24 100644 --- a/src/pages/shopping/components/colorKindItem/index.tsx +++ b/src/pages/shopping/components/colorKindItem/index.tsx @@ -5,7 +5,7 @@ import { FC, forwardRef, memo, useCallback } from 'react' import classnames from 'classnames' import styles from './index.module.scss' import { debounce } from '@/common/util' -import { formatImgUrl, formatPriceDiv } from '@/common/format' +import { formatImgUrl, formatMeterDiv, formatMeterMul, formatPriceDiv } from '@/common/format' import { EnumSaleMode } from '@/common/Enumerate' import { selectList } from '../../config' import { AdjestShoppingCartApi } from '@/api/shopping/index' @@ -25,7 +25,6 @@ type PropsType = { let ColorKindItem: FC = props => { const { state, purchaserId, itemData, orderType = EnumSaleMode.Bulk } = props - console.log('Rerender component: ColorKindItem', itemData.id) const dispatch = useShoppingDispatch() // console.log('checked==>', checked) @@ -36,7 +35,7 @@ let ColorKindItem: FC = props => { //格式化数量 const formatCount = itemData => { - return itemData.sale_mode == EnumSaleMode.Bulk ? itemData.roll : itemData.length / 100 + return itemData.sale_mode == EnumSaleMode.Bulk ? itemData.roll : formatMeterDiv(itemData.length) } //格式化单位 @@ -68,6 +67,7 @@ let ColorKindItem: FC = props => { // 调整条数/米数的接口 并在调整完成后重新请求整个购物车页面 const getInputValue = debounce(async (num, itemData) => { + console.log('num===>', num) const targetColor: Record = { product_color_id: itemData.product_color_id, roll: 0, @@ -78,7 +78,7 @@ let ColorKindItem: FC = props => { targetColor.roll = num } else { itemData.length = num - targetColor.length = num + targetColor.length = formatMeterMul(num) } const res = await fetchData({ color_list: [targetColor], @@ -89,7 +89,7 @@ let ColorKindItem: FC = props => { if (res.success) { state?.Observer?.notify(purchaserId) } - }, 400) + }, 460) const labAndImgObj = useCallback(item => { return { lab: item.lab, rgb: item.rgb, texture_url: item.product_color_texture_url } }, []) @@ -102,8 +102,6 @@ let ColorKindItem: FC = props => { customTextClass={styles.colorKindItem}> - - {/* */} @@ -124,8 +122,8 @@ let ColorKindItem: FC = props => { digits={selectList[orderType].digits} onClickBtn={e => getInputValue(e, itemData)} unit={formatUnit(itemData)} - minNum={itemData.min_num} - maxNum={itemData.max_num} + minNum={itemData.sale_mode == EnumSaleMode.Bulk ? itemData.min_num : formatMeterDiv(itemData.min_num)} + maxNum={itemData.sale_mode == EnumSaleMode.Bulk ? itemData.max_num : formatMeterDiv(itemData.max_num)} /> diff --git a/src/pages/shopping/components/shoppingCartItem/index.tsx b/src/pages/shopping/components/shoppingCartItem/index.tsx index c448f41..b446318 100644 --- a/src/pages/shopping/components/shoppingCartItem/index.tsx +++ b/src/pages/shopping/components/shoppingCartItem/index.tsx @@ -89,7 +89,6 @@ let ShoppingCartItem: FC = props => { dispatch({ type: ShoppingDispatchType.UPDATE_MULTIPLE_SELECTION, data: false }) } - console.log('Rerender component: shoppingCartItem') const handleClickLayout = () => { if (currentCheckedPurchaserId === itemData?.purchaser_id) { @@ -288,7 +287,6 @@ interface GoodsListPropType { startTransition: React.TransitionStartFunction } const GoodsList = memo(props => { - console.log('Rerender component: GoodsList', props) const { itemData, selected, isPending, startTransition, multipleSelection } = props const currentSelected = useRef(null) @@ -302,6 +300,7 @@ const GoodsList = memo(props => { setComponent( itemData?.[BackEndSaleModeListFieldMap[selected]].length !== 0 ? ( itemData?.[BackEndSaleModeListFieldMap[selected]].map(item => { + console.log('item===>', item) return }) ) : ( @@ -367,10 +366,6 @@ const GoodsList = memo(props => { const withStateSlice = (comp, slice) => { const MemoComp = memo(comp, (prevProps, nextProps) => { let needMemo = true - console.log('---------------props-----------------------') - console.log('props prevProps==>', prevProps.itemData) - console.log('props nextProps==>', nextProps.itemData) - console.log('-----------------props---------------------') if (JSON.stringify(prevProps.itemData) !== JSON.stringify(nextProps.itemData)) { needMemo = false } @@ -381,7 +376,6 @@ const withStateSlice = (comp, slice) => { }) const Wrapper = (props, ref) => { const state = useShoppingState() - console.log('state===>', state) return } return memo(forwardRef(Wrapper)) diff --git a/src/pages/shopping/index.tsx b/src/pages/shopping/index.tsx index 3f5bda5..0bc1bac 100644 --- a/src/pages/shopping/index.tsx +++ b/src/pages/shopping/index.tsx @@ -69,7 +69,6 @@ const ShoppingCartContainer: FC = () => { fetchData(searchOptions) } }) - console.log('Rerender component: ShoppingCartContainer') useEffect(() => { console.log('useEffect fetchData') @@ -94,7 +93,7 @@ const ShoppingCartContainer: FC = () => { const status = dataLoadingStatus({ list: shoppingCartData.list, total: shoppingCartData.total, - status: state.loading, + status: state.loading || true, }) console.log('status==>', status) return status diff --git a/src/styles/common.scss b/src/styles/common.scss index 7298a10..39e7cb0 100644 --- a/src/styles/common.scss +++ b/src/styles/common.scss @@ -92,3 +92,6 @@ $customTabBarHeight: 100px; content: 'E'; font-size: $font_size; } +.filter{ + filter: blur(1); +} diff --git a/src/use/contextBlueTooth.tsx b/src/use/contextBlueTooth.tsx index 7fb43ce..ce97242 100644 --- a/src/use/contextBlueTooth.tsx +++ b/src/use/contextBlueTooth.tsx @@ -14,7 +14,7 @@ interface params { } const Context = React.createContext(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(), /** 正在扫描设备 */ diff --git a/src/use/useHttp.ts b/src/use/useHttp.ts index 3373d8e..3d3cde6 100644 --- a/src/use/useHttp.ts +++ b/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, // 第几次请求