微信小程序开发项目实战（微课版）课件 7-2 课件-购物车页面详情.pptx

项目七购物车模块开发任务二购物车页面详情ShoppingcartpageDetails

购物车页面设计应该注重用户界面的友好性和直观性。购物车页面应该具有清晰简洁的布局，突出显示重要信息，让用户一目了然。购物车详情页面应该包括商品名称、价格、数量、小计、删除和结算等基本信息。项目七购物车模块开发任务描述

购物车商品列表属性类型描述bindchangeEventHandlecheckbox-group选中项发生改变时触发change事件，detail={value:[选中的checkbox的value的数组]}属性类型默认值描述valuestringcheckbox标识，选中时触发checkbox-group的change事件，并携带checkbox的valuedisabledbooleanfalse是否禁用checkedbooleanfalse当前是否选中，可用来设置默认选中colorstring#09BB07checkbox的颜色，同css的colorcheckbox-group多项选择器，内部由多个checkbox组成。购物车里的商品左边有复选框，使用小程序的表单组件checkbox，该组件包含了四个属性值。

购物车商品数量为商品数量“-”和“+”按钮添加reduceCount和addCount函数，实现购物车商品数据的增加与减少。

购物车商品数量data:{users:[{name:小明,age:28},{name:小红,age:39},{name:小李,age:40},{name:小张,age:30}]},onLoad(options){letinfo=this.data.users;info.forEach(function(item,index){console.log(index+姓名：+info[index].name+年龄：+info[index].age);})info.forEach((item,index)={console.log(index+姓名：+item.name+年龄：+item.age);})}forEach()方法用于调用数组的每个元素，并将元素传递给回调函数。

购物车商品数量?settleCount(){??????????????let?totalPrice=0;??????????????this.data.cartList.forEach(item={??????????????????if(item.isChecked){??????????????????????totalPrice+=item.salePrice*item.?quantity??????????????????}??????????????})??????????????this.setData({????????????????totalPrice:totalPrice??????????????})????????????},在pages/goodsCart/goodsCart.js文件中，不管是减号还是加号按钮，当点击时，都需要进行总金额的计算，所以先完成计算总金额函数settleCount，获得选中的商品，如果商品isChecked属性为真时，则对商品的金额进行计算。代码如下。

购物车商品列表??view?class=oper????view??class=reducedata-id={{item.id}}?bindtap=reduceCount?-/view???????????????input?value={{item.quantity}}?type=number/???????????????view?class=add?data-id={{item.id}}?bindtap=addCount+/viewviewclass=btn-deldata-index={{item.id}}bindtap=btnDel删除/view/view

购物车底部信息?view?class=total-cart????view?class=all????????checkbox-group?bindchange=checkAll????????????checkbox?value=1?checked=false/checkbox????