🦄 refactor:首页加入购物车

src/components/shoppingCart/index.module.scss

@@ -72,12 +72,33 @@
         }
     }
 
-    .kingFont {
-        font-size: 28px;
-        font-family: PingFangSC-Medium, PingFang SC;
-        font-weight: 500;
-        color: #000000;
+    .flexFonts {
+        display: flex;
         margin-bottom: 24px;
+        align-items: center;
+
+
+        .kingFont {
+            font-size: 28px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #000000;
+
+        }
+
+        .danwei {
+            margin-left: 16px;
+            width: 148px;
+            height: 30px;
+            border-radius: 4px;
+            border: 1px solid #E42945;
+            font-size: 22px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #E42945;
+            text-align: center;
+            line-height: 30px;
+        }
     }
 
     .searchBox {
@@ -87,5 +108,16 @@
 
     .scrollview {
         height: 500px;
+
+        .kongBox {
+            height: 181px;
+            width: 100%;
+        }
+    }
+
+    .posBox {
+        width: 100%;
+        position: fixed;
+        bottom: 0;
     }
 }

src/components/shoppingCart/index.tsx

@@ -5,13 +5,29 @@ import styles from "./index.module.scss"
 import classnames from "classnames";
 import Popup from '@/components/popup'
 import Goods from "@/components/goodsItem"
+import BottomCustomer from "@/components/BottomCustomer"
+
 
 interface prosObj {
     showPopup?: false | true,
     closePopup?: () => void,
     goodList?: any[],
     typeList?: any[],
-    handCheck?: (any) => void
+    handCheck?: (any) => void,
+    addNums?: (any) => void
+    reduceNums?: (any) => void
+    oninputEvent?: (e: string, res: object) => void,
+    getSearchData: (any) => void,
+    handPlus: (any) => void,
+    handSure: () => void,
+    obj?: {
+        code?: string,
+        name?: string,
+
+    },
+    modeFont: Number | string,
+    clientName: string,
+    clientId: Number
 }
 export default memo(forwardRef((props: prosObj, ref) => {
     const {
@@ -19,7 +35,17 @@ export default memo(forwardRef((props: prosObj, ref) => {
         closePopup,
         goodList = [],
         typeList = [],
-        handCheck
+        handCheck,
+        addNums,
+        reduceNums,
+        oninputEvent,
+        getSearchData,
+        handPlus,
+        obj = {},
+        modeFont = 0,
+        clientName = '',
+        clientId = -1,
+        handSure
     } = props
 
     useImperativeHandle(ref, () => ({
@@ -41,31 +67,34 @@ export default memo(forwardRef((props: prosObj, ref) => {
         }
     }, [typeList])
 
-    //输入了搜索关键字
-    const getSearchData = useCallback((e) => {
+    //已选的颜色
+    const selectTotal = useMemo(() => {
+        const totalArr = goodList.filter(item => {
+            return item.showInput
+        })
+        return totalArr.length
+    }, [goodList])
 
-    }, [])
+    //选择的条数或者米数
+    const selectNums = useMemo(() => {
+        var s = 0;
+        goodList.forEach(function (val, idx, arr) {
+            if (val.showInput) {
+                s += val.nums;
+            }
+        }, 0);
 
-    //商品数据
-    // const [goodList, setGoodlist] = useState<any[]>(['a'])
+        return s;
+    }, [goodList])
 
 
-    //点击加
-    const addNums = (item) => {
-        console.log(item, 4444)
-    }
-
-    //输入框监听
-    const oninputEvent = useCallback((e, obj) => {
-        console.log(e, obj, '123123')
-    }, [])
 
 
     return (
         <Popup showTitle={false} show={showPopup} onClose={() => closePopup?.()}>
             <View className={styles.shopcartBox}>
-                <View className={styles.topTitle}>0681# 26S全棉平纹</View>
-                <View className={styles.selectFont}>已选 1 种面料，1 个颜色，共 4 {showModefont}</View>
+                <View className={styles.topTitle}>{obj?.code}# {obj?.name}</View>
+                <View className={styles.selectFont}>已选 1 种面料，{selectTotal} 个颜色，共 {selectNums} {showModefont}</View>
                 <View className={styles.line}></View>
                 <View className={styles.typeFont}>布料类型</View>
                 <View className={styles.flexType}>
@@ -78,26 +107,30 @@ export default memo(forwardRef((props: prosObj, ref) => {
                     }
                 </View>
                 <View className={styles.line}></View>
-                <View className={styles.kingFont}>颜色分类(33)</View>
+                <View className={styles.flexFonts}>
+                    <View className={styles.kingFont}>颜色分类({goodList?.length})</View>
+                    <View className={styles.danwei}>{modeFont == 0 ? '大货' : modeFont == 1 ? '剪版' : '散剪'}单位：{showModefont}</View>
+                </View>
                 <View className={styles.searchBox}>
                     <Search placeholder='请输入搜索布料' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} />
                 </View>
                 <ScrollView
                     className={styles.scrollview}
                     scroll-y={true}
-                    showScrollbar={false}
-                    enhanced={true}
                 >
 
                     {
                         goodList.map((item, index) => {
                             return (
-                                <Goods key={index} value={item} onInputEven={(e, obj) => oninputEvent(e, obj)} clickAdd={(item) => addNums(item)} ></Goods>
+                                <Goods modeFont={(modeFont as number)} handPlus={(item) => handPlus?.(item)} key={index} value={item} onInputEven={(e, obj) => oninputEvent?.(e, obj)} clickAdd={(item) => addNums?.(item)} clickReduce={(item) => { reduceNums?.(item) }}></Goods>
                             )
                         })
                     }
+                    <View className={styles.kongBox}></View>
                 </ScrollView>
-
+                <View className={styles.posBox}>
+                    <BottomCustomer clientName={clientName} clientId={clientId} isDisabled={selectTotal > 0 && clientName !== '' ? false : true} handSure={() => { handSure() }}></BottomCustomer>
+                </View>
             </View>
         </Popup>