🦄 refactor:首页购物车50%

src/pages/index/index.tsx

@@ -3,12 +3,13 @@ import Search from '@/components/search'
 import SideBar from '@/components/sideBar'
 import Product from '@/components/product'
 import MoveBtn from '@/components/moveBtn'
-// import ShopCart from '@/components/shopCart'
+import ShopCart from '@/components/shoppingCart'
 import { goLink } from '@/common/common'
 import styles from './index.module.scss'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { kindListApi, ProductListApi } from '@/api/index'
 // import useLogin from '@/use/useLogin'
+import { mpproductcolorlist } from "@/api/order"
 import { dataLoadingStatus } from '@/common/util'
 import Taro from '@tarojs/taro'
 
@@ -74,6 +75,55 @@ export default () => {
         setRefresherTriggeredStatus(true)
     }
 
+    const [search, setSearchObj] = useState({
+        modeId: 0,
+        goodsId: null
+    })
+
+    //选择的类型
+    const [typeList, setTypeList] = useState<any[]>([{ id: 0, name: '大货', checked: true }, { id: 1, name: '剪版', checked: false }, { id: 2, name: '散剪', checked: false }])
+    //选择类型
+    const handCheckMode = (item) => {
+        typeList.map(it => {
+            if (it.id === item.id) {
+                it.checked = true
+                setSearchObj((e) => ({ ...e, modeId: it.id }))
+            } else {
+                it.checked = false
+            }
+            return it
+        })
+        setTypeList([...typeList])
+
+    }
+    const [goodList, setGoodlist] = useState<any[]>([])
+    const { fetchData: colorlistFetch } = mpproductcolorlist()
+    const ShopCartRef = useRef<any>(null)
+
+
+    //点击对应商品显示购物车
+    const showCart = async (item) => {
+        console.log(item, 6666)
+        setSearchObj((e) => ({ ...e, goodsId: item.id }))
+        setShowShopCart(true)
+
+    }
+
+    const getGoodList = async () => {
+        const res = await colorlistFetch({ product_id: search.goodsId, sale_mode: search.modeId })
+        setGoodlist([...res.data.list])
+    }
+    //监听选择的类型
+    useEffect(() => {
+        setSearchObj(search)
+        console.log(search, 'searchsearch')
+        if (search.goodsId) getGoodList()
+    }, [search])
+
+    //关闭弹窗
+    const closePoup = () => {
+        setShowShopCart(false)
+    }
     //数据加载状态
     const statusMore = useMemo(() => {
         return dataLoadingStatus({ list: productData.list, total: productData.total, status: productState.loading })
@@ -87,7 +137,7 @@ export default () => {
                         我的收藏
                     </View> */}
                 <View className={styles.search_input} onClick={() => goLink('/pages/searchPage/index')}>
-                    <Search disabled={true} style={{ width: '263rpx' }}/>
+                    <Search disabled={true} style={{ width: '263rpx' }} />
                 </View>
             </View>
             <View className={styles.products}>
@@ -102,11 +152,11 @@ export default () => {
                     heightItem={150}
                     refresherTriggered={refresherTriggeredStatus}
                     selfOnRefresherRefresh={() => getRefresherRefresh()}>
-                    <Product productList={productData.list} />
+                    <Product productList={productData.list} popupShow={(item) => showCart(item)} />
                 </SideBar>
             </View>
             <View className='common_safe_area_y'></View>
-            {/* <ShopCart show={showShopCart} onClose={() => setShowShopCart(false)} /> */}
+            <ShopCart ref={ShopCartRef} showPopup={showShopCart} handCheck={(item) => { handCheckMode(item) }} closePopup={() => closePoup()} goodList={goodList} typeList={typeList}></ShopCart>
         </View>
         // </MoveBtn>
     )