From 03e7377485a8e056b9ae1074384deefeefa65bba Mon Sep 17 00:00:00 2001 From: xuan Date: Wed, 14 Sep 2022 13:08:17 +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|=E5=8F=96=E8=89=B2=E6=9F=A5=E6=89=BE|=E6=A0=B7?= =?UTF-8?q?=E5=93=81=E5=AF=B9=E6=AF=94):=20=E7=A7=BB=E6=A4=8D=E5=86=85?= =?UTF-8?q?=E9=83=A8=E7=89=88=E7=9B=B8=E5=85=B3=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/index.ts | 36 +- src/api/product/findColor.ts | 11 + src/api/product/index.ts | 4 +- src/api/product/product.ts | 13 +- src/api/product/takeColor.ts | 45 +++ src/app.config.ts | 8 +- src/common/{fotmat.js => format.js} | 366 +++++++++--------- src/common/util.ts | 2 +- src/components/LabAndImg/index.tsx | 2 +- src/components/LabAndImgShow/index.tsx | 113 +++--- src/components/amountShow/index.tsx | 44 +-- src/components/banner/index.tsx | 2 +- src/components/bindSalesmanPopup/index.tsx | 97 ++--- src/components/product/index.tsx | 75 ++-- .../selectProduct/index.module.scss | 82 ++++ src/components/selectProduct/index.tsx | 112 ++++++ src/components/shopCart/index.tsx | 2 +- src/components/uploadImage/index.tsx | 2 +- .../components}/bluetooth/LinkBlueTooth.tsx | 2 +- .../components}/bluetooth/Popup.tsx | 2 +- .../components}/css/linkBlueTooth.module.scss | 7 +- .../components}/css/popup.module.scss | 0 .../components/DrawerCenter/index.module.scss | 46 +++ .../components/DrawerCenter/index.tsx | 30 ++ .../components/HistoryColor/index.module.scss | 113 ++++++ .../components/HistoryColor/index.tsx | 89 +++++ .../components/LabColor/index.module.scss | 46 +++ .../findColor/components/LabColor/index.tsx | 54 +++ .../RecommendColor/index.module.scss | 121 ++++++ .../components/RecommendColor/index.tsx | 83 ++++ .../colorRelated/findColor/index.config.ts | 4 + .../colorRelated/findColor/index.module.scss | 94 +++++ src/pages/colorRelated/findColor/index.tsx | 140 +++++++ .../sampleComparison/index.config.ts | 0 .../sampleComparison/index.module.scss | 0 .../sampleComparison/index.tsx | 19 +- .../components/ColorCard/index.module.scss | 184 +++++++++ .../takeColor/components/ColorCard/index.tsx | 78 ++++ .../components/Texture/index.module.scss | 68 ++++ .../takeColor/components/Texture/index.tsx | 48 +++ .../components/Upload/index.module.scss | 68 ++++ .../takeColor/components/Upload/index.tsx | 62 +++ .../colorRelated/takeColor/index.config.ts | 4 + .../colorRelated/takeColor/index.module.scss | 148 +++++++ src/pages/colorRelated/takeColor/index.tsx | 136 +++++++ .../components/advanceOrderState/index.tsx | 119 +++--- .../empty/index.module.scss | 0 .../{compoents => components}/empty/index.tsx | 0 .../goods/index.module.scss | 0 .../{compoents => components}/goods/index.tsx | 0 src/pages/searchPage/index.tsx | 6 +- src/pages/user/index.tsx | 6 +- src/styles/common.scss | 15 + src/use/useHttp.ts | 3 - 54 files changed, 2353 insertions(+), 458 deletions(-) create mode 100644 src/api/product/findColor.ts create mode 100644 src/api/product/takeColor.ts rename src/common/{fotmat.js => format.js} (95%) create mode 100644 src/components/selectProduct/index.module.scss create mode 100644 src/components/selectProduct/index.tsx rename src/pages/{sampleComparison/compoents => colorRelated/components}/bluetooth/LinkBlueTooth.tsx (97%) rename src/pages/{sampleComparison/compoents => colorRelated/components}/bluetooth/Popup.tsx (98%) rename src/pages/{sampleComparison => colorRelated/components}/css/linkBlueTooth.module.scss (88%) rename src/pages/{sampleComparison => colorRelated/components}/css/popup.module.scss (100%) create mode 100644 src/pages/colorRelated/findColor/components/DrawerCenter/index.module.scss create mode 100644 src/pages/colorRelated/findColor/components/DrawerCenter/index.tsx create mode 100644 src/pages/colorRelated/findColor/components/HistoryColor/index.module.scss create mode 100644 src/pages/colorRelated/findColor/components/HistoryColor/index.tsx create mode 100644 src/pages/colorRelated/findColor/components/LabColor/index.module.scss create mode 100644 src/pages/colorRelated/findColor/components/LabColor/index.tsx create mode 100644 src/pages/colorRelated/findColor/components/RecommendColor/index.module.scss create mode 100644 src/pages/colorRelated/findColor/components/RecommendColor/index.tsx create mode 100644 src/pages/colorRelated/findColor/index.config.ts create mode 100644 src/pages/colorRelated/findColor/index.module.scss create mode 100644 src/pages/colorRelated/findColor/index.tsx rename src/pages/{ => colorRelated}/sampleComparison/index.config.ts (100%) rename src/pages/{ => colorRelated}/sampleComparison/index.module.scss (100%) rename src/pages/{ => colorRelated}/sampleComparison/index.tsx (90%) create mode 100644 src/pages/colorRelated/takeColor/components/ColorCard/index.module.scss create mode 100644 src/pages/colorRelated/takeColor/components/ColorCard/index.tsx create mode 100644 src/pages/colorRelated/takeColor/components/Texture/index.module.scss create mode 100644 src/pages/colorRelated/takeColor/components/Texture/index.tsx create mode 100644 src/pages/colorRelated/takeColor/components/Upload/index.module.scss create mode 100644 src/pages/colorRelated/takeColor/components/Upload/index.tsx create mode 100644 src/pages/colorRelated/takeColor/index.config.ts create mode 100644 src/pages/colorRelated/takeColor/index.module.scss create mode 100644 src/pages/colorRelated/takeColor/index.tsx rename src/pages/searchPage/{compoents => components}/empty/index.module.scss (100%) rename src/pages/searchPage/{compoents => components}/empty/index.tsx (100%) rename src/pages/searchPage/{compoents => components}/goods/index.module.scss (100%) rename src/pages/searchPage/{compoents => components}/goods/index.tsx (100%) diff --git a/src/api/index.ts b/src/api/index.ts index f8f41e4..b0e6c06 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -1,27 +1,33 @@ +export { LoginApi } from './login/index' +export { + productabsorbcontrast, + SelectProductListApi, + ColorListApi, + ColorDetailedApi, + ColorSamplingSaveApi, + TextureSaveApi, + FindColorListApi, +} from './product/index' - -export {LoginApi} from './login/index' -export { productabsorbcontrast } from './product/index' - -import { useRequest } from "@/use/useHttp" +import { useRequest } from '@/use/useHttp' /** * 系列列表 - * @returns + * @returns */ export const kindListApi = () => { - return useRequest({ - url: `/v1/mp/product/kind/list`, - method: "get", - }) + return useRequest({ + url: `/v1/mp/product/kind/list`, + method: 'get', + }) } /** * 面料列表 - * @returns + * @returns */ export const ProductListApi = () => { - return useRequest({ - url: `/v1/mp/product/list`, - method: "get", - }) + return useRequest({ + url: `/v1/mp/product/list`, + method: 'get', + }) } diff --git a/src/api/product/findColor.ts b/src/api/product/findColor.ts new file mode 100644 index 0000000..19b3386 --- /dev/null +++ b/src/api/product/findColor.ts @@ -0,0 +1,11 @@ +import { useRequest } from "@/use/useHttp" +/** + * 颜色列表 + * @returns + */ +export const FindColorListApi = () => { + return useRequest({ + url: `/v1/mp/product/color/absorb/match`, + method: 'get', + }) +} diff --git a/src/api/product/index.ts b/src/api/product/index.ts index c256c79..0e1fb14 100644 --- a/src/api/product/index.ts +++ b/src/api/product/index.ts @@ -1 +1,3 @@ -export { productabsorbcontrast } from './product' +export { productabsorbcontrast, SelectProductListApi } from './product' +export { ColorListApi, ColorDetailedApi, ColorSamplingSaveApi, TextureSaveApi } from './takeColor' +export { FindColorListApi } from './findColor' diff --git a/src/api/product/product.ts b/src/api/product/product.ts index 6d8354a..2e1e927 100644 --- a/src/api/product/product.ts +++ b/src/api/product/product.ts @@ -1,4 +1,4 @@ -import { useRequest } from "@/use/useHttp" +import { useRequest } from '@/use/useHttp' //取色对比 export const productabsorbcontrast = () => { @@ -7,3 +7,14 @@ export const productabsorbcontrast = () => { method: 'get', }) } + +/** + * 面料列表(下拉选择) + * @returns + */ +export const SelectProductListApi = () => { + return useRequest({ + url: `/v1/mp/enum/product/list`, + method: 'get', + }) +} diff --git a/src/api/product/takeColor.ts b/src/api/product/takeColor.ts new file mode 100644 index 0000000..03bc2f6 --- /dev/null +++ b/src/api/product/takeColor.ts @@ -0,0 +1,45 @@ +import { useRequest } from '@/use/useHttp' + +/** + * 颜色列表 + * @returns + */ +export const ColorListApi = () => { + return useRequest({ + url: `/v1/mp/product/color/absorb/list`, + method: 'get', + }) +} + +/** + * 颜色详细 + * @returns + */ +export const ColorDetailedApi = () => { + return useRequest({ + url: `/v1/mp/product/texture`, + method: 'get', + }) +} + +/** + * 取色存储 + * @returns + */ +export const ColorSamplingSaveApi = () => { + return useRequest({ + url: `/v1/mp/product/color/absorb`, + method: 'put', + }) +} + +/** + * 保存纹理 + * @returns + */ +export const TextureSaveApi = () => { + return useRequest({ + url: `/v1/mp/product/texture`, + method: 'put', + }) +} diff --git a/src/app.config.ts b/src/app.config.ts index 0a10a57..be9bc84 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -51,8 +51,12 @@ export default defineAppConfig({ }, subPackages: [ { - root: 'pages/sampleComparison', - pages: ['index'], + root: 'pages/colorRelated', + pages: [ + 'sampleComparison/index', + 'takeColor/index', + 'findColor/index' + ], }, ], }) diff --git a/src/common/fotmat.js b/src/common/format.js similarity index 95% rename from src/common/fotmat.js rename to src/common/format.js index 7a1acf0..0b3f074 100644 --- a/src/common/fotmat.js +++ b/src/common/format.js @@ -1,183 +1,183 @@ -import { IMG_CND_Prefix } from './constant' - -/** - * 移除井号 - * @param {String} val code 编码 - * @returns - */ -export const formatRemoveHashTag = (val = '') => { - // console.log('移除标签',val,val.endsWith("#")); - return val.endsWith('#') ? val.replace('#', '') : val -} - -/** - * 格式化编码+名称显示方式 - * @param {String} code 编码 - * @param {String} name 名称 - * @param {*} mode 模式 both:code + 名称 name: 仅显示名称 - * @returns - */ -export const formatHashTag = (code = '', name = '', mode = 'both') => { - if (mode == 'both') { - return `${formatRemoveHashTag(code)}# ${name}` - } else if (mode == 'name') { - return `${name}` - } -} - -const Digit = 10 * 10 - -/** - * 重量 进退位 单位 - */ -export const weightDigit = 1000 - -/** - * 除以 - * @param {*} val - * @param {*} digit - * @param {*} priceStatus //是否显示千位分割 - * @returns - */ -export const formatPriceDiv = (val, digit = Digit, priceStatus = false) => { - let res = strip(Number(val / digit)) || 0 - return priceStatus ? numberWithCommas({ number: res }) : res -} -/** - * 乘以 - * @param {*} val - * @param {*} digit - * @returns - */ -export const formatPriceMul = (val, digit = Digit) => { - return strip(Number(val * digit)) || 0 -} - -/** - * 格式化重量单位 (乘以) - * @param {Number} val - * @returns - */ -export const formatWeightMul = (val, digit = weightDigit) => { - return strip(Number(val * digit)) || 0 -} - -/** - * 格式化重量单位 (除以) - * @param {*} val - */ -export const formatWeightDiv = (val, digit = weightDigit) => { - return strip(Number(val / digit)) || 0 -} - -export const formatDateTime = (val, fmt = 'YYYY-MM-DD HH:mm:ss') => { - if (val) { - let time = new Date(val) - let Y = time.getFullYear() - let M = time.getMonth() + 1 - let d = time.getDate() - let h = time.getHours() - let m = time.getMinutes() - let s = time.getSeconds() - - fmt = fmt - .replace('YYYY', Y) - .replace('MM', M.toString().padStart(2, '0')) - .replace('DD', d.toString().padStart(2, '0')) - .replace('HH', h.toString().padStart(2, '0')) - .replace('mm', m.toString().padStart(2, '0')) - .replace('ss', s.toString().padStart(2, '0')) - - return fmt - } else { - return val - } -} - -/** - * 精度 - * @param {*} num - * @param {*} precision - * @returns - */ -export const strip = (num, precision = 12) => { - return +parseFloat(num.toPrecision(precision)) -} - -/** - * 转换金额单位 - * @param {*} num 金额 / 数值 - * @param {*} digit 转换单位 - * @returns - */ -export const formatMillionYuan = (num, digit = 10000) => { - return num / digit > 1 ? { num: toDecimal2(num / digit), million: true } : { num, million: false } -} - -/** - * 数值保留两位小数 - * @param {*} x - * @returns - */ -export const toDecimal2 = (x) => { - var f = parseFloat(x) - if (isNaN(f)) { - return 0 - } - f = f + '' - let index = f.lastIndexOf('.') - if (index >= 0) { - let decimal = f.substring(index + 1) - if (decimal.length == 1) { - f = f.substring(0, index + 1) + decimal + '0' - } else { - f = f.substring(0, index + 1) + decimal.substring(0, 2) - } - } - return f -} - -/** - * 格式化图片路径 - * @param {*} url - * @status true|false - * @returns - */ -export const formatImgUrl = (url, suffix = '!w200') => { - if (url) { - return url.includes('http') ? url + suffix : IMG_CND_Prefix + url + suffix - } else { - return IMG_CND_Prefix + '/mall/no_img.png' - } -} - -/** - * - * @param {纹理图} imgurl - * @param {rgb} rgb - * @param {} suffix - * @returns 1 有纹理图，2 有rgb 3默认图 - */ -export const isLabImage = (imgurl, rgb, suffix = '!w200') => { - if (imgurl) { - return { status: 1, value: IMG_CND_Prefix + '/' + imgurl + suffix } - } else if (rgb.r != 0 || rgb.g != 0 || rgb.b != 0) { - return { status: 2, value: rgb } - } else { - return { status: 3, value: IMG_CND_Prefix + '/mall/no_img.png' } - } -} - -/** - * - * @param {千位分割付} number - * @returns - */ -export const numberWithCommas = ({ number = 0, digit = 2 }) => { - if (!isNaN(Number(number))) { - // return parseFloat(number).toFixed(digit).replace(/^\B(? { + // console.log('移除标签',val,val.endsWith("#")); + return val.endsWith('#') ? val.replace('#', '') : val +} + +/** + * 格式化编码+名称显示方式 + * @param {String} code 编码 + * @param {String} name 名称 + * @param {*} mode 模式 both:code + 名称 name: 仅显示名称 + * @returns + */ +export const formatHashTag = (code = '', name = '', mode = 'both') => { + if (mode == 'both') { + return `${formatRemoveHashTag(code)}# ${name}` + } else if (mode == 'name') { + return `${name}` + } +} + +const Digit = 10 * 10 + +/** + * 重量 进退位 单位 + */ +export const weightDigit = 1000 + +/** + * 除以 + * @param {*} val + * @param {*} digit + * @param {*} priceStatus //是否显示千位分割 + * @returns + */ +export const formatPriceDiv = (val, digit = Digit, priceStatus = false) => { + let res = strip(Number(val / digit)) || 0 + return priceStatus ? numberWithCommas({ number: res }) : res +} +/** + * 乘以 + * @param {*} val + * @param {*} digit + * @returns + */ +export const formatPriceMul = (val, digit = Digit) => { + return strip(Number(val * digit)) || 0 +} + +/** + * 格式化重量单位 (乘以) + * @param {Number} val + * @returns + */ +export const formatWeightMul = (val, digit = weightDigit) => { + return strip(Number(val * digit)) || 0 +} + +/** + * 格式化重量单位 (除以) + * @param {*} val + */ +export const formatWeightDiv = (val, digit = weightDigit) => { + return strip(Number(val / digit)) || 0 +} + +export const formatDateTime = (val, fmt = 'YYYY-MM-DD HH:mm:ss') => { + if (val) { + let time = new Date(val) + let Y = time.getFullYear() + let M = time.getMonth() + 1 + let d = time.getDate() + let h = time.getHours() + let m = time.getMinutes() + let s = time.getSeconds() + + fmt = fmt + .replace('YYYY', Y) + .replace('MM', M.toString().padStart(2, '0')) + .replace('DD', d.toString().padStart(2, '0')) + .replace('HH', h.toString().padStart(2, '0')) + .replace('mm', m.toString().padStart(2, '0')) + .replace('ss', s.toString().padStart(2, '0')) + + return fmt + } else { + return val + } +} + +/** + * 精度 + * @param {*} num + * @param {*} precision + * @returns + */ +export const strip = (num, precision = 12) => { + return +parseFloat(num.toPrecision(precision)) +} + +/** + * 转换金额单位 + * @param {*} num 金额 / 数值 + * @param {*} digit 转换单位 + * @returns + */ +export const formatMillionYuan = (num, digit = 10000) => { + return num / digit > 1 ? { num: toDecimal2(num / digit), million: true } : { num, million: false } +} + +/** + * 数值保留两位小数 + * @param {*} x + * @returns + */ +export const toDecimal2 = (x) => { + var f = parseFloat(x) + if (isNaN(f)) { + return 0 + } + f = f + '' + let index = f.lastIndexOf('.') + if (index >= 0) { + let decimal = f.substring(index + 1) + if (decimal.length == 1) { + f = f.substring(0, index + 1) + decimal + '0' + } else { + f = f.substring(0, index + 1) + decimal.substring(0, 2) + } + } + return f +} + +/** + * 格式化图片路径 + * @param {*} url + * @status true|false + * @returns + */ +export const formatImgUrl = (url, suffix = '!w200') => { + if (url) { + return url.includes('http') ? url + suffix : IMG_CND_Prefix + url + suffix + } else { + return IMG_CND_Prefix + '/mall/no_img.png' + } +} + +/** + * + * @param {纹理图} imgurl + * @param {rgb} rgb + * @param {} suffix + * @returns 1 有纹理图，2 有rgb 3默认图 + */ +export const isLabImage = (imgurl, rgb, suffix = '!w200') => { + if (imgurl) { + return { status: 1, value: IMG_CND_Prefix + '/' + imgurl + suffix } + } else if (rgb.r != 0 || rgb.g != 0 || rgb.b != 0) { + return { status: 2, value: rgb } + } else { + return { status: 3, value: IMG_CND_Prefix + '/mall/no_img.png' } + } +} + +/** + * + * @param {千位分割付} number + * @returns + */ +export const numberWithCommas = ({ number = 0, digit = 2 }) => { + if (!isNaN(Number(number))) { + // return parseFloat(number).toFixed(digit).replace(/^\B(? void, - showNumber?: number, //图片显示张数，0不限制 + value?: { + texture_url?: string //纹理图路径 + lab?: { l: number; a: number; b: number } //lab + rgb?: { r: number; g: number; b: number } //rgb + title?: string //标题 + } + show?: false | true + onClose?: () => void + showNumber?: number //图片显示张数，0不限制 } -export default ({value, show = false, onClose, showNumber = 1}: colorParams) => { +export default ({ value, show = false, onClose, showNumber = 1 }: colorParams) => { + useEffect(() => { + if (show && rgbStyle) setLabShow(() => true) + if (show && value?.texture_url) onShowImage() + if (!show) setLabShow(() => false) + }, [show]) - useEffect(() => { - if(show&&rgbStyle) setLabShow(() => true) - if(show&&value?.texture_url) onShowImage() - if(!show) setLabShow(() => false) - }, [show]) - - //显示颜色 - const [labShow, setLabShow] = useState(false) - //lab是否都是0 - const rgbStyle = useMemo(() => { - if(value?.lab&&(value.lab.l||value.lab.a||value.lab.b)) { - return {'backgroundColor':`rgb(${value.rgb?.r} ${value.rgb?.g} ${value.rgb?.b})`} - } else { - return null - } - }, [value]) - - - //显示图片 - const onShowImage = () => { - onClose?.() - let res: string[] = [] - if(value?.texture_url) { - res = value?.texture_url?.split(',').map(item => { - return formatImgUrl(item) - }) - } - let n_res = showNumber == 0? res : res?.splice(0, showNumber) - Taro.previewImage({ - current: n_res[0], - urls: n_res - }) + //显示颜色 + const [labShow, setLabShow] = useState(false) + //lab是否都是0 + const rgbStyle = useMemo(() => { + if (value?.lab && (value.lab.l || value.lab.a || value.lab.b)) { + return { backgroundColor: `rgb(${value.rgb?.r} ${value.rgb?.g} ${value.rgb?.b})` } + } else { + return null } + }, [value]) - return ( - <> - {labShow&& onClose?.()}> - - - {value?.title} - - } - - ) -} \ No newline at end of file + //显示图片 + const onShowImage = () => { + onClose?.() + let res: string[] = [] + if (value?.texture_url) { + res = value?.texture_url?.split(',').map((item) => { + return formatImgUrl(item) + }) + } + let n_res = showNumber == 0 ? res : res?.splice(0, showNumber) + Taro.previewImage({ + current: n_res[0], + urls: n_res, + }) + } + + return ( + <> + {labShow && ( + onClose?.()}> + + + {value?.title} + + + )} + + ) +} diff --git a/src/components/amountShow/index.tsx b/src/components/amountShow/index.tsx index efd3a2a..e875c48 100644 --- a/src/components/amountShow/index.tsx +++ b/src/components/amountShow/index.tsx @@ -1,29 +1,25 @@ -import { Text, View } from "@tarojs/components"; -import { memo, useCallback } from "react"; -import styles from './index.module.scss' -import classnames from "classnames"; -import { numberWithCommas } from "@/common/fotmat"; +import { Text, View } from '@tarojs/components' +import { memo, useCallback } from 'react' +import styles from './index.module.scss' +import classnames from 'classnames' +import { numberWithCommas } from '@/common/format' type Param = { - number: number, //数字 - status: 0|1|2 //0 小型，1中型，2大 + number: number //数字 + status: 0 | 1 | 2 //0 小型，1中型，2大 } -export default memo(({number = 0, status = 1}:Param) => { - const priceDom = useCallback(() => { - let res = number.toFixed(2).split('.') - let int_num = parseInt(res[0]) + '' - let decimals_num = res[1] - return ( - <> - ¥ - {numberWithCommas({number:int_num, digit:0})} - .{decimals_num} - - ) - }, [number]) +export default memo(({ number = 0, status = 1 }: Param) => { + const priceDom = useCallback(() => { + let res = number.toFixed(2).split('.') + let int_num = parseInt(res[0]) + '' + let decimals_num = res[1] return ( - - {priceDom()} - + <> + ¥ + {numberWithCommas({ number: int_num, digit: 0 })} + .{decimals_num} + ) -}) \ No newline at end of file + }, [number]) + return {priceDom()} +}) diff --git a/src/components/banner/index.tsx b/src/components/banner/index.tsx index b38c592..49afae7 100644 --- a/src/components/banner/index.tsx +++ b/src/components/banner/index.tsx @@ -3,7 +3,7 @@ import { goLink } from '@/common/common' import { GetBannerList } from '@/api/banner' import styles from './index.module.scss' import { useEffect, useState } from 'react' -import { formatImgUrl } from '@/common/fotmat' +import { formatImgUrl } from '@/common/format' type item = { title: string; img: string; url: string; id: number } diff --git a/src/components/bindSalesmanPopup/index.tsx b/src/components/bindSalesmanPopup/index.tsx index cab8af9..7074833 100644 --- a/src/components/bindSalesmanPopup/index.tsx +++ b/src/components/bindSalesmanPopup/index.tsx @@ -1,51 +1,56 @@ -import { Image, Swiper, SwiperItem, Text, View } from "@tarojs/components" -import styles from './index.module.scss' -import { formatImgUrl } from "@/common/fotmat" -import Taro from "@tarojs/taro"; -import { goLink } from "@/common/common"; +import { Image, Swiper, SwiperItem, Text, View } from '@tarojs/components' +import styles from './index.module.scss' +import { formatImgUrl } from '@/common/format' +import Taro from '@tarojs/taro' +import { goLink } from '@/common/common' type params = { - show?: true|false, - onClose?: () => void + show?: true | false + onClose?: () => void } -export default ({show, onClose}:params) => { - const onCustomer = async () => { - let res = await Taro.showModal({ - title: '是否拨打服务热线', - confirmText: '拨打', - content: '(0757) 8270 6695', - cancelText: '取消', - }) - if(res.confirm) { - Taro.makePhoneCall({ - phoneNumber: '(0757)82706695' - }) - } +export default ({ show, onClose }: params) => { + const onCustomer = async () => { + let res = await Taro.showModal({ + title: '是否拨打服务热线', + confirmText: '拨打', + content: '(0757) 8270 6695', + cancelText: '取消', + }) + if (res.confirm) { + Taro.makePhoneCall({ + phoneNumber: '(0757)82706695', + }) } + } - const onConfirm = () => { - onClose?.() - goLink('/pages/bindSalesman/index') - } - return ( - <> - {show&& - - - - - - 提示 - 暂未开通下单权限功能，稍后有客服联系您，请注意接收电话。 - - - onConfirm()}>输入邀请码 - onCustomer()}>联系客服 - - - - } - - ) - -} \ No newline at end of file + const onConfirm = () => { + onClose?.() + goLink('/pages/bindSalesman/index') + } + return ( + <> + {show && ( + + + + + + + 提示 + 暂未开通下单权限功能，稍后有客服联系您，请注意接收电话。 + + + onConfirm()}> + 输入邀请码 + + onCustomer()}> + 联系客服 + + + + + + )} + + ) +} diff --git a/src/components/product/index.tsx b/src/components/product/index.tsx index 193c2e5..9209dea 100644 --- a/src/components/product/index.tsx +++ b/src/components/product/index.tsx @@ -1,40 +1,47 @@ -import { Image, View } from "@tarojs/components" -import Taro from "@tarojs/taro" -import { goLink } from "@/common/common" +import { Image, View } from '@tarojs/components' +import Taro from '@tarojs/taro' +import { goLink } from '@/common/common' import styles from './index.module.scss' -import { formatHashTag, formatImgUrl } from "@/common/fotmat" -import LabAndImg from "../LabAndImg" -import { useCallback, useMemo } from "react" +import { formatHashTag, formatImgUrl } from '@/common/format' +import LabAndImg from '../LabAndImg' +import { useCallback, useMemo } from 'react' type Params = { - desStatus?: true | false, - productList?: any[], - popupShow?: (any) => void + desStatus?: true | false + productList?: any[] + popupShow?: (any) => void } export default ({ desStatus = true, productList = [], popupShow }: Params) => { - - const labAndImgObj = useCallback((item) => { - return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url } - }, [productList]) - return ( - - {productList?.map(item => { - return popupShow?.(item)}> - - - {item.product_color_count}色 - - - {formatHashTag(item.code, '')} {item.name} - - {item.width} - {item.weight_density} - - {item.component} - {desStatus && {item.describe}} - - - })} - - ) + const labAndImgObj = useCallback( + (item) => { + return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url } + }, + [productList], + ) + return ( + + {productList?.map((item) => { + return ( + popupShow?.(item)}> + + + {item.product_color_count}色 + + + + {formatHashTag(item.code, '')} + {item.name} + + + {item.width} + {item.weight_density} + + {item.component} + {desStatus && {item.describe}} + + + ) + })} + + ) } diff --git a/src/components/selectProduct/index.module.scss b/src/components/selectProduct/index.module.scss new file mode 100644 index 0000000..71db5a2 --- /dev/null +++ b/src/components/selectProduct/index.module.scss @@ -0,0 +1,82 @@ + +.select_input{ + width: 100%; +} +.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; + } + } +} +.stock_disabled{ + background: #f7f7f7; + border-radius: 10px; + .label{ + color: #cccccc !important; + } +} + +.drawer { + 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{ + height: 600px; + padding-top: 22px; + .selectItem{ + font-size: 28px; + color: #707070; + padding: 22px 30px; + } + .selected{ + color: #3287EC; + font-weight: 700; + } + } + } +} +.flexBox { + 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 new file mode 100644 index 0000000..bb91f40 --- /dev/null +++ b/src/components/selectProduct/index.tsx @@ -0,0 +1,112 @@ +import styles from './index.module.scss' +import { Image, Text, ScrollView, View } from '@tarojs/components' +import React, { FC, useCallback, useEffect, useMemo, useState } from 'react' +import classnames from 'classnames' +import Search from '../search' +import Popup from '../popup' +import { SelectProductListApi } from '@/api/index' + + +type PropsType = { + selectColorId: number + noAll?: boolean + onSelect?: Function + children?: React.ReactNode +} + +const SelectProduct:FC = (params) => { + const { selectColorId, noAll, onSelect } = params + + const [selectId, setSelectId] = useState(0) + + useEffect(()=>{ + setSelectId(selectColorId) + }, [selectColorId]) + + const {fetchData, state} = SelectProductListApi() + + const [selectValue, setSelectValue] = useState() + + const [productList, setProductList] = useState([{id:1}]) + + const clickEvent = () => {} + + 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 + } + } + + useEffect(() => { + getProductList() + }, []) + + const getProductList = async () => { + let res = await fetchData() + !noAll && res.data.list?.unshift({ name: '全部', id: 0 }) + setProductList(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 getSearchData = useCallback((e) => { + // pageNum.current.page = 1 + // setOrderData(() => ({ list: [], total: 0 })) + // setSearchField((val) => ({ ...val, name: e, size: 10 })) + }, []) + + useEffect(() => { + setSelectId(selectColorId) + const res = productList.find((item) => item.id == selectColorId) + setSelectValue(changeName(res)) + }, [selectColorId]) + + return ( + <> + + + + 面料名称 + + {selectValue ? selectValue : '请选择'} + + + + + + + + + + {list.map((item) => { + return ( + getSelectData(item)}> + {/* {changeName(item)} */} + + ) + })} + + + + + ) +} +export default SelectProduct diff --git a/src/components/shopCart/index.tsx b/src/components/shopCart/index.tsx index 5db1201..ecf23c2 100644 --- a/src/components/shopCart/index.tsx +++ b/src/components/shopCart/index.tsx @@ -9,7 +9,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react' import Taro from '@tarojs/taro' import { alert, goLink } from '@/common/common' import { GetShoppingCartApi, DelShoppingCartApi, UpdateShoppingCartApi } from '@/api/shopCart' -import { formatHashTag, formatImgUrl, formatPriceDiv } from '@/common/fotmat' +import { formatHashTag, formatImgUrl, formatPriceDiv } from '@/common/format' import { setParam } from '@/common/system' import { debounce, throttle } from '@/common/util' import Counter from '../counter' diff --git a/src/components/uploadImage/index.tsx b/src/components/uploadImage/index.tsx index f427e02..aaf6964 100644 --- a/src/components/uploadImage/index.tsx +++ b/src/components/uploadImage/index.tsx @@ -2,7 +2,7 @@ import Taro, { FC } from '@tarojs/taro' import { memo, useEffect, useState } from 'react' import useUploadCDNImg from '@/use/useUploadImage' import { Image, Text, View } from '@tarojs/components' -import { formatImgUrl } from '@/common/fotmat' +import { formatImgUrl } from '@/common/format' import classnames from 'classnames' import styles from './index.module.scss' diff --git a/src/pages/sampleComparison/compoents/bluetooth/LinkBlueTooth.tsx b/src/pages/colorRelated/components/bluetooth/LinkBlueTooth.tsx similarity index 97% rename from src/pages/sampleComparison/compoents/bluetooth/LinkBlueTooth.tsx rename to src/pages/colorRelated/components/bluetooth/LinkBlueTooth.tsx index a2c1478..04b9dc2 100644 --- a/src/pages/sampleComparison/compoents/bluetooth/LinkBlueTooth.tsx +++ b/src/pages/colorRelated/components/bluetooth/LinkBlueTooth.tsx @@ -5,7 +5,7 @@ import { useBluetooth } from '@/use/contextBlueTooth' import SearchInput from '@/components/searchInput' import Popup from './Popup' import classnames from 'classnames' -import styles from '../../css/linkBlueTooth.module.scss' +import styles from '../css/linkBlueTooth.module.scss' export default memo(() => { const { state, init, startScan, connect, disconnect } = useBluetooth() diff --git a/src/pages/sampleComparison/compoents/bluetooth/Popup.tsx b/src/pages/colorRelated/components/bluetooth/Popup.tsx similarity index 98% rename from src/pages/sampleComparison/compoents/bluetooth/Popup.tsx rename to src/pages/colorRelated/components/bluetooth/Popup.tsx index ad81e1f..1e23885 100644 --- a/src/pages/sampleComparison/compoents/bluetooth/Popup.tsx +++ b/src/pages/colorRelated/components/bluetooth/Popup.tsx @@ -1,7 +1,7 @@ import { ScrollView, View } from '@tarojs/components' import { memo, useEffect, useState } from 'react' import Loading from '@/components/loading' -import style from '../../css/popup.module.scss' +import style from '../css/popup.module.scss' interface params { state: any diff --git a/src/pages/sampleComparison/css/linkBlueTooth.module.scss b/src/pages/colorRelated/components/css/linkBlueTooth.module.scss similarity index 88% rename from src/pages/sampleComparison/css/linkBlueTooth.module.scss rename to src/pages/colorRelated/components/css/linkBlueTooth.module.scss index 0714b46..9b5de05 100644 --- a/src/pages/sampleComparison/css/linkBlueTooth.module.scss +++ b/src/pages/colorRelated/components/css/linkBlueTooth.module.scss @@ -1,10 +1,7 @@ .main { - width: 690px; - height: 86px; + width: 100%; background: #ffffff; border-radius: 10px; - margin-top: 24px; - margin-left: 30px; .bluetooth_link { display: flex; @@ -39,4 +36,4 @@ color: #f0ec09; } } -} \ No newline at end of file +} diff --git a/src/pages/sampleComparison/css/popup.module.scss b/src/pages/colorRelated/components/css/popup.module.scss similarity index 100% rename from src/pages/sampleComparison/css/popup.module.scss rename to src/pages/colorRelated/components/css/popup.module.scss diff --git a/src/pages/colorRelated/findColor/components/DrawerCenter/index.module.scss b/src/pages/colorRelated/findColor/components/DrawerCenter/index.module.scss new file mode 100644 index 0000000..2fe9efc --- /dev/null +++ b/src/pages/colorRelated/findColor/components/DrawerCenter/index.module.scss @@ -0,0 +1,46 @@ +.popups { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100vh; + .cover { + position: fixed; + height: 100vh; + width: 100vw; + top: 0; + left: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 10; + } + .popcoms { + z-index: 100; + position: fixed; + top: 50%; + left: 50%; + border-radius: 20px; + transform: translateX(-50%) translateY(-50%); + .con { + width: 500px; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + } + .showRgb { + width: 100%; + height: 550px; + background-color: #fff; + border-radius: 20px; + } + .name { + width: 100%; + text-align: center; + color: #fff; + padding: 20px 0; + font-size: 26px; + background: rgba(0, 0, 0, 0.5); + border-radius: 20px; + } + } +} diff --git a/src/pages/colorRelated/findColor/components/DrawerCenter/index.tsx b/src/pages/colorRelated/findColor/components/DrawerCenter/index.tsx new file mode 100644 index 0000000..d1093b7 --- /dev/null +++ b/src/pages/colorRelated/findColor/components/DrawerCenter/index.tsx @@ -0,0 +1,30 @@ +import { View } from "@tarojs/components" +import React, { FC, memo, useEffect, useState } from "react" +import styles from './index.module.scss' + +type PropsType = { + showModal: boolean + children?: React.ReactNode +} + +const DrawerCenter: FC = memo((props) => { + const { children, showModal } = props + + const [show, setShow] = useState(false) + + useEffect(() => { + setShow(showModal) + }, [showModal]) + // 关闭 + const close = () => { + setShow(false) + } + + return show ? ( + + {children} + + + ) : null +}) +export default DrawerCenter diff --git a/src/pages/colorRelated/findColor/components/HistoryColor/index.module.scss b/src/pages/colorRelated/findColor/components/HistoryColor/index.module.scss new file mode 100644 index 0000000..753d211 --- /dev/null +++ b/src/pages/colorRelated/findColor/components/HistoryColor/index.module.scss @@ -0,0 +1,113 @@ + +.history_color { + .selectCon { + display: flex; + flex-direction: column; + align-items: center; + height: 100%; + .selectList { + width: 692px; + height: 230px; + background: #ffffff; + border-radius: 30px; + margin-bottom: 20px; + display: flex; + align-items: center; + padding: 20px 0; + box-sizing: border-box; + .rgbColor { + width: 161px; + height: 161px; + background: red; + border-radius: 50%; + margin-left: 30px; + box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.6); + } + .product_con { + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 32px; + font-size: 26px; + height: 100%; + width: 300px; + color: #505050; + .product_name { + @include common_ellipsis(); + font-size: 28px; + color: #5f5f5f; + font-weight: 700; + margin-bottom: 46px; + } + .product_color { + @include common_ellipsis(); + margin-bottom: 15px; + } + .contrast { + display: flex; + margin-bottom: 20px; + .g_num { + @include common_ellipsis(); + } + .num { + color: #00499f; + background: #c9e4ff; + padding: 3px 10px; + border-radius: 7px; + margin-left: 18px; + } + } + .date { + background: rgba(0, 0, 0, 0.3); + color: #fff; + padding: 3px 10px; + border-radius: 10px; + width: 258px; + } + } + .labColor { + flex: 1; + // height: 100%; + display: flex; + flex-direction: column; + align-items: center; + font-size: 27px; + color: #707070; + .labColor_btn { + width: 47px; + height: 47px; + background: #007aff; + color: #fff; + text-align: center; + line-height: 47px; + border-radius: 50%; + font-size: 39px; + margin-bottom: 20px; + } + .labColor_con { + flex: 1; + .L, + .a { + margin-bottom: 10px; + } + } + } + } + .noData { + display: flex; + justify-content: center; + align-items: center; + color: #707070; + height: 100%; + width: 100%; + font-size: 26px; + } + } + .selectList-scroll-color { + height: 70vh; + width: 100%; + } + .drawer-container { + background: #f0f0f0; + } +} diff --git a/src/pages/colorRelated/findColor/components/HistoryColor/index.tsx b/src/pages/colorRelated/findColor/components/HistoryColor/index.tsx new file mode 100644 index 0000000..1335fcb --- /dev/null +++ b/src/pages/colorRelated/findColor/components/HistoryColor/index.tsx @@ -0,0 +1,89 @@ +import Popup from "@/components/popup" +import { ScrollView, View } from "@tarojs/components" +import { FC, useEffect, 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"; + +type PropsType = { + showModal: boolean + onColor?:Function +} + +const HistoryColor: FC = (props) => { + + + const { onColor, showModal } = props + const [show, setShow] = useState(false) + + + useEffect(() => { + setShow(showModal) + }, [showModal]) + + + const closeEven = () => { + setShow(false) + } + + const [list, setList] = useState([ + { + p_time: 0, + lab: [], + code: '', + name: '' + } + ]) + + //保留1位小数 + const noScale = (val, num = 1) => { + return val?.toFixed(num) + } + //rgb转换字符串 + const labRoRgb = (val) => { + const rgb = toRgb(val) + return `rgb(${rgb[0]},${rgb[1]},${rgb[2]})` + } + + const getInfo = (item) => { + onColor && onColor(item) + } + + + + return ( + + + + + {!!list?.length ? ( + list.map((item, index) => { + return ( + getInfo(item)}> + + + {item.code + ' ' + item.name} + {formatDateTime(item.p_time)} + + + + + + L*：{noScale(item.lab[0])} + a*：{noScale(item.lab[1])} + b*：{noScale(item.lab[2])} + + + + ) + }) + ) : ( + 暂无数据 + )} + + + + + ) +} +export default HistoryColor diff --git a/src/pages/colorRelated/findColor/components/LabColor/index.module.scss b/src/pages/colorRelated/findColor/components/LabColor/index.module.scss new file mode 100644 index 0000000..22da60f --- /dev/null +++ b/src/pages/colorRelated/findColor/components/LabColor/index.module.scss @@ -0,0 +1,46 @@ +.lab_color_main { + display: flex; + justify-content: space-between; + padding: 20px 0; + font-size: 28px; + .btnColor { + width: 264px; + height: 264px; + background: #dddddd; + border-radius: 50%; + text-align: center; + line-height: 264px; + color: #707070; + box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.6); + } + .labCon { + display: flex; + flex-direction: column; + justify-content: center; + padding: 20px 0 20px 20px; + color: #707070; + .lab { + color: #707070; + display: flex; + margin-bottom: 20px; + text { + display: flex; + &:nth-child(1) { + font-weight: 700; + } + &:nth-child(n + 2) { + background-color: #fff; + margin-left: 17px; + padding: 3px 15px; + border-radius: 10px; + width: 73px; + display: flex; + justify-content: center; + } + } + } + .date { + font-size: 26px; + } + } +} diff --git a/src/pages/colorRelated/findColor/components/LabColor/index.tsx b/src/pages/colorRelated/findColor/components/LabColor/index.tsx new file mode 100644 index 0000000..077fc22 --- /dev/null +++ b/src/pages/colorRelated/findColor/components/LabColor/index.tsx @@ -0,0 +1,54 @@ +import { View, Text } from '@tarojs/components' +import { FC, useMemo } from 'react' +import { toRgb } from '@/common/bluetooth/color/colorSpace' +import styles from './index.module.scss' +import { formatDateTime } from '@/common/format' + +type PropsType = { + lab?: Array + time?: any + onLab?: Function +} + +const LabColor: FC = (props) => { + const { lab = [], time, onLab } = props + const noScale = (val, num = 1) => { + return val.toFixed(num) + } + + const labObj = useMemo(() => { + if (lab.length <= 0) return { lab: [], rgb: '' } + const rgb = toRgb(lab) + return { + lab: [noScale(lab[0]), noScale(lab[1]), noScale(lab[2])], + rgb: `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`, + } + }, [lab]) + + const labTime = useMemo(() => { + if (time.length <= 0) return '' + return formatDateTime(time) + }, [time]) + + const onLabEven = () => { + onLab && onLab() + } + + return ( + + + {!!labObj.lab.length ? '' : '点击取色'} + + + + L*a*b*: + {labObj.lab[0]} + {labObj.lab[1]} + {labObj.lab[2]} + + {labTime && 取样时间: {labTime}} + + + ) +} +export default LabColor diff --git a/src/pages/colorRelated/findColor/components/RecommendColor/index.module.scss b/src/pages/colorRelated/findColor/components/RecommendColor/index.module.scss new file mode 100644 index 0000000..0b1633a --- /dev/null +++ b/src/pages/colorRelated/findColor/components/RecommendColor/index.module.scss @@ -0,0 +1,121 @@ +.RecommendColor_main { + width: 100%; + .RecommendColor_list { + display: flex; + flex-wrap: wrap; + .RecommendColor_item { + background: #fff; + width: 48.5%; + height: 356px; + border-radius: 30px; + margin-bottom: 20px; + &:nth-child(2n) { + margin-left: 3%; + } + .rgbColor { + width: 100%; + height: 188px; + background: rgb(0, 195, 255); + border-radius: 30px 30px 0 0; + position: relative; + .lab { + width: 90px; + height: 100%; + background: rgba(0, 0, 0, 0.3); + position: absolute; + right: 0; + top: 0; + border-radius: 0 30px 0 0; + color: #fff; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: 26px; + text { + &:nth-child(1) { + font-weight: 700; + margin-bottom: 10px; + } + } + } + } + .product_con { + display: flex; + flex-direction: column; + font-size: 26px; + padding: 10px 15px 15px 15px; + box-sizing: border-box; + .product_color { + color: #505050; + @include common_ellipsis(); + } + .product_title { + display: flex; + justify-content: space-between; + .product_name { + @include common_ellipsis(); + color: #0c68c5; + font-weight: 700; + font-size: 28px; + flex: 1; + margin-right: 10px; + } + .product_num { + background: #c9e4ff; + color: #00499f; + padding: 3px 6px; + font-size: 26px; + border-radius: 5px; + margin-bottom: 13px; + } + } + .date { + margin-top: 15px; + color: #808080; + display: flex; + align-items: center; + justify-content: space-between; + .labColor_btn { + width: 47px; + height: 47px; + background: #007aff; + color: #fff; + text-align: center; + line-height: 47px; + border-radius: 50%; + font-size: 39px; + margin-right: 10px; + } + .g_num { + flex: 1; + margin-right: 10px; + @include common_ellipsis(); + } + } + } + } + } + .con { + width: 500px; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + .showRgb { + width: 100%; + height: 550px; + background-color: #fff; + border-radius: 20px; + } + .name { + width: 100%; + text-align: center; + color: #fff; + padding: 20px 0; + font-size: 26px; + background: rgba(0, 0, 0, 0.5); + border-radius: 20px; + } + } +} diff --git a/src/pages/colorRelated/findColor/components/RecommendColor/index.tsx b/src/pages/colorRelated/findColor/components/RecommendColor/index.tsx new file mode 100644 index 0000000..2e2bc10 --- /dev/null +++ b/src/pages/colorRelated/findColor/components/RecommendColor/index.tsx @@ -0,0 +1,83 @@ +import { FC, useState } from 'react' +import { View, Text } from '@tarojs/components' +import { toRgb } from '@/common/bluetooth/color/colorSpace' +import styles from './index.module.scss' +import { formatDateTime } from '@/common/format' +import classnames from 'classnames' +import DrawerCenter from '../DrawerCenter' + +type PropsType = { + list?: Array + customStyle?: React.CSSProperties +} + +const RecommendColor: FC = (props) => { + + const { list, customStyle = {} } = props + + //rgb转换字符串 + const labRoRgb = (val) => { + const lab = val ? [val.l, val.a, val.b] : [] + const rgb = toRgb(lab) + return `rgb(${rgb[0]},${rgb[1]},${rgb[2]})` + } + + //保留1位小数 + const noScale = (val, num = 1) => { + return val.toFixed(num) + } + + const [show, setShow] = useState(false) + const [selectObj, setSelectObj] = useState({ + rgb: '', + product_color_code: '', + product_color_name: '' + }) + + const openShow = (val) => { + setShow(true) + setSelectObj(val) + setSelectObj({ ...val, rgb: labRoRgb(val.lab) }) + } + + + return ( + + + {list?.map((item) => { + return ( + openShow(item)}> + + + L*a*b* + {noScale(item.lab.l)} + {noScale(item.lab.a)} + {noScale(item.lab.b)} + + + + + {item.product_code + '# ' + item.product_name} + {noScale(item.match_rate_percent, 1)}% + + {item.product_color_code + ' ' + item.product_color_name} + + {item.dyelot_number} + + + + + + ) + })} + + + + + + {selectObj.product_color_code + ' ' + selectObj.product_color_name} + + + + ) +} +export default RecommendColor diff --git a/src/pages/colorRelated/findColor/index.config.ts b/src/pages/colorRelated/findColor/index.config.ts new file mode 100644 index 0000000..f3418f1 --- /dev/null +++ b/src/pages/colorRelated/findColor/index.config.ts @@ -0,0 +1,4 @@ +export default { + navigationBarTitleText: '取色查找', + enableShareAppMessage: false, +} diff --git a/src/pages/colorRelated/findColor/index.module.scss b/src/pages/colorRelated/findColor/index.module.scss new file mode 100644 index 0000000..a9abbf6 --- /dev/null +++ b/src/pages/colorRelated/findColor/index.module.scss @@ -0,0 +1,94 @@ +page { + height: 100vh; +} +.findColor_main { + display: flex; + flex-direction: column; + align-items: center; + padding: 20px; + min-height: 100%; + background: #f3f3f3; + box-sizing: border-box; + .findColor_main_search { + background: #fff; + width: 100%; + padding: 0 20rpx; + border-radius: 20rpx; + box-sizing: border-box; + } + .findColor_main_title { + width: 100%; + .RecommendColor_title { + display: flex; + justify-content: space-between; + font-size: 28px; + margin-bottom: 20px; + padding: 10px 20px; + box-sizing: border-box; + color: #707070; + font-weight: bold; + border-bottom: 1px dashed #e4e4e4; + width: 100%; + text { + &:nth-child(2) { + color: #007aff; + } + } + } + } + .noList { + flex: 1; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + color: #707070; + font-size: 26px; + } + .list { + display: flex; + padding: 20px; + box-sizing: border-box; + border: 1px solid #ccc; + width: 100%; + justify-content: space-between; + border-radius: 10px; + font-size: 25px; + margin-top: 20px; + } + .measure { + width: 100%; + .list { + justify-content: center; + } + .content { + width: 100%; + } + .diff { + text-align: center; + } + } + .color { + margin-top: 20px; + } + .labAndRgb { + display: flex; + width: 100%; + justify-content: center; + margin-top: 30px; + .item { + margin-top: 20px; + font-size: 28px; + } + } + .color_list { + margin-top: 30px; + margin-bottom: 30px; + display: flex; + justify-content: center; + .color_item { + width: 250px; + height: 250px; + } + } +} diff --git a/src/pages/colorRelated/findColor/index.tsx b/src/pages/colorRelated/findColor/index.tsx new file mode 100644 index 0000000..344022a --- /dev/null +++ b/src/pages/colorRelated/findColor/index.tsx @@ -0,0 +1,140 @@ +import { View, Text } from '@tarojs/components' +import { FC, useEffect, useState } from 'react' +import styles from './index.module.scss' +import LineBluetooth from '../components/bluetooth/LinkBlueTooth' +import HistoryColor from './components/HistoryColor' +import LabColor from './components/LabColor' +import SelectProduct from '@/components/selectProduct' +import { useBluetooth } from '@/use/contextBlueTooth' +import RecommendColor from './components/RecommendColor' +import { FindColorListApi } from '@/api/index' +import Loading from '@/components/loading' +import Taro from '@tarojs/taro' +import { throttle } from '@/common/util' + +const FindColor: FC = () => { + const { measureAndGetLab, disconnect, connected, deviceLab } = useBluetooth() + const { state: colorState, fetchData: ApiFindColorList } = FindColorListApi() + + const [list, setList] = useState([]) + const [product, setProduct] = useState>({}) + + //获取数据 + const getData = async () => { + setList([]) + await ApiFindColorList({ + product_id: product.id, + l: labArray[0], + a: labArray[1], + b: labArray[2], + }) + setList(colorState.data.list) + } + + const [labArray, setlabArray] = useState>([]) + const [labtime, setLabtime] = useState(+new Date()) + //点击获取lab按钮 + const labEven = throttle(async () => { + if (!connected) { + Taro.showToast({ title: '请先链接设备', icon: 'none' }) + return + } + if (!product) { + Taro.showToast({ title: '请选择面料', icon: 'none' }) + return + } + await measureAndGetLab() + }, 500) + const selectInput = (val) => { + setProduct(val) + setLabtime('') + setlabArray([]) + setList([]) + } + + const getColor = (val) => { + setList([]) + setlabArray(val.lab) + setLabtime(val.p_time) + setProduct({ + code: val.code, + default: val.default, + id: val.id, + name: val.name, + }) + getData() + } + + const [listLoading, setListLoading] = useState(false) + + useEffect(() => { + setListLoading(colorState.loading) + }, [colorState]) + + const [showHistory, setShowHistory] = useState(false) + + const ResultContainer = () => { + if (!listLoading && list?.length > 0) { + return + } else if (!listLoading && labArray.length == 0) { + return -请取色- + } else if (!listLoading && labArray.length > 0 && list?.length == 0) { + return -暂无数据- + } else if (listLoading) { + return + } + } + + //历史取样 + const historyShowEven = () => { + setShowHistory(true) + } + + useEffect(() => { + if (!product) { + Taro.showToast({ title: '请选择面料', icon: 'none' }) + return + } + if (deviceLab) { + setLabtime(+new Date()) + setlabArray([deviceLab.L, deviceLab.a, deviceLab.b]) + // console.log('state.labArray::',state.labArray) + localSave() + getData() + } + }, [deviceLab]) + + //本地存储取色记录(无差别存储版本) + const localSave = () => { + let historyColorList = Taro.getStorageSync('historyColor') || [] + let obj = { + ...product, + p_time: labtime, + lab: labArray, + } + historyColorList.unshift(obj) + if (historyColorList.length > 30) historyColorList.pop() + Taro.setStorageSync('historyColor', historyColorList) + } + + return ( + + + + + + + + + 推荐数 ({list?.length}) + 历史取样 + + + + {ResultContainer()} + + + ) +} + +export default FindColor diff --git a/src/pages/sampleComparison/index.config.ts b/src/pages/colorRelated/sampleComparison/index.config.ts similarity index 100% rename from src/pages/sampleComparison/index.config.ts rename to src/pages/colorRelated/sampleComparison/index.config.ts diff --git a/src/pages/sampleComparison/index.module.scss b/src/pages/colorRelated/sampleComparison/index.module.scss similarity index 100% rename from src/pages/sampleComparison/index.module.scss rename to src/pages/colorRelated/sampleComparison/index.module.scss diff --git a/src/pages/sampleComparison/index.tsx b/src/pages/colorRelated/sampleComparison/index.tsx similarity index 90% rename from src/pages/sampleComparison/index.tsx rename to src/pages/colorRelated/sampleComparison/index.tsx index c0f6885..471c377 100644 --- a/src/pages/sampleComparison/index.tsx +++ b/src/pages/colorRelated/sampleComparison/index.tsx @@ -1,10 +1,10 @@ import { Image, Text, Textarea, View } from '@tarojs/components' import Taro, { useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro' import { useCallback, useEffect, useMemo, useRef, useState } from 'react' -import { useBluetooth } from '../../use/contextBlueTooth' +import { useBluetooth } from '@/use/contextBlueTooth' import classnames from 'classnames' -import LinkBlueTooth from './compoents/bluetooth/LinkBlueTooth' -import { toRgb } from '../../common/bluetooth/color/colorSpace' +import LinkBlueTooth from '../components/bluetooth/LinkBlueTooth' +import { toRgb } from '@/common/bluetooth/color/colorSpace' import styles from './index.module.scss' import { productabsorbcontrast } from '@/api/index' export default () => { @@ -119,16 +119,9 @@ export default () => { } return ( - {/* - - 蓝牙设备 - - - - - - */} - + + + 基础样品 diff --git a/src/pages/colorRelated/takeColor/components/ColorCard/index.module.scss b/src/pages/colorRelated/takeColor/components/ColorCard/index.module.scss new file mode 100644 index 0000000..df46437 --- /dev/null +++ b/src/pages/colorRelated/takeColor/components/ColorCard/index.module.scss @@ -0,0 +1,184 @@ + +@mixin flex-center { + display: flex; + justify-content: center; + align-items: center; +} +@mixin flex-vertical-center { + display: flex; + align-items: center; +} +@mixin ellipsis { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + display: inline-block; +} +.color-list { + @include flex-vertical-center; + justify-content: space-between; + width: 690px; + background: #ffffff; + opacity: 1; + padding: 30px; + box-sizing: border-box; + margin: 20px auto 0; + border-radius: 35px; + z-index: 0; + position: relative; + border: 4px solid transparent; +} +.vertical { + position: absolute; + width: 0; + height: 105%; + z-index: -1; + overflow: hidden; + top: 50%; + left: 50%; + border-radius: 35px; + transform: translate(-50%, -50%); +} +.vertical view { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 690px; + height: 95%; + border-radius: 35px; + border: 4px solid #007aff; + // border-bottom: 3px solid #007AFF; +} +.move-vertical { + width: 700px; + animation: moveVertical 0.3s ease; +} +@keyframes moveVertical { + from { + width: 0; + } + to { + width: 700px; + } +} +.horizontal { + position: absolute; + width: 100%; + height: 100%; + z-index: -1; + overflow: hidden; + top: 50%; + left: 50%; + border-radius: 35px; + transform: translate(-50%, -50%); +} +.move-horizontal { + height: 0; + animation: moveHorizontal 0.3s ease 0.3s; +} +@keyframes moveHorizontal { + from { + height: 100%; + } + to { + height: 0; + } +} +.flash { + animation-name: KFlash; + animation-duration: 0.5s; + animation-timing-function: linear; + animation-direction: alternate; + animation-iteration-count: infinite; +} +@keyframes KFlash { + to { + border: 4px solid #999; + } +} +.c-image { + width: 161px; + height: 161px; + background: rgba(0, 0, 0, 0); + overflow: hidden; + border-radius: 50%; + position: relative; +} +.c-image text { + font-size: 25px; + color: white; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} +.c-image image { + width: 100%; + height: 100%; +} +.c-info { + width: 296px; + margin-left: 25px; + margin-right: 25px; + overflow: hidden; + line-height: 34px; +} +.c-info text { + @include ellipsis; + width: 100%; + font-size: 26px; + font-weight: 400; + line-height: 34px; + color: #707070; +} +.c-i-title { + @include ellipsis; + width: 100%; + font-size: 28px; + font-weight: bold; + line-height: 38px; + color: #707070; + margin: 5px 0; +} +.c-i-date { + @include flex-center; + width: 268px; + height: 38px; + background: rgba(0, 0, 0, 0.3); + border-radius: 6px; + font-size: 24px; + font-weight: 400; + color: #ffffff; + margin-top: 17px; +} +.c-lab { + height: 100%; + justify-self: flex-end; + @include flex-vertical-center; + flex-direction: column; +} +.c-lab .c-lab-button { + @include flex-center; + height: 48px; + min-width: 96px; + background: #007aff; + border-radius: 50px; + font-size: 24px; + font-weight: 400; + line-height: 32px; + color: #ffffff; + margin-bottom: 12px; + padding: 0 15px; +} +.c-lab .c-lab-button.again { + background: #f0f0f0; + color: #007aff; +} +.c-lab .c-lab-text { + font-size: 24px; + font-weight: 400; + line-height: 36px; + color: #707070; + margin-top: 25px; +} diff --git a/src/pages/colorRelated/takeColor/components/ColorCard/index.tsx b/src/pages/colorRelated/takeColor/components/ColorCard/index.tsx new file mode 100644 index 0000000..0a18dbd --- /dev/null +++ b/src/pages/colorRelated/takeColor/components/ColorCard/index.tsx @@ -0,0 +1,78 @@ +import { View, Text } from '@tarojs/components' +import React, { FC } from 'react' +import classnames from 'classnames' +import styles from './index.module.scss' +import { formatHashTag } from '@/common/format' +import dayjs from 'dayjs' + +type PropsType = { + item?: Record + key?: any + index?: number + onPreviewRgb?: Function + onTakeColor?: Function +} + +const ColorCard: FC = (params) => { + const { item = {}, index, onTakeColor, onPreviewRgb, key } = params + + const truncation = (ev) => { + if (ev) { + ev += '' + let index = ev.lastIndexOf('.') + let suffix = ev.substr(index + 1) + if (suffix.length > 2) { + suffix = suffix.substr(0, 1) + ev = ev.substr(0, index) + '.' + suffix + } + return ev + } else { + return 0 + } + } + + const handleTakeColor = () => { + onTakeColor && onTakeColor(index) + } + + const handlePreviewRgb = () => { + onPreviewRgb && onPreviewRgb() + } + + return ( + + + + + + + {!item.sampling && 末取样} + + + {formatHashTag(item.product_code, item.product_name)} + {formatHashTag(item.product_color_code, item.product_color_name)} + {item.absorb_lab_time && dayjs(item.absorb_lab_time).format('YYYY-MM-DD HH:mm:ss')} + + + + {item.sampling ? '重新取样' : '取样'} + + + L*: {truncation(item?.currentLab?.l)} + a*: {truncation(item?.currentLab?.a)} + b*: {truncation(item?.currentLab?.b)} + + + + ) +} +export default ColorCard diff --git a/src/pages/colorRelated/takeColor/components/Texture/index.module.scss b/src/pages/colorRelated/takeColor/components/Texture/index.module.scss new file mode 100644 index 0000000..1052c3c --- /dev/null +++ b/src/pages/colorRelated/takeColor/components/Texture/index.module.scss @@ -0,0 +1,68 @@ + + @mixin flex-center{ + display: flex; + justify-content: center; + align-items: center; + } + @mixin flex-vertical-center{ + display: flex; + align-items: center; + } + .tc-info{ + @include flex-vertical-center; + justify-content: space-between; + margin: 15px 30px; + } + .tc-i-upload{ + width: 264px; + height: 264px; + background: #DDDDDD; + border-radius: 264px; + position: relative; + z-index: 1; + overflow: hidden; + } + .tc-i-upload image{ + width: 100%; + height: 100%; + } + .tc-i-u-box{ + @include flex-center; + flex-direction: column; + position: absolute; + z-index: -1; + width: 100%; + height: 100%; + color: #707070; + font-size: 26px; + } + .tc-i-u-box text{ + margin-bottom: 15px; + font-size: 50px; + } + .tc-i-num{ + @include flex-vertical-center; + font-size: 44px; + font-weight: 400; + line-height: 58px; + } + .tc-i-num>view{ + padding: 0 48px; + position: relative; + text-align: center; + } + .tc-i-num>view:first-child::after{ + content: " "; + width: 0px; + height: 64px; + border: 2px solid #DDDDDD; + position: absolute; + right: 0;top: 50%; + transform: translateY(-50%); + } + .tc-i-num text{ + font-size: 26px; + font-weight: 400; + line-height: 34px; + color: #707070; + } diff --git a/src/pages/colorRelated/takeColor/components/Texture/index.tsx b/src/pages/colorRelated/takeColor/components/Texture/index.tsx new file mode 100644 index 0000000..ce2e466 --- /dev/null +++ b/src/pages/colorRelated/takeColor/components/Texture/index.tsx @@ -0,0 +1,48 @@ +import { View, Text,Image } from '@tarojs/components' +import styles from './index.module.scss' +import classnames from 'classnames' +import { FC, useRef, useState } from "react" +import Upload from '../Upload' +import {screenshot} from '@/common/util' + + +type PropsType = { + onUploadConfirm?: Function +} + +const Texture:FC = (params) => { + const {onUploadConfirm} = params + + const handleUploadConfirm = () => { + onUploadConfirm && onUploadConfirm() + } + + const uploadEl = useRef() + + return ( + + + + {detail.texture_url && } + + + + 上传纹理 + + + + + {(data?.list?.length ?? 0) - calcNoSampling} + 已取样 + + + {calcNoSampling} + 未取样 + + + + + + ) +} +export default Texture diff --git a/src/pages/colorRelated/takeColor/components/Upload/index.module.scss b/src/pages/colorRelated/takeColor/components/Upload/index.module.scss new file mode 100644 index 0000000..67f90fc --- /dev/null +++ b/src/pages/colorRelated/takeColor/components/Upload/index.module.scss @@ -0,0 +1,68 @@ + + @mixin flex-center{ + display: flex; + justify-content: center; + align-items: center; + } + @mixin flex-vertical-center{ + display: flex; + align-items: center; + } + .upload-container .drawer{ + position: fixed; + top: 0; + z-index: 10; + } + .u-content{ + @include flex-center; + flex-direction: column; + width: 100%; + padding: 65px 0; + } + .u-image{ + width: 422px; + height: 422px; + background: #F0F0F0; + border-radius: 50%; + overflow: hidden; + position: relative; + z-index: 0; + } + .u-image view{ + width: 100%; + height: 100%; + @include flex-center; + font-size: 28px; + font-weight: 400; + color: #707070; + position: absolute; + top: 0;left: 0; + z-index: 1; + } + .u-image .update-statu{ + color: white; + background-color: rgba(0, 0, 0, 0.5); + } + .u-image image{ + width: 100%; + height: 100%; + } + .u-button{ + display: flex; + margin-top: 76px; + } + .u-button view{ + width: 264px; + height: 82px; + background: #F0F0F0; + border-radius: 82px; + @include flex-center; + font-size: 32px; + font-weight: 400; + color: #007AFF; + margin: 0 15px; + } + .u-button .confirm{ + background: #007AFF; + color: white; + } diff --git a/src/pages/colorRelated/takeColor/components/Upload/index.tsx b/src/pages/colorRelated/takeColor/components/Upload/index.tsx new file mode 100644 index 0000000..fd3207f --- /dev/null +++ b/src/pages/colorRelated/takeColor/components/Upload/index.tsx @@ -0,0 +1,62 @@ +import Popup from "@/components/popup" +import { FC, useState } from "react" +import { View, Text,Image } from '@tarojs/components' +import styles from './index.module.scss' +import classnames from 'classnames' +import Taro from "@tarojs/taro" + +type PropsType = { + onUploadConfirm?: Function +} + +const UploadColor: FC = (params) => { + const { onUploadConfirm } = params + const [showModal, setShowModal] = useState(false) + const [filePath, setFilePath] = useState('') + const [file, setFile] = useState({}) + + const handleUpload = async () => { + Taro.chooseMedia({ + count: 1, + mediaType: ['image'], + sourceType: ['album'], + success(ev) { + setFilePath(ev.tempFiles[0].tempFilePath) + setFile(ev.tempFiles[0]) + }, + }) + } + + const handleTriggerUploadModal = (bool: boolean) => { + setShowModal(bool) + } + + const handleClear = () => { + setFilePath('') + } + const handleUploadConfirm = () => { + onUploadConfirm && onUploadConfirm(file) + } + + + return ( + + handleTriggerUploadModal(false)}> + + + {filePath && } + + {filePath ? '点击修改' : '点击上传'} + + + 清除 + + 确定 + + + + + + ) +} +export default UploadColor diff --git a/src/pages/colorRelated/takeColor/index.config.ts b/src/pages/colorRelated/takeColor/index.config.ts new file mode 100644 index 0000000..6168a81 --- /dev/null +++ b/src/pages/colorRelated/takeColor/index.config.ts @@ -0,0 +1,4 @@ +export default { + navigationBarTitleText: '颜色取样', + enableShareAppMessage: false, +} diff --git a/src/pages/colorRelated/takeColor/index.module.scss b/src/pages/colorRelated/takeColor/index.module.scss new file mode 100644 index 0000000..276923e --- /dev/null +++ b/src/pages/colorRelated/takeColor/index.module.scss @@ -0,0 +1,148 @@ +@mixin flex-center { + display: flex; + justify-content: center; + align-items: center; +} +@mixin flex-vertical-center { + display: flex; + align-items: center; +} +page { + background: #f3f3f3; +} +.card { + background: #fff; + padding: 0 20px; + border-radius: 20px; + box-sizing: border-box; + margin: 26px 30px; +} +.list-box { + padding-bottom: 220px; +} +.lb-title { + font-size: 28px; + font-weight: 400; + line-height: 38px; + color: #707070; + border-top: 1px dashed #e4e4e4; + padding: 26px 46px; + box-sizing: border-box; + display: flex; + justify-content: space-between; + align-items: center; +} +.lb-t-serach { + @include flex-vertical-center; + height: 100px; +} +.lb-t-serach .icon-a-sousuo1 { + font-size: 38px; + color: #cccccc; +} +.lb-t-serach .lb-t-search-content { + display: flex; + justify-content: flex-end; +} +.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; +} +.lb-t-search-content text { + color: #fff; + font-size: 30px; +} +.lb-t-sc-clear { + width: 66px; + height: 66px; + text-align: center; + line-height: 66px; +} +.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; + line-height: 38px; + color: #707070; + margin-top: 180px; + text-align: center; +} + +.lab-view { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 100; + background-color: rgba(0, 0, 0, 1); +} +.lab-view view { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; + height: 0; + padding-bottom: 100%; +} + +.fixedBottom-container { + position: fixed; + bottom: 0; + left: 0; + right: 0; + display: flex; + justify-content: space-between; + width: 750px; + height: 182px; + background: #f3f3f3; + box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.16); + padding: 35px 68px; + box-sizing: border-box; +} +.fixedBottom-container view { + width: 264px; + height: 82px; + background: #ffffff; + opacity: 1; + border-radius: 50px; + display: flex; + justify-content: center; + align-items: center; + font-size: 32px; + font-weight: 400; + line-height: 42px; + color: #007aff; +} +.fixedBottom-container .fb-confirm { + background-color: #007aff; + color: white; +} diff --git a/src/pages/colorRelated/takeColor/index.tsx b/src/pages/colorRelated/takeColor/index.tsx new file mode 100644 index 0000000..4940017 --- /dev/null +++ b/src/pages/colorRelated/takeColor/index.tsx @@ -0,0 +1,136 @@ +import { View, Input, Text } from '@tarojs/components' +import { FC, useMemo, 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' +import { ColorListApi, ColorDetailedApi, TextureSaveApi, ColorSamplingSaveApi } from '@/api/index' +import { formatHashTag } from '@/common/format' +// 颜色取样 +const TakeColor: FC = () => { + const { state, fetchData } = ColorListApi() + const { state: detail, fetchData: detailFetchData } = ColorDetailedApi() + const { state: textureSaveData, fetchData: textureSaveFetchData } = TextureSaveApi() + const { state: saveData, fetchData: saveFetchData, success: saveSuccess } = ColorSamplingSaveApi() + + const [searchValue, setSearchValue] = 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 clearSearchValue = () => { + setSearchValue('') + } + + const handleTransfSearch = (bool: boolean) => { + setShowScreen(bool) + } + const handlePrViewRgb = (event) => { + setLabPreview(event) + setShowLabPreview(true) + } + const handleTakeColor = () => {} + + 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]) + + const [showScreen, setShowScreen] = useState(false) + + const onSearchInput = (event) => { + const current = event.detail.value + setSearchValue(current) + } + // 重置 + const handleReset = () => {} + + // 提交 + const handleSubmit = () => {} + + const [labPreview, setLabPreview] = useState({ + currnetRgb: { + r: 0, + g: 0, + b: 0, + }, + }) + + const [showLabPreview, setShowLabPreview] = useState(false) + + return ( + <> + + + + + + + 颜色列表（{listData?.length ?? 0}） + + {showScreen ? ( + + + + + {searchValue.length > 0 && } + + + handleTransfSearch(false)}>取消 + + ) : ( + handleTransfSearch(true)}> + + + )} + + + {listData ? ( + listData.map((item, index) => { + return + }) + ) : ( + -请取色- + )} + + + 重置 + + 提交 + + + {showLabPreview && ( + setShowLabPreview(false)} className={styles['lab-view']}> + + + )} + + ) +} + +export default TakeColor diff --git a/src/pages/orderDetails/components/advanceOrderState/index.tsx b/src/pages/orderDetails/components/advanceOrderState/index.tsx index d500c56..8a28d85 100644 --- a/src/pages/orderDetails/components/advanceOrderState/index.tsx +++ b/src/pages/orderDetails/components/advanceOrderState/index.tsx @@ -1,74 +1,71 @@ -import { formatImgUrl } from "@/common/fotmat"; -import { Image, Text, View } from "@tarojs/components"; -import { memo, useEffect, useMemo, useRef, useState } from "react"; -import classnames from "classnames"; -import styles from './index.module.scss' -import dayjs from "dayjs"; -import { useTimeCountDown } from "@/use/useCommon"; -import { ORDER_STATUS, PAYMENT_METHOD } from "@/common/enum"; +import { formatImgUrl } from '@/common/format' +import { Image, Text, View } from '@tarojs/components' +import { memo, useEffect, useMemo, useRef, useState } from 'react' +import classnames from 'classnames' +import styles from './index.module.scss' +import dayjs from 'dayjs' +import { useTimeCountDown } from '@/use/useCommon' +import { ORDER_STATUS, PAYMENT_METHOD } from '@/common/enum' type List = { - status: string, - time: string, - tag: string, - desc: string, - expire_time: string + status: string + time: string + tag: string + desc: string + expire_time: string } type Param = { - onRefresh?: () => void, - orderInfo?: { - logistics_details:List[], //订单状态列表 - payment_method: number, //支付方式 - status: number, //订单状态 - } + onRefresh?: () => void + orderInfo?: { + logistics_details: List[] //订单状态列表 + payment_method: number //支付方式 + status: number //订单状态 + } } +export default memo(({ orderInfo, onRefresh }: Param) => { + const { showTime, onStart, timeStatus } = useTimeCountDown() -export default memo(({orderInfo, onRefresh}:Param) => { + //订单状态枚举 + const { SaleorderstatusWaitingPrePayment } = ORDER_STATUS - const {showTime, onStart, timeStatus} = useTimeCountDown() + //获取预付款最后时间 + const endTime = useMemo(() => { + if (orderInfo?.status == SaleorderstatusWaitingPrePayment.value && orderInfo.logistics_details.length > 0) { + return orderInfo.logistics_details[0].expire_time + } + return '' + }, [orderInfo]) - //订单状态枚举 - const {SaleorderstatusWaitingPrePayment} = ORDER_STATUS + useEffect(() => { + if (endTime) onStart(endTime) + }, [endTime]) - //获取预付款最后时间 - const endTime = useMemo(() => { - if(orderInfo?.status == SaleorderstatusWaitingPrePayment.value && orderInfo.logistics_details.length > 0) { - return orderInfo.logistics_details[0].expire_time - } - return '' - }, [orderInfo]) + useEffect(() => { + if (timeStatus == 2) onRefresh?.() + }, [timeStatus]) - useEffect(() => { - if(endTime) onStart(endTime) - }, [endTime]) - - useEffect(() => { - if(timeStatus == 2) onRefresh?.() - }, [timeStatus]) - - - return ( - - - - 剩 - {showTime.HH} - : - {showTime.MM} - : - {showTime.SS} - - 支付关闭，订单自动取消 - - - - - onRefresh?.()}> - - 刷新 - + return ( + + + + 剩 + {showTime.HH} + : + {showTime.MM} + : + {showTime.SS} - ) -}) \ No newline at end of file + 支付关闭，订单自动取消 + + + + + onRefresh?.()}> + + 刷新 + + + ) +}) diff --git a/src/pages/searchPage/compoents/empty/index.module.scss b/src/pages/searchPage/components/empty/index.module.scss similarity index 100% rename from src/pages/searchPage/compoents/empty/index.module.scss rename to src/pages/searchPage/components/empty/index.module.scss diff --git a/src/pages/searchPage/compoents/empty/index.tsx b/src/pages/searchPage/components/empty/index.tsx similarity index 100% rename from src/pages/searchPage/compoents/empty/index.tsx rename to src/pages/searchPage/components/empty/index.tsx diff --git a/src/pages/searchPage/compoents/goods/index.module.scss b/src/pages/searchPage/components/goods/index.module.scss similarity index 100% rename from src/pages/searchPage/compoents/goods/index.module.scss rename to src/pages/searchPage/components/goods/index.module.scss diff --git a/src/pages/searchPage/compoents/goods/index.tsx b/src/pages/searchPage/components/goods/index.tsx similarity index 100% rename from src/pages/searchPage/compoents/goods/index.tsx rename to src/pages/searchPage/components/goods/index.tsx diff --git a/src/pages/searchPage/index.tsx b/src/pages/searchPage/index.tsx index 0e5b5b9..ebde3c4 100644 --- a/src/pages/searchPage/index.tsx +++ b/src/pages/searchPage/index.tsx @@ -3,9 +3,9 @@ import React, { useCallback, memo, useEffect, useMemo, useRef, useState } from ' import Search from '@/components/search' import styles from "./index.module.scss" import classnames from "classnames"; -import Empty from './compoents/empty' +import Empty from './components/empty' import Taro from '@tarojs/taro'; -import Goods from './compoents/goods' +import Goods from './components/goods' import { mpproductlist } from "@/api/search" export default memo(() => { @@ -95,4 +95,4 @@ export default memo(() => { ) -}) \ No newline at end of file +}) diff --git a/src/pages/user/index.tsx b/src/pages/user/index.tsx index c12e407..82db81f 100644 --- a/src/pages/user/index.tsx +++ b/src/pages/user/index.tsx @@ -65,17 +65,17 @@ const fabric: IconCardType[] = [ { iconName: 'icon-yansequyang', name: '颜色取样', - path: '', + path: '/pages/colorRelated/takeColor/index', }, { iconName: 'icon-qusechazhao', name: '取色查找', - path: '', + path: '/pages/colorRelated/findColor/index', }, { iconName: 'icon-yangpinduibi', name: '样品对比', - path: '/pages/sampleComparison/index', + path: '/pages/colorRelated/sampleComparison/index', }, ] diff --git a/src/styles/common.scss b/src/styles/common.scss index 9f2f08b..2e6c669 100644 --- a/src/styles/common.scss +++ b/src/styles/common.scss @@ -42,3 +42,18 @@ $customTabBarHeight: 100px; height: 100%; } +.color-blue{ + color: #3287EC; +} +.color-yellow{ + color: #FF9100; +} +.color-green{ + color: #00B837; +} +.color-grey{ + color: #707070; +} +.color-white{ + color: white; +} diff --git a/src/use/useHttp.ts b/src/use/useHttp.ts index c21dc07..3a6cf56 100644 --- a/src/use/useHttp.ts +++ b/src/use/useHttp.ts @@ -122,7 +122,6 @@ export const useRequest = ( } const stateRef = useRef({ ...params }) - console.log('stateRef==>', stateRef) const [state, setState] = useState({ ...stateRef.current }) const { removeToken, removeSessionKey, removeUserInfo } = useUserInfo() const { login } = useLoginRequest() @@ -205,8 +204,6 @@ export const useRequest = ( stateRef.current.error = false stateRef.current.loading = false setState(() => ({...stateRef.current})) - console.log('request result stateRef', stateRef.current) - console.log('request result state', state) return stateRef.current } return {