商城测试版v7

src/components/LabAndImg/index.tsx

@@ -1,9 +1,10 @@
-import { formatImgUrl } from "@/common/fotmat";
+import { formatImgUrl, formatRemoveHashTag } from "@/common/fotmat";
 import Preview from "@/pages/details/components/preview";
 import { Image, View } from "@tarojs/components";
-import { memo, useMemo, useState } from "react";
+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 = {
@@ -11,10 +12,14 @@ type Param = {
         texture_url?: string, //纹理图路径
         lab?: {l:number, a:number, b:number}, //lab
         rgb?: {r:number, g:number, b:number} //rgb
+        title?: string
     },
-    checkStatus: false|true
+    showStatus?: true|false,
+    onClick?: (val: Param['value']) => void
 }
-export default memo(({value, checkStatus = false}:Param) => {
+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)) {
@@ -24,27 +29,32 @@ export default memo(({value, checkStatus = false}:Param) => {
         }
     }, [value])
 
-    const [showPreview, setShowPreview] = useState(false)
-    const onClickShow = () => {
-        setShowPreview(() => true)
-    }
+    useEffect(() => {
+        if(value?.texture_url) {
+            let res = value.texture_url.split(',').map(item => {
+                return formatImgUrl(item)
+            })
+            setImgs(() => res)
+        }
+    }, [value])
 
-    const onShowImage = () => {
-        if(!checkStatus) return false
-        Taro.previewImage({
-            current: formatImgUrl(value?.texture_url, '!w800'), // 当前显示
-            urls: [formatImgUrl(value?.texture_url, '!w800')]  // 需要预览的图片http链接列表
-        })
+    const [labAndImgShow, setLabAndImgShow] = useState(false)
+    const closeLabAndImgShow = useCallback(() => {
+        setLabAndImgShow(false)
+    }, [])
+    const onShowLabAndImg = () => {
+        if(!showStatus) return false
+        setLabAndImgShow(true)
     }
 
     return (
         <>
-            <View className={styles.labAndImg_main}>
-                {value?.texture_url&&<Image mode="aspectFill" onClick={() => onShowImage()} src={formatImgUrl(value?.texture_url)}></Image>}
-                {(!value?.texture_url&&rgbStyle)&&<View className={styles.boxColor} onClick={() => onClickShow()} style={{...rgbStyle}}></View>}
-                {(!value?.texture_url&&!rgbStyle)&&<Image mode="aspectFill" src={formatImgUrl('')}></Image>}
+            <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>
-            <Preview value={rgbStyle} show={showPreview} onClose={() => setShowPreview(false)}/>
+            <LabAndImgShow value={value} show={labAndImgShow} onClose={closeLabAndImgShow}/>
         </>
     )
 })