封装图片组件

src/components/LabAndImg/index.module.scss

@@ -0,0 +1,17 @@
+
+.labAndImg_main{
+    width: 100%;
+    height: 100%;
+    .boxColor{
+        width: 100%;
+        height: 100%;
+        border-radius: 20px;
+        border:1PX solid #818181;
+    }
+    image{
+        width: 100%;
+        height: 100%;
+        border-radius: 20px;
+    }
+
+}

src/components/LabAndImg/index.tsx

@@ -0,0 +1,30 @@
+import { formatImgUrl } from "@/common/fotmat";
+import { Image, View } from "@tarojs/components";
+import { memo, useMemo } from "react";
+import styles from './index.module.scss'
+
+//该组件宽高为100%需调整外层元素宽高
+type Param = {
+    value?: { 
+        texture_url?: string, //纹理图路径
+        lab?: {l:number, a:number, b:number}, //lab
+        rgb?: {r:number, g:number, b:number} //rgb
+    }
+}
+export default memo(({value}:Param) => {
+    //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])
+    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>
+    )
+})

src/components/moveBtn/index.tsx

@@ -29,7 +29,7 @@ export default ({children = null, onClick}:param) => {
     return (
         <MovableArea className={styles.movableItem}>
             {children}
-            {showMoveBtn&&<MovableView onClick={onClick} className={styles.moveBtn} direction="all" inertia={true} x="750rpx" y={screenHeight+'rpx'} onTouchEnd={(e) => dragEnd(e)}>
+            {showMoveBtn&&<MovableView onClick={onClick} className={styles.moveBtn} direction="all" inertia={true} x="630rpx" y={screenHeight+'rpx'} onTouchEnd={(e) => dragEnd(e)}>
               <View className={classnames('iconfont','icon-gouwuche', styles.shop_icon) } ></View>
             </MovableView>}
         </MovableArea>

src/components/orderBtns/index.module.scss

@@ -1,6 +1,7 @@
 .btns_list{
     display: flex;
     justify-content: flex-end;
+    width: 100%;
     // margin-top: 30px;
     .scroll{
         white-space: nowrap;
@@ -9,18 +10,18 @@
     .list_scroll{
         white-space: nowrap;
         width: 100%;
-        display: flex;
-        justify-content: flex-end;
+        text-align: right;
     }
     .btns_item{
-        padding: 0 10px;
-        height: 60px;
+        padding: 0 15px;
+        width: 100px;
         border: 2px solid #dddddd;
         border-radius: 38px;
         text-align: center;
         line-height: 60px;
         font-size: $font_size;
         color: $color_font_three;
+        display:inline-block;
         &:nth-child(n+2) {
             margin-left: 32px;
         }

src/components/orderBtns/index.tsx

@@ -158,7 +158,7 @@ export default memo(({orderInfo, onClick}:Param) => {
                 <View className={styles.list_scroll}>
                     {orderBtnsList.current.map((item, index) => 
                         orderBtnsShow(item)&&<View key={item.id} className={styles.btns_item} onClick={() => submitBtns(item.id, index)}>{item.label}</View>
-                        // <View key={item.id} id={`orderBtns_${item.id}`} className={styles.btns_item} onClick={() => submitBtns(item.id, index)}>{item.label}</View>
+                        // <View key={item.id}  className={styles.btns_item} onClick={() => submitBtns(item.id, index)}>{item.label}</View>
                     )}
                 </View>
             </ScrollView>

src/components/product/index.tsx

@@ -3,6 +3,7 @@ import Taro from "@tarojs/taro"
 import { goLink } from "@/common/common"
 import styles  from './index.module.scss'
 import { formatHashTag, formatImgUrl } from "@/common/fotmat"
+import LabAndImg from "../LabAndImg"
 
 type Params = {
     desStatus?: true|false,
@@ -14,7 +15,7 @@ export default ({desStatus = true, productList = []}:Params) => {
             {productList?.map(item => {
                 return <View className={styles.products_item} onClick={() => goLink(`/pages/details/index?id=${item.id}`)}>
                     <View className={styles.item_img}>
-                        <Image src={formatImgUrl(item.texture_url)}/>
+                        <LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}}/>
                         <View className={styles.num}>{item.product_color_count}色</View>
                     </View>
                     <View className={styles.item_con}>