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

合并冲突到dev

Browse Source
This commit is contained in:
Haiyi 2022-11-08 13:55:27 +08:00
commit eedc18db75
22 changed files with 316 additions and 268 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
iconfont.json
View File

@ -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", "save_dir": "./src/components/iconfont",
"trim_icon_prefix": "", "trim_icon_prefix": "",
"default_icon_size": 36, "default_icon_size": 36,

27
project.private.config.json
View File

@ -200,36 +200,15 @@
}, },
{ {
"name": "", "name": "",
"pathName": "pages/applyGoods/index", "pathName": "pages/colorRelated/findColor/index",
"query": "orderId=31700",
"launchMode": "default",
"scene": null
},
{
"name": "",
"pathName": "pages/customerManagement/index",
"query": "", "query": "",
"launchMode": "default", "launchMode": "default",
"scene": null "scene": null
}, },
{ {
"name": "", "name": "",
"pathName": "pages/applyMoney/index", "pathName": "pages/colorRelated/sampleComparison/index",
"query": "orderId=31712", "query": "",
"launchMode": "default",
"scene": null
},
{
"name": "",
"pathName": "pages/applyGoods/index",
"query": "orderId=31708",
"launchMode": "default",
"scene": null
},
{
"name": "",
"pathName": "pages/refundMoneyDetail/index",
"query": "id=697",
"launchMode": "default", "launchMode": "default",
"scene": null "scene": null
} }

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

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

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

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

1
src/components/checkbox/index.tsx
View File

@ -38,7 +38,6 @@ export default forwardRef((props: params, ref) => {
customTextClass = '', customTextClass = '',
hiddenCheckboxIcon = false, hiddenCheckboxIcon = false,
} = props } = props
console.log('Rerender component: checkbox', status)
const [selected, setSelected] = usePropsValue({ const [selected, setSelected] = usePropsValue({
value: status, value: status,
defaultValue: false defaultValue: false

5
src/components/counter/index.tsx
View File

@ -15,7 +15,6 @@ type params = {
disable?: boolean, //是否禁用 disable?: boolean, //是否禁用
} }
export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0, onChange, onBlue, onClickBtn, unit = '', disable = false}: params) => { 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<any>({count:defaultNum}) const [value, setValue] = useState<any>({count:defaultNum})
const onPlus = (event) => { const onPlus = (event) => {
@ -34,7 +33,7 @@ export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0,
if(disable) return false if(disable) return false
let {count} = value let {count} = value
let num_res = Big(count).minus(step).toNumber() 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}) setValue({...value, count:num_res})
onChange?.(parseFloat(num_res)) onChange?.(parseFloat(num_res))
onClickBtn?.(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 = () => { const onBluerEven = () => {
let num = parseFloat(value.count) let num = parseFloat(value.count)
console.log('onInputEven res===>', num)
if (!isNaN(num)) { if (!isNaN(num)) {
let count = formatDigits(num) let count = formatDigits(num)
count = checkData(count) count = checkData(count)

13
src/components/iconfont/iconfont.tsx
View File

@ -24,7 +24,7 @@ function hex2rgb(hex) {
return "rgb(" + rgb.join(",") + ")"; 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 = { type PropsType = {
name: IconNames; name: IconNames;
@ -82,7 +82,16 @@ const IconFont:FC<PropsType> = ({
className={classnames(icon, customClassName)} className={classnames(icon, customClassName)}
/> />
)} */} )} */}
{/* icon-dianhua */} {/* icon-shangchuanwenli */}
{ name === 'icon-shangchuanwenli' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M883.2 176A28.8 28.8 0 0 1 912 204.8v261.2736a18.6368 18.6368 0 0 1-32 12.992l-27.9296-28.7232a14.4 14.4 0 0 1-4.0704-10.0352V240h-672v352l182.2336-174.6816a28.8 28.8 0 0 1 40.3712 0.512l139.9296 141.056a28.8 28.8 0 0 1 0 40.576l-6.1056 6.144a28.8256 28.8256 0 0 1-40.8832 0l-112.8832-113.7792L176 688v96h307.1872a28.8 28.8 0 0 1 28.8 28.8v6.4a28.8 28.8 0 0 1-28.8 28.8H140.8A28.8 28.8 0 0 1 112 819.2V204.8A28.8 28.8 0 0 1 140.8 176h742.4z m-118.8608 340.3136l117.1712 116.992a28.8 28.8 0 0 1 0 40.7552l-6.2848 6.272a28.8 28.8 0 0 1-40.704 0L777.6 623.488V819.2a28.8 28.8 0 0 1-28.8 28.8h-9.6A28.8 28.8 0 0 1 710.4 819.2V623.488L653.44 680.32a28.8 28.8 0 0 1-40.704 0l-6.2976-6.2848a28.8 28.8 0 0 1 0.0128-40.7552l117.1712-116.9792a28.8 28.8 0 0 1 40.704 0zM720 304c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(160,160,160)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
{/* icon-gouwuche */}
{ name === 'icon-gouwuche' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 12.510609a185.032348 185.032348 0 0 1 185.032348 185.076869v38.912h-58.457044v-38.956521c0-65.847652-50.309565-119.986087-114.554434-125.996522l-7.479653-0.489739L512 70.967652a126.619826 126.619826 0 0 0-126.619826 126.575305v38.956521H326.878609v-38.956521a185.032348 185.032348 0 0 1 175.860869-184.765218z m295.980522 224.033391c19.945739 0 36.685913 15.09287 38.733913 34.949565l69.89913 681.761392a38.956522 38.956522 0 0 1-38.733913 42.918956H146.120348a38.956522 38.956522 0 0 1-38.733913-42.918956l69.89913-681.761392a38.956522 38.956522 0 0 1 38.733913-34.949565h591.961044z m-17.630609 58.412522H233.605565l-65.892174 642.804869h688.573218l-65.892174-642.804869z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(68,68,68)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
{/* icon-zixun */}
{ name === 'icon-zixun' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 7.261091a412.485818 412.485818 0 0 1 407.598545 349.463273l-5.585454-0.186182a107.054545 107.054545 0 0 1 107.054545 107.054545v210.850909a107.054545 107.054545 0 0 1-107.054545 107.054546h-40.401455a107.054545 107.054545 0 0 1-107.054545-107.054546V463.592727c0-53.713455 39.563636-98.210909 91.229091-105.890909a351.278545 351.278545 0 0 0-691.665455 0.093091A107.008 107.008 0 0 1 257.489455 463.592727v210.850909a107.101091 107.101091 0 0 1-84.48 104.680728 160.581818 160.581818 0 0 0 148.48 99.328h88.901818a106.123636 106.123636 0 0 1 207.592727 25.879272l0.139636 4.840728a106.077091 106.077091 0 0 1-207.732363 30.347636h-88.901818a221.882182 221.882182 0 0 1-212.526546-158.021818h1.070546a107.054545 107.054545 0 0 1-107.054546-107.054546V463.592727a107.054545 107.054545 0 0 1 101.469091-106.961454A412.532364 412.532364 0 0 1 512 7.261091z m0 856.622545a44.962909 44.962909 0 0 0-44.869818 41.751273l-0.093091 3.584a44.962909 44.962909 0 0 0 89.832727 3.211636l0.093091-3.584A44.962909 44.962909 0 0 0 512 863.883636z m412.346182-445.067636v1.489455h-61.067637v-1.489455a45.986909 45.986909 0 0 0-35.653818 44.823273v210.850909c0 25.367273 20.619636 45.940364 45.986909 45.940363h40.401455a45.986909 45.986909 0 0 0 45.986909-45.986909V463.592727a45.986909 45.986909 0 0 0-35.653818-44.776727zM64 463.592727v210.850909c0 21.829818 15.266909 40.122182 35.700364 44.823273l-0.046546-1.536h61.067637l0.046545 1.489455a45.986909 45.986909 0 0 0 35.607273-44.823273V463.592727a45.986909 45.986909 0 0 0-35.653818-44.776727v1.489455H99.653818v-1.489455a45.986909 45.986909 0 0 0-35.653818 44.823273z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(68,68,68)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
{/* icon-dianhua */}
{ name === 'icon-dianhua' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M938.461867 771.925333a59.255467 59.255467 0 0 1 0 83.694934l-41.847467 41.847466c-30.9248 30.9248-71.611733 49.7664-120.9344 55.978667a293.410133 293.410133 0 0 1-36.864 2.286933c-35.84 0-74.581333-6.075733-115.541333-18.090666-111.274667-32.699733-228.2496-106.461867-329.352534-207.5648-101.102933-101.137067-174.865067-218.112-207.530666-329.352534-16.2816-55.3984-21.640533-106.7008-15.872-152.405333 6.2464-49.288533 25.088-89.975467 55.978666-120.900267l41.8816-41.847466a59.255467 59.255467 0 0 1 83.694934 0l184.149333 184.149333a59.255467 59.255467 0 0 1 0 83.694933l-41.847467 41.847467c-23.688533 23.6544-0.1024 100.352 66.9696 167.389867 67.072 67.072 143.701333 90.658133 167.389867 66.9696l41.8816-41.847467a59.255467 59.255467 0 0 1 83.694933 0l184.149334 184.149333z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) } { name === 'icon-dianhua' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M938.461867 771.925333a59.255467 59.255467 0 0 1 0 83.694934l-41.847467 41.847466c-30.9248 30.9248-71.611733 49.7664-120.9344 55.978667a293.410133 293.410133 0 0 1-36.864 2.286933c-35.84 0-74.581333-6.075733-115.541333-18.090666-111.274667-32.699733-228.2496-106.461867-329.352534-207.5648-101.102933-101.137067-174.865067-218.112-207.530666-329.352534-16.2816-55.3984-21.640533-106.7008-15.872-152.405333 6.2464-49.288533 25.088-89.975467 55.978666-120.900267l41.8816-41.847466a59.255467 59.255467 0 0 1 83.694934 0l184.149333 184.149333a59.255467 59.255467 0 0 1 0 83.694933l-41.847467 41.847467c-23.688533 23.6544-0.1024 100.352 66.9696 167.389867 67.072 67.072 143.701333 90.658133 167.389867 66.9696l41.8816-41.847467a59.255467 59.255467 0 0 1 83.694933 0l184.149334 184.149333z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
{/* icon-peibu */} {/* icon-peibu */}

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

@ -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 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 = { type PropsType = {
showModal: boolean 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(() => { useEffect(() => {
setShow(showModal) if (visible) {
}, [showModal]) getList()
}
}, [visible])
useImperativeHandle(
ref,
() => {
return {
show: () => setVisible(true),
hide: () => setVisible(false),
visible,
}
},
[visible],
)
const closeEven = () => { 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位小数 //保留1位小数
const noScale = (val, num = 1) => { const noScale = (val, num = 1) => {
return val?.toFixed(num) return val?.toFixed(num)
} }
//rgb转换字符串 //rgb转换字符串
const labRoRgb = (val) => { const labRoRgb = val => {
const rgb = toRgb(val) const rgb = toRgb(val)
return `rgb(${rgb[0]},${rgb[1]},${rgb[2]})` 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 ( return (
<View className={styles.history_color}> <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> <ScrollView className={styles['selectList-scroll-color']} scrollY>
<View className={styles.selectCon}> <View className={styles.selectCon}>
{!!list?.length ? ( {list?.length ? (
list.map((item, index) => { list.map((item, index) => {
return ( 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.rgbColor} style={{ background: labRoRgb(item.lab) }}></View>
<View className={styles.product_con}> <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 className={styles.date}>{formatDateTime(item.p_time)}</View>
</View> </View>
<View className={styles.labColor}> <View className={styles.labColor}>
@ -78,12 +106,12 @@ const HistoryColor: FC<PropsType> = (props) => {
) )
}) })
) : ( ) : (
<View className='noData'>暂无数据</View> <View className={styles.noData}>暂无数据</View>
)} )}
</View> </View>
</ScrollView> </ScrollView>
</Popup> </Popup>
</View> </View>
) )
} })
export default HistoryColor export default HistoryColor

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

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

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

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

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

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

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

@ -7,6 +7,8 @@ import LinkBlueTooth from '../components/bluetooth/LinkBlueTooth'
import { toRgb } from '@/common/bluetooth/color/colorSpace' import { toRgb } from '@/common/bluetooth/color/colorSpace'
import styles from './index.module.scss' import styles from './index.module.scss'
import { productabsorbcontrast } from '@/api/index' import { productabsorbcontrast } from '@/api/index'
import { isObject } from '@tarojs/shared'
import { alert } from '@/common/common'
export default () => { export default () => {
//搜索参数 //搜索参数
const [searchField, setSearchField] = useState({ const [searchField, setSearchField] = useState({
@ -18,8 +20,8 @@ export default () => {
b2: '', b2: '',
}) })
type ColorList = { type ColorList = {
one?: any one?: Record<string, any> | null
two?: any two?: Record<string, any> | null
} }
const [colorList, setColorList] = useState<ColorList>({ const [colorList, setColorList] = useState<ColorList>({
one: null, one: null,
@ -27,7 +29,7 @@ export default () => {
}) })
const { state: colorState, measureAndGetLab } = useBluetooth() const { state: colorState, measureAndGetLab } = useBluetooth()
const getLab = async (val) => { const getLab = async val => {
if (colorState.connected) { if (colorState.connected) {
let res = await measureAndGetLab() let res = await measureAndGetLab()
if (val === 1) { if (val === 1) {
@ -58,14 +60,16 @@ export default () => {
const [timeTwo, setTimeTwo] = useState('') const [timeTwo, setTimeTwo] = useState('')
useEffect(() => { useEffect(() => {
if (colorState.deviceLab) { 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]})`) setBlueToothColor(`rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`)
setTime(getNowTime()) setTime(getNowTime())
setSearchField({ ...searchField, l1: rgb[0], a1: rgb[1], b1: rgb[2] }) 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]})`) setBlueToothColorTwo(`rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`)
setTimeTwo(getNowTime()) setTimeTwo(getNowTime())
setSearchField({ ...searchField, l2: rgb[0], a2: rgb[1], b2: rgb[2] }) setSearchField({ ...searchField, l2: rgb[0], a2: rgb[1], b2: rgb[2] })
@ -99,11 +103,12 @@ export default () => {
}) })
return return
} }
alert.showLoading('分析中')
const query = { const query = {
...searchField, ...searchField,
} }
const res = await fetchData(query) const res = await fetchData(query)
if (res.data) { if (res.success) {
setData(res.data) setData(res.data)
let diffarray = [ let diffarray = [
res.data.reddish && '偏红', res.data.reddish && '偏红',
@ -113,9 +118,10 @@ export default () => {
res.data.whitish && '偏亮', res.data.whitish && '偏亮',
res.data.darker && '偏暗', res.data.darker && '偏暗',
] ]
let resCont = diffarray.filter((item) => item).join(',') let resCont = diffarray.filter(item => item).join(',')
setResult(resCont) setResult(resCont)
} }
alert.hideLoading()
} }
return ( return (
<View className={styles.body}> <View className={styles.body}>

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

@ -1,22 +1,27 @@
import { View, Text } from '@tarojs/components' 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 classnames from 'classnames'
import styles from './index.module.scss' import styles from './index.module.scss'
import { formatHashTag } from '@/common/format' import { formatHashTag } from '@/common/format'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import { alert } from '@/common/common'
import { BluetoothStateType } from '@/use/contextBlueTooth'
import { toRgb } from '@/common/bluetooth/color/colorSpace'
type PropsType = { type PropsType = {
currentTakeColorIndex?: number | null
item?: Record<string, any> item?: Record<string, any>
key?: any
index?: number index?: number
onPreviewRgb?: Function onPreviewRgb?: Function
onTakeColor?: 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('item===>', item)
const truncation = (ev) => { const truncation = ev => {
if (ev) { if (ev) {
ev += '' ev += ''
let index = ev.lastIndexOf('.') let index = ev.lastIndexOf('.')
@ -30,9 +35,45 @@ const ColorCard: FC<PropsType> = (params) => {
return 0 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 = () => { const handlePreviewRgb = () => {
@ -40,26 +81,28 @@ const ColorCard: FC<PropsType> = (params) => {
} }
return ( 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>
</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 <View
onClick={handlePreviewRgb} onClick={handlePreviewRgb}
className={styles['c-image']} className={styles['c-image']}
style={{ style={{
backgroundColor: `rgb( 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>
<View className={styles['c-info']}> <View className={styles['c-info']}>
<View className={styles['c-i-title']}>{formatHashTag(item.product_code, item.product_name)}</View> <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 className={styles['c-i-date']}>{item.absorb_lab_time && dayjs(item.absorb_lab_time).format('YYYY-MM-DD HH:mm:ss')}</View>
</View> </View>
<View className={styles['c-lab']}> <View className={styles['c-lab']}>
@ -67,9 +110,9 @@ const ColorCard: FC<PropsType> = (params) => {
{item.sampling ? '重新取样' : '取样'} {item.sampling ? '重新取样' : '取样'}
</View> </View>
<View className={styles['c-lab-text']}> <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> </View>
</View> </View>

4
src/pages/colorRelated/takeColor/components/Texture/index.tsx
View File

@ -5,6 +5,7 @@ import { FC, memo, useMemo, useRef, useState } from 'react'
import Upload from '../Upload' import Upload from '../Upload'
import { screenshot } from '@/common/util' import { screenshot } from '@/common/util'
import { formatImgUrl, formatUrl } from '@/common/format' import { formatImgUrl, formatUrl } from '@/common/format'
import IconFont from '@/components/iconfont/iconfont'
interface TextureEvent { interface TextureEvent {
onUploadConfirm?: (file: string) => void onUploadConfirm?: (file: string) => void
@ -42,8 +43,7 @@ const Texture: FC<PropsType> = params => {
<View onClick={handleOpenModal} className={styles['tc-i-upload']}> <View onClick={handleOpenModal} className={styles['tc-i-upload']}>
{detail.texture_url && <Image src={formatUrl(detail.texture_url)} />} {detail.texture_url && <Image src={formatUrl(detail.texture_url)} />}
<View v-else className={styles['tc-i-u-box']}> <View v-else className={styles['tc-i-u-box']}>
{/* TODO: 更换iconfont */} <IconFont name='icon-shangchuanwenli' size={66} color='#707070'></IconFont>
<Text className='iconfont icon-shangchuanzhaopian'></Text>
<View>上传纹理</View> <View>上传纹理</View>
</View> </View>
</View> </View>

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

@ -36,36 +36,42 @@ page {
align-items: center; align-items: center;
} }
.lb-t-serach { .lb-t-serach {
flex: 0 1 60%;
@include flex-vertical-center; @include flex-vertical-center;
} .lb-t-search-content {
.lb-t-serach .icon-a-sousuo1 { position: relative;
font-size: 38px; width: 100%;
color: #cccccc;
}
.lb-t-serach .lb-t-search-content {
display: flex; display: flex;
justify-content: flex-end; .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; 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 { .lb-t-serach .lb-t-search-content > text {
padding: 10px 0; padding: 10px 0;
color: #707070; color: #707070;
font-size: 24px; 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 { .lb-title input {
width: 80%;
height: 66px; height: 66px;
background-color: #e7e7e7; background-color: #e7e7e7;
font-size: 26px; font-size: 26px;
@ -74,20 +80,7 @@ page {
color: #fff; color: #fff;
font-size: 30px; 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 { .not-list {
font-size: 28px; font-size: 28px;
font-weight: 400; font-weight: 400;

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

@ -1,5 +1,5 @@
import { View, Input, Text } from '@tarojs/components' 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 LinkBlueTooth from '../components/bluetooth/LinkBlueTooth'
import SelectProduct from '@/components/selectProduct/index' import SelectProduct from '@/components/selectProduct/index'
import styles from './index.module.scss' import styles from './index.module.scss'
@ -36,73 +36,54 @@ const TakeColor: FC = () => {
item.moveBorder = 0 item.moveBorder = 0
item.key = index item.key = index
}) })
// setListData(res.data?.list) setListData(res.data?.list)
await detailFetchData({ id: event.id }) await detailFetchData({ id: event.id })
} }
alert.hideLoading() alert.hideLoading()
} else { } else {
state.data.list = [] setListData([])
alert.hideLoading() alert.hideLoading()
} }
} }
const clearSearchValue = () => { const clearSearchValue = () => {
console.log('asdfasdf')
setSearchValue('') setSearchValue('')
} }
const handleTransfSearch = (bool: boolean) => { const handlePrViewRgb = useCallback(event => {
setShowScreen(bool)
}
const handlePrViewRgb = event => {
setLabPreview(event) setLabPreview(event)
setShowLabPreview(true) 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 onSearchInput = event => {
const current = event.detail.value 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 () => { const handleSubmit = async () => {
@ -136,14 +117,17 @@ const TakeColor: FC = () => {
} }
// 重置 // 重置
const handleReset = () => { const handleReset = () => {
console.log('handleReset')
if (selectedProduct.id) { if (selectedProduct.id) {
setListData(
state.data.list.map(item => { state.data.list.map(item => {
item.moveBorder = 0 item.moveBorder = 0
item.currnetRgb = item.rgb item.currnetRgb = item.rgb
item.currentLab = item.lab item.currentLab = item.lab
item.sampling = !(item.currentLab?.l == 0 && item.currentLab?.a == 0 && item.currentLab?.b == 0) item.sampling = !(item.currentLab?.l == 0 && item.currentLab?.a == 0 && item.currentLab?.b == 0)
return item return item
}) }),
)
} else { } else {
productSelectEl.current.clickEvent() productSelectEl.current.clickEvent()
alert.none('请选择面料') alert.none('请选择面料')
@ -200,38 +184,42 @@ const TakeColor: FC = () => {
<LinkBlueTooth /> <LinkBlueTooth />
<SelectProduct selectColorId={selectedProduct?.id} onSelect={selectInput} ref={productSelectEl} /> <SelectProduct selectColorId={selectedProduct?.id} onSelect={selectInput} ref={productSelectEl} />
</View> </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['list-box']}>
<View className={styles['lb-title']}> <View className={styles['lb-title']}>
<Text>颜色列表（{listData?.length ?? 0}）</Text> <Text>颜色列表（{listData?.length ?? 0}）</Text>
<View className={styles['lb-t-serach']}> <View className={styles['lb-t-serach']}>
{showScreen ? (
<View className={styles['lb-t-search-content']}> <View className={styles['lb-t-search-content']}>
<View> <Input type='text' className={styles['input-bar']} onInput={onSearchInput} placeholder='筛选颜色或颜色编号' />
<Input value={searchValue} type='text' onInput={onSearchInput} placeholder='筛选颜色或颜色编号' />
<View onClick={clearSearchValue} className={styles['lb-t-sc-clear']}> <View onClick={clearSearchValue} className={styles['lb-t-sc-clear']}>
{searchValue.length > 0 && <IconFont name='icon-guanbi' size={36}></IconFont>} {searchValue.length > 0 && <IconFont name='icon-guanbi' size={36}></IconFont>}
</View> </View>
</View> </View>
<Text onClick={() => handleTransfSearch(false)}>取消</Text>
</View>
) : (
<View onClick={() => handleTransfSearch(true)}>
<IconFont name='icon-sousuo' size={40}></IconFont>
</View>
)}
</View> </View>
</View> </View>
{listData ? ( {listData.length ? (
listData.map((item, index) => { 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 className={styles['not-list']}>-请取色-</View>
)} )}
</View> </View>
<View className={styles['fixedBottom-container']}> <View className={styles['fixedBottom-container']}>
<View onClick={handleReset}>重置</View> <View onClick={handleReset} hoverClass='filter'>
重置
</View>
<View onClick={handleSubmit} className={styles['fb-confirm']}> <View onClick={handleSubmit} className={styles['fb-confirm']}>
提交 提交
</View> </View>

16
src/pages/shopping/components/colorKindItem/index.tsx
View File

@ -5,7 +5,7 @@ import { FC, forwardRef, memo, useCallback } from 'react'
import classnames from 'classnames' import classnames from 'classnames'
import styles from './index.module.scss' import styles from './index.module.scss'
import { debounce } from '@/common/util' 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 { EnumSaleMode } from '@/common/Enumerate'
import { selectList } from '../../config' import { selectList } from '../../config'
import { AdjestShoppingCartApi } from '@/api/shopping/index' import { AdjestShoppingCartApi } from '@/api/shopping/index'
@ -25,7 +25,6 @@ type PropsType = {
let ColorKindItem: FC<PropsType> = props => { let ColorKindItem: FC<PropsType> = props => {
const { state, purchaserId, itemData, orderType = EnumSaleMode.Bulk } = props const { state, purchaserId, itemData, orderType = EnumSaleMode.Bulk } = props
console.log('Rerender component: ColorKindItem', itemData.id)
const dispatch = useShoppingDispatch() const dispatch = useShoppingDispatch()
// console.log('checked==>', checked) // console.log('checked==>', checked)
@ -36,7 +35,7 @@ let ColorKindItem: FC<PropsType> = props => {
//格式化数量 //格式化数量
const formatCount = itemData => { 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<PropsType> = props => {
// 调整条数/米数的接口 并在调整完成后重新请求整个购物车页面 // 调整条数/米数的接口 并在调整完成后重新请求整个购物车页面
const getInputValue = debounce(async (num, itemData) => { const getInputValue = debounce(async (num, itemData) => {
console.log('num===>', num)
const targetColor: Record<string, any> = { const targetColor: Record<string, any> = {
product_color_id: itemData.product_color_id, product_color_id: itemData.product_color_id,
roll: 0, roll: 0,
@ -78,7 +78,7 @@ let ColorKindItem: FC<PropsType> = props => {
targetColor.roll = num targetColor.roll = num
} else { } else {
itemData.length = num itemData.length = num
targetColor.length = num targetColor.length = formatMeterMul(num)
} }
const res = await fetchData({ const res = await fetchData({
color_list: [targetColor], color_list: [targetColor],
@ -89,7 +89,7 @@ let ColorKindItem: FC<PropsType> = props => {
if (res.success) { if (res.success) {
state?.Observer?.notify(purchaserId) state?.Observer?.notify(purchaserId)
} }
}, 400) }, 460)
const labAndImgObj = useCallback(item => { const labAndImgObj = useCallback(item => {
return { lab: item.lab, rgb: item.rgb, texture_url: item.product_color_texture_url } return { lab: item.lab, rgb: item.rgb, texture_url: item.product_color_texture_url }
}, []) }, [])
@ -102,8 +102,6 @@ let ColorKindItem: FC<PropsType> = props => {
customTextClass={styles.colorKindItem}> customTextClass={styles.colorKindItem}>
<View className={styles['colorKindItem__left']}> <View className={styles['colorKindItem__left']}>
<LabAndImg value={labAndImgObj(itemData)} /> <LabAndImg value={labAndImgObj(itemData)} />
{/* <Image className={styles['colorKindItem__left--image']} mode='aspectFill' src={formatImgUrl(itemData.product_color_texture_url)}></Image> */}
</View> </View>
<View className={styles['colorKindItem__center']}> <View className={styles['colorKindItem__center']}>
<Text className={styles['colorKindItem__center--title']}> <Text className={styles['colorKindItem__center--title']}>
@ -124,8 +122,8 @@ let ColorKindItem: FC<PropsType> = props => {
digits={selectList[orderType].digits} digits={selectList[orderType].digits}
onClickBtn={e => getInputValue(e, itemData)} onClickBtn={e => getInputValue(e, itemData)}
unit={formatUnit(itemData)} unit={formatUnit(itemData)}
minNum={itemData.min_num} minNum={itemData.sale_mode == EnumSaleMode.Bulk ? itemData.min_num : formatMeterDiv(itemData.min_num)}
maxNum={itemData.max_num} maxNum={itemData.sale_mode == EnumSaleMode.Bulk ? itemData.max_num : formatMeterDiv(itemData.max_num)}
/> />
</View> </View>
</View> </View>

8
src/pages/shopping/components/shoppingCartItem/index.tsx
View File

@ -89,7 +89,6 @@ let ShoppingCartItem: FC<PropsType> = props => {
dispatch({ type: ShoppingDispatchType.UPDATE_MULTIPLE_SELECTION, data: false }) dispatch({ type: ShoppingDispatchType.UPDATE_MULTIPLE_SELECTION, data: false })
} }
console.log('Rerender component: shoppingCartItem')
const handleClickLayout = () => { const handleClickLayout = () => {
if (currentCheckedPurchaserId === itemData?.purchaser_id) { if (currentCheckedPurchaserId === itemData?.purchaser_id) {
@ -288,7 +287,6 @@ interface GoodsListPropType {
startTransition: React.TransitionStartFunction startTransition: React.TransitionStartFunction
} }
const GoodsList = memo<GoodsListPropType>(props => { const GoodsList = memo<GoodsListPropType>(props => {
console.log('Rerender component: GoodsList', props)
const { itemData, selected, isPending, startTransition, multipleSelection } = props const { itemData, selected, isPending, startTransition, multipleSelection } = props
const currentSelected = useRef<EnumSaleMode | null>(null) const currentSelected = useRef<EnumSaleMode | null>(null)
@ -302,6 +300,7 @@ const GoodsList = memo<GoodsListPropType>(props => {
setComponent( setComponent(
itemData?.[BackEndSaleModeListFieldMap[selected]].length !== 0 ? ( itemData?.[BackEndSaleModeListFieldMap[selected]].length !== 0 ? (
itemData?.[BackEndSaleModeListFieldMap[selected]].map(item => { itemData?.[BackEndSaleModeListFieldMap[selected]].map(item => {
console.log('item===>', item)
return <ColorKindItem purchaserId={itemData.purchaser_id} key={item.id} itemData={item} orderType={selected}></ColorKindItem> return <ColorKindItem purchaserId={itemData.purchaser_id} key={item.id} itemData={item} orderType={selected}></ColorKindItem>
}) })
) : ( ) : (
@ -367,10 +366,6 @@ const GoodsList = memo<GoodsListPropType>(props => {
const withStateSlice = (comp, slice) => { const withStateSlice = (comp, slice) => {
const MemoComp = memo(comp, (prevProps, nextProps) => { const MemoComp = memo(comp, (prevProps, nextProps) => {
let needMemo = true 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)) { if (JSON.stringify(prevProps.itemData) !== JSON.stringify(nextProps.itemData)) {
needMemo = false needMemo = false
} }
@ -381,7 +376,6 @@ const withStateSlice = (comp, slice) => {
}) })
const Wrapper = (props, ref) => { const Wrapper = (props, ref) => {
const state = useShoppingState() const state = useShoppingState()
console.log('state===>', state)
return <MemoComp ref={ref} state={slice(state, props)} {...props} /> return <MemoComp ref={ref} state={slice(state, props)} {...props} />
} }
return memo(forwardRef(Wrapper)) return memo(forwardRef(Wrapper))

3
src/pages/shopping/index.tsx
View File

@ -69,7 +69,6 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
fetchData(searchOptions) fetchData(searchOptions)
} }
}) })
console.log('Rerender component: ShoppingCartContainer')
useEffect(() => { useEffect(() => {
console.log('useEffect fetchData') console.log('useEffect fetchData')
@ -94,7 +93,7 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
const status = dataLoadingStatus({ const status = dataLoadingStatus({
list: shoppingCartData.list, list: shoppingCartData.list,
total: shoppingCartData.total, total: shoppingCartData.total,
status: state.loading, status: state.loading || true,
}) })
console.log('status==>', status) console.log('status==>', status)
return status return status

3
src/styles/common.scss
View File

@ -92,3 +92,6 @@ $customTabBarHeight: 100px;
content: 'E'; content: 'E';
font-size: $font_size; 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) const Context = React.createContext<params | unknown>(null)
interface stateStype { export interface BluetoothStateType {
listeners: any listeners: any
discovering: boolean discovering: boolean
available: boolean available: boolean
@ -39,7 +39,7 @@ interface stateStype {
deviceLab: any deviceLab: any
} }
let stateObj: stateStype = { let stateObj: BluetoothStateType = {
/** 事件监听器 */ /** 事件监听器 */
listeners: new Set(), listeners: new Set(),
/** 正在扫描设备 */ /** 正在扫描设备 */

14
src/use/useHttp.ts
View File

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