wxml在此：
!--pages/cart/cart.wxml--!-- 当数据为空时 --view class='noData' wx:if="{{dataList.length == 0}}" view class='noDataImg' image src='/images/cart-nodata.png'/image /view view class='noDataText'您的购物车空空如也，去挑选喜欢的产品吧/view view class='gotype' catchtap='gotype' 去逛逛 /view/view!-- 当数据不为空时 --view wx:else style='margin-bottom:130rpx;' !-- 商品列表 -- view class='shopList' catchtap='checkThis' data-index='{{index}}' wx:for="{{dataList}}" wx:key="shopId" view class="nocheck {{item.checked?'checkedBox':''}}" ✔ /view view class='shopInfo' view class='shopImg' image src='{{item.imgUrl}}'/image /view view class='shopCon' view class='title' {{item.title}} /view view class='num' 数量{{item.num}} {{item.color}} /view view ￥{{item.price}} /view /view /view view class='payInfo' view view 共一件商品 应付 ￥{{item.money}} /view view class='payBtn' catchtap='signPay' 去支付 /view /view /view /view !-- 结算栏 -- van-submit-bar loading="{{loading}}" price="{{ totalMoney }}" button-text="去结算" bind:submit="doPay" custom-class="payBox" van-tag type="primary" class="checkbox" van-checkbox value="{{ allCheck }}" checked-color="#f44" bind:change="allCheck"全选/van-checkbox /van-tag !-- view slot="tip" 您的收货地址不支持同城送, text修改地址/text /view -- /van-submit-bar/viewwxss在此：
/* pages/cart/cart.wxss *//* 数据为空 */.noData{ margin: 200rpx 40rpx 0 40rpx; text-align: center}.noDataImg{ width: 100%; height: 300rpx;}.noDataText{ font-size: 32rpx; margin: 20rpx 0; color: #ccc}.gotype{ width: 60%; margin:60rpx auto; padding: 20rpx 0; background: #AE211A; color: #f1f1f1}/* 数据不为空 */.nocheck{ position: absolute; top: 80rpx; left: 0rpx; width: 30rpx; height: 30rpx; border-radius: 50%; text-align: center; border: 1px solid #e3e3e3; color:#e3e3e3; line-height: 30rpx; font-size: 20rpx; }.checkedBox{ background: #f44; color: #fff;}.shopList{ margin:0 20rpx; position: relative; border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3;}.shopInfo{ padding:20rpx 0 20rpx 60rpx; display: flex}.shopImg{ width: 160rpx; height: 160rpx;}.shopCon{ margin-left: 40rpx; font-size: 30rpx;}.num{ padding: 24rpx 0; color: #ccc}.payInfo{ padding:20rpx 40rpx; border-top: 1px solid #e3e3e3; display: flex; justify-content: flex-end;}.payBtn{ width: 100rpx; margin-top: 20rpx; margin-left: 140rpx; text-align: center; padding: 10rpx 20rpx; color:#f44; border: 1px solid #f44}.payBox{ box-shadow: 0 0 10rpx #e3e3e3}.checkbox{ margin-left: 40rpx;}js在此：
Page({ /** * 页面的初始数据 */ data: { allCheck:false, loading:false, totalMoney:0, dataList:[ { imgUrl:"/images/show.jpg",title:"长袖衬衫春秋新款",num:"1",color:"白色",price:"139.00",money:"500",checked:false}, { imgUrl: "/images/show.jpg", title: "长袖衬衫春秋新款", num: "1", color: "白色", price: "139.00", money: "500", checked: false }, { imgUrl: "/images/show.jpg", title: "长袖衬衫春秋新款", num: "1", color: "白色", price: "139.00", money: "500", checked: false }, ] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.isAll() }, gotype(){ wx.navigateTo({ url: '/pages/type/type', }) }, checkThis(e){ let index = e.currentTarget.dataset.index console.log(e) let checkIndex = "dataList["+index+"].checked" this.setData({ [checkIndex]:!this.data.dataList[index].checked }) this.isAll() }, allCheck(e){ for(let k in this.data.dataList){ this.data.dataList[k].checked = e.detail } this.setData({ allCheck:e.detail, dataList:this.data.dataList }) this.isAll() }, // 判断是否全选 isAll(){ let checkedNum = 0 let money = 0 this.data.dataList.forEach((all) = { if (all.checked) { checkedNum++ money += Number(all.money)*100 } }) if(checkedNum == this.data.dataList.length){ this.setData({ allCheck: true, totalMoney: money }) }else{ this.setData({ allCheck: false, totalMoney:money }) } }, signPay(e){ console.log('支付') }, doPay(e){ console.log(e) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }})
