微信小程序购物车 二维数组 不同商家不同商品版本

需求：电商平台内有众多不同商家，购物车页需要购买的产品以商家的类目作为分类，并满足基本的购物车需求:

/index.php?controller=simple&action=cart

根据客户需要将此商城做成小程序

wxml

代码片.

<block wx:for='{{carts}}'><view class="cartList" ><view class="cartList_Shop"><view class="cartList_Shop_top"><text>{{item.shopName}}</text></view><block wx:for='{{item.shopProlist}}' wx:for-item="ii"><view class="Shop_proList"><view class="Shop_proList_Select"><icon wx:if="{{ii.proSelecter}}" type="success" color="#0a4de6" data-shopid="{{ii.shopId}}" data-proid="{{ii.proId}}" class="cart-pro-select" bindtap="selectList" /><icon wx:else type="circle" class="cart-pro-select" data-shopid="{{ii.shopId}}" data-proid="{{ii.proId}}" bindtap="selectList" /></view><view class="Shop_proList_Img"><image mode="scaleToFill" src="{{ii.imgSrc}}"></image></view><view class="Shop_proList_textList"><view class="Shop_proList_textListTop"> <text class="proList_textListTopName">{{ii.proName}}</text><text class="right">{{ii.proPrice}}元</text></view><view class="Shop_proList_textListCenter"> <text class="left">单品重量：{{ii.proWeight}}克</text><text class="right">￥{{ii.prototal}}</text></view><view class="Shop_proList_textListBottom"> <view class="bottomLeft"><view class="border_Left" bindtap="minusCount" data-shopid="{{ii.shopId}}" data-proid="{{ii.proId}}">-</view><view class="border_Cen">{{ii.proNum}}</view><view class="border_Left" bindtap="addCount" data-shopid="{{ii.shopId}}" data-proid="{{ii.proId}}">+</view></view><view class="bottomRight"><image class="deleteIcon" src="/views/mobile/img/rubish.png" bindtap='deleteList' data-shopid="{{ii.shopId}}" data-proid="{{ii.proId}}"></image></view></view></view></view></block></view></view></block><view class="cart-footer"><view class='cartIcon-grow'><icon wx:if="{{selectAllStatus}}" type="success_circle" color="#0a4de6" class="total-select" bindtap="selectAll" /><icon wx:else type="circle" color="#0a4de6" class="total-select" bindtap="selectAll" /><text>全选</text></view><text class="cart-toatl-price" bindtap="getTotalPrice">合计：￥{{totalPrice}}</text><button class='submit-cart' bindtap='submitCart'>结算</button></view><!-- <view wx:else><view class="cart-no-data">购物车是空的哦~</view></view> -->

js

代码片.

Page({data: {carts: [], // 购物车列表hasList: false, // 列表是否有数据totalPrice: 0, // 总价，初始为0selectAllStatus: true // 全选状态，默认全选},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {this.setData({hasList: true, // 既然有数据了，那设为true吧carts: [{shopName: '鲲东自营',shopProlist: [{shopId:0,proId: 0,proName: '一瓶啤酒',proPrice: 1,prototal: 15,proNum: 1,proSelecter: true,imgSrc: '/upload//02/02/033917369.png',proWeight: 900.00},{shopId: 0,proId: 1,proName: '一瓶啤酒',proPrice: 2,prototal: 15,proNum: 2,proSelecter: true,imgSrc: '/upload//02/02/033917369.png',proWeight: 900.00}]},{shopName: '鲲东自营',shopProlist: [{shopId: 1,proId: 0,proName: '一瓶啤酒',proPrice: 3,prototal: 15,proNum: 3,proSelecter: true,imgSrc: '/upload//02/02/033917369.png',proWeight: 900.00}]}]})},getprototal(){var shopNum = 0;let carts = this.data.carts;for (var property in carts) {for (var j = 0; j < carts[shopNum].shopProlist.length; j++) {carts[shopNum].shopProlist[j].prototal = carts[shopNum].shopProlist[j].proNum * carts[shopNum].shopProlist[j].proPrice;}shopNum++;}this.setData({carts: carts});},// 计算页面总金额getTotalPrice() {let carts = this.data.carts; // 获取购物车列表let total = 0;var shopNum = 0;var proNumlist = 0;for (var property in carts){for (var j = 0; j < carts[shopNum].shopProlist.length;j++) {var pronum = carts[shopNum].shopProlist[j].proNum;var propri = carts[shopNum].shopProlist[j].proPrice;var proPriNum = pronum * propri;if (carts[shopNum].shopProlist[j].proSelecter) {total += proPriNum;}}shopNum++;}this.setData({// 最后赋值到data中渲染到页面// carts[shopNum].shopProlist: carts[shopNum].shopProlist,totalPrice: total.toFixed(2)});this.getprototal();},// 点击选中项目selectList(e) {const shopindex = e.currentTarget.dataset.shopid; //商家的位置const proindex = e.currentTarget.dataset.proid;//商品在商家的位置let carts = this.data.carts; // 获取购物车列表const shopProlist = carts[shopindex].shopProlist; // 获取商家目前数组状态const proArray = shopProlist[proindex]; proArray.proSelecter = !proArray.proSelecter;this.setData({carts: carts});this.getTotalPrice(); // 重新获取总价},selectAll(e) {var shopNum = 0;let selectAllStatus = this.data.selectAllStatus; // 是否全选状态selectAllStatus = !selectAllStatus;let carts = this.data.carts;for (var property in carts) {for (var j = 0; j < carts[shopNum].shopProlist.length; j++) {carts[shopNum].shopProlist[j].proSelecter = selectAllStatus;}shopNum++;}this.setData({selectAllStatus: selectAllStatus,carts: carts});this.getTotalPrice(); // 重新获取总价},// 增加数量addCount(e) {const shopindex = e.currentTarget.dataset.shopid; //商家的位置const proindex = e.currentTarget.dataset.proid;//商品在商家的位置let carts = this.data.carts; // 获取购物车列表const shopProlist = carts[shopindex].shopProlist; // 获取商家目前数组状态const proArray = shopProlist[proindex];let num = proArray.proNum;num +=1;proArray.proNum = num;this.setData({carts: carts});this.getTotalPrice();this.getprototal();},// 减少数量minusCount(e) {const shopindex = e.currentTarget.dataset.shopid; //商家的位置const proindex = e.currentTarget.dataset.proid;//商品在商家的位置let carts = this.data.carts; // 获取购物车列表const shopProlist = carts[shopindex].shopProlist; // 获取商家目前数组状态const proArray = shopProlist[proindex];let num = proArray.proNum;if (num <= 1) {return false;}num = num - 1;proArray.proNum = num;this.setData({carts: carts});this.getTotalPrice();this.getprototal();},//删除元素deleteList(e) {const shopindex = e.currentTarget.dataset.shopid; //商家的位置const proindex = e.currentTarget.dataset.proid;//商品在商家的位置var shopNum = 0;const index = e.currentTarget.dataset.index;let carts = this.data.carts;carts[shopindex].shopProlist.splice(proindex, 1); // 删除购物车列表里这个商品for (var property in carts) {if (carts[shopNum].shopProlist.length == 0){carts.splice(shopNum, 1)}shopNum++;}this.setData({carts: carts});if (!carts.length) {// 如果购物车为空this.setData({hasList: false // 修改标识为false，显示购物车为空页面});} else {// 如果不为空this.getTotalPrice(); // 重新计算总价格}}})

wxss

代码片.

view{overflow: visible;}.cartList{display: flex;flex-direction: column;}.cartList_Shop{display: flex;flex-direction: column;}.Shop_proList{display: flex;flex-direction: row;padding: 10px 0;border-bottom: 1px solid #f3f3f3;}.Shop_proList_Select{width: 65rpx;display: flex;align-items: center;}.Shop_proList_Select icon{margin: auto}.Shop_proList_Img{width: 160rpx;height: 160rpx;}.Shop_proList_Img image{width: 160rpx;height: 160rpx;}.Shop_proList_textList{display: flex;flex-direction: column;padding-left: 20rpx;}.deleteIcon{width: 30px;height: 30px;}.Shop_proList_textListBottom,.Shop_proList_textListTop,.Shop_proList_textListCenter{display: flex;flex-direction: row;justify-content:space-between;font-size: 28rpx;}.proList_textListTopName{max-width: 440rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #333;min-width: 440rpx;}.cartList_Shop_top{border-bottom: 1px solid #f3f3f3;height: 40px;}.cartList_Shop_top text{line-height: 40px;font-size: 28rpx;margin-left: 10px;}.Shop_proList_textListCenter .left{font-size: 24rpx;margin-top: 10rpx;color: #ababab;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}.Shop_proList_textListCenter .right{color: #0a4de6;font-size: 36rpx;font-weight: bold;}.bottomLeft .border_Left{color: #333;width: 30px;height: 30px;border-radius: 5px;border: 1px solid #f1f1f1;text-align: center;line-height: 30px;box-sizing: border-box;}.bottomLeft{display: flex;flex-direction: row;align-items: center;}.border_Cen{margin: 0 20rpx;}/*footer*/.cart-footer {position: fixed;bottom: 0;left: 0;width: 100%;height: 100rpx;line-height: 100rpx;box-sizing: border-box;background: #fff;color: #0a4de6;border-top: 1px solid #f3f3f3;display: flex;flex-direction: row;align-content:space-between;justify-content:space-between;}.total-select {width: 50rpx;height: 100rpx;line-height: 150rpx;margin-left: 20rpx;}.submit-cart{width: 100px;height: 50px;background-color: #0a4de6;border-radius: 0;text-align: center;color: #fff;line-height: 50px;font-size: 16px;margin: 0;}.order-icon {position: absolute;right: 40rpx;top: 25rpx;width: 45rpx;height: 45rpx;}.order-icon image, .order-icon navigator {display: block;width: 45rpx;height: 45rpx;}.cartIcon-grow{display:flex;flex-direction:row;}.cartIcon-grow text{line-height: 100rpx;height: 100rpx;}.cart-toatl-price {}.cart-no-data {padding: 40rpx 0;color: #999;text-align: center;}

本页面还有一个BUG没有解决：在删除商品信息时，如果不是自下而上的删除或自上而下的删除则会最后剩下一组商品无法进行删除。希望将来自己能够修复这个问题（哭）