购物车 - 商品清单与结算

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'; import { useDispatch } from 'react-redux';

const CartList = ({ cart, recommend }) => { const dispatch = useDispatch(); 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) => { if (item.checked) { 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, }); getSum(); };

// 去结算 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 (

购物车

编辑

{cart.length === 0 ? (

购物车是空的，快买点东西奖励自己吧

) : (

{cart.map((item, index) => (

<Checkbox checked={item.checked} onChange={() => handleCheck(index)}>

{item.name}

珊瑚紫(素皮)

{item.price}

<Stepper showNumber min={1} value={item.num} onChange={(val) => handleNumChange(index, val)} />

))}

)}

您可能还喜欢

{recommend.map((item, index) => (

{item.name}

{item.promotionInfo}

￥{item.promoPrice} ￥{item.price}

))}

全选

商品总数量{num} | 商品总价格：{sum}

去结算

{/* 共计：￥5699 */}

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