62 lines
2.2 KiB
TypeScript
62 lines
2.2 KiB
TypeScript
import { formatImgUrl, formatRemoveHashTag } from "@/common/fotmat";
|
|
import Preview from "@/pages/details/components/preview";
|
|
import { Image, View } from "@tarojs/components";
|
|
import { memo, useCallback, useEffect, useMemo, useState } from "react";
|
|
import styles from './index.module.scss'
|
|
import Taro from "@tarojs/taro";
|
|
import LabAndImgShow from "../LabAndImgShow";
|
|
|
|
//该组件宽高为100%需调整外层元素宽高
|
|
type Param = {
|
|
value?: {
|
|
texture_url?: string, //纹理图路径
|
|
lab?: {l:number, a:number, b:number}, //lab
|
|
rgb?: {r:number, g:number, b:number} //rgb
|
|
title?: string
|
|
},
|
|
showStatus?: true|false,
|
|
onClick?: (val: Param['value']) => void
|
|
}
|
|
export default memo(({value, onClick, showStatus = false}:Param) => {
|
|
const [imgs, setImgs] = useState<string[]>([])
|
|
|
|
//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])
|
|
|
|
useEffect(() => {
|
|
if(value?.texture_url) {
|
|
let res = value.texture_url.split(',').map(item => {
|
|
return formatImgUrl(item)
|
|
})
|
|
setImgs(() => res)
|
|
}
|
|
}, [value])
|
|
|
|
const [labAndImgShow, setLabAndImgShow] = useState(false)
|
|
const closeLabAndImgShow = useCallback(() => {
|
|
setLabAndImgShow(false)
|
|
}, [])
|
|
const onShowLabAndImg = () => {
|
|
onClick?.(value)
|
|
if(!showStatus) return false
|
|
setLabAndImgShow(true)
|
|
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<View className={styles.labAndImg_main} onClick={() => onShowLabAndImg()}>
|
|
{imgs?.length > 0&&<Image mode="aspectFill" src={imgs[0]}></Image>}
|
|
{(!imgs?.length&&rgbStyle)&&<View className={styles.boxColor} style={{...rgbStyle}}></View>}
|
|
{(!imgs?.length&&!rgbStyle)&&<Image mode="aspectFill" src={formatImgUrl('')}></Image>}
|
|
</View>
|
|
<LabAndImgShow value={value} show={labAndImgShow} onClose={closeLabAndImgShow}/>
|
|
</>
|
|
)
|
|
}) |