From 2811f7eb60cd75bae74a2cb2beb78f7c81242204 Mon Sep 17 00:00:00 2001 From: xuan Date: Mon, 31 Oct 2022 19:06:14 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(=E9=A2=9C=E8=89=B2=E5=8F=96?= =?UTF-8?q?=E6=A0=B7):=20=E6=96=B0=E5=A2=9E=E9=A2=9C=E8=89=B2=E5=8F=96?= =?UTF-8?q?=E6=A0=B7=E6=A8=A1=E5=9D=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- project.private.config.json | 9 +- src/common/common.ts | 4 +- src/common/format.js | 34 ++++ src/components/popup/index.tsx | 2 +- src/components/searchInput/index.tsx | 94 ++++----- .../selectProduct/index.module.scss | 106 ++++------ src/components/selectProduct/index.tsx | 120 +++++++----- .../components/bluetooth/LinkBlueTooth.tsx | 2 + .../components/css/linkBlueTooth.module.scss | 1 + .../takeColor/components/Texture/index.tsx | 53 +++-- .../takeColor/components/Upload/index.tsx | 35 +++- .../colorRelated/takeColor/index.module.scss | 14 +- src/pages/colorRelated/takeColor/index.tsx | 181 +++++++++++++++--- src/pages/shopping/index.tsx | 30 ++- src/use/useUploadImage.ts | 2 +- 15 files changed, 438 insertions(+), 249 deletions(-) diff --git a/project.private.config.json b/project.private.config.json index 719c841..af25df0 100644 --- a/project.private.config.json +++ b/project.private.config.json @@ -190,9 +190,16 @@ "query": "purchaser_id=1674", "launchMode": "default", "scene": null + }, + { + "name": "", + "pathName": "pages/colorRelated/takeColor/index", + "query": "", + "launchMode": "default", + "scene": null } ] } }, - "libVersion": "2.26.0" + "libVersion": "2.26.2" } \ No newline at end of file diff --git a/src/common/common.ts b/src/common/common.ts index c67e5d8..5ed240c 100644 --- a/src/common/common.ts +++ b/src/common/common.ts @@ -107,7 +107,7 @@ export const alert = { icon: 'error', }) }, - loading(title: string, mask: true | false = false) { + loading(title: string, mask: boolean = false) { Taro.showToast({ title, icon: 'loading', @@ -152,4 +152,4 @@ export const formatKbPrice = (number: string) => { export const checkKey = (key = "") => { let getUser = JSON.parse(Taro.getStorageSync("userInfo")); return getUser.mp_role_access_list?.includes(key); -}; \ No newline at end of file +}; diff --git a/src/common/format.js b/src/common/format.js index ff1a2e2..3d0d573 100644 --- a/src/common/format.js +++ b/src/common/format.js @@ -159,6 +159,40 @@ export const toDecimal2 = x => { return f } +// 匹配前缀 例如：//xxx.com 或者 http://xxx.com 或者 https://xxx.com +// eslint-disable-next-line no-useless-escape +const URL_REGEXP = /(https?:)?\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_\+.~#?&=]*)/gi +/** + * 判断是否有前缀 + * @param {string} url url路径 + */ +export const withBaseUrl = function(url) { + return URL_REGEXP.test(url) +} +/** + * 去除前缀 //xxx.com 或者 http://xxx.com 或者 https://xxx.com + * @param {string} url url路径 + */ +export const breakupUrl = url => { + return url?.replace(URL_REGEXP, '') ?? url +} +/** + * 拼接前缀 http://xxx.com + /asdfsafdas/154531asdf465413.png + * @param {string} url url路径 + */ +export const jointUrl = url => { + return withBaseUrl(url) ? url : `${IMG_CND_Prefix}${url}` +} + +export const formatUrl = (url, suffix = '!w200') => { + if (url) { + url = url.includes(',') ? url.split(',')[0] : url + return withBaseUrl(url) ? url + suffix : jointUrl(url) + suffix + } else { + return IMG_CND_Prefix + '/mall/no_img.png' + } +} + /** * 格式化图片路径 * @param {*} url diff --git a/src/components/popup/index.tsx b/src/components/popup/index.tsx index b7677c2..fbe6180 100644 --- a/src/components/popup/index.tsx +++ b/src/components/popup/index.tsx @@ -1,4 +1,4 @@ -import { View } from '@tarojs/components' +import { RootPortal, View } from '@tarojs/components' import style from './index.module.scss' import classnames from 'classnames' import { memo, ReactNode, useEffect, useMemo, useRef, useState } from 'react' diff --git a/src/components/searchInput/index.tsx b/src/components/searchInput/index.tsx index c41d344..209642a 100644 --- a/src/components/searchInput/index.tsx +++ b/src/components/searchInput/index.tsx @@ -1,52 +1,56 @@ -import { Input, View } from "@tarojs/components"; -import { memo, ReactHTMLElement, ReactNode, useDebugValue, useMemo } from "react"; -import styles from './index.module.scss'; +import { Input, View } from '@tarojs/components' +import { memo, ReactHTMLElement, ReactNode, useDebugValue, useMemo } from 'react' +import IconFont from '../iconfont/iconfont' +import styles from './index.module.scss' type Params = { - showIcon?: false|true, - disabled?: false|true, - placeholder?: string, - title?: string, - showTitle?: false|true, - showBorder?: false|true, - changeOnInput?: (string) => void, - clickOnInput?: () => void, - children?: ReactNode - height?: string, - titleStyle?: Object, - styleObj?: Object - + showIcon?: boolean + disabled?: boolean + placeholder?: string + title?: string + showTitle?: boolean + showBorder?: boolean + changeOnInput?: (string) => void + clickOnInput?: () => void + children?: ReactNode + height?: string + titleStyle?: Object + styleObj?: Object } export default memo((props: Params) => { - let { - showTitle = true, - title = '标题', - showIcon = false, - disabled = false, - placeholder = '请输入', - showBorder = true, - changeOnInput, - clickOnInput, - height = '80rpx', - titleStyle = {} - } = props + let { + showTitle = true, + title = '标题', + showIcon = false, + disabled = false, + placeholder = '请输入', + showBorder = true, + changeOnInput, + clickOnInput, + height = '80rpx', + titleStyle = {}, + } = props - let stylen = useMemo(() => { - if(!showBorder) { - return { borderBottom: 0 } - } - return {} - }, [showBorder]) - return ( - - {showTitle&&{title}} - - {!props.children&& clickOnInput?.()} onInput={(e) => changeOnInput?.(e.detail.value)}/> - ||<>{props.children} - } - - {showIcon&&} + let stylen = useMemo(() => { + if (!showBorder) { + return { borderBottom: 0 } + } + return {} + }, [showBorder]) + return ( + + {showTitle && ( + + {title} - ) -}) \ No newline at end of file + )} + + {(!props.children && ( + clickOnInput?.()} onInput={e => changeOnInput?.(e.detail.value)} /> + )) || <>{props.children}} + + {showIcon && } + + ) +}) diff --git a/src/components/selectProduct/index.module.scss b/src/components/selectProduct/index.module.scss index 71db5a2..26b7d65 100644 --- a/src/components/selectProduct/index.module.scss +++ b/src/components/selectProduct/index.module.scss @@ -1,82 +1,48 @@ +.select_input { + width: 100%; +} -.select_input{ - width: 100%; +.input_type { + width: 100%; + font-size: 28px; + @include common_ellipsis(); + max-width: 430px; } -.stock_ipnut_des{ - border-bottom: 1rpx solid #F0F0F0; - padding: 20rpx 0 10rpx 10rpx !important; - .con_input{ - display: flex; - align-items: center; - display: flex; - .label{ - width: 120px; - font-size: 27px; - height: 60px; - display: flex; - align-items: center; - padding-left: 10px; - color: #707070; - font-weight: 700; - border-right: 2px solid #F3F3F3 ; - } - .input_con{ - flex:1; - } - .input_type{ - padding-left: 50px; - font-size: 28px; - @include common_ellipsis(); - max-width: 430px; - } - .noCon{ - color: #cccccc; - } - .iconfont{ - color: #cccccc; - font-size: 30px; - } - } +.noCon { + color: #cccccc; } -.stock_disabled{ - background: #f7f7f7; - border-radius: 10px; - .label{ - color: #cccccc !important; - } +.stock_disabled { + background: #f7f7f7; + border-radius: 10px; + .label { + color: #cccccc !important; + } } .drawer { - top:0; - position:fixed; + top: 0; + position: fixed; } -.selectCon{ - width:100%; - .selectInput{ - width:100%; - padding: 0 20px 20px 20px; - border-bottom: 2px solid #F3F3F3; - box-sizing: border-box; + +.selectList { + .selectList-scroll-view { + padding-top: 22px; + height: 50vh; + .selectItem { + font-size: 28px; + color: #707070; + padding: 22px 30px; } - .selectList{ - .selectList-scroll-view{ - height: 600px; - padding-top: 22px; - .selectItem{ - font-size: 28px; - color: #707070; - padding: 22px 30px; - } - .selected{ - color: #3287EC; - font-weight: 700; - } - } + .selected { + color: #3287ec; + font-weight: 700; } + } } + .flexBox { - display: flex; - width: 200px; - align-items: center; - justify-content: flex-end; + display: flex; + width: 200px; + align-items: center; + justify-content: flex-end; } diff --git a/src/components/selectProduct/index.tsx b/src/components/selectProduct/index.tsx index bb91f40..c5c50da 100644 --- a/src/components/selectProduct/index.tsx +++ b/src/components/selectProduct/index.tsx @@ -1,11 +1,13 @@ import styles from './index.module.scss' -import { Image, Text, ScrollView, View } from '@tarojs/components' -import React, { FC, useCallback, useEffect, useMemo, useState } from 'react' +import { Image, Text, ScrollView, View, RootPortal } from '@tarojs/components' +import React, { FC, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react' import classnames from 'classnames' import Search from '../search' import Popup from '../popup' import { SelectProductListApi } from '@/api/index' - +import IconFont from '../iconfont/iconfont' +import { formatHashTag } from '@/common/format' +import SearchInput from '../searchInput' type PropsType = { selectColorId: number @@ -14,35 +16,51 @@ type PropsType = { children?: React.ReactNode } -const SelectProduct:FC = (params) => { +type productType = { + code?: string + default?: boolean + id: number + name: string +} + +const SelectProduct = forwardRef((params: PropsType, ref) => { const { selectColorId, noAll, onSelect } = params - const [selectId, setSelectId] = useState(0) + const [selectId, setSelectId] = useState(selectColorId) - useEffect(()=>{ - setSelectId(selectColorId) - }, [selectColorId]) - - const {fetchData, state} = SelectProductListApi() + const { fetchData } = SelectProductListApi() const [selectValue, setSelectValue] = useState() - const [productList, setProductList] = useState([{id:1}]) + const [productList, setProductList] = useState([]) - const clickEvent = () => {} + const clickEvent = () => { + setShowPopup(true) + } + useImperativeHandle( + ref, + () => ({ + clickEvent, + }), + [clickEvent], + ) + const originList = useRef([]) - const getSelectData = (item) => { + const getSelectData = item => { setSelectId(item.id) setSelectValue(changeName(item)) setShowPopup(false) onSelect && onSelect(item) } - const changeName = (item) => { - if (item.id) { - return item.code.includes('#') ? item.code + ' ' + item.name : item.code + '# ' + item.name - } else { - return item.name + const changeName = item => { + console.log('changeName', item) + if (item) { + if (item.id) { + return formatHashTag(item.code, item.name) + } else { + return item.name + } } } @@ -52,54 +70,60 @@ const SelectProduct:FC = (params) => { const getProductList = async () => { let res = await fetchData() - !noAll && res.data.list?.unshift({ name: '全部', id: 0 }) - setProductList(res.data.list) + // !noAll && res.data.list?.unshift({ name: '全部', id: 0 }) + !noAll && setProductList([{ name: '全部', id: 0 }, ...res.data.list]) + originList.current = [{ name: '全部', id: 0 }, ...res.data.list] } - - - const list = useMemo(() => { - console.log('state', state) - return state.data.list || [{ id: 1 }] - }, [productList]) const [showPopup, setShowPopup] = useState(false) - const closeEven = () => {} + const closeEven = () => { + setShowPopup(false) + } //输入了搜索关键字 - const getSearchData = useCallback((e) => { - // pageNum.current.page = 1 - // setOrderData(() => ({ list: [], total: 0 })) - // setSearchField((val) => ({ ...val, name: e, size: 10 })) - }, []) + const getSearchData = useCallback( + async value => { + console.log('e==>', value) + if (value === '') { + setProductList([...originList.current]) + } else { + const res = await fetchData({ + code_or_name: value, + }) + if (res.success) { + setProductList(res.data.list) + } + } + }, + [originList], + ) useEffect(() => { setSelectId(selectColorId) - const res = productList.find((item) => item.id == selectColorId) + const res = productList.find(item => item.id == selectColorId) setSelectValue(changeName(res)) }, [selectColorId]) return ( <> - - - 面料名称 - - {selectValue ? selectValue : '请选择'} - - + + + {selectValue ? selectValue : '请选择'} - + - - - - - {list.map((item) => { + + + + + + + {productList.map(item => { return ( getSelectData(item)}> - {/* {changeName(item)} */} + {changeName(item)} ) })} @@ -108,5 +132,5 @@ const SelectProduct:FC = (params) => { ) -} +}) export default SelectProduct diff --git a/src/pages/colorRelated/components/bluetooth/LinkBlueTooth.tsx b/src/pages/colorRelated/components/bluetooth/LinkBlueTooth.tsx index 04b9dc2..150eacc 100644 --- a/src/pages/colorRelated/components/bluetooth/LinkBlueTooth.tsx +++ b/src/pages/colorRelated/components/bluetooth/LinkBlueTooth.tsx @@ -26,6 +26,7 @@ export default memo(() => { }, [state.available, state.connected]) const linkName = useMemo(() => { + console.log('state linkName', state) return state.connected?.localName || '' }, [state.connected]) @@ -37,6 +38,7 @@ export default memo(() => { const [popupShow, setPopupShow] = useState(false) //显示设备列表 const onFindDevice = () => { + console.log('linkStatus==>', linkStatus) if (linkStatus == 1) { Taro.showToast({ title: '请打开蓝牙', diff --git a/src/pages/colorRelated/components/css/linkBlueTooth.module.scss b/src/pages/colorRelated/components/css/linkBlueTooth.module.scss index 9b5de05..ef9d9c2 100644 --- a/src/pages/colorRelated/components/css/linkBlueTooth.module.scss +++ b/src/pages/colorRelated/components/css/linkBlueTooth.module.scss @@ -4,6 +4,7 @@ border-radius: 10px; .bluetooth_link { + width: 100%; display: flex; align-items: center; diff --git a/src/pages/colorRelated/takeColor/components/Texture/index.tsx b/src/pages/colorRelated/takeColor/components/Texture/index.tsx index ce2e466..1032eea 100644 --- a/src/pages/colorRelated/takeColor/components/Texture/index.tsx +++ b/src/pages/colorRelated/takeColor/components/Texture/index.tsx @@ -1,38 +1,55 @@ -import { View, Text,Image } from '@tarojs/components' +import { View, Text, Image } from '@tarojs/components' import styles from './index.module.scss' import classnames from 'classnames' -import { FC, useRef, useState } from "react" +import { FC, memo, useMemo, useRef, useState } from 'react' import Upload from '../Upload' -import {screenshot} from '@/common/util' +import { screenshot } from '@/common/util' +import { formatImgUrl, formatUrl } from '@/common/format' - -type PropsType = { - onUploadConfirm?: Function +interface TextureEvent { + onUploadConfirm?: (file: string) => void +} +interface PropsType extends TextureEvent { + list: any[] + detail: any + uploadConfirmState: boolean } -const Texture:FC = (params) => { - const {onUploadConfirm} = params - - const handleUploadConfirm = () => { - onUploadConfirm && onUploadConfirm() +const Texture: FC = params => { + const { onUploadConfirm, list, detail, uploadConfirmState } = params + console.log('detail==>', detail) + + const handleUploadConfirm = (url) => { + onUploadConfirm && onUploadConfirm(url) } - const uploadEl = useRef() + const uploadEl = useRef(null) + + const handleOpenModal = () => { + uploadEl.current.handleTriggerUploadModal(true) + } + + const calcNoSampling = useMemo(() => { + let len = list?.filter(item => { + return item.currentLab?.l == 0 && item.currentLab?.a == 0 && item.currentLab?.b == 0 + }) + return len?.length ?? 0 + }, [list]) return ( - - {detail.texture_url && } - - + + {detail.texture_url && } + + {/* TODO: 更换iconfont */} 上传纹理 - {(data?.list?.length ?? 0) - calcNoSampling} + {(list?.length ?? 0) - calcNoSampling} 已取样 @@ -41,7 +58,7 @@ const Texture:FC = (params) => { - + ) } diff --git a/src/pages/colorRelated/takeColor/components/Upload/index.tsx b/src/pages/colorRelated/takeColor/components/Upload/index.tsx index fd3207f..39285be 100644 --- a/src/pages/colorRelated/takeColor/components/Upload/index.tsx +++ b/src/pages/colorRelated/takeColor/components/Upload/index.tsx @@ -1,16 +1,20 @@ -import Popup from "@/components/popup" -import { FC, useState } from "react" -import { View, Text,Image } from '@tarojs/components' +import Popup from '@/components/popup' +import { FC, forwardRef, useEffect, useImperativeHandle, useState } from 'react' +import { View, Text, Image, RootPortal } from '@tarojs/components' import styles from './index.module.scss' import classnames from 'classnames' -import Taro from "@tarojs/taro" +import Taro from '@tarojs/taro' -type PropsType = { +interface UploadColorEvent { onUploadConfirm?: Function } -const UploadColor: FC = (params) => { - const { onUploadConfirm } = params +interface PropsType extends UploadColorEvent { + uploadConfirmState: boolean +} + +const UploadColor = forwardRef((params: PropsType, ref) => { + const { onUploadConfirm, uploadConfirmState } = params const [showModal, setShowModal] = useState(false) const [filePath, setFilePath] = useState('') const [file, setFile] = useState({}) @@ -27,9 +31,23 @@ const UploadColor: FC = (params) => { }) } + useEffect(() => { + if (uploadConfirmState) { + setFilePath('') + handleTriggerUploadModal(false) + } + }, [uploadConfirmState]) + const handleTriggerUploadModal = (bool: boolean) => { setShowModal(bool) } + useImperativeHandle( + ref, + () => ({ + handleTriggerUploadModal, + }), + [handleTriggerUploadModal], + ) const handleClear = () => { setFilePath('') @@ -38,7 +56,6 @@ const UploadColor: FC = (params) => { onUploadConfirm && onUploadConfirm(file) } - return ( handleTriggerUploadModal(false)}> @@ -58,5 +75,5 @@ const UploadColor: FC = (params) => { ) -} +}) export default UploadColor diff --git a/src/pages/colorRelated/takeColor/index.module.scss b/src/pages/colorRelated/takeColor/index.module.scss index 276923e..6bdce04 100644 --- a/src/pages/colorRelated/takeColor/index.module.scss +++ b/src/pages/colorRelated/takeColor/index.module.scss @@ -21,9 +21,12 @@ page { padding-bottom: 220px; } .lb-title { + position: sticky; + top: 0; + z-index: 1; font-size: 28px; font-weight: 400; - line-height: 38px; + background-color: #f3f3f3; color: #707070; border-top: 1px dashed #e4e4e4; padding: 26px 46px; @@ -34,7 +37,6 @@ page { } .lb-t-serach { @include flex-vertical-center; - height: 100px; } .lb-t-serach .icon-a-sousuo1 { font-size: 38px; @@ -43,6 +45,7 @@ page { .lb-t-serach .lb-t-search-content { display: flex; justify-content: flex-end; + align-items: center; } .lb-t-serach .lb-t-search-content > text { padding: 10px 0; @@ -72,10 +75,9 @@ page { font-size: 30px; } .lb-t-sc-clear { - width: 66px; - height: 66px; - text-align: center; - line-height: 66px; + display: flex; + justify-content: center; + align-items: center; } .lb-t-sc-clear .icon-a-cuowuwrong { width: 43px; diff --git a/src/pages/colorRelated/takeColor/index.tsx b/src/pages/colorRelated/takeColor/index.tsx index 791e16d..dc43b24 100644 --- a/src/pages/colorRelated/takeColor/index.tsx +++ b/src/pages/colorRelated/takeColor/index.tsx @@ -1,37 +1,51 @@ import { View, Input, Text } from '@tarojs/components' -import { FC, useMemo, useState } from 'react' +import { FC, useMemo, useRef, useState } from 'react' import LinkBlueTooth from '../components/bluetooth/LinkBlueTooth' import SelectProduct from '@/components/selectProduct/index' import styles from './index.module.scss' import ColorCard from './components/ColorCard' import IconFont from '@/components/iconfont/iconfont' import { ColorListApi, ColorDetailedApi, TextureSaveApi, ColorSamplingSaveApi } from '@/api/index' -import { formatHashTag } from '@/common/format' +import { breakupUrl, formatHashTag, formatImgUrl, formatUrl } from '@/common/format' +import { alert } from '@/common/common' +import Texture from './components/Texture' +import useUploadCDNImg from '@/use/useUploadImage' +import { useBluetooth } from '@/use/contextBlueTooth' +import { toRgb } from '@/common/bluetooth/color/colorSpace' // 颜色取样 const TakeColor: FC = () => { const { state, fetchData } = ColorListApi() + const { uploadCDNImg } = useUploadCDNImg() const { state: detail, fetchData: detailFetchData } = ColorDetailedApi() const { state: textureSaveData, fetchData: textureSaveFetchData } = TextureSaveApi() - const { state: saveData, fetchData: saveFetchData, success: saveSuccess } = ColorSamplingSaveApi() - + const { state: saveData, fetchData: saveFetchData } = ColorSamplingSaveApi() + const { measureAndGetLab, state: bluetoothState } = useBluetooth() const [searchValue, setSearchValue] = useState('') + const [selectedProduct, setSelectedProduct] = useState>({}) - const selectInput = async (event) => { - // if (event) { - // selectedProduct.value = event - // await fetchData({ id: event.id }) - // data.value?.list.map((item, index) => { - // item.currnetRgb = item.rgb - // item.currentLab = item.lab - // item.sampling = !(item.currentLab?.l == 0 && item.currentLab?.a == 0 && item.currentLab?.b == 0) - // item.moveBorder = 0 - // item.key = index - // }) - // detailFetchData({ id: event.id }) - // } else { - // data.value.list = [] - // } + const selectInput = async event => { + if (event) { + alert.showLoading('正在加载颜色') + setSelectedProduct(event) + const res = await fetchData({ id: event.id }) + if (res.success) { + res.data?.list.map((item, index) => { + item.currnetRgb = item.rgb + item.currentLab = item.lab + item.sampling = !(item.currentLab?.l == 0 && item.currentLab?.a == 0 && item.currentLab?.b == 0) + item.moveBorder = 0 + item.key = index + }) + // setListData(res.data?.list) + await detailFetchData({ id: event.id }) + } + alert.hideLoading() + } else { + state.data.list = [] + alert.hideLoading() + } } + const clearSearchValue = () => { setSearchValue('') } @@ -39,32 +53,102 @@ const TakeColor: FC = () => { const handleTransfSearch = (bool: boolean) => { setShowScreen(bool) } - const handlePrViewRgb = (event) => { + const handlePrViewRgb = event => { setLabPreview(event) setShowLabPreview(true) } - const handleTakeColor = () => {} + 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) => { + return state.data?.list?.filter(item => { if (searchValue) { return formatHashTag(item.product_color_name, item.product_color_code)!.includes(searchValue) } return true }) - }, [state]) + }, [state.data?.list, state]) const [showScreen, setShowScreen] = useState(false) - const onSearchInput = (event) => { + const onSearchInput = event => { const current = event.detail.value setSearchValue(current) } + // 底部提交 + const handleSubmit = async () => { + if (selectedProduct.id) { + let params = { + id: selectedProduct.id, + product_color_absorb: state.data.list.map(item => { + return { + product_color_id: item.product_color_id, + l: item.currentLab.l, + a: item.currentLab.a, + b: item.currentLab.b, + // absorb_lab_time: `${dayjs(new Date()) + // .add(0, "day") + // .format("YYYY-MM-DD")} 00:00:00` + absorb_lab_time: new Date(), + } + }), + } + alert.showLoading('保存中') + const res = await saveFetchData(params) + if (res.success) { + alert.success('保存成功') + } else { + alert.error('保存失败') + } + } else { + productSelectEl.current.clickEvent() + alert.none('请选择面料') + } + } // 重置 - const handleReset = () => {} - - // 提交 - const handleSubmit = () => {} + const 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 + }) + } else { + productSelectEl.current.clickEvent() + alert.none('请选择面料') + } + } const [labPreview, setLabPreview] = useState({ currnetRgb: { @@ -76,12 +160,47 @@ const TakeColor: FC = () => { const [showLabPreview, setShowLabPreview] = useState(false) + const productSelectEl = useRef(null) + + const [uploadConfirmState, setUploadConfirmState] = useState(false) + + const handleUploadConfirm = async file => { + setUploadConfirmState(false) + if (file) { + if (selectedProduct.id) { + alert.showLoading('上传中') + let res = await uploadCDNImg({ path: file.tempFilePath }, 'product', 'product') + if (res && res?.code == 200) { + //console.log('图片地址真实',`${IMG_CND_Prefix}${res.url}`); + + // TODO: 回填到存储的地方 + await textureSaveFetchData({ + id: selectedProduct.id, + texture_url: breakupUrl(res.url), + upload_texture_time: new Date(), + }) + await detailFetchData({ id: selectedProduct.id }) + alert.none('上传成功') + setUploadConfirmState(true) + } else { + res && alert.none(`${res.message}`) + } + } else { + productSelectEl.current.clickEvent() + alert.none('请选择面料') + } + } else { + alert.none('请选择图片') + } + } + return ( <> - + + 颜色列表（{listData?.length ?? 0}） @@ -91,14 +210,14 @@ const TakeColor: FC = () => { - {searchValue.length > 0 && } + {searchValue.length > 0 && } handleTransfSearch(false)}>取消 ) : ( handleTransfSearch(true)}> - + )} diff --git a/src/pages/shopping/index.tsx b/src/pages/shopping/index.tsx index c4b94bd..3f5bda5 100644 --- a/src/pages/shopping/index.tsx +++ b/src/pages/shopping/index.tsx @@ -15,7 +15,6 @@ import { dataLoadingStatus, debounce, getFilterData } from '@/common/util' import { ShoppingProvider } from './components/shoppingCart/index' import { Goods, ShoppingDispatchType, useShoppingDispatch, useShoppingState } from './context' import { alert, goLink, isEmptyObject } from '@/common/common' -import LoadingCard from '@/components/loadingCard' export const Shopping: FC = memo(() => { // 计算总的预估金额 @@ -126,7 +125,7 @@ const ShoppingCartContainer: FC = () => { useEffect(() => { if (state.success) { // startTransition(() => { - setShoppingCartData({ list: state.data, total: state.data.length }) + setShoppingCartData({ list: state.data, total: state.data.length }) // }) } }, [state]) @@ -134,11 +133,11 @@ const ShoppingCartContainer: FC = () => { // 结算 const handleSettleAccount = debounce(() => { const multipleSelection = colorStore?.[currentCheckedPurchaserId]?.['multipleSelection'] - if (!multipleSelection) return Taro.showToast({ title: '请先选择客户', icon: 'error' }) + if (!multipleSelection) return alert.error('请先选择客户') const checkedGoodsKind = Object.values(multipleSelection).reduce((prev, item: Goods) => { return [...prev, item.id] }, []) - if (checkedGoodsKind.length === 0) return Taro.showToast({ title: '请先选择商品', icon: 'error' }) + if (checkedGoodsKind.length === 0) return alert.error('请先选择商品') goLink('/pages/submitOrder/index', { purchaser_id: currentCheckedPurchaserId, sale_mode: currentCheckedSaleMode, @@ -154,17 +153,19 @@ const ShoppingCartContainer: FC = () => { const multipleSelection = colorStore?.[currentCheckedPurchaserId].multipleSelection let checked: Goods[] = Object.values(multipleSelection!) if (checked.length === 0) { - return Taro.showToast({ title: '请选择商品', icon: 'error' }) + return alert.error('请选择商品') } console.log('checked==>', checked) Taro.showModal({ title: '要删除这些商品吗？', success: async function(res) { if (res.confirm) { + alert.showLoading('删除中') const res = await deleteApi({ ids: checked.map(item => item.id).join(','), }) if (res.success) { + alert.hideLoading() alert.success('删除成功') // 清空多选 dispatch({ @@ -178,6 +179,7 @@ const ShoppingCartContainer: FC = () => { fetchData(searchOptions) // Observer.notify(currentCheckedPurchaserId) } else { + alert.hideLoading() alert.none(res.msg) } } @@ -186,13 +188,10 @@ const ShoppingCartContainer: FC = () => { } // 全选 const handleSelectAllCheckbox = (isSelectAll: boolean) => { - console.log('handleSelectAllCheckbox', isSelectAll) - const targetGoodsKind = colorStore?.[currentCheckedPurchaserId]?.['goodsKind'] - if (!targetGoodsKind) return Taro.showToast({ title: '请先选择客户', icon: 'error' }) - console.log('targetGoodsKind==>', targetGoodsKind) + const targetGoodsKind = colorStore?.[currentCheckedPurchaserId].goodsKind + if (!targetGoodsKind) return alert.error('请先选择客户') const tempObject = { ...targetGoodsKind } - console.log('tempObject==>', tempObject) dispatch({ type: ShoppingDispatchType.UPDATE_CHANGED_CHECKBOX, data: { @@ -210,12 +209,10 @@ const ShoppingCartContainer: FC = () => { setRefreshStatus(true) const res = await fetchData(searchOptions) if (res.success) { - console.log('请求 成功') setRefreshStatus(false) - Taro.showToast({ title: '刷新成功', icon: 'success' }) + alert.success('刷新成功') } else { - console.log('请求 失败') - Taro.showToast({ title: '刷新失败', icon: 'error' }) + alert.error('刷新失败') setRefreshStatus(false) } } @@ -237,11 +234,10 @@ const ShoppingCartContainer: FC = () => { - { - // isPending ? ( + {// isPending ? ( // null // ) : ( - !!shoppingCartData?.list?.length && + !!shoppingCartData?.list?.length && shoppingCartData?.list?.map((item, index) => { return }) diff --git a/src/use/useUploadImage.ts b/src/use/useUploadImage.ts index 9f0f184..45b31ff 100644 --- a/src/use/useUploadImage.ts +++ b/src/use/useUploadImage.ts @@ -63,7 +63,7 @@ export default () => { return false } - return new Promise((resolve, reject) => { + return new Promise>((resolve, reject) => { getSecret(secene, type) .then((result) => { let res: any = result