vue手机商城项目实战(9)-添加购物车功能实现

Web前端 潘老师 2个月前 (09-20) 234 ℃ (0) 扫码查看

本文接:vue手机商城项目实战(8)-路由跳转转场过渡动画效果实现
我们添加购物车的操作有两个地方,一个是首页商品列表Goods.vue和商品详情页GoodsDetail.vue,下面我们来实现添加到购物车功能。

1、我们购物车信息会被购物车组件使用,所以我们将购物车商品信息存放在vuex中,在store\index.jsstate新增购物车属性:

// 购物车
shopCart:[]

2、在store\index.jsmutations新增:

// 添加单个商品至购物车
addToCart(state,goods){
    var shopCart = state.shopCart;
    var flag = true;
    // 判断购物车中是否已经存在该商品
    for(var i=0;i<shopCart.length;i++){
        if(shopCart[i].id == goods.id){
            // 存在则数量加1
            shopCart[i].num++;
            flag = false;
            break;
        }
    }
    // 购物车中不存在该商品-首次添加
    if(flag){
        // 将goods转为cartDetail,选中状态默认未选中,数量默认1
        var cartDetail = {id:goods.id,selected:false,num:1,name:goods.name,img:goods.img,price:goods.price}
        shopCart.push(cartDetail);
    }
}

修改首页商品列表Goods.vue和商品详情页GoodsDetail.vue
1、两个组件都导入Toast用于提示

import { Toast } from 'mint-ui';

2、两个组件都导在methods内都新增添加到购物车的方法:

// 添加至购物车
addToCart(goods){
    // 加购
    this.$store.commit("addToCart",goods);
    // 提示
    Toast({
      message: '加购成功',
      duration: 1000
    });
}

vue手机商城项目实战(9)-添加购物车功能实现


版权声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系潘老师进行处理。
喜欢 (6)
请潘老师喝杯Coffee吧!】
分享 (0)

您必须 微信登录 才能发表评论!

登录