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

需求：电商平台内有众多不同商家，购物车页需要购买的产品以商家的类目作为分类，并满足基本的购物车需求:
http://www.kundonghui.com/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="https://www.kundonghui.com/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: 'https://www.kundonghui.com/upload/2019/02/02/20190202033917369.png',proWeight: 900.00},{shopId: 0,proId: 1,proName: '一瓶啤酒',proPrice: 2,prototal: 15,proNum: 2,proSelecter: true,imgSrc: 'https://www.kundonghui.com/upload/2019/02/02/20190202033917369.png',proWeight: 900.00}]},{shopName: '鲲东自营',shopProlist: [{shopId: 1,proId: 0,proName: '一瓶啤酒',proPrice: 3,prototal: 15,proNum: 3,proSelecter: true,imgSrc: 'https://www.kundonghui.com/upload/2019/02/02/20190202033917369.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没有解决：在删除商品信息时，如果不是自下而上的删除或自上而下的删除则会最后剩下一组商品无法进行删除。希望将来自己能够修复这个问题（哭）

微信小程序商城购物车页二维数组怎么做相关推荐

微信小程序业务-字符串生成二维码（weapp-qrcode）
微信小程序业务-字符串生成二维码(weapp-qrcode) 前言邂逅weapp-qrcode 基本使用详细参数小程序组件中使用 image属性详解想使用网络图片? 参考地址前言在小程序项 ...
微信小程序使用weapp-qrcode生成二维码
<canvas style="width:108rpx;height:108rpx; canvas-id='qrcode'></canvas> // weapp-qr ...
微信小程序使用canvas绘制二维码实现跳转小程序
开始接到这个需求的时候,我查阅文档获取小程序码 | 微信开放文档发现两种途径需要后端在服务器上调用接口拿到二维码,因为调用的 https://api.weixin.qq.com这个域名是不允许上白 ...
微信小程序长按识别二维码，小程序相关问题总结
微信小程序长按识别二维码,小程序相关问题总结开发小程序中,长按识别二维码,小程序码跳转,已知问题整理: 小程序中,不支持长按识别二维码,和小程序码. 可利用小程序图片预览功能识别小程序码并进行跳 ...
『小程序开发』关于微信小程序扫普通链接二维码打开小程序的具体配置流程...
前言: 对于扫普通链接二维码打开小程序的功能详解,官方api已经可以说是接近手把手的教学,咱们这里不做累述,直接上图走起...官方接入指南功能介绍扫二维码登录小程序...^_^ 限制 1.对于普通 ...
微信小程序订单生成支付二维码接口 code
手机的小程序订单是直接拉起支付界面的,有些朋友需要生成支付二维码这边就需要去调用微信的支付二维码接口了需要的参数是 session_id, timeStamp, nonceStr, package ...
uni-app微信小程序生成自定义参数二维码，跳转小程序指定页面，获取参数；uni-app微信小程序获取二维码自定义参数；微信小程序生成动态参数二维码；uni-app微信小程序获取动态参数二维码；
一.场景需求: 在小程序个人名片页面A页面,生成用户的个人名片二维码(该二维码携带用户的唯一标识id):微信扫一扫或长按图片识别这个二维码,可以跳转到小程序的B页面,并且在B页面拿到二维码上的唯一标识 ...
微信小程序文字链接生成二维码，扫描识别二维码
给大家推荐一个非常实用且有趣的微信小程序:超实用工具箱. 超实用工具箱小程序里面包含了很多小工具,涵盖了工作.日常生活和娱乐版块.具体的功能大家可以打开微信扫描下方二维码,即刻体验: 接下来给大家介绍 ...
山东大学项目实训（四）—— 微信小程序扫描web端二维码实现web端登录
效果点击登录后,显示二维码→打开"探古"(本项目)微信小程序,扫描二维码确认登录→web端登录成功主要流程因为本人主要负责web前端的开发,所以本文仅介绍web前端的实现方法 ...

微信小程序商城购物车页二维数组怎么做

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

wxml

js

wxss

微信小程序商城购物车页二维数组怎么做相关推荐

最新文章

热门文章

微信小程序商城购物车页 二维数组怎么做

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

wxml

js

wxss

微信小程序商城购物车页 二维数组怎么做相关推荐

最新文章

热门文章

微信小程序商城购物车页二维数组怎么做

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

微信小程序商城购物车页二维数组怎么做相关推荐