102 lines
3.4 KiB
TypeScript
102 lines
3.4 KiB
TypeScript
import { Image, View } from '@tarojs/components'
|
|
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
|
import LabAndImgShow from '../LabAndImgShow'
|
|
import styles from './index.module.scss'
|
|
import Preview from '@/pages/details/components/preview'
|
|
import { formatImgUrl, formatRemoveHashTag } from '@/common/format'
|
|
|
|
// 该组件宽高为100%需调整外层元素宽高
|
|
interface Param {
|
|
value: {
|
|
texture_url?: string // 纹理图路径
|
|
lab?: { l: number; a: number; b: number } // lab
|
|
rgb?: { r: number; g: number; b: number } // rgb
|
|
title?: string
|
|
}
|
|
customImageStyle?: React.CSSProperties
|
|
showStatus?: boolean
|
|
onClick?: (val: Param['value']) => void
|
|
round?: boolean
|
|
name?: string
|
|
suffix?: string
|
|
}
|
|
const LabAndImg = ({ value, onClick, showStatus = false, round = false, name = '', customImageStyle = {}, suffix = '!w200' }: Param) => {
|
|
const _value = useRef(value)
|
|
const _first = useRef(true)
|
|
// lab是否都是0
|
|
const rgbStyle = useMemo(() => {
|
|
const value = _value.current
|
|
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.current])
|
|
|
|
// useEffect(() => {
|
|
// if (value?.texture_url) {
|
|
// const imgs = value.texture_url.split(',').map((item) => {
|
|
// return formatImgUrl(item, suffix)
|
|
// })
|
|
// setImgs(() => imgs[0])
|
|
// }
|
|
// }, [value])
|
|
|
|
const img = useMemo(() => {
|
|
console.log('useMemo', _value.current)
|
|
const value = _value.current
|
|
if (value?.texture_url) {
|
|
const imgs = value.texture_url.split(',').map((item) => {
|
|
return formatImgUrl(item, suffix)
|
|
})
|
|
return imgs[0]
|
|
}
|
|
else {
|
|
return ''
|
|
}
|
|
}, [_value.current, suffix])
|
|
|
|
const [labAndImgShow, setLabAndImgShow] = useState(false)
|
|
const closeLabAndImgShow = useCallback(() => {
|
|
setLabAndImgShow(false)
|
|
}, [])
|
|
|
|
const onShowLabAndImg = () => {
|
|
onClick?.(_value.current)
|
|
if (!showStatus) { return false }
|
|
setLabAndImgShow(true)
|
|
}
|
|
|
|
const [_, setForceUpdate] = useState({})
|
|
|
|
const checkLoad = () => {
|
|
_value.current = { ..._value.current, texture_url: '' }
|
|
setForceUpdate({})
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<View className={styles.labAndImg_main} style={{ borderRadius: round ? '50%' : '' }} onClick={onShowLabAndImg}>
|
|
{_value.current.texture_url && (
|
|
<Image
|
|
lazyLoad
|
|
mode="aspectFill"
|
|
src={img}
|
|
onError={checkLoad}
|
|
className={styles.labAndImg_image}
|
|
style={{ borderRadius: round ? '50%' : '', ...customImageStyle }}
|
|
></Image>
|
|
)}
|
|
{!_value.current.texture_url && rgbStyle && <View className={styles.boxColor} style={{ ...rgbStyle, borderRadius: round ? '50%' : '', ...customImageStyle }}></View>}
|
|
{!_value.current.texture_url && !rgbStyle && (
|
|
<Image mode="aspectFill" src={formatImgUrl('')} className={styles.labAndImg_image} style={{ borderRadius: round ? '50%' : '', ...customImageStyle }} lazyLoad></Image>
|
|
)}
|
|
{name && <View className={styles.labAndImg_name}>{name}</View>}
|
|
</View>
|
|
<LabAndImgShow suffix={suffix} value={_value.current} show={labAndImgShow} onClose={closeLabAndImgShow} />
|
|
</>
|
|
)
|
|
}
|
|
export default memo(LabAndImg)
|