协会网站建设哪里实惠,广告模板制作,树莓派用wordpress,本地dedecms网站目录
32.商品加入购物车逻辑实现#xff08;前端#xff09;
33.购物车页面收货地址实现
34.购物车商品列表显示实现
37.购物车商品复选框选中业务处理
38.购物车全选复选框选中业务处理
39.购物车商品数量编辑实现
40.购物车商品数量为0判定是否删除
42.商品详情立即…
目录
32.商品加入购物车逻辑实现前端
33.购物车页面收货地址实现
34.购物车商品列表显示实现
37.购物车商品复选框选中业务处理
38.购物车全选复选框选中业务处理
39.购物车商品数量编辑实现
40.购物车商品数量为0判定是否删除
42.商品详情立即购买逻辑实现 32.商品加入购物车逻辑实现前端
1.先在product_detail下的index.wxml的view标签下添加bindtap
view classtool_item btn_cart bindtaphandleCartAddview加入购物车/view
/view
2.对应在js文件夹下写点击事件handleCartAdd:商品加入购物车
3.需要判断商品加入购物车的逻辑一种是已经存在购物车中如果再加数量加一即可还有是不存在购物车中的。
Java// 点击事件 商品加入购物车handleCartAdd(){let cartwx.getStorageSync(cart)||[];console.log(cartcart);let indexcart.findIndex(vv.idthis.productInfo.id);if(index-1){ // 购物车里面不存在当前商品 this.productInfo.num1;cart.push(this.productInfo);}else{ // 已经存在cart[index].num;//数量加一}wx.setStorageSync(cart, cart); // 把购物车添加到缓存中//设置提示加入成功wx.showToast({title: 加入成功,icon:success,mask:true})},4.上面代码优化可以将上面代码封装为setCartadd
// 点击事件 商品加入购物车handleCartAdd(){this.setCartadd();wx.showToast({title: 加入成功,icon:success,mask:true})},// 加入购物车setCartadd(){let cartwx.getStorageSync(cart)||[];console.log(cartcart);let indexcart.findIndex(vv.idthis.productInfo.id);if(index-1){ // 购物车里面不存在当前商品 this.productInfo.num1;cart.push(this.productInfo);}else{ // 已经存在cart[index].num;}wx.setStorageSync(cart, cart); // 把购物车添加到缓存中},
33.购物车页面收货地址实现
1.先在第三个标签“购物车”cart下的index.json添加顶部标题
{usingComponents: {},navigationBarTitleText: 购物车
}
2.开始在cart下的index.wxml写“获取收货地址”标签bindtaphandleChooseAddress 作为点击事件并在index.less设置样式。index.js写具体的handleChooseAddress方法
1index.wxml
Java
!-- 收货地址 开始 --
view classrecevie_address_rowview classaddress_btn wx:if{{!address}}button typewarn plain bindtaphandleChooseAddress 获取收货地址/button/viewview wx:else classuser_info_rowview classuser_infoview收货人{{address.userName}},{{address.telNumber}}/viewview{{address.provinceNameaddress.cityNameaddress.countyNameaddress.detailInfo}}/view/viewview classchange_address_btnbutton sizemini plain更换地址/button/view/view
/view
!-- 收货地址 结束 --2index.less设置样式包括获取收货地址按钮更换地址按钮。左右分采用伸缩盒子flex
.recevie_address_row{.address_btn{padding: 20rpx;button{width: 60%;}}.user_info_row{display: flex;padding: 20rpx;.user_info{flex:5;}.change_address_btn{flex:3;text-align: right;button{border: 1px solid gray;font-weight: normal;}}}
}
3index.js
写具体的handleChooseAddress方法:先在data里定义再具体写。由于获取收货地址基本不变。可存入缓存中 wx.setStorageSync(address, result) data: {address:{}},handleChooseAddress(){wx.chooseAddress({success: (result) {console.log(result)wx.setStorageSync(address, result)},})},
然后onShow中监听页面显示从缓存中获取地址
/*** 生命周期函数--监听页面显示*/onShow: function () {console.log(show)const addresswx.getStorageSync(address);this.setData({address})},
3.然后在页面显示在index.wxml中写引入wx:if{{!address}}判断没有值的话显示“获取收货地址”有值的话显示的是wx:else classuser_info_row
!-- 收货地址 开始 --
view classrecevie_address_rowview classaddress_btn wx:if{{!address}}button typewarn plain bindtaphandleChooseAddress 获取收货地址/button/viewview wx:else classuser_info_rowview classuser_infoview收货人{{address.userName}},{{address.telNumber}}/viewview{{address.provinceNameaddress.cityNameaddress.countyNameaddress.detailInfo}}/view/viewview classchange_address_btnbutton sizemini plain更换地址/button/view/view
/view
!-- 收货地址 结束 --
效果如下图 34.购物车商品列表显示实现
1.首先数据要显示在页面上先在index.js的data里定义数据cart:[]。然后可以在onShow里获取如果购物车是空的可以||一个空数组。编译后可以在AppData中查看是否存入数据
onShow: function () {console.log(show)const addresswx.getStorageSync(address);const cartwx.getStorageSync(cart)||[];this.setData({address,cart})},
2.在cart包index.wxml下写view标签购物车列表包括的要素有复选框商品图片商品信息。同时点击商品图片点击商品名可以跳转做法是navigator标签里写url:/pages/product_detail/index?id{{item.id}}。大致思路仍然先写标签再设样式
index.wxml:
!-- 购物车清单 开始 --
view classcart_contentview classcart_mainview classcart_itemwx:for{{cart}}wx:keyid!-- 复选框 开始 --view classcart_chk_wrapcheckbox-groupcheckbox/checkbox/checkbox-group/view!-- 复选框 结束 --!-- 商品图片 开始 --navigator classcart_img_wrap url/pages/product_detail/index?id{{item.id}}image modewidthFix src{{baseUrl/image/product/item.proPic}}/image/navigator!-- 商品图片 结束 --!-- 商品信息 开始 --view classcart_info_wrapnavigator url/pages/product_detail/index?id{{item.id}}view classgoods_name{{item.name}}/view/navigatorview classgoods_price_wrapview classgoods_price¥{{item.price}}/viewview classcart_num_toolview classnum_edit-/viewview classgoods_num{{item.num}}/viewview classnum_edit/view/view/view/view!-- 商品信息 结束 --/view/view
/view
!-- 购物车清单 结束 --
设置样式在index.less中
.cart_content{background-color: #F5F5F5;.cart_main{padding: 2rpx 10rpx 10rpx 10rpx;.cart_item{display: flex;background-color: white;border-radius: 10px;margin: 20rpx;padding-right: 20rpx;.cart_chk_wrap{flex:1;display: flex;justify-content: center;align-items: center;margin: 20rpx;}.cart_img_wrap{flex:2;display: flex;justify-content: center;align-items: center;background-color: #F5F5F5;margin: 20rpx;border-radius: 10px;image{width: 80%;}}.cart_info_wrap{flex:4;display: flex;flex-direction: column;justify-content: space-around;.goods_name{font-weight: bolder;display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}.goods_price_wrap{display: flex;justify-content: space-between;.goods_price{color: var(--themeColor);font-size: 34rpx;}.cart_num_tool{display: flex;.num_edit{display: flex;justify-content: center;align-items: center;width: 55rpx;height: 55rpx;}.goods_num{display: flex;justify-content: center;align-items: center;width: 85rpx;height: 55rpx;background-color: #F5F5F5;}}}}}}
}
37.购物车商品复选框选中业务处理
复选框中并设定点击事件bindchange命名为handleItemChange在index.js下写具体的商品选中事件处理方法e作为事件源。e.currentTarget.dataset表示事件发生的当前元素的数据集合包含了该元素的属性值。通过获取该数据集合中的id属性值可以确定当前用户操作的是购物车中哪一项商品。 // 商品选中事件处理handleItemChange(e){const {id}e.currentTarget.dataset;let {cart}this.data;let indexcart.findIndex(vv.idid);console.log(index)cart[index].checked!cart[index].checked;this.setCart(cart);},
设置缓存方便下次打开时存在缓存 // 设置购物车状态 重新计算 底部工具栏 全选 总价 总数量 重新设置缓存setCart(cart){let allCheckedtrue;let totalPrice0;let totalNum0;cart.forEach(v{if(v.checked){totalPricev.price*v.num;totalNumv.num;}else{allCheckedfalse;}})allCheckedcart.length!0?allChecked:false;this.setData({cart,allChecked,totalNum,totalPrice})// cart设置到缓存中wx.setStorageSync(cart, cart);}
38.购物车全选复选框选中业务处理
在cart包下的index.js写具体的商品全选事件handleItemAllCheck,点了之后是false状态需要取反取反后每个新的属性值allcheck设置到每个cart商品的属性foreach遍历设置
handleItemAllCheck(){let {cart,allChecked}this.data;console.log(cart,allchecked)allChecked!allChecked;cart.foreach(vv.checkedallChecked);this.setCart(cart);
}
39.购物车商品数量编辑实现
购物车里的商品数量的加和减需要绑定tab事件加1还是减1要带operation参数绑定参数
40.购物车商品数量为0判定是否删除
当把商品数量减为0时出现弹窗提示您是否要删除。设定弹窗出现条件数量为1且操作为减一cart[index].num1 operation -1。删除完之后重新this.setCart(cart)显示页面
// 商品数量的编辑功能handleItemNumEdit(e){const {id,operation}e.currentTarget.dataset;console.log(id,operation)let {cart}this.data;let indexcart.findIndex(vv.idid);if(cart[index].num1 operation -1){wx.showModal({title:系统提示,content:您是否要删除,// 点击取消cancelColor: cancelColor,// 点击确定success:(res){if(res.confirm){// 调用方法指定索引删除cart.splice(index,1);this.setCart(cart);}}})}else{cart[index].numoperation;this.setCart(cart);}},
42.商品详情立即购买逻辑实现
在product_detail包下
点击商品下的立即购买会实现跳转到购物车页面。
首先在html的“立即购买”的view标签里添加bindtapbandleBuy事件 view classtool_item btn_buy bindtaphandleBuyview立即购买/view/view
然后在index.js里写具体的handleBuy方法
// 点击 立即购买handleBuy(){this.setCartadd();wx.switchTab({url: /pages/cart/index,})},
