购物车是电商网站一个重要功能,此文使用React组件方式设计购物车组件,可根据状态变量showCart 灵活切换显示和隐藏购物车,当购物车商品为空时,显示空购物车,如下所示:
否则显示商品信息,并计算各商品总价和购物车各商品总价和,如下所示:
一、设计思路
1、购物车设计
整体上设计为两个组件,一个空购物车组件EmptyCart, 主要功能是显示购物车图片和提示信息"购物车为空,快去添加商品吧"。另一外为购物车组件Cart ,,主要负责不为空时购物车显示和处理逻辑,此购物车有惟下几个属性:
selectProducts : 所选商品信息
qty: 所选商吕数量
pModel:所有商品
购物车内置事件
handleClick():购物车显示与隐藏切换。
handleRemove(product,index) :删除购物车商吕
内置状态
showCart: false :显示隐藏开关,默认为false,隐藏购物车。
处理逻辑:
先计算总价,再形成动态的cartItems,最后 ,当(showCart && len)不为0 时,显示购物车,其它状况或不显示,或显示空购物车。
2、父组件调用和数据格式
父组件 调用
<Cart
handleRemove={this.handleRemove}
selectProducts={this.state.selectProducts}
qty={this.state.selectQty}
pModel={this.state.products}
/>
数据格式示例:
商品product数据格式
javascript
{
index: 0,
path: '../public/apple.jpg',
name: "Apple",
price: 4.99,
quantity: 10
},
商品库存quantity数据格式示
javascript
//商品库存
export const allQuantity = [10,8,15,5,9,20]
//加入购物车的商品数量
export const selectQuantity = [0,0,0,0,0,0]
加入购物车操作即用selectProudcts商品数组push操作增加 商品, 同时修改selectQty(以商品的index为索引)相应元素的值。
二、代码实现
空购物车组件EmptyCart代码如下所示:
javascript
import React from 'react'
import { Card,} from 'antd'
function EmptyCart() {
return(
<Card
style={{width: 400}}
>
<h3>您的购物车还是空的,快去添加商品吧</h3>
</Card>
)
}
export default EmptyCart;
购物车组件Cart代码如下所示:
javascript
import React,{ Component } from 'react'
//引入antd布局和按钮组件
import { Row,Card, Button } from 'antd';
import EmptyCart from './EmptyCart'
class Cart extends Component {
constructor(props) {
super(props)
this.state = {
showCart: false
}
this.handleClick = this.handleClick.bind(this)
this.handleRemove = this.handleRemove.bind(this)
}
//单击事件
handleClick() {
this.setState({showCart: ! this.state.showCart })
}
//移除事件
handleRemove(product,index) {
this.props.handleRemove(product,index);
setTimeout(() => {
this.setState({ showCart: ! this.state.showCart})
},100)
setTimeout(() => {
this.setState({ showCart: ! this.state.showCart})
},200)
}
render() {
const { showCart }=this.state;
const { selectProducts,qty,pModel }=this.props;
let cartItems;
const len=selectProducts.length;
let totalPrice=0;
for(let i=0;i<qty.length;i++){
totalPrice+=pModel[i].price*qty[i];
}
if(len!==0){
cartItems=qty.map((product,index)=>{
if(product===0) return null;
return (
<Card key={pModel[index].name}>
<Row type="flex">
<img
style={{cursor: 'pointer',width:300,height: 250}}
src={pModel[index].path}
/>
<div style={{marginLeft: 10}}>
<p>标题: {pModel[index].name}</p>
<p>价格: {pModel[index].price}</p>
<p>数量: {product}</p>
<p>共计:{product*pModel[index].price}</p>
<Button
style={{margin: 10}}
onClick={()=>this.handleRemove(product,index)}
>删除</Button>
</div>
</Row>
</Card>
)
})
}
return (
<Card style={{padding: '100px 50px 10px'}}>
<Row>
{ showCart && len===0 ? <EmptyCart /> : null }
{ showCart && len!==0 ? <div>
<h3>共计: {totalPrice} 元</h3>
<div>{cartItems}</div>
</div> : null }
</Row>
<Row>
<Button
id='popbtn'
type='primary'
className='btn btn-success'
onClick={()=>this.handleClick()}
>我的购物车</Button>
</Row>
</Card>
)
}
}
export default Cart
此文讲述了使用React 框架的组件概念设计购物车的主要思路和代码实现,还显得比较幼稚,希望对您有所助益。