本文实例为大家分享了微信小程序实现简单购物车的具体代码，供大家参考，具体内容如下
实现一个购物车页面，需要哪些数据。整理下大概如下：
一个购物车商品列表(carts)，列表里的单个item包含：商品id(id)，商品图(image)，商品名(title)，单价(price)，数量(amount)，单选按钮(selected)；
全选按钮，需要一个字段(selectAllStatus)表示是否全选；
总价(totalPrice)；
总数量（totalNum）。
还有一个需要判断的是购物车是否为空(hasList)的字段。
购物车主要的几个功能：商品数量的加减、单选、全选、计算总价格、总数量、商品删除。
wxml代码：
{{item.prodName}} ￥{{item.prodPrice}} - {{item.amount}} + 购物车还没有商品哦~~ 去逛逛 全选 全选 合计:￥{{totalPrice}} 去结算（{{totalNum}}）
代码实现：
初始展示购物车商品
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) {},
})
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。