下单功能基本完成

src/pages/details/components/preview/index.module.scss

@@ -0,0 +1,36 @@
+.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;
+    .con{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        width: 100%;
+        margin-top: 200px;
+        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
+        }
+    }
+}

src/pages/details/components/preview/index.tsx

@@ -0,0 +1,24 @@
+import { Image, View } from "@tarojs/components"
+import styles from './index.module.scss'
+
+export type colorItem = {
+    title: string,
+    img: string
+}
+export type colorParams = {
+    value?: colorItem,
+    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}>
+                    <Image mode="aspectFill" src={value?.img as string}/>
+                    <View className={styles.name}>{value?.title}</View>
+                </View>
+            </View>}
+        </>
+    )
+}

src/pages/details/components/shopCart/index.module.scss

@@ -67,13 +67,11 @@
         }
     }
     .product_color_con{
-        
         flex:1;
         height: 0;
         padding-bottom:151px;
     }
     .color_con{
-        
         .item {
             display: flex;
             justify-content: space-between;
@@ -130,6 +128,15 @@
             }
         }
     }
+    .noData{
+        width:100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: $color_font_three;
+        font-size: $font_size_medium;
+    }
     .buy_btn{
         width: 100%;
         padding: 0 40px;
@@ -156,6 +163,9 @@
             line-height: 90px;
             border-radius: 50px;
             color: #fff;
+            background: linear-gradient(38deg,#5cabff, #7cbcfc 100%, #99ccff 100%);
+        }
+        .select_add_cart{
             background: linear-gradient(38deg,#007aff, #4fa6ff 100%, #68b4ff 100%);
         }
     }

src/pages/details/components/shopCart/index.tsx

@@ -7,13 +7,13 @@ import Counter from "../counter";
 import Big from 'big.js'
 import classnames from "classnames";
 import styles from "./index.module.scss"
-import { useEffect, useState } from "react";
+import { memo, useEffect, useState } from "react";
 
 type param = {
     show?: true|false,
     onClose?: () => void
 }
-export default ({show = false, onClose}: param) => {
+export default memo(({show = false, onClose}: param) => {
     const selectList = [
         {step:1,  digits:2, title:'剪板', unit:'米'}, 
         {step:1,  digits:2, title:'散剪', unit:'米'}, 
@@ -27,6 +27,8 @@ export default ({show = false, onClose}: param) => {
     const [list, setList] = useState<any[]>([])
     const [loading, setLoading] = useState(false)
 
+    console.log('执行执行')
+
     useEffect(() => {
         let lists:any[] = []
         for(let i = 0; i < 20; i++) {
@@ -114,7 +116,7 @@ export default ({show = false, onClose}: param) => {
                         <View className={classnames('iconfont icon-sousuo', styles.miconfont)} onClick={() => changeSearchShow()}></View>
                     </View>
                     <View className={styles.product_color_con}>
-                        <InfiniteScroll>
+                        {list.length > 0&&<InfiniteScroll>
                             <View className={styles.color_con}>
                                 {list.map(item => {
                                     return <View className={styles.item}>
@@ -141,12 +143,13 @@ export default ({show = false, onClose}: param) => {
                                     </View>
                                 })}
                             </View>
-                        </InfiniteScroll>
+                        </InfiniteScroll>||
+                        <View className={styles.noData}>暂无此商品</View>}
                     </View>
                     <View className={styles.buy_btn}>
                         <View className={styles.buy_btn_con}>
                             <View className={styles.count}>当前已选{selectCount.kindCount}种，共{selectCount.sumCount}{selectList[selectIndex].unit}</View>
-                            <View className={styles.add_cart}>加入购物车</View>
+                            <View className={classnames(styles.add_cart, selectCount.kindCount&&styles.select_add_cart)}>加入购物车</View>
                         </View>
                     </View>
                 </View>
@@ -154,4 +157,4 @@ export default ({show = false, onClose}: param) => {
             </Popup>
         </View>
     )
-}
+})