React之购物车

购物车是电商网站一个重要功能,此文使用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 框架的组件概念设计购物车的主要思路和代码实现,还显得比较幼稚,希望对您有所助益。

相关推荐
耶啵奶膘25 分钟前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^2 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie2 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic3 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿3 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具4 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161774 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test5 小时前
js下载excel示例demo
前端·javascript·excel
Yaml45 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事5 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro