From 2b4017274ad928ad6f679d8402ceda2b1711156d Mon Sep 17 00:00:00 2001
From: czm <2192718639@qq.com>
Date: Wed, 20 Jul 2022 20:30:49 +0800
Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=9F=8E=E6=B5=8B=E8=AF=95=E7=89=88v7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/LabAndImg/index.tsx            | 36 ++++++++++++++-----
 .../components/preview/index.module.scss      |  5 +++
 .../details/components/preview/index.tsx      | 18 ++++------
 src/pages/details/index.tsx                   |  1 -
 src/pages/order/index.tsx                     |  1 -
 5 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/src/components/LabAndImg/index.tsx b/src/components/LabAndImg/index.tsx
index 842d0d9..d03ea61 100644
--- a/src/components/LabAndImg/index.tsx
+++ b/src/components/LabAndImg/index.tsx
@@ -1,7 +1,9 @@
 import { formatImgUrl } from "@/common/fotmat";
+import Preview from "@/pages/details/components/preview";
 import { Image, View } from "@tarojs/components";
-import { memo, useMemo } from "react";
+import { memo, useMemo, useState } from "react";
 import styles from './index.module.scss'
+import Taro from "@tarojs/taro";
 
 //该组件宽高为100%需调整外层元素宽高
 type Param = {
@@ -9,9 +11,10 @@ type Param = {
         texture_url?: string, //纹理图路径
         lab?: {l:number, a:number, b:number}, //lab
         rgb?: {r:number, g:number, b:number} //rgb
-    }
+    },
+    checkStatus: false|true
 }
-export default memo(({value}:Param) => {
+export default memo(({value, checkStatus = false}:Param) => {
     //lab是否都是0
     const rgbStyle = useMemo(() => {
         if(value?.lab&&(value.lab.l||value.lab.a||value.lab.b)) {
@@ -20,11 +23,28 @@ export default memo(({value}:Param) => {
             return null
         }
     }, [value])
+
+    const [showPreview, setShowPreview] = useState(false)
+    const onClickShow = () => {
+        setShowPreview(() => true)
+    }
+
+    const onShowImage = () => {
+        if(!checkStatus) return false
+        Taro.previewImage({
+            current: formatImgUrl(value?.texture_url, '!w800'), // 当前显示
+            urls: [formatImgUrl(value?.texture_url, '!w800')]  // 需要预览的图片http链接列表
+        })
+    }
+
     return (
-        <View className={styles.labAndImg_main}>
-            {value?.texture_url&&<Image mode="aspectFill" src={formatImgUrl(value?.texture_url)}></Image>}
-            {(!value?.texture_url&&rgbStyle)&&<View className={styles.boxColor} style={{...rgbStyle}}></View>}
-            {(!value?.texture_url&&!rgbStyle)&&<Image mode="aspectFill" src={formatImgUrl('')}></Image>}
-        </View>
+        <>
+            <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>
+            <Preview value={rgbStyle} show={showPreview} onClose={() => setShowPreview(false)}/>
+        </>
     )
 })
\ No newline at end of file
diff --git a/src/pages/details/components/preview/index.module.scss b/src/pages/details/components/preview/index.module.scss
index 9db49ae..fc59d0b 100644
--- a/src/pages/details/components/preview/index.module.scss
+++ b/src/pages/details/components/preview/index.module.scss
@@ -18,6 +18,11 @@
         margin-top: 100px;
         padding: 20px;
         box-sizing: border-box;
+        .rgb{
+            width: 600px;
+            height: 600px;
+            border-radius: 20px;
+        }
         image{
             width:100%;
             border-radius: 10px;
diff --git a/src/pages/details/components/preview/index.tsx b/src/pages/details/components/preview/index.tsx
index ff86ecf..3cbb31a 100644
--- a/src/pages/details/components/preview/index.tsx
+++ b/src/pages/details/components/preview/index.tsx
@@ -1,25 +1,21 @@
-import LabAndImg from "@/components/LabAndImg"
-import { Image, View } from "@tarojs/components"
+import { View } from "@tarojs/components"
+import { useMemo } from "react"
 import styles from './index.module.scss'
 
-export type colorItem = {
-    title: string,
-    lab: {l:number, a:number, b:number},
-    rgb: {r:number, g:number, b:number},
-    texture_url: string
-}
+
 export type colorParams = {
-    value?: colorItem,
+    value?: { backgroundColor: string; }|null,
     show?: false|true
     onClose?: () => void
 }
 export default ({value, show = false, onClose}: colorParams) => {
+    
     return (
         <>
             {show&&<View className={styles.main} catch-move="true" onClick={() => onClose?.()}>
                 <View className={styles.con}>
-                    <LabAndImg value={{lab:value?.lab,rgb:value?.rgb,texture_url:value?.texture_url}}/>
-                    <View className={styles.name}>{value?.title}</View>
+                    <View className={styles.rgb} style={value!}></View>
+                    <View className={styles.name}>{'颜色'}</View>
                 </View>
             </View>}
         </>
diff --git a/src/pages/details/index.tsx b/src/pages/details/index.tsx
index 6ce3184..66ef5bf 100644
--- a/src/pages/details/index.tsx
+++ b/src/pages/details/index.tsx
@@ -239,7 +239,6 @@ export default (props:Params) => {
         <OrderCount show={showOrderCount} onClose={() => setShowOrderCount(false)} title={productName} productId={productInfo.id}/>
       </CustomWrapper>
       <ShopCart show={showCart}  onClose={() => setShowCart(false)}/>
-      <Preview value={colorInfo} show={showPreview} onClose={() => setShowPreview(false)}/>
       <AddCollection show={collectionShow} onAdd={onAdd} onClose={closeCollection}/>
       <View className='common_safe_area_y'></View>
     </View>
diff --git a/src/pages/order/index.tsx b/src/pages/order/index.tsx
index 3b79edc..3f8c6a8 100644
--- a/src/pages/order/index.tsx
+++ b/src/pages/order/index.tsx
@@ -115,7 +115,6 @@ import styles  from './index.module.scss'
             take_goods_address: orderDetail?.take_goods_address,
             take_goods_phone: orderDetail?.take_goods_phone
         }
-       
     }, [orderDetail])
 
     //订单备注