🦄 refactor:首页购物车50%

src/components/shoppingCart/index.module.scss

@@ -0,0 +1,91 @@
+.shopcartBox {
+    padding-left: 32px;
+
+    .topTitle {
+        font-size: 32px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #000000;
+        margin-top: 24px;
+        margin-bottom: 8px;
+    }
+
+    .selectFont {
+        font-size: 24px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #000000;
+        margin-bottom: 24px;
+    }
+
+    .line {
+        margin-bottom: 24px;
+        width: 686px;
+        height: 1px;
+        background: #000000;
+        opacity: 0.1;
+    }
+
+    .typeFont {
+        font-size: 28px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #000000;
+        margin-bottom: 24px;
+    }
+
+    .flexType {
+        display: flex;
+        align-items: center;
+        margin-bottom: 32px;
+
+        .activemodeFont {
+            margin-right: 16px;
+            width: 160px;
+            height: 68px;
+            background: rgba(51, 127, 255, 0.1);
+            border-radius: 8px;
+            border: 1px solid #337FFF;
+            box-sizing: border-box;
+            font-size: 28px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #337FFF;
+            text-align: center;
+            line-height: 68px;
+        }
+
+        .modeFont {
+            margin-right: 16px;
+            width: 160px;
+            height: 68px;
+            background: #E9E9E9;
+            border-radius: 8px;
+            opacity: 0.4;
+            font-size: 28px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #000000;
+            box-sizing: border-box;
+            text-align: center;
+            line-height: 68px;
+        }
+    }
+
+    .kingFont {
+        font-size: 28px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #000000;
+        margin-bottom: 24px;
+    }
+
+    .searchBox {
+        width: 686px;
+        margin-bottom: 32px;
+    }
+
+    .scrollview {
+        height: 500px;
+    }
+}

src/components/shoppingCart/index.tsx

@@ -0,0 +1,105 @@
+import { View, ScrollView } from '@tarojs/components'
+import { useCallback, forwardRef, useEffect, useMemo, useRef, useState, memo, useImperativeHandle, } from 'react'
+import Search from '@/components/search'
+import styles from "./index.module.scss"
+import classnames from "classnames";
+import Popup from '@/components/popup'
+import Goods from "@/components/goodsItem"
+
+interface prosObj {
+    showPopup?: false | true,
+    closePopup?: () => void,
+    goodList?: any[],
+    typeList?: any[],
+    handCheck?: (any) => void
+}
+export default memo(forwardRef((props: prosObj, ref) => {
+    const {
+        showPopup = false,
+        closePopup,
+        goodList = [],
+        typeList = [],
+        handCheck
+    } = props
+
+    useImperativeHandle(ref, () => ({
+        Object: props,
+        typeList: typeList
+    }))
+
+
+
+    //判断选择的类型
+    const showModefont = useMemo(() => {
+        const modeObj = typeList.filter(item => {
+            return item.checked
+        })
+        if (modeObj[0].id === 0) {
+            return '条'
+        } else {
+            return '米'
+        }
+    }, [typeList])
+
+    //输入了搜索关键字
+    const getSearchData = useCallback((e) => {
+
+    }, [])
+
+    //商品数据
+    // const [goodList, setGoodlist] = useState<any[]>(['a'])
+
+
+    //点击加
+    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.line}></View>
+                <View className={styles.typeFont}>布料类型</View>
+                <View className={styles.flexType}>
+                    {
+                        typeList.map((item, index) => {
+                            return (
+                                <View onClick={() => { handCheck?.(item) }} key={index} className={classnames(item.checked ? styles.activemodeFont : styles.modeFont)}>{item.name}</View>
+                            )
+                        })
+                    }
+                </View>
+                <View className={styles.line}></View>
+                <View className={styles.kingFont}>颜色分类(33)</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>
+                            )
+                        })
+                    }
+                </ScrollView>
+
+            </View>
+        </Popup>
+
+    )
+}))