wxml文件
!--pages/cart/cart.wxml--block wx:if="{{hasList}}"view class="cart-box" !-- wx:for 渲染购物车列表 -- view wx:for="{{carts}}" wx:key="key" class="cart_container" !-- wx:if 是否选择显示不同图标 -- view class="item-select" icon wx:if="{{item.selected}}" type="success" color="red" bindtap="selectList" data-index="{{index}}" / icon wx:else type="circle" bindtap="selectList" data-index="{{index}}"/ /view !-- 点击商品图片可跳转到商品详情 -- navigator url="../post/post?id={{item.goods_id}}" image class="item-image" src="{{item.original_img}}" /image /navigator view class="column" text class="title"{{item.goods_name}}/text view class="row" text class="sku-price"￥{{item.shop_price}}/text !-- 增加减少数量按钮 -- view class="sku" text bindtap="minusCount" data-index="{{index}}"-/text text{{item.num}}/text text bindtap="addCount" data-index="{{index}}"+/text /view /view /view !-- 删除按钮 -- text bindtap="deleteList" data-index="{{index}}" class='del' data-delId="{{item.goods_id}}" × /text /view/view!-- 底部操作栏 --view class="bottom_total" view class="bottom_line"/view view class="row" !-- wx:if 是否全选显示不同图标 -- view class="item-allselect" icon wx:if="{{selectAllStatus}}" type="success_circle" color="red" bindtap="selectAll" / icon wx:else type="circle" bindtap="selectAll"/ /view text class="small_text"全选/text !-- 总价 -- text￥{{totalPrice}}/text !-- button wx:if="{{carts[index]['selected']}}"class="button-red" bindtap="toBuy" formType="submit" data-cartid="{{carts[index]}}" 去结算/button -- button class="button-red" bindtap="toBuy" formType="submit" 去结算/button /view/view/block
block wx:elseview class='noCart' bindtap='toHome' view购物车为空，快去添加商品吧！！/view/view/block
wxss文件
.cart_container {display: flex;flex-direction: row;}.scroll { margin-bottom: 120rpx;}.column {display: flex;flex-direction: column;}.row {display: flex;flex-direction: row;align-items: center;}.sku { margin-top: 60rpx; margin-left: 80rpx;}.sku text{ margin-right: 30rpx;}.del{ position: relative; top:50px; left: 25rpx;}.sku-price {color: red;position: relative;margin-top: 70rpx;}.price {color: red;position: relative;}.title {font-size: 38rpx;margin-top: 40rpx;}.small_text {font-size: 28rpx;margin-right: 40rpx;margin-left: 20rpx;}.item-select {width: 40rpx;height: 40rpx; margin-top: 90rpx; margin-left: 20rpx;}.item-allselect { width: 40rpx; height: 40rpx;margin-left: 10rpx; margin-top: -60rpx;}.item-image {width: 180rpx;height: 180rpx;margin: 20rpx;}.bottom_line { width: 100%; height: 2rpx;background: lightgray;}.bottom_total { position: fixed;display: flex;flex-direction: column;bottom: 0;width: 100%; height: 120rpx; line-height: 120rpx; background: white;}.button-red { background-color: #f44336; /* 红色 */}button { position: fixed; right: 0; color: white; text-align: center; display: inline-block; font-size: 30rpx; border-radius: 0rpx; width: 30%; height: 120rpx; line-height: 120rpx;}.noCart{ width: 50%; text-align: center; margin: 200rpx auto; color: red;}
js文件
Page({ data: { // carts: [], // 购物车列表 // hasList: false, // 列表是否有数据 totalPrice: 0, // 总价，初始为0 selectAllStatus:false // 全选状态，默认全选 }, onShow: function () { // console.log(option.id); var that = this; var goods_arr = wx.getStorageSync('goods_arr');//拿添加到购物车中商品的id数组 var shuliang = wx.getStorageSync('shuliang'); var arr = [];//开空数组 //console.log(goods_arr); for (var i in goods_arr) {//对商品id组进行遍历 var subject = goods_arr[i]; arr.push(subject);//通过push统一转移 } var post_id = arr.join();//将arr数组通过join方法转为字符串 // console.log(post_id); if (post_id != "") { wx.request({ url: "后台接口" + post_id, data: {}, header: { "Content-type": "json" }, success: function (res) { // console.log(res.data); var carts = res.data; var hasList; if(carts.length==0){ hasList=false; }else{ hasList = true; } for (var i = 0; i carts.length; i++) { var goods_id = carts[i].goods_id; carts[i].num = shuliang[goods_id]; // console.log(carts[i].num); } that.setData({ carts: res.data, hasList:hasList, }) } }) } }, getTotalPrice() { let carts = this.data.carts; // 获取购物车列表 let total = 0; for (let i = 0; i carts.length; i++) { // 循环列表得到每个数据 if (carts[i].selected) { // 判断选中才会计算价格 total += carts[i].num * carts[i].shop_price; // 所有价格加起来 } } this.setData({ // 最后赋值到data中渲染到页面 carts: carts, totalPrice: total.toFixed(2) }); },
selectList(e) { const index = e.currentTarget.dataset.index; // 获取data- 传进来的index let carts = this.data.carts; // 获取购物车列表 let selectAllStatus = this.data.selectAllStatus; //获取全选状态 const selected = carts[index].selected; // 获取当前商品的选中状态 carts[index].selected = !selected; // 改变状态 carts[index]['selected'] = !selected; //判断有一个没有选中，全选取消 let j=0; for (let i = 0; i carts.length; i++) { if (carts[i].selected ==true) { j++; continue; }else{ selectAllStatus = false; } } if(j==carts.length){ selectAllStatus = true; } //如果都选中，全选也选中实现 this.setData({ carts: carts, selectAllStatus: selectAllStatus, }); this.getTotalPrice(); // 重新获取总价 },
selectAll(e) { let selectAllStatus = this.data.selectAllStatus; // 是否全选状态 selectAllStatus = !selectAllStatus; let carts = this.data.carts; for (let i = 0; i carts.length; i++) { carts[i].selected = selectAllStatus; carts[i]['selected'] = selectAllStatus; // 改变所有商品状态 } this.setData({ selectAllStatus: selectAllStatus, carts: carts }); this.getTotalPrice(); // 重新获取总价 },
// 增加数量 addCount(e) { const index = e.currentTarget.dataset.index; let carts = this.data.carts; let num = carts[index].num; num = num + 1; carts[index].num = num; this.setData({ carts: carts }); this.getTotalPrice(); }, // 减少数量 minusCount(e) { const index = e.currentTarget.dataset.index; let carts = this.data.carts; let num = carts[index].num; if (num = 1) { return false; } num = num - 1; carts[index].num = num; this.setData({ carts: carts }); this.getTotalPrice(); },
toBuy: function (e) { // var postId = event.currentTarget.dataset.postid; var that = this; var cart = []; var carts = this.data.carts; var address = wx.getStorageSync('addressInfo'); // console.log(user) for (let i = 0; i carts.length; i++) { if (carts[i].selected == true) { cart.push(carts[i]) //获取选中的项 } } wx.setStorageSync('order', cart);//过滤掉未选中的购物车商品 // console.log(cart); var order = wx.getStorageSync('order'); // console.log(order); // 未选中商品不能跳转 if (order.length == 0) { wx.showModal({ title: '请选择商品', // content: '未选中商品', success: function (res) { if (res.confirm) { // console.log('用户点击确定') } else if (res.cancel) { // console.log('用户点击取消') } } }) } else { wx.navigateTo({ url: '../pay/pay?totalPrice=' + that.data.totalPrice }) }
},
deleteList: function (e) { const index = e.currentTarget.dataset.index; let carts = this.data.carts; var that = this; wx.showModal({ title: '提示', content: '你正准备从购物车中删除这个商品', success: function (res) { if (res.confirm) { var delId = e.currentTarget.dataset.delid;//转过来的商品id var goods_arr = wx.getStorageSync('goods_arr'); delete goods_arr[delId];//删除对象中的元素 var shuliang = wx.getStorageSync('shuliang');//拿添加到购物车中商品的订购量数组 delete shuliang[delId];//删除对象中的元素 carts.splice(index, 1); // 删除购物车列表里这个商品 if (carts.length == 0) { var hasList = false; } that.setData({ carts: carts, hasList: hasList }); wx.setStorageSync('goods_arr', goods_arr);//重新设缓存 wx.setStorageSync('shuliang', shuliang);//重新设缓存 wx.showToast({ title: '删除成功', icon: 'success', duration: 1000 }); setTimeout(function () { wx.switchTab({ url: "../home/home" }) }, 2000); } } }) },
