addCart(){ let cartList=app.globalData.cartList let index=-1 if(cartList.length==0){ this.data.product.number=1 this.data.product.choose=true//默认是选中状态 app.globalData.cartList.push(this.data.product) wx.setStorageSync('cartList', app.globalData.cartList) } else{ for(let idx in cartList){ console.log(idx) if(cartList[idx]._id==this.data.product._id){ index=idx } } if(index!=-1){ //限制库存数量的增减 if(this.data.cartList[index].number+1 > this.data.cartList[index].num){ wx.showToast({ icon:'error', title: '库存不足', }) return } cartList[index].number=cartList[index].number+1 app.globalData.cartList=cartList wx.setStorageSync('cartList', app.globalData.cartList) } else{ this.data.product.number=1 this.data.product.choose=true app.globalData.cartList.push(this.data.product) wx.setStorageSync('cartList', app.globalData.cartList) } } wx.showToast({ title: '添加到购物车', }) this.setData({ cartList:app.globalData.cartList }) },解释
时间: 2024-02-23 19:56:46 浏览: 119
这是一个小程序中的 JavaScript 代码,用于将商品添加到购物车。当用户触发一个事件时,该函数将被调用。函数首先获取全局变量 app.globalData.cartList 中存储的购物车列表,然后检查购物车列表的长度是否为0。如果是0,则将当前商品信息添加到购物车列表中,并使用 wx.setStorageSync() 方法将购物车列表存储到本地存储中。如果购物车列表不为空,则遍历购物车列表,查找是否存在与当前商品 ID 相同的商品。如果存在,则检查库存数量是否充足,如果充足,则将购物车中该商品的数量加1,并更新全局变量 app.globalData.cartList 和本地存储中的购物车列表。如果不存在,则将当前商品信息添加到购物车列表中,并使用 wx.setStorageSync() 方法将购物车列表存储到本地存储中。最后,使用 wx.showToast() 方法显示添加到购物车成功的提示信息,并调用 setData() 方法更新页面上的购物车列表。
相关问题
search(key) { this.flowerPage = this.flowerList.filter((item) => { if (item.flowerName.indexOf(key) == 0) return true }) this.page.total = this.flowerPage.length; }, addCart(flower) { this.$store.commit('ADDCART', flower); this.$message({ type: 'success', message: '添加购物车成功' }); }
这段代码是一个Vue组件中的方法,用来实现商品列表页的搜索和添加购物车的功能。其中,search方法接受一个关键字key作为参数,通过过滤器对商品列表进行筛选,找出商品名以该关键字开头的商品,将筛选结果保存在this.flowerPage中,并更新分页器的总页数(this.page.total)。
addCart方法用来添加商品到购物车,它接受一个商品对象flower作为参数,使用Vuex的mutation函数ADDCART来将商品添加到购物车中。添加成功后,使用Element UI的$message方法弹出一个提示框,提示用户添加购物车成功。
需要注意的是,这两个方法中使用了Vue组件的数据绑定和计算属性等特性,以及Vuex状态管理库来实现数据的共享和状态的管理。
export default new Vuex.Store({//实例化vuex配置对象 并导出 state: { username: '', flowerList: flowerList, categoryList: categoryList, flower: {}, cart: [] }, mutations: { LOGIN(state, { username }) { state.username = username; }, DETAIL(state, flower) { state.flower = flower; }, ADDCART(state, flower) { if (state.cart.length == 0) { Vue.set(flower, 'number', 1) state.cart.push(flower) return; } for (let index = 0; index < state.cart.length; index++) { if (state.cart[index].flowerName == flower.flowerName) { state.cart[index].number++; return; } } Vue.set(flower, 'number', 1) state.cart.push(flower) }, ADD(state, flower) { state.cart.forEach((item) => { if (item.flowerName == flower.flowerName) item.number++; }) }, SUB(state, flower) { state.cart.forEach((item) => { if (item.flowerName == flower.flowerName) item.number--; }) }, DELETE(state, flower) { state.cart = state.cart.filter((item) => { if (item.flowerName != flower.flowerName) return true; }) }, PAY(state, selectflower) { state.cart = state.cart.filter((item) => { let flag = false; for (let index = 0; index < selectflower.length; index++) { if (item.flowerName == selectflower[index].flowerName) { flag = true; break; } } if (flag) return false; else return true; }) }, CLEAR(state) { state.cart = []; } }, plugins: [ new VuexPersist({ storage: window.localStorage, }).plugin, ] })
这是一个使用 Vuex 状态管理的配置对象,其中包含了状态 state、变更操作 mutations 和插件 plugins。
state 包含了应用的一些数据,比如用户名、花卉列表、分类列表、当前选择的花卉、购物车等。
mutations 是用来修改 state 的方法,包括登录、查看商品详情、添加商品到购物车、增加商品数量、减少商品数量、删除商品、结算购物车、清空购物车等操作。
plugins 是 Vuex 的插件系统,用于扩展 Vuex 功能。在这个配置对象中,使用了 VuexPersist 插件,该插件可以将 Vuex 状态持久化到本地存储中,防止刷新页面时状态被重置。
阅读全文