UNIAPP实战项目笔记38 购物车的加入购物车功能

通过mapGetters实现此功能

在 shopcart.vue中
使用mapGetters中的 addShopCart方法实现商品数量的增加

核心代码 detail.vue

核心代码 cart.js部分

export default{state:{list:[/* {id:1,name:"332经济法能聚聚会技能大赛 经济法能聚聚会技能大赛",color:"颜色：嘿嘿嘿激活",imgUrl:"../../static/logo.png",pprice:"27",num:1,checked:false},{id:2,name:"032经济法能聚聚会技能大赛 经济法能聚聚会技能大赛",color:"颜色：嘿嘿嘿激活",imgUrl:"../../static/logo.png",pprice:"48",num:6,checked:false} */],selectedList:[]},getters:{// 判断是否 全选checkedAll(state){return state.list.length === state.selectedList.length;},// 合计 结算数量totalCount(state){let total = {pprice:0,num:0}state.list.forEach(v=>{// 是否选中if(state.selectedList.indexOf(v.id) > -1){// 合计total.pprice += v.pprice*v.num;// 结算数量total.num = state.selectedList.length;}})            return total;}},mutations:{// 全选checkAll(state){state.selectedList = state.list.map(v=>{v.checked = true;return v.id;})},// 全不选unCheckAll(state){state.list.forEach(v=>{v.checked = false;})state.selectedList = [];},// 单选selectedItem(state,index){let id = state.list[index].id;let i = state.selectedList.indexOf(id);// 如果selectList已经存在就代表他之前的选中状态,checked=false,并且在selectedList删除if (i>-1) {state.list[index].checked = false;return state.selectedList.splice(i,1);}// 如果之前没有选中,checked=true,把当前的id添加到selectedListstate.list[index].checked = true;state.selectedList.push(id);},// delGoods(state){state.list = state.list.filter(v=>{return state.selectedList.indexOf(v.id) === -1;})},// 加入购物车addShopCart(state, goods){state.list.push(goods);}},actions:{checkedAllFn({commit,getters}){getters.checkedAll ? commit("unCheckAll") : commit("checkAll")},delGoodsFn({commit}){commit('delGoods');commit("unCheckAll");uni.showToast({title:'删除成功',icon:"none"})}}
}

实际案例图片 购物车的添加商品功能

目录结构

前端目录结构

• manifest.json 配置文件： appid、logo…

• pages.json 配置文件： 导航、 tabbar、 路由

• main.js vue初始化入口文件

• App.vue 全局配置：样式、全局监视

• static 静态资源：图片、字体图标

• page 页面

  • index
    • index.vue
  • list
    • list.vue
  • my
    • my.vue
  • search
    • search.vue
  • search-list
    • search-list.vue
  • shopcart
    • shopcart.vue
  • details
    • details.vue

• components 组件

  • index
    • Banner.vue
    • Hot.vue
    • Icons.vue
    • indexSwiper.vue
    • Recommend.vue
    • Shop.vue
  • common
    • Card.vue
    • Commondity.vue
    • CommondityList.vue
    • Line.vue
    • ShopList.vue
  • uni
    • uni-number-box
      • uni-number-box.vue
    • uni-icons
      • uni-icons.vue
    • uni-nav-bar
      • uni-nav-bar.vue

• common 公共文件：全局css文件 || 全局js文件

  • api
    • request.js
  • common.css
  • uni.css

• store vuex状态机文件

  • modules
    • cart.js
  • index.js