微信小程序开发项目实战（微课版）课件 项目7 购物车模块开发.pptx

项目七购物车模块开发任务一购物车模块开发Shoppingcartmoduledevelopment

在小程序开发中，购物车模块一般包括商品列表、商品金额计算、商品数量增减、商品所选规格等，小程序提供了各类API和组件为实现商品购物车提供了便利。项目七购物车模块开发任务描述

购物车功能6、底部添加结算按钮在底部添加“全选”按钮、“合计”文本、“去结算”按钮，并绑定相应的事件。5、计算选中商品的总金额在事件中，更新本地缓存中的商品信息，并计算选中商品的总金额。4、列表中添加组件在列表中添加选择框、数量输入框、删除按钮等控件，并绑定相应的事件。3、读取本地缓存在购物车页面读取本地缓存中的商品信息，并展示在列表中。2、商品信息存入本地缓存在点击事件中，将商品信息存入本地缓存中，并提示用户“加入成功”。1、“加入购物车”按钮在商品详情页添加“加入购物车”按钮，并绑定点击事件。实现购物车购物车功能是指在电商平台上，用户可以将自己想要购买的商品添加到一个虚拟的购物篮中，然后在合适的时候进行结算和支付的功能。购物车功能可以让用户更方便地浏览和比较商品，也可以让用户更灵活地控制自己的消费预算和时间。

购物车功能-逻辑实现wx.login获取code码登录成功后，显示购物车页面获取当前被点击的商品的索引值商品数量加减删除1、登录授权3、购物车商品数量操作获取本地token从服务器拿到的物品数据2、wx.request请求购物车任何一次触发该函数，都会重新计算价格再进行选中项的价格累加6、计算总价会触发计算总价的方法4、单选事件每个商品都应该是选中状态会触发计算总价的方法5、全选事件逻辑实现过程

定义基础数据Page({??data:?{????cartList:[{??????id:1,??????goodsNo:202108675,??????thumbnail:/images/goods1.jpg,??????title:澳洲腊梅鲜花|花期长|有香味水养冬天应季,??????quantity:2,??????salePrice:72,??????color:红????}?],??//购物车商品列表????colorGoods:[],?//购物车里商品所选的颜色????hasResult:true,?//判断购物车里是否有数据?isChecked:false,?//单选，默认为false????isCheckAll:false,?//全选，默认为false??},})打开pages/goodsCart/goodsCart.js文件的data对象中定义基础数据，代码如下所示。

定义基础数据cartList是指购物车商品列表，colorGoods是指选中购买商品的颜色，hasResult用于判断购物车里是否有数据。isChecked用于商品左侧复选框，定义单个商品是否被选中。isCheckAll用于页面底部全选复选框，定义购物车中的商品是否被选中。

购物车模块在小程序开发中，购物车模块一般包括商品列表、商品金额计算、商品数量增减、商品所选规格等，小程序提供了各类API和组件为实现商品购物车提供了便利。

购物车视图页面view?class=cart??block?wx:if={{hasResult}}???view?class=top-cart/view???view?class=item-list/view??view?class=total-cart/view/blockview?wx:else?class=no-result/view/view购物车页面主要包括上部购物车商品信息、中间购物车商品列表和底部购物车结算信息，每个商品左边有单选，底部可以通过全选操作商品，用户可以选中商品，或者滑动操作查看右边的商品。

感谢观看THANK

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

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

购物车商品列表属性类型描述bindchangeEventHandlecheckbox-group选中项发生改变时触发change事件，detail={value:[选中的checkbox的value的数组]}属性类型默认值描述valuestringcheckbox标识，选中时触发checkbox-group的change事件，并携带checkbox的valu