🦄 refactor:首页购物车50%

src/api/order.ts

@@ -26,4 +26,11 @@ export const ClientListApi = () => {
         url: `/v1/mp/purchaser/list`,
         method: "get"
     })
-}
+}
+//面料种类列表
+export const mpproductcolorlist = () => {
+    return useRequest({
+        url: `/v1/mp/product/color/list`,
+        method: "get"
+    })
+}

src/components/goodsItem/index.module.scss

@@ -0,0 +1,126 @@
+.goodsBox {
+    display: flex;
+    margin-bottom: 32px;
+    // justify-content: space-between;
+
+    .pic {
+        width: 118px;
+        height: 118px;
+        border-radius: 8px;
+        margin-right: 32px;
+    }
+
+    .rightGoodbox {
+        padding-bottom: 31px;
+        border-bottom: 1px solid #efefef;
+        display: flex;
+        justify-content: space-between;
+        // margin-right: 32px;
+        width: 538px;
+
+        .leftFontsbox {
+            .title {
+                width: 260px;
+                height: 34px;
+                font-size: 28px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #000000;
+                margin-bottom: 8px;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+
+            .productName {
+                width: 260px;
+                height: 30px;
+                font-size: 24px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #000000;
+                margin-bottom: 16px;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+
+            .productNums {
+                font-size: 24px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #000000;
+            }
+        }
+
+        .rightFontsbox {
+            .money {
+                display: flex;
+                justify-content: flex-end;
+                font-size: 28px;
+                font-family: PingFangSC-Medium, PingFang SC;
+                font-weight: 500;
+                color: #F41A39;
+                margin-bottom: 14px;
+            }
+
+            .inputBox {
+                width: 189px;
+                height: 64px;
+                border-radius: 8px;
+                border: 1px solid #979797;
+                display: flex;
+
+                .reduceBox {
+                    width: 64px;
+                    height: 64px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+
+                    .reduce {
+                        width: 20px;
+                        height: 3px;
+                        background: #000000;
+                        border-radius: 1px;
+                        opacity: 0.8;
+                    }
+                }
+
+                .numsBox {
+                    width: 61px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 24px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: #000000;
+                }
+
+                .addBox {
+                    width: 64px;
+                    height: 64px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: #000;
+                    font-size: 35px;
+                }
+            }
+
+            .addtine {
+                width: 64px;
+                height: 64px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: #000;
+                font-size: 35px;
+                border-radius: 8px;
+                border: 1px solid #979797;
+                float: right;
+            }
+        }
+    }
+}

src/components/goodsItem/index.tsx

@@ -0,0 +1,52 @@
+import { View, ScrollView, Image, Input } from '@tarojs/components'
+import { useCallback, useEffect, useMemo, useRef, useState, memo } from 'react'
+import styles from "./index.module.scss"
+import classnames from "classnames";
+
+interface props {
+    clickAdd: (any) => void,
+    onInputEven: (a: any, c: any) => void,
+    value: {
+        showInput?: boolean,
+        nums?: string
+    }
+}
+
+
+export default memo((props: props) => {
+
+
+
+    return (
+        <View className={styles.goodsBox}>
+            <Image className={styles.pic} mode={'aspectFill'} src={'https://test.cdn.zzfzyc.com/mall/no_img.png'}></Image>
+            <View className={styles.rightGoodbox}>
+                <View className={styles.leftFontsbox}>
+                    <View className={styles.title}>001# 环保黑</View>
+                    <View className={styles.productName}>0681# 26S全棉平纹</View>
+                    <View className={styles.productNums}>剩:109件</View>
+                </View>
+                <View className={styles.rightFontsbox}>
+                    <View className={styles.money}>¥37.50/kg</View>
+                    {
+                        props.value.showInput && <View className={styles.inputBox}>
+                            <View className={styles.reduceBox}>
+                                <View className={styles.reduce}>
+                                </View>
+                            </View>
+                            <View className={styles.numsBox}>
+                                <Input type='number' value={props.value.nums} onInput={($event) => props.onInputEven($event, props)}></Input>
+                            </View>
+                            <View className={styles.addBox}>
+                                +
+                            </View>
+                        </View>
+                    }
+                    {
+                        !props.value.showInput && <View className={styles.addtine} onClick={() => props.clickAdd(props.value)}>+</View>
+                    }
+                </View>
+            </View>
+        </View>
+    )
+})

src/components/product/index.tsx

@@ -1,39 +1,40 @@
 import { Image, View } from "@tarojs/components"
 import Taro from "@tarojs/taro"
 import { goLink } from "@/common/common"
-import styles  from './index.module.scss'
+import styles from './index.module.scss'
 import { formatHashTag, formatImgUrl } from "@/common/fotmat"
 import LabAndImg from "../LabAndImg"
 import { useCallback, useMemo } from "react"
 
 type Params = {
-    desStatus?: true|false,
-    productList?: any[]
+    desStatus?: true | false,
+    productList?: any[],
+    popupShow?: (any) => void
 }
-export default ({desStatus = true, productList = []}:Params) => {
+export default ({ desStatus = true, productList = [], popupShow }: Params) => {
 
     const labAndImgObj = useCallback((item) => {
-        return {lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}
+        return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url }
     }, [productList])
     return (
         <View className={styles.products_list}>
             {productList?.map(item => {
-                return <View className={styles.products_item} onClick={() => goLink(`/pages/details/index?id=${item.id}`)}>
+                return <View className={styles.products_item} onClick={() => popupShow?.(item)}>
                     <View className={styles.item_img}>
-                        <LabAndImg value={labAndImgObj(item)}/>
+                        <LabAndImg value={labAndImgObj(item)} />
                         <View className={styles.num}>{item.product_color_count}色</View>
                     </View>
                     <View className={styles.item_con}>
-                    <View className={styles.title}><text>{formatHashTag(item.code, '')} </text>{item.name}</View>
-                    <View className={styles.tag_list}>
-                        <View className={styles.tag}>{item.width}</View>
-                        <View className={styles.tag_g}>{item.weight_density}</View>
-                    </View>
-                    <View className={styles.introduce}>{item.component}</View>
-                        {desStatus&&<View className={styles.des}>{item.describe}</View>}
+                        <View className={styles.title}><text>{formatHashTag(item.code, '')} </text>{item.name}</View>
+                        <View className={styles.tag_list}>
+                            <View className={styles.tag}>{item.width}</View>
+                            <View className={styles.tag_g}>{item.weight_density}</View>
+                        </View>
+                        <View className={styles.introduce}>{item.component}</View>
+                        {desStatus && <View className={styles.des}>{item.describe}</View>}
                     </View>
                 </View>
             })}
-        </View>
+        </View >
     )
 }

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>
+
+    )
+}))

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>
     )