Vue版购物车开发思路教程

1、进入商品详情页面选择商品规格



选择颜色或尺码，输入购买数量，点击确定进入购物车。
放入购物车的字段如下：
商品的id：gid
商品名称：title
商品图片：img
商品数量：amount
商品运费：freight
商品价格：price
是否选中：checked(值true,false)
商品属性(规格)：
[{"attrid":"1034","title":"颜色","param":[{"paramid":"1189","title":"蓝色"}]},{"attrid":"1037","title":"尺码","param":[{"paramid":"1192","title":"37"}]}]

2、vuex和localStorage的作用

Vuex的作用：将购物车的数据存储到vuex中实现组件传值和双向绑定。
localStorage的作用：解决vuex刷新页面数据丢失的问题，将vuex中的数据缓存起来。





如上面两张图所示购物车里还没有商品。

3、购物车组件页面源码

cart/index.vue


删除购物车的代码写在mutations.js里面

代码如下：

delCart(state,data){//删除购物车里的宝贝
  let priceTotal=0,freightTotal=0,aFreight=[];
  state.cartData.splice(data.index,1);
  for(let i=0;i<state.cartData.length;i++) {
    priceTotal += (state.cartData[i].price * state.cartData[i].amount);
    aFreight.push(state.cartData[i].freight);
  }
  freightTotal=Math.max.apply(null,aFreight);
  state.priceTotal=priceTotal.toFixed(2);
  state.freightTotal=freightTotal.toFixed(2);
  localStorage.priceTotal=priceTotal.toFixed(2);
  localStorage.cart=JSON.stringify(state.cartData);
  localStorage.freightTotal=freightTotal.toFixed(2);
}

7、勾选购物车里面的商品

如图：



细节注意：未勾选时，合计总价要减去未选中是商品价格，当全部未选中时，全选要自动设置成未勾选状态，去结算按钮不能点击，并且要置灰,未选中的商品不能点击+-号，且输入数量不能计算价格。

如图：



勾选的代码写在mutations.js里面

代码如下：

勾选购物车里面的商品

checkedCartData(state,data){
  let priceTotal=0;
  for(let i=0;i<state.cartData.length;i++){
    if(data.gid==state.cartData[i].gid){
      state.cartData[i].checked=data.checked;
      break;
    }
  }
  for(let i=0;i<state.cartData.length;i++){
    if(state.cartData[i].checked==true) {
      priceTotal += (state.cartData[i].price * state.cartData[i].amount);
    }
  }
  state.priceTotal=priceTotal.toFixed(2);
  localStorage.cart=JSON.stringify(state.cartData);
  localStorage.priceTotal=priceTotal.toFixed(2);
}

8、全选与反选购物车里面的商品

全选如图：



反选如图：



细节注意：当全选按钮未选中时，合计总价为0，去结算按钮不能点击，并且要置灰,未选中的商品不能点击+-号，且输入数量不能计算价格。

最后存储到vuex中的 cartData json数据为：

[{"gid":"747503321","title":"波司登加绒加厚牛仔裤女秋冬2016新款个性百搭外穿宽松复古小脚裤","amount":10,"price":158,"img":"http://vueshop.glbuys.com/uploadfiles/1484288933.jpg","checked":true,"freight":0,"attrs":[{"attrid":"1011","title":"颜色","param":[{"paramid":"917","title":"红色"}]},{"attrid":"1012","title":"腰围","param":[{"paramid":"920","title":"12cm"}]}]},{"gid":"981541541","title":"欧美尖头蝴蝶结拖鞋女夏外穿2018新款绸缎面细跟凉拖半拖鞋穆勒鞋","amount":3,"price":1020,"img":"http://vueshop.glbuys.com/uploadfiles/1524556315.jpg","checked":true,"freight":20,"attrs":[{"attrid":"1034","title":"颜色","param":[{"paramid":"1189","title":"蓝色"}]},{"attrid":"1037","title":"尺码","param":[{"paramid":"1192","title":"37"}]}]},{"gid":"767430600","title":"雪兰黛2018春季新款高跟鞋尖头细跟性感鞋子女韩版透气纱网女单鞋 ","amount":1,"price":280,"img":"http://vueshop.glbuys.com/uploadfiles/1524556026.jpg","checked":true,"freight":10,"attrs":[{"attrid":"1034","title":"颜色","param":[{"paramid":"1170","title":"黑白"}]},{"attrid":"1037","title":"尺码","param":[{"paramid":"1174","title":"36"}]}]}]