import Checkbox Stepper from antd-mobile;import cartListscss;import perOrder from apiorder;import connect from react-redux;import useNavigate from react-router-dom;import useEffect useState

import { Checkbox, Stepper } from 'antd-mobile'; import './cartList.scss'; import { perOrder } from '../../../../api/order'; import { connect } from 'react-redux'; import { useNavigate } from 'react-router-dom'; import { useEffect, useState } from 'react';

const CartList = ({ cart, recommend }) => { const [num, setNum] = useState(); const [sum, setSum] = useState(); const [checkAll, setCheckAll] = useState(false); // 全选状态 const navigate = useNavigate();

const getSum = () => {
    let data = [...cart];
    let sum = 0;
    let num = 0;
    data.forEach(item => {
        sum += item.price * item.num;
        num += item.num;
    });

    setNum(num);
    setSum(sum);
};

// 勾选单个商品
const handleCheck = (index) => {
    const newCart = [...cart];
    newCart[index].checked = !newCart[index].checked;
    // 判断是否全部勾选
    const isAllChecked = newCart.every(item => item.checked);
    setCheckAll(isAllChecked);
    // 更新购物车状态
    dispatch({
        type: 'UPDATE_CART',
        payload: newCart
    });
};

// 全选
const handleCheckAll = () => {
    const newCart = [...cart];
    const isChecked = !checkAll;
    newCart.forEach(item => item.checked = isChecked);
    setCheckAll(isChecked);
    // 更新购物车状态
    dispatch({
        type: 'UPDATE_CART',
        payload: newCart
    });
};

// 手动修改商品数量
const handleNumChange = (index, val) => {
    const newCart = [...cart];
    newCart[index].num = val;
    // 更新购物车状态
    dispatch({
        type: 'UPDATE_CART',
        payload: newCart
    });
};

// 去结算
const jiesuanFn = () => {
    const list = cart.filter(item => item.checked);
    let cartId = [];
    let cartList = [];

    list.forEach(item => {
        cartId.push(item.cartId);
        cartList.push(item);
    });

    perOrder({ cartId: cartId, totalMoney: sum }).then(res => {
        console.log(res);
        if (res.data.code === 666) {
            navigate('/ordersubmit', { state: { cartList, preOrderId: res.data.result.preOrderId, sum: sum } });
        }
    });
};

useEffect(() => {
    getSum();
}, [cart]);

return (
    <div className='cart_page'>
        <div className='title3'>
            购物车
            <div className='edit'>编辑</div>
        </div>
        <div className='cart_list'>
            <div className='cartlist-0'>
                {cart.length === 0 ? (
                    <div className='a1'>购物车是空的，快买点东西奖励自己吧</div>
                ) : (
                    <div className='cart_item'>
                        {cart.map((item, index) => (
                            <div key={index}>
                                <Checkbox checked={item.checked} onChange={() => handleCheck(index)}></Checkbox>
                                <img src={item.pic} alt='' />
                                <div className='right'>
                                    <div>{item.name}</div>
                                    <div>珊瑚紫(素皮)</div>
                                    <div className='price'>{item.price}</div>
                                    <Stepper
                                        showNumber
                                        min={1}
                                        value={item.num}
                                        onChange={(val) => handleNumChange(index, val)}
                                    />
                                </div>
                            </div>
                        ))}
                    </div>
                )}
            </div>
        </div>
        <div className='title2'>您可能还喜欢</div>
        <div className='like-list flex'>
            {recommend.map((item, index) => (
                <div key={index} className='like-item'>
                    <img src={item.photoPath} alt='' />
                    <div className='name'>{item.name}</div>
                    <div className='name1'>{item.promotionInfo}</div>
                    <div>
                        <span className='price'>￥{item.promoPrice}</span>
                        <span className='price1'>￥{item.price}</span>
                    </div>
                </div>
            ))}
        </div>
        <div className='footer2 flex'>
            <div>
                <Checkbox checked={checkAll} onChange={handleCheckAll}></Checkbox>
                <span>全选</span>
                <div>
                    商品总数量{num}  | 商品总价格：{sum}
                </div>
                <button onClick={jiesuanFn}>去结算</button>
            </div>
            <div>
                {/* <span>共计：<span className='price'>￥5699</span></span> */}
            </div>
        </div>
    </div>
);

};

export default connect(state => ({ cart: state.cart }))(CartList); ``