面料详情

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

@@ -0,0 +1,34 @@
+
+.main{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    .reduce, .plus{
+        font-size: $font_size_big;
+        color: $color_main;
+        width: 60px;
+        height: 60px;
+        display: flex;
+        align-items: center;
+        justify-content:center;
+        font-size: 50px;
+        // flex:1;
+    }
+    .input{
+        display: flex;
+        align-items: flex-end;
+        background-color: #fff;
+        padding: 5px 10px;
+        box-sizing: border-box;
+        width: 106px;
+    }
+    input{
+        font-size: $font_size_medium;
+    }
+    .unit{
+        font-size: $font_size_min;
+        color: $color_font_two;
+    }   
+    
+}

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

@@ -0,0 +1,36 @@
+import { Input, View } from "@tarojs/components"
+import { useRef, useState } from "react"
+import styles from "./index.module.scss"
+type params = {
+    minNum?: number,
+    maxNum?: number,
+    step?: number
+}
+export default ({minNum = 0, maxNum = 100, step=0.1}: params) => {
+    const [count, setCount] = useState(0)
+
+    const onPlus = () => {
+        let num = count + step
+        num = num >= maxNum?maxNum:num
+        setCount(num)
+    }
+    const minus = () => {
+        let num = count - step
+        num = num <= minNum?minNum:num
+        setCount(num)
+    }
+    return (
+        <View className={styles.main}>
+            <View className={styles.reduce} onClick={() => minus()}>-</View>
+            <View className={styles.input}>
+                <Input 
+                    value={String(count)}
+                    onInput={() => {}}
+                    onBlur={() => {}}
+                />
+                <View className={styles.unit}>米</View>
+            </View>
+            <View className={styles.plus} onClick={() => onPlus()}>+</View>
+        </View>
+    )
+}

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

@@ -1,8 +1,8 @@
 .shop_cart_main{
     .popup_con{
+        height: 80vh;
         display: flex;
         flex-direction: column;
-        height: 80vh;
     }
     .header{
         color: $color_font_one;
@@ -10,6 +10,9 @@
         font-weight: 700;
         padding: 20px;
     }
+    .colorFind{
+        padding: 10px 20px;
+    }
     .search{
         display: flex;
         align-items: center;
@@ -42,7 +45,7 @@
             height: 51px;
         }
     }
-    .colorFind{
+    .colorNum{
         display: flex;
         justify-content: space-between;
         padding: 20px;
@@ -54,7 +57,14 @@
             color: $color_font_two;
         }
     }
+    .product_color_con{
+        
+        flex:1;
+        height: 0;
+        padding-bottom:151px;
+    }
     .color_con{
+        
         .item {
             display: flex;
             justify-content: space-between;
@@ -65,6 +75,11 @@
                 height: 156.5px;
                 border-radius: 20px;
                 background-color: red;
+                image{
+                    width: 100%;
+                    height: 100%;
+                    border-radius: 20px;
+                }
             }
             .item_con{
                 flex:1;
@@ -93,12 +108,48 @@
                     text-align: center;
                     line-height: 64px;
                     color: #fff;
+                    padding: 10px;
+                    box-sizing: border-box;
+                }
+                .btn_count{
+                    width: 268px;
+                    height: 64px;
+                    background-color: #ECF5FF;
+                    border-radius: 40px 0px 16px 0px;
+                    padding: 0 20px;
+                    display: flex;
+                    align-items: center;
                 }
             }
         }
     }
     .buy_btn{
-        height: 151px;
         width: 100%;
+        padding: 0 40px;
+        padding-bottom: constant(safe-area-inset-bottom);
+        padding-bottom: env(safe-area-inset-bottom);
+        box-sizing: border-box;
+        position: fixed;
+        bottom:0;
+        font-size: $font_size_medium;
+        color: $color_font_two;
+        background-color: #fff;
+        box-shadow: 6px 0px 12px 0px rgba(0,0,0,0.16); 
+        .buy_btn_con{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            height: 151px;
+        }
+        .add_cart{
+            width: 260px;
+            height: 90px;
+            font-size: $font_size_big;
+            text-align: center;
+            line-height: 90px;
+            border-radius: 50px;
+            color: #fff;
+            background: linear-gradient(38deg,#007aff, #4fa6ff 100%, #68b4ff 100%);
+        }
     }
 }

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

@@ -1,12 +1,13 @@
 import {Image, ScrollView, View } from "@tarojs/components"
 import Popup from "@/components/popup"
 import classnames from "classnames";
-import MCheckbox from "@/components/checkbox";
 import LoadingCard from "@/components/loadingCard";
 import InfiniteScroll from "@/components/infiniteScroll";
 import styles from "./index.module.scss"
 import { useEffect, useState } from "react";
 import Taro from "@tarojs/taro";
+import Search from "@/components/search";
+import Counter from "../counter";
 
 type param = {
     show?: true|false,
@@ -41,49 +42,21 @@ export default ({show = false, onClose}: param) => {
     }, [show])
 
 
-    const [selectStatus, setSelectStatus] = useState(false)
-    const selectAll = () => {
-        list.map(item => {
-            item.select = !selectStatus
-        })
-        setSelectStatus(!selectStatus)
-        setList([...list])
-    }
-
-    //checkbox选中回调
-    const selectCallBack = (item) => {
-        item.select = true
-        setList([...list])
-    }
-
-    //checkbox关闭回调
-    const colseCallBack = (item) => {
-        item.select = false
-        setList([...list])
-    }
-
     //popup关闭
     const closePopup = () => {
         onClose?.()
         setShowPopup(false)
     }
 
-    const delSelect = () => {
+    //已选择提示
-        Taro.showModal({
+    const [selectCountMsg, setSelectCountMsg] = useState('')
-            content: '删除所选商品？',
+    useEffect(() => {
-            success: function (res) {
+        if(selectIndex == 2) {
-                if (res.confirm) {
+            setSelectCountMsg(`当前已选${1}种，共${1}米`)
-                    Taro.showToast({
+        } else {
-                        title: '成功',
+            setSelectCountMsg(`当前已选${1}种，共${1}条`)
-                        icon: 'success',
+        }
-                        duration: 2000
+    },[selectIndex])
-                    })
-                } else if (res.cancel) {
-                console.log('用户点击取消')
-                }
-            }
-        })
-    }
     
     return (
         <View className={styles.shop_cart_main}>
@@ -99,50 +72,43 @@ export default ({show = false, onClose}: param) => {
                         </View>
                     </View>
                     <View className={styles.colorFind}>
+                        <Search placeIcon="out" showBtn={true}/>
+                    </View>
+                    <View className={styles.colorNum}>
                         <View className={styles.title}>颜色分类 (13)</View>
                         <View className={classnames('iconfont icon-sousuo', styles.miconfont)}></View>
                     </View>
-                    <View className={styles.color_con}>
+                    <View className={styles.product_color_con}>
-                        <View className={styles.item}>
+                        <InfiniteScroll>
-                            <View className={styles.item_color}></View>
+                            <View className={styles.color_con}>
-                            <View className={styles.item_con}>
+                                {new Array(10).fill('').map(item => {
-                                <View className={styles.title}>1#薄荷绿</View>
+                                    return <View className={styles.item}>
-                                <View className={styles.num}>¥25.5/m</View>
+                                        <View className={styles.item_color}>
+                                            <Image src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d'/>
+                                        </View>
+                                        <View className={styles.item_con}>
+                                            <View className={styles.title}>1#薄荷绿</View>
+                                            <View className={styles.num}>¥25.5/m</View>
+                                        </View>
+                                        <View className={styles.btn_con}>
+                                            {/* <View className={styles.btn}>添加</View> */}
+                                            <View className={styles.btn_count}>
+                                                <Counter/>
+                                            </View>
+                                        </View>
+                                    </View>
+                                })}
                             </View>
-                            <View className={styles.btn_con}>
+                        </InfiniteScroll>
-                                <View className={styles.btn}>添加</View>
-                            </View>
-                        </View>
-                        <View className={styles.item}>
-                            <View className={styles.item_color}></View>
-                            <View className={styles.item_con}>
-                                <View className={styles.title}>1#薄荷绿</View>
-                                <View className={styles.num}>¥25.5/m</View>
-                            </View>
-                            <View className={styles.btn_con}>
-                                <View className={styles.btn}>添加</View>
-                            </View>
-                        </View>
-                        <View className={styles.item}>
-                            <View className={styles.item_color}></View>
-                            <View className={styles.item_con}>
-                                <View className={styles.title}>1#薄荷绿</View>
-                                <View className={styles.num}>¥25.5/m</View>
-                            </View>
-                            <View className={styles.btn_con}>
-                                <View className={styles.btn}>添加</View>
-                            </View>
-                        </View>
                     </View>
                     <View className={styles.buy_btn}>
-                        <View className={styles.icon}>
+                        <View className={styles.buy_btn_con}>
-                            <View className={classnames('iconfont', 'icon-gouwuche', styles.miconfont)}></View>
+                            <View className={styles.count}>{selectCountMsg}</View>
-                        </View>
+                            <View className={styles.add_cart}>加入购物车</View>
-                        <View className={styles.goPay}>
-                            去结算
                         </View>
                     </View>
                 </View>
+                <View className="common_safe_area_y"></View>
             </Popup>
         </View>
     )