微信小程序实现简单的购物车功能
本文实例为大家分享了微信小程序实现简单购物车的具体代码,供大家参考,具体内容如下
实现一个购物车页面,需要哪些数据。整理下大概如下:
一个购物车商品列表(carts),列表里的单个item包含:商品id(id),商品图(image),商品名(title),单价(price),数量(amount),单选按钮(selected);
全选按钮,需要一个字段(selectAllStatus)表示是否全选;
总价(totalPrice);
总数量(totalNum)。
还有一个需要判断的是购物车是否为空(hasList)的字段。
购物车主要的几个功能:商品数量的加减、单选、全选、计算总价格、总数量、商品删除。
wxml代码:
<!-- 购物车商品列表 --> <view class="list"> <view wx:if="{{hasList}}"> <block wx:for="{{carts}}" wx:key="id"> <view class="item-section" bindlongpress="delItem" data-index="{{index}}"> <!-- 单选按钮 是否选中显示不同的图标 --> <view class="radio-section" wx:if="{{item.selected}}" data-index="{{index}}" bindtap="changeSelect"> <icon type="success_circle" color="#f00"></icon> </view> <view class="radio-section" wx:else data-index="{{index}}" bindtap="changeSelect"> <icon type="circle" color="#ccc"></icon> </view> <view class="cart-info"> <view class="img"> <!-- 图片跳转到详情页 --> <navigator url="/pages/good-detail/good-detail?productId={{item.prodId}}"> <image src="{{item.prodPic}}" mode="aspectFill" /> </navigator> </view> <view class="info-rt"> <view class="title">{{item.prodName}}</view> <view> <view class="price">¥{{item.prodPrice}}</view> <!-- 数量加减操作 --> <view class="numarea"> <text class="sign num-minus" data-types="minus" data-index="{{index}}" bindtap="changeNum">-</text> <text class="num-input">{{item.amount}}</text> <text class="sign num-plus" data-types="plus" data-index="{{index}}" bindtap="changeNum">+</text> </view> </view> </view> </view> </view> </block> </view> <view wx:else> <view>购物车还没有商品哦~~</view> <navigator open-type='switchTab' url="/pages/allproduct/allproduct" class="toShopping">去逛逛</navigator> </view> </view> <!-- 底部操作栏 --> <view class="bottom-box"> <view class="select-all" wx:if="{{selectAllStatus}}" data-select="{{selectAllStatus}}" bindtap="selectAll"> <icon type="success_circle" color="#f00"></icon> <text>全选</text> </view> <view class="select-all" wx:else bindtap="selectAll"> <icon type="circle" color="#ccc"></icon> <text>全选</text> </view> <view class="total-price">合计:¥{{totalPrice}}</view> <view class="toBuy" bindtap="submitOrder" data-num ="{{totalNum}}">去结算({{totalNum}})</view> </view>
代码实现:
初始展示购物车商品
Page({ /** * 页面的初始数据 */ data: { carts: [], //购物车商品列表 hasList: false, // 列表是否有数据 totalPrice: 0, // 总价,初始为0 totalNum: 0, //去结算括号里的总数量 selectAllStatus: false, // 全选状态 userId: '', }, //根据userId得到购物车列表数据 getList: function() { let that = this let userId = that.data.userId let carts = that.data.carts wx.request({ url: 'xxx.com/api/ShoppingCar/getShoppingCar?userId=' + userId, header: { 'content-type': 'application/json' }, method: 'GET', success: function(res) { console.log(res) let items = res.data.items //当购物车不为空才进行后续判断操作 if(items !== null){ if (items.length > 0) { that.setData({ hasList: true, // 有数据了,那设为true carts: res.data.items, shoppingCarId: res.data.shoppingCarId, buyerId: res.data.buyerId }) } else { console.log('购物车没有商品') } } else{ return false } }, fail: function(res) {}, complete: function(res) {}, }) }, onShow: function(){ //onLoad 和onReady 只执行一次 所以数据放在onshow里每次打开页面都会执行 this.getList() this.calcTotalPrice() this.totalNum() } })
商品数量的加减:点击+号,amount 加1,点击-号,如果amount > 1,则减1;利用wxml页面中绑定的type属性,直接在方法中判断是操作加号还是减号
//加减按钮操作 changeNum: function(e) { //console.log(e) let that = this let types = e.target.dataset.types, //加和减按钮上分别设置了types属性 index = e.target.dataset.index, cartsData = that.data.carts; //初始购物车列表数据 console.log(cartsData[index]) let amount = cartsData[index].amount if (types == 'minus') { if (amount <= 1) { //不允许购物车数量低于1 wx.showToast({ title: '数量不能少于1', }) return false } else { amount = amount - 1 cartsData[index].amount = amount //修改数量后重新渲染页面 that.setData({ carts: cartsData }) } } if (types == 'plus') { amount = amount + 1 cartsData[index].amount = amount that.setData({ carts: cartsData }) } that.calcTotalPrice() that.totalNum() wx.request({ url: 'xxx.com/api/ShoppingCarItem/uptTransItem', data: { "transItemId": cartsData[index].transItemId, "prodId": cartsData[index].prodId, "amount": cartsData[index].amount, "shoppingCarId": cartsData[index].shoppingCarId }, header: { 'content-type': 'application/json' }, method: 'POST', success: function(res) { console.log(res) }, fail: function(res) {}, complete: function(res) {}, }) },
单选事件:
//单个商品选中事件 changeSelect: function(e) { //console.log(e) let cartsData = this.data.carts let index = e.currentTarget.dataset.index //切换选中状态 cartsData[index].selected = !cartsData[index].selected // 循环数组数据,判断----选中/未选中[selected] //新定义一个flag, 当循环商品的选中状态为true,flag+1;所有商品都为选中状态,则为全选 let flag = 0 for (let i = 0, len = cartsData.length; i < len; i++) { if (cartsData[i].selected == true) { flag += 1 } } if (cartsData.length == flag) { this.data.selectAllStatus = true; } else { this.data.selectAllStatus = false; } this.setData({ carts: cartsData, selectAllStatus: this.data.selectAllStatus }) this.calcTotalPrice() this.totalNum() },
全选事件:
//购物车全选按钮 selectAll: function(e) { //console.log(e) let selectAllStatus = e.currentTarget.dataset.select; //先判断是否为全选 let cartsData = this.data.carts //将true 转为 false(所有商品未选中状态) selectAllStatus = !selectAllStatus for (let i = 0, len = cartsData.length; i < len; i++) { cartsData[i].selected = selectAllStatus } // 页面重新渲染 this.setData({ selectAllStatus: selectAllStatus, carts: cartsData }) this.calcTotalPrice() this.totalNum() },
计算总价格:
//计算商品总价 //总价 = 选中的商品1的 价格 * 数量 + 选中的商品2的 价格 * 数量 + ... calcTotalPrice: function() { //获取商品列表数据 let cartsData = this.data.carts //声明一个变量接收数组列表price let total = 0 for (let i = 0, len = cartsData.length; i < len; i++) { if (cartsData[i].selected) { //判断选中才会计算价格 total += cartsData[i].amount * cartsData[i].prodPrice; } } this.setData({ // 最后赋值到data中渲染到页面 carts: cartsData, totalPrice: total.toFixed(2) }); },
计算总数量:
//总数量 totalNum: function() { let cartsData = this.data.carts //新定义初始变量 let totalNum = 0 for (let i = 0, len = cartsData.length; i < len; i++) { if (cartsData[i].selected) { totalNum += cartsData[i].amount } } this.setData({ totalNum: totalNum }) },
删除单个商品:
//删除商品 delItem: function(e) { //console.log(e) let that = this let cartsData = that.data.carts let index = e.currentTarget.dataset.index wx.request({ url: 'xxx.com/api/ShoppingCarItem/delTransItem?value=' + cartsData[index].transItemId, header: { 'content-type': 'application/json' }, method: 'POST', success: function(res) { console.log(res) wx.showModal({ title: '提示', content: '确认删除吗', success: function(res) { console.log(res) wx.showModal({ title: '提示', content: '确认删除吗', success: function(res) { console.log(res) if (res.confirm) { cartsData.splice(index, 1) //删除购物车列表里这个商品 that.setData({ carts: cartsData }) that.calcTotalPrice() that.totalNum() // 如果购物车为空 if (cartsData.length == 0) { that.setData({ //修改标识为false,显示购物车为空页面 hasList: false }); } } } }) }, fail: function(res) {}, complete: function(res) {}, }) },
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)