ShaLiWa 2019-06-28
前几天看到有赞的vant,顿时对做一个商城项目产生了兴趣。说干就干,让我们来一步步实现。
预览地址:http://zy.whaoot.com/dmodel/i...
已实现购物车逻辑,商城首页等功能。
商城首页:
使用vuex搭建的购物车,将加入购物车的商品存储到vuex,实现购物车的预览与购物车里对商品的数量的选择(包括左滑删除商品),附上购物车图片:
商城的一个重点的功能,就在于购物车的实现。vuex可以很好的帮我们来实现购物车。
1.首先,我们得对vuex有一定的了解,还未了解vuex的小伙伴可自行去vuex官网仔细查看。
购物车的实现,首先我们在state里面创建一个空数组,作为储存购物车商品的仓库,同样我们也需要创建一个对象来存放商品的总价和总数:
shopcartfn:{ num:'', price:'', }, shopcartprods:[],
2.其次我们需要在action里面对加入购物车进行处理(注意vuex中的异步都需要在action中处理,action的最终也是触发mutations来对state的数据进行修改)
setshopCart({commit,state},products){
if(state.shopcartprods.length>0){ new Promise((resolve,reject)=>{ let arr=[] for(var i=0;i<state.shopcartprods.length;i++){ //先将goods_id和当前size的id放到数组 后面判断添加的 在arr中是否有 arr.push({goods_id:state.shopcartprods[i].goodsId,good_id:state.shopcartprods[i].selectedSkuComb.id}) } let brr={goods_id:products.goodsId,good_id:products.selectedSkuComb.id} //JSON.stringify(arr).indexOf(JSON.stringify(brr))!=-1判断没有赋值关系的json是否在数组中 ;没赋值关系不能直接indexOf() if(JSON.stringify(arr).indexOf(JSON.stringify(brr))!=-1){ for(var i=0;i<state.shopcartprods.length;i++){ if(arr[i].goods_id==brr.goods_id&&arr[i].good_id==brr.good_id){ resolve(i) } } }else{ reject(state.shopcartprods.length) } }).then(res=>{ Object.assign(products,{index:res}) commit('addproduct',products) return },err=>{ Object.assign(products,{index:err}) commit('storeproduct',products) }) }else{ Object.assign(products,{index:0}) commit('storeproduct',products) } }
我们在setshopCart状态中,对已有的商品进行判断,如果已经在shopcartprods有当前加入的商品,则对当前商品对数量增加,否则就push到shopcartprods中。
3.action的本质是触发mutations,所以我们在mutations中,进行shopcartprods的数据的更改 storeproduct(state,value){
state.shopcartprods.push(value) }, addproduct(state,value){ state.shopcartprods[value.index].selectedNum=state.shopcartprods[value.index].selectedNum+value.selectedNum },
4.最后,我们需要对购物车内商品对总数和价格进行统计,这时候我们就需要用到getter。在getter中我们计算商品的总数和总价格
shopcartdata:(state)=>{
let cartdata={ price:0, num:0 } for(let i=0;i<state.shopcartprods.length;i++){ cartdata.price=state.shopcartprods[i].selectedNum*state.shopcartprods[i].selectedSkuComb.price+cartdata.price; cartdata.num=state.shopcartprods[i].selectedNum+cartdata.num } // cartdata.price=cartdata.price*100 return cartdata }
当我们在购物车显示getter的总价时,只需要在computed中获取getter中的数据
computed: {
shopcartdata() { return this.$store.getters.shopcartdata; }
},
自此,购物车的逻辑基本完成。
不得不说vant还是将业务模块的组件做的很不错的,部分商城业务组件可以直接上手就用。
附上github地址:https://github.com/noobzzzz/v...,希望能对需要的小伙伴有所帮助,如果对您起到了帮助,请github点个赞哦,谢谢!!
而且为了用户体验更好,在滑动界面时,这个图标要乖乖地藏起来,不能影响用户操作。我仔细分析了一下,哟,这不就是中午点外卖时用的饿了么上面的购物车按钮么?到了这一步,相信大家都会想到是用触摸事件来实现了。