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

✨ feat(颜色取样|取色查找|样品对比): 移植内部版相关功能

Browse Source
This commit is contained in:
xuan 2022-09-14 13:08:17 +08:00
parent 48e5986060
commit 03e7377485
54 changed files with 2353 additions and 458 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/api/index.ts
View File

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

11
src/api/product/findColor.ts Normal file
View File

@ -0,0 +1,11 @@
import { useRequest } from "@/use/useHttp"
/**
* 颜色列表
* @returns
*/
export const FindColorListApi = () => {
return useRequest({
url: `/v1/mp/product/color/absorb/match`,
method: 'get',
})
}

4
src/api/product/index.ts
View File

@ -1 +1,3 @@
export { productabsorbcontrast } from './product'
export { productabsorbcontrast, SelectProductListApi } from './product'
export { ColorListApi, ColorDetailedApi, ColorSamplingSaveApi, TextureSaveApi } from './takeColor'
export { FindColorListApi } from './findColor'

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

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

45
src/api/product/takeColor.ts Normal file
View File

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

8
src/app.config.ts
View File

@ -51,8 +51,12 @@ export default defineAppConfig({
},
subPackages: [
{
root: 'pages/sampleComparison',
pages: ['index'],
root: 'pages/colorRelated',
pages: [
'sampleComparison/index',
'takeColor/index',
'findColor/index'
],
},
],
})

366
src/common/fotmat.js → src/common/format.js
View File

@ -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(?<!\.\d*)(?=(\d{3})+(?!\d))$/g, ",");
return parseFloat(number).toLocaleString('zh', { minimumFractionDigits: digit })
} else {
return 0.0
}
}
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(?<!\.\d*)(?=(\d{3})+(?!\d))$/g, ",");
return parseFloat(number).toLocaleString('zh', { minimumFractionDigits: digit })
} else {
return 0.0
}
}

2
src/common/util.ts
View File

@ -1,4 +1,4 @@
import { formatImgUrl } from './fotmat'
import { formatImgUrl } from './format'
import { analysisShortCodeApi } from './shortCode'
import Taro from '@tarojs/taro'

2
src/components/LabAndImg/index.tsx
View File

@ -1,4 +1,4 @@
import { formatImgUrl, formatRemoveHashTag } from '@/common/fotmat'
import { formatImgUrl, formatRemoveHashTag } from '@/common/format'
import Preview from '@/pages/details/components/preview'
import { Image, View } from '@tarojs/components'
import { memo, useCallback, useEffect, useMemo, useState } from 'react'

113
src/components/LabAndImgShow/index.tsx
View File

@ -1,65 +1,64 @@
import { formatImgUrl } from "@/common/fotmat"
import { View } from "@tarojs/components"
import { useEffect, useMemo, useState } from "react"
import { formatImgUrl } from '@/common/format'
import { View } from '@tarojs/components'
import { useEffect, useMemo, useState } from 'react'
import styles from './index.module.scss'
import Taro from '@tarojs/taro'
export type colorParams = {
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不限制
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&&<View className={styles.main} catch-move="true" onClick={() => onClose?.()}>
<View className={styles.con}>
<View className={styles.rgb} style={rgbStyle!}></View>
<View className={styles.name}>{value?.title}</View>
</View>
</View>}
</>
)
}
//显示图片
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 && (
<View className={styles.main} catch-move='true' onClick={() => onClose?.()}>
<View className={styles.con}>
<View className={styles.rgb} style={rgbStyle!}></View>
<View className={styles.name}>{value?.title}</View>
</View>
</View>
)}
</>
)
}

44
src/components/amountShow/index.tsx
View File

@ -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 (
<>
<Text className={styles.price_text}>¥</Text>
<Text className={styles.price_text}>{numberWithCommas({number:int_num, digit:0})}</Text>
<Text className={styles.price_text}>.{decimals_num}</Text>
</>
)
}, [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 (
<View className={classnames(styles.order_price_num, status==1&&styles.emphasis_num, status==2&&styles.emphasis_num_big)} >
{priceDom()}
</View>
<>
<Text className={styles.price_text}>¥</Text>
<Text className={styles.price_text}>{numberWithCommas({ number: int_num, digit: 0 })}</Text>
<Text className={styles.price_text}>.{decimals_num}</Text>
</>
)
})
}, [number])
return <View className={classnames(styles.order_price_num, status == 1 && styles.emphasis_num, status == 2 && styles.emphasis_num_big)}>{priceDom()}</View>
})

2
src/components/banner/index.tsx
View File

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

97
src/components/bindSalesmanPopup/index.tsx
View File

@ -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&&<View className={styles.bindSalesman_main}>
<View className={styles.bindSalesman_pop}>
<View className={styles.bindSalesman_header}>
<Image src={formatImgUrl('/mall/invite_code_top.png', '!w400')} mode="aspectFill"/>
</View>
<View className={styles.bindSalesman_message}>
<Text>提示</Text>
<Text>暂未开通下单权限功能，稍后有客服联系您，请注意接收电话。</Text>
</View>
<View className={styles.bindSalesman_operation}>
<View className={styles.btns} onClick={() => onConfirm()}>输入邀请码</View>
<View className={styles.btns} onClick={() => onCustomer()}>联系客服</View>
</View>
</View>
<View className={styles.bindSalesman_mask} onClick={onClose}></View>
</View>}
</>
)
}
const onConfirm = () => {
onClose?.()
goLink('/pages/bindSalesman/index')
}
return (
<>
{show && (
<View className={styles.bindSalesman_main}>
<View className={styles.bindSalesman_pop}>
<View className={styles.bindSalesman_header}>
<Image src={formatImgUrl('/mall/invite_code_top.png', '!w400')} mode='aspectFill' />
</View>
<View className={styles.bindSalesman_message}>
<Text>提示</Text>
<Text>暂未开通下单权限功能，稍后有客服联系您，请注意接收电话。</Text>
</View>
<View className={styles.bindSalesman_operation}>
<View className={styles.btns} onClick={() => onConfirm()}>
输入邀请码
</View>
<View className={styles.btns} onClick={() => onCustomer()}>
联系客服
</View>
</View>
</View>
<View className={styles.bindSalesman_mask} onClick={onClose}></View>
</View>
)}
</>
)
}

75
src/components/product/index.tsx
View File

@ -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 (
<View className={styles.products_list}>
{productList?.map(item => {
return <View className={styles.products_item} onClick={() => popupShow?.(item)}>
<View className={styles.item_img}>
<LabAndImg value={labAndImgObj(item)} />
<View className={styles.num}>{item.product_color_count}色</View>
</View>
<View className={styles.item_con}>
<View className={styles.title}><text>{formatHashTag(item.code, '')} </text>{item.name}</View>
<View className={styles.tag_list}>
<View className={styles.tag}>{item.width}</View>
<View className={styles.tag_g}>{item.weight_density}</View>
</View>
<View className={styles.introduce}>{item.component}</View>
{desStatus && <View className={styles.des}>{item.describe}</View>}
</View>
</View>
})}
</View >
)
const labAndImgObj = useCallback(
(item) => {
return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url }
},
[productList],
)
return (
<View className={styles.products_list}>
{productList?.map((item) => {
return (
<View className={styles.products_item} onClick={() => popupShow?.(item)}>
<View className={styles.item_img}>
<LabAndImg value={labAndImgObj(item)} />
<View className={styles.num}>{item.product_color_count}色</View>
</View>
<View className={styles.item_con}>
<View className={styles.title}>
<text>{formatHashTag(item.code, '')} </text>
{item.name}
</View>
<View className={styles.tag_list}>
<View className={styles.tag}>{item.width}</View>
<View className={styles.tag_g}>{item.weight_density}</View>
</View>
<View className={styles.introduce}>{item.component}</View>
{desStatus && <View className={styles.des}>{item.describe}</View>}
</View>
</View>
)
})}
</View>
)
}

82
src/components/selectProduct/index.module.scss Normal file
View File

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

112
src/components/selectProduct/index.tsx Normal file
View File

@ -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<PropsType> = (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 (
<>
<View className={styles.select_input}>
<View className={styles.stock_ipnut_des} onClick={clickEvent}>
<View className={styles.con_input}>
<View className={styles.label}>面料名称</View>
<View className={styles.input_con}>
<View className={classnames(styles.input_type, selectValue ? '' : 'noCon')}>{selectValue ? selectValue : '请选择'}</View>
</View>
<Text className='iconfont icon-more'></Text>
</View>
</View>
</View>
<Popup title='请选择面料名称' showTitle show={showPopup} onClose={closeEven}>
<Search placeholder='请输入编号/面料' showBtn={false} changeOnSearch={getSearchData} debounceTime={300}></Search>
<View className='selectList'>
<ScrollView className={styles['selectList-scroll-View']} scrollY>
{list.map((item) => {
return (
<View key={item.id} className={classnames(styles.selectItem, selectId == item.id ? styles.selected : '')} onClick={() => getSelectData(item)}>
{/* {changeName(item)} */}
</View>
)
})}
</ScrollView>
</View>
</Popup>
</>
)
}
export default SelectProduct

2
src/components/shopCart/index.tsx
View File

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

2
src/components/uploadImage/index.tsx
View File

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

2
src/pages/sampleComparison/compoents/bluetooth/LinkBlueTooth.tsx → src/pages/colorRelated/components/bluetooth/LinkBlueTooth.tsx
View File

@ -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()

2
src/pages/sampleComparison/compoents/bluetooth/Popup.tsx → src/pages/colorRelated/components/bluetooth/Popup.tsx
View File

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

7
src/pages/sampleComparison/css/linkBlueTooth.module.scss → src/pages/colorRelated/components/css/linkBlueTooth.module.scss
View File

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

0
src/pages/sampleComparison/css/popup.module.scss → src/pages/colorRelated/components/css/popup.module.scss
View File

46
src/pages/colorRelated/findColor/components/DrawerCenter/index.module.scss Normal file
View File

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

30
src/pages/colorRelated/findColor/components/DrawerCenter/index.tsx Normal file
View File

@ -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<PropsType> = memo((props) => {
const { children, showModal } = props
const [show, setShow] = useState(false)
useEffect(() => {
setShow(showModal)
}, [showModal])
// 关闭
const close = () => {
setShow(false)
}
return show ? (
<View className={styles.popups} catchMove>
<View className={styles.popcoms}>{children}</View>
<View className={styles.cover} onClick={close}></View>
</View>
) : null
})
export default DrawerCenter

113
src/pages/colorRelated/findColor/components/HistoryColor/index.module.scss Normal file
View File

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

89
src/pages/colorRelated/findColor/components/HistoryColor/index.tsx Normal file
View File

@ -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<PropsType> = (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 (
<View className={styles.history_color}>
<Popup title='历史取样记录 ( 最近30条 )' show={show} onClose={closeEven}>
<ScrollView className={styles['selectList-scroll-color']} scrollY>
<View className={styles.selectCon}>
{!!list?.length ? (
list.map((item, index) => {
return (
<View key={item.p_time} className={styles.selectList} onClick={() => getInfo(item)}>
<View className={styles.rgbColor} style={{ background: labRoRgb(item.lab) }}></View>
<View className={styles.product_con}>
<View className={styles.product_name}>{item.code + ' ' + item.name}</View>
<View className={styles.date}>{formatDateTime(item.p_time)}</View>
</View>
<View className={styles.labColor}>
<View className={styles.labColor_btn}>+</View>
<View className={styles.labColor_con}>
<View className={styles.L}>L*：{noScale(item.lab[0])}</View>
<View className={styles.a}>a*：{noScale(item.lab[1])}</View>
<View className={styles.b}>b*：{noScale(item.lab[2])}</View>
</View>
</View>
</View>
)
})
) : (
<View className='noData'>暂无数据</View>
)}
</View>
</ScrollView>
</Popup>
</View>
)
}
export default HistoryColor

46
src/pages/colorRelated/findColor/components/LabColor/index.module.scss Normal file
View File

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

54
src/pages/colorRelated/findColor/components/LabColor/index.tsx Normal file
View File

@ -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<any>
time?: any
onLab?: Function
}
const LabColor: FC<PropsType> = (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 (
<View className={styles.lab_color_main}>
<View className={styles.btnColor} onClick={onLabEven} style={{ background: labObj.rgb }}>
{!!labObj.lab.length ? '' : '点击取色'}
</View>
<View className={styles.labCon}>
<View className={styles.lab}>
<Text>L*a*b*:</Text>
<Text>{labObj.lab[0]}</Text>
<Text>{labObj.lab[1]}</Text>
<Text>{labObj.lab[2]}</Text>
</View>
<View className={styles.date}>{labTime && <Text>取样时间: {labTime}</Text>}</View>
</View>
</View>
)
}
export default LabColor

121
src/pages/colorRelated/findColor/components/RecommendColor/index.module.scss Normal file
View File

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

83
src/pages/colorRelated/findColor/components/RecommendColor/index.tsx Normal file
View File

@ -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<any>
customStyle?: React.CSSProperties
}
const RecommendColor: FC<PropsType> = (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 (
<View className={classnames(styles.RecommendColor_main, customStyle)}>
<View className={styles.RecommendColor_list}>
{list?.map((item) => {
return (
<View className={styles.RecommendColor_item} key={item.id} onClick={() => openShow(item)}>
<View className={styles.rgbColor} style={{ background: labRoRgb(item.lab) }}>
<View className={styles.lab}>
<text>L*a*b*</text>
<text>{noScale(item.lab.l)}</text>
<text>{noScale(item.lab.a)}</text>
<text>{noScale(item.lab.b)}</text>
</View>
</View>
<View className={styles.product_con}>
<View className={styles.product_title}>
<View className={styles.product_name}>{item.product_code + '# ' + item.product_name}</View>
<View className={styles.product_num}>{noScale(item.match_rate_percent, 1)}%</View>
</View>
<View className={styles.product_color}>{item.product_color_code + ' ' + item.product_color_name}</View>
<View className={styles.date}>
<text className={styles.g_num}>{item.dyelot_number}</text>
<View className={styles.labColor_btn}>+</View>
</View>
</View>
</View>
)
})}
</View>
<DrawerCenter showModal={show}>
<View className={styles.con}>
<View className={styles.showRgb} style={{ background: selectObj?.rgb }}></View>
<View className={styles.name}>{selectObj.product_color_code + ' ' + selectObj.product_color_name}</View>
</View>
</DrawerCenter>
</View>
)
}
export default RecommendColor

4
src/pages/colorRelated/findColor/index.config.ts Normal file
View File

@ -0,0 +1,4 @@
export default {
navigationBarTitleText: '取色查找',
enableShareAppMessage: false,
}

94
src/pages/colorRelated/findColor/index.module.scss Normal file
View File

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

140
src/pages/colorRelated/findColor/index.tsx Normal file
View File

@ -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<Record<string, any>>({})
//获取数据
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<Array<any>>([])
const [labtime, setLabtime] = useState<any>(+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 <RecommendColor customStyle={{ flex: 1 }} list={list} />
} else if (!listLoading && labArray.length == 0) {
return <View className={styles.noList}>-请取色-</View>
} else if (!listLoading && labArray.length > 0 && list?.length == 0) {
return <View className={styles.noList}>-暂无数据-</View>
} else if (listLoading) {
return <Loading />
}
}
//历史取样
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 (
<View className={styles.findColor_main}>
<View className={styles.findColor_main_search}>
<LineBluetooth></LineBluetooth>
<SelectProduct selectColorId={product?.id} noAll={true} onSelect={selectInput} />
</View>
<LabColor lab={labArray} time={labtime} onLab={labEven} />
<View className={styles.findColor_main_title}>
<View className={styles.RecommendColor_title}>
<Text>推荐数 ({list?.length})</Text>
<Text onClick={historyShowEven}>历史取样</Text>
</View>
</View>
<HistoryColor showModal={showHistory} onColor={getColor} />
{ResultContainer()}
<View className='common_safe_area_y'></View>
</View>
)
}
export default FindColor

0
src/pages/sampleComparison/index.config.ts → src/pages/colorRelated/sampleComparison/index.config.ts
View File

0
src/pages/sampleComparison/index.module.scss → src/pages/colorRelated/sampleComparison/index.module.scss
View File

19
src/pages/sampleComparison/index.tsx → src/pages/colorRelated/sampleComparison/index.tsx
View File

@ -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 (
<View className={styles.body}>
{/* <View className={styles.topBox}>
<View className={styles.leftBox}>
<View className={styles.leftFont}>蓝牙设备</View>
<View className={styles.borderBox}></View>
<View className={styles.cricleBox}></View>
<View className={styles.notNet}></View>
</View>
<Text className={classnames("iconfont icon-a-moreback", styles.iconMore)}></Text>
</View> */}
<LinkBlueTooth />
<View className={styles.topBox}>
<LinkBlueTooth />
</View>
<View className={styles.contBox}>
<View className={styles.firstBox} style='margin-right:27px'>
<View className={styles.firstLeftName}>基础样品</View>

184
src/pages/colorRelated/takeColor/components/ColorCard/index.module.scss Normal file
View File

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

78
src/pages/colorRelated/takeColor/components/ColorCard/index.tsx Normal file
View File

@ -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<string, any>
key?: any
index?: number
onPreviewRgb?: Function
onTakeColor?: Function
}
const ColorCard: FC<PropsType> = (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 (
<View className={classnames(styles['color-list'], { flash: item.moveBorder == 1 })} key={key}>
<View className={classnames(styles.vertical, { 'move-vertical': item.moveBorder == 2 })}>
<View></View>
</View>
<View className={classnames(styles.horizontal, { 'move-horizontal': item.moveBorder == 2 })}></View>
<View
onClick={handlePreviewRgb}
className={styles['c-image']}
style={{
backgroundColor: `rgb(
${item.currnetRgb?.r},
${item.currnetRgb?.g},
${item.currnetRgb?.b}
)`,
}}>
{!item.sampling && <Text>末取样</Text>}
</View>
<View className={styles['c-info']}>
<View className={styles['c-i-title']}>{formatHashTag(item.product_code, item.product_name)}</View>
<Text>{formatHashTag(item.product_color_code, item.product_color_name)}</Text>
<View className={styles['c-i-date']}>{item.absorb_lab_time && dayjs(item.absorb_lab_time).format('YYYY-MM-DD HH:mm:ss')}</View>
</View>
<View className={styles['c-lab']}>
<View className={classnames(styles['c-lab-button'], { again: item.sampling })} onClick={handleTakeColor}>
{item.sampling ? '重新取样' : '取样'}
</View>
<View className={styles['c-lab-text']}>
<View>L*: {truncation(item?.currentLab?.l)}</View>
<View>a*: {truncation(item?.currentLab?.a)}</View>
<View>b*: {truncation(item?.currentLab?.b)}</View>
</View>
</View>
</View>
)
}
export default ColorCard

68
src/pages/colorRelated/takeColor/components/Texture/index.module.scss Normal file
View File

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

48
src/pages/colorRelated/takeColor/components/Texture/index.tsx Normal file
View File

@ -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<PropsType> = (params) => {
const {onUploadConfirm} = params
const handleUploadConfirm = () => {
onUploadConfirm && onUploadConfirm()
}
const uploadEl = useRef()
return (
<View className={styles['texture-container']}>
<View className={styles['tc-info']}>
<View onClick={uploadEl.handleTriggerUploadModal(true)} className={styles['tc-i-upload']}>
{detail.texture_url && <Image src={screenshot(detail.texture_url)} />}
<View v-else className='tc-i-u-box'>
<Text className='iconfont icon-shangchuanzhaopian'></Text>
<View>上传纹理</View>
</View>
</View>
<View className={styles['tc-i-num']}>
<View>
<View className='color-blue'>{(data?.list?.length ?? 0) - calcNoSampling}</View>
<Text>已取样</Text>
</View>
<View>
<View className='color-yellow'>{calcNoSampling}</View>
<Text>未取样</Text>
</View>
</View>
</View>
<Upload onUploadConfirm={handleUploadConfirm} ref={uploadEl} />
</View>
)
}
export default Texture

68
src/pages/colorRelated/takeColor/components/Upload/index.module.scss Normal file
View File

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

62
src/pages/colorRelated/takeColor/components/Upload/index.tsx Normal file
View File

@ -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<PropsType> = (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 (
<View className={styles['upload-container']}>
<Popup title='上传纹理' show={showModal} onClose={() => handleTriggerUploadModal(false)}>
<View className={styles['u-content']}>
<View onClick={handleUpload} className={styles['u-image']}>
{filePath && <Image mode='aspectFill' src={filePath} />}
<View className={classnames({ 'update-statu': filePath })}>{filePath ? '点击修改' : '点击上传'}</View>
</View>
<View className={styles['u-button']}>
<View onClick={handleClear}>清除</View>
<View onClick={handleUploadConfirm} className={styles.confirm}>
确定
</View>
</View>
</View>
</Popup>
</View>
)
}
export default UploadColor

4
src/pages/colorRelated/takeColor/index.config.ts Normal file
View File

@ -0,0 +1,4 @@
export default {
navigationBarTitleText: '颜色取样',
enableShareAppMessage: false,
}

148
src/pages/colorRelated/takeColor/index.module.scss Normal file
View File

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

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

@ -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 (
<>
<View className={styles.card}>
<LinkBlueTooth />
<SelectProduct onSelect={selectInput} />
</View>
<View className={styles['list-box']}>
<View className={styles['lb-title']}>
<Text>颜色列表（{listData?.length ?? 0}）</Text>
<View className={styles['lb-t-serach']}>
{showScreen ? (
<View className={styles['lb-t-search-content']}>
<View>
<Input value={searchValue} type='text' onInput={onSearchInput} placeholder='筛选颜色或颜色编号' />
<View onClick={clearSearchValue} className={styles['lb-t-sc-clear']}>
{searchValue.length > 0 && <IconFont name='icon-guanbi' size={56}></IconFont>}
</View>
</View>
<Text onClick={() => handleTransfSearch(false)}>取消</Text>
</View>
) : (
<View onClick={() => handleTransfSearch(true)}>
<IconFont name='icon-sousuo' size={56}></IconFont>
</View>
)}
</View>
</View>
{listData ? (
listData.map((item, index) => {
return <ColorCard onPreviewRgb={handlePrViewRgb} onTakeColor={handleTakeColor} key={index} item={item} index={item.key} />
})
) : (
<View className={styles['not-list']}>-请取色-</View>
)}
</View>
<View className={styles['fixedBottom-container']}>
<View onClick={handleReset}>重置</View>
<View onClick={handleSubmit} className={styles['fb-confirm']}>
提交
</View>
</View>
{showLabPreview && (
<View catchMove onClick={() => setShowLabPreview(false)} className={styles['lab-view']}>
<View
style={{
backgroundColor: `rgb(
${labPreview?.currnetRgb?.r},
${labPreview?.currnetRgb?.g},
${labPreview?.currnetRgb?.b}
)`,
}}></View>
</View>
)}
</>
)
}
export default TakeColor

119
src/pages/orderDetails/components/advanceOrderState/index.tsx
View File

@ -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 (
<View className={styles.advance_main}>
<View className={styles.time_con}>
<View className={styles.times}>
<Text className={styles.text}>剩</Text>
<Text className={styles.num}>{showTime.HH}</Text>
<Text className={styles.separate}>:</Text>
<Text className={styles.num}>{showTime.MM}</Text>
<Text className={styles.separate}>:</Text>
<Text className={styles.num}>{showTime.SS}</Text>
</View>
<Text>支付关闭，订单自动取消</Text>
</View>
<View className={styles.cardIcon}>
<Image className={styles.image} src={formatImgUrl("/mall/my_cart.png")}/>
</View>
<View className={styles.refresh} onClick={() => onRefresh?.()}>
<Text className={classnames(styles.mconfont, 'iconfont icon-shuaxin')}></Text>
<Text className={classnames(styles.refresh_text)}>刷新</Text>
</View>
return (
<View className={styles.advance_main}>
<View className={styles.time_con}>
<View className={styles.times}>
<Text className={styles.text}>剩</Text>
<Text className={styles.num}>{showTime.HH}</Text>
<Text className={styles.separate}>:</Text>
<Text className={styles.num}>{showTime.MM}</Text>
<Text className={styles.separate}>:</Text>
<Text className={styles.num}>{showTime.SS}</Text>
</View>
)
})
<Text>支付关闭，订单自动取消</Text>
</View>
<View className={styles.cardIcon}>
<Image className={styles.image} src={formatImgUrl('/mall/my_cart.png')} />
</View>
<View className={styles.refresh} onClick={() => onRefresh?.()}>
<Text className={classnames(styles.mconfont, 'iconfont icon-shuaxin')}></Text>
<Text className={classnames(styles.refresh_text)}>刷新</Text>
</View>
</View>
)
})

0
src/pages/searchPage/compoents/empty/index.module.scss → src/pages/searchPage/components/empty/index.module.scss
View File

0
src/pages/searchPage/compoents/empty/index.tsx → src/pages/searchPage/components/empty/index.tsx
View File

0
src/pages/searchPage/compoents/goods/index.module.scss → src/pages/searchPage/components/goods/index.module.scss
View File

0
src/pages/searchPage/compoents/goods/index.tsx → src/pages/searchPage/components/goods/index.tsx
View File

6
src/pages/searchPage/index.tsx
View File

@ -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(() => {
</View>
)
})
})

6
src/pages/user/index.tsx
View File

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

15
src/styles/common.scss
View File

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

3
src/use/useHttp.ts
View File

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