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

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

购物车页面设计应该注重用户界面的友好性和直观性。购物车页面应该具有清晰简洁的布局，突出显示重要信息，让用户一目了然。购物车详情页面应该包括商品名称、价格、数量、小计、删除和结算等基本信息。项目七购物车模块开发任务描述购物车商品列表属性类型描述bindchangeEventHandlecheckbox-group选中项发生改变时触发change事件，detail={value:[选中的checkbox的value的数组]}属性类型默认值描述valuestring

checkbox标识，选中时触发checkbox-group的change事件，并携带checkbox的valuedisabledbooleanfalse是否禁用checkedbooleanfalse当前是否选中，可用来设置默认选中colorstring#09BB07checkbox的颜色，同css的color

checkbox-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.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="reduce"data-id="{{item.id}}"

bindtap="reduceCount"

>-</view>

<input

value="{{item.quantity}}"

type="number"/>

<view

class="add"

data-id="{{item.id}}"

bindtap="addCount">+</view>

<viewclass="btn-del"data-index="{{item.id}}"bindtap="btnDel">删除</view></view>购物车底部信息

<view

class="total-cart">

<view

class="all">

<checkbox-group

bindchange="checkAll">

<checkbox

value="1"

checked="false"></checkbox>

<text>全选</text>

</checkbox-group>

</view>

<view

class="total-price">

总价：<text

class="price">￥{{totalPrice}}</text>

</view>

<view

class="btn

btn-primary">去结算</view>

</view>

购物车底部信息包含了三个内容，全选的复选框，选中的商品总价，结算按钮。在pages/goodsCart/goodsCart.wxml文件中，为"total-cart"视图容器编写页面布局代码：购物车为空状态<view

wx:else

class="no-result">

<view

class="no-content">

<image

src="/images/cring.png"></image>

<text>暂无商品</text>

<button

class="go-list"

bindtap="gotoList">前往添加商品</button>

</view></view>

当购物车页面为空时，购物车页面将定向到商品列表页面。购物车为空状态

gotoList:function(){

wx.navigateTo({

url:

'/pages/goodsList/goodsList'

})

}

在pages/goodsCart/goodsCart.js文件中，实现bindtap="gotoList"，当购物车为空时，跳转到商品列表页面选购商品。购物车为空状态表wx.navigateTo参数属性类型必填描述urlstring是需要跳转到应用内非tabBar页面的路径(代码包路径),路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如'path?key=value&key2=value2'eventsObject否页面间通信接口，用于监听被打开页面发送到当前页面的数据。successfunction否接口调用成功的回调函数，eventChannel参数，和被打开页面进行通信failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行）

wx.navigateTo(Objectobject)保留当前页面，跳转到应用内的某个页面。但是不能跳到tabbar页面。使用wx.navigateBack可以返回到原页面。小程序中页面栈最多十层。购物车为空状态

wx.navigateTo({

url:'test?id=1',events:{//为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据

acceptDataFromOpenedPage:function(data){console.log(data)},},success:function(res){//通过eventChannel向被打开页面传送数据res.eventChannel.emit('acceptDataFromOpenerPage',