商城测试版v7

2022-07-21 20:38:52 +08:00
parent 2b4017274a
commit c646bac0a4
21 changed files with 235 additions and 87 deletions
@@ -0,0 +1,45 @@
+.main{
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    top: 0;
+    left: 0;
+    background-color: rgba(0,0,0, 0.8);
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    z-index: 9999;
+    .con{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        width: 100%;
+        height: 60vh;
+        margin-top: 100px;
+        padding: 20px;
+        box-sizing: border-box;
+        .rgb{
+            width: 600px;
+            height: 600px;
+            border-radius: 20px;
+        }
+        image{
+            width:100%;
+            border-radius: 10px;
+        }
+        .name {
+            width: 488px;
+            height: 72px;
+            color: #fff;
+            text-align: center;
+            font-size: 26px;
+            border-radius: 20px;
+            line-height: 72px;
+            margin-top: 10px;
+            background-color: rgba(0,0,0, 0.5);
+            padding: 0 10px;
+            @include common_ellipsis(1);
+        }
+    }
+}
@@ -0,0 +1,65 @@
+import { formatImgUrl } from "@/common/fotmat"
+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不限制
+}
+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])
+
+    //显示颜色
+    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  
+        })
+    }
+
+    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>}
+        </>
+    )
+}