<view> <view wx:for="{{cartList}}" wx:key="{{items.shopid}}" wx:for-item="items"> <view> <image src="https://www.jb51.net/{{items.logo}}"></image> <view>{{items.shopname}}</view> </view> <view>满￥100包邮，满10件包邮</view> <view wx:for="{{items.commodity}}" wx:key="{{item.id}}"> <cart-item commodity="{{item}}" bind:handleselect="handleSelect" /> </view> </view> <view> <view bindtap="handleSelectAll"> <view wx:if="{{!isSelectedAll}}"></view> <image wx:else src="https://www.jb51.net/images/selected.png"></image> <text>全选</text> </view> <view> <text>合计:</text> <text>￥{{countPrice}}</text> </view> <view> <text>结算</text> <text>({{countSelectedNum}})</text> </view> </view> </view>
父组件index.wxss
page{ background: #f8f8f8; } .cart{ padding-bottom: 100rpx; font-size: 26rpx; } .item{ border-bottom: 1px solid #eee; } /* 头部店铺信息 */ .storeInfo{ display: flex; padding: 18rpx 0rpx 18rpx 30rpx; background: #fff; box-sizing: border-box; } .storeInfo .avatar{ width: 56rpx; height: 56rpx; border-radius: 50%; vertical-align: middle; } .storeInfo .storeName{ margin-left: 16rpx; line-height: 56rpx; } /* 包邮信息 */ .discount{ padding-left: 30rpx; height:50rpx; line-height: 50rpx; font-size:20rpx; color: #666; box-sizing: border-box; } /* 底部操作 */ .count{ display: flex; position: fixed; padding-left: 30rpx; bottom: 0; left: 0; width: 100%; height: 100rpx; line-height: 100rpx; box-sizing: border-box; color: #232323; background: #eee; } /* 全选 */ .selectAll{ display: flex; padding-right: 20rpx; align-items: center; width: 25%; font-size: 30rpx; } .selectAll .noSelected{ width: 46rpx; height: 46rpx; border-radius: 50%; border: 1px solid #ef5225; } .selectAll .selectedImg{ width: 50rpx; height: 50rpx; } .selectAllText{ margin-left: 18rpx; } .countPrice{ position: absolute; top: 0; right: 270rpx; height: 100%; line-height: 100rpx; text-align: center; font-size: 30rpx; } .countPrice text{ margin-right: 15rpx; } .account{ position: absolute; top: 0; right: 0; width: 270rpx; height: 100%; line-height: 100rpx; text-align: center; font-size: 30rpx; background: #ef5225; color: #fff; } 父组件index.json，引用子组件 { "usingComponents": { "cart-item": "/component/cart/index" } }
父组件index.js
Page({ data: { cartList: [ { shopname: '猫咪小店', logo: '/images/avatar.jpeg', shopid: 11, commodity: [ { id: 1, image:'/images/commodity.jpg', title: '雅诗兰黛鲜活焕亮红石榴晚霜50ml 补水保湿 滋润排浊', standard: '111 + 黑色', price: '100', stock: 10, quantity: 1, isselected: 0, }, { id: 2, image:'/images/avatar7.jpg', title: '雅诗兰黛鲜活焕亮红石榴晚霜50ml 补水保湿 滋润排浊', price: '10', stock: 5, quantity: 1, isselected: 0, } ] }, { shopname: '猫咪小店', logo: '/images/avatar5.jpg', shopid: 450, commodity: [ { id: 3, image:'/images/commodity.jpg', title: '雅诗兰黛鲜活焕亮红石榴晚霜50ml 补水保湿 滋润排浊', price: '90', stock: 10, quantity: 1, isselected: 0, }, { id: 4, image:'/images/avatar7.jpg', title: '雅诗兰黛鲜活焕亮红石榴晚霜50ml 补水保湿 滋润排浊', price: '100', stock: 5, quantity: 1, isselected: 0, }, { id: 5, image:'/images/commodity.jpg', title: '雅诗兰黛鲜活焕亮红石榴晚霜50ml 补水保湿 滋润排浊', standard: '111 + 黑色', price: '100', stock: 2, quantity: 1, isselected: 0, } ] }, { shopname: '猫咪小店', logo: '/images/avatar.jpeg', shopid: 550, commodity: [ { id: 6, image:'/images/avatar8.jpg', title: '雅诗兰黛鲜活焕亮红石榴晚霜50ml 补水保湿 滋润排浊', standard: '111 + 黑色', price: '100', stock: 1, quantity: 1, isselected: 0, } ] }, ], /* 商品是否全选中 */ isSelectedAll: false, /* 已选中商品的价格 */ countPrice: 0, /* 统计所有选中的商品数量 */ countSelectedNum: 0, }, /* 处理商品选中 */ handleSelect(e) { let countPrice = 0; let countSelectedNum = 0; let cartList = this.data.cartList; let length = cartList.length; /* 因为是假数据，所以需要循环查找到对应的数据将其替换 */ for(let i = 0; i < length; i++) { for(let j = 0; j < cartList[i].commodity.length; j++) { if (cartList[i].commodity[j].id == e.detail.commodity.id) { cartList[i].commodity[j] = e.detail.commodity; cartList[i].commodity[j].selectedNum = e.detail.selectedNum; } if (cartList[i].commodity[j].isselected == 1) { /* 点击选中的时候，计算价格，要判断下设置的商品选中数量， * 我这里的是对点击了的商品才设置了选中的数量，所以需要对没有点击的商品数量设置为1，然后就默认的加一 */ if (cartList[i].commodity[j].selectedNum != undefined) { countPrice += cartList[i].commodity[j].price * cartList[i].commodity[j].selectedNum; countSelectedNum += cartList[i].commodity[j].selectedNum } else { countPrice += cartList[i].commodity[j].price * 1; countSelectedNum += 1; } } } } /* 对是否全选中进行判断 */ let isSelectedAll = true; for (let i = 0; i < length; i++) { for (let j = 0; j < cartList[i].commodity.length; j++) { /* 若商品中的isselecetd有为0的就终止循环，直接设置为未全选 */ if (cartList[i].commodity[j].isselected == 0) { isSelectedAll = false; break; } } } this.setData({ cartList, isSelectedAll, countPrice, countSelectedNum }) }, /* 全选中商品 */ handleSelectAll() { let isSelectedAll = !this.data.isSelectedAll; let cartList = this.data.cartList; let length = cartList.length; let countPrice = 0; let countSelectedNum = 0; /* 遍历数据中的isselected来进行全选的操作 */ for(let i = 0; i < length; i++) { for (let j = 0; j < cartList[i].commodity.length; j++) { if(isSelectedAll) { cartList[i].commodity[j].isselected = 1; /* 全选的时候，计算价格，要判断下设置的商品选中数量， * 我这里的是对点击了的商品才设置了选中的数量，所以需要对没有点击的商品数量设置为1，然后就默认加一 */ if (cartList[i].commodity[j].selectedNum != undefined) { countPrice += parseInt(cartList[i].commodity[j].price) * cartList[i].commodity[j].selectedNum; countSelectedNum += cartList[i].commodity[j].selectedNum; } else { countPrice += cartList[i].commodity[j].price * 1; countSelectedNum += 1; } } else { cartList[i].commodity[j].isselected = 0; } } } this.setData({ isSelectedAll, cartList, countPrice, countSelectedNum }) }, })
4.父子组件传值
较常用的都是父组件往子组件传值，所以子组件往父组件传值就会不是很熟悉