原文地址:我的博客
实现增加商品的数量
思路:当用户点击增加按钮时,商品数量 +1 ,同时向后台发送增加商品数量的请求,这里没有实现超过库存就禁止增加数量,如果想做这个功能就加一个判断就可以了,判断当前的数量(增加后的)是否大于库存数量,如果大于库存数量则不发送请求同时商品数量不允许再增加
上代码
// 添加按钮被点击
addButtonClick:function(tap){
var that = this;
var user_data = wx.getStorageSync('user_data'); //获取缓存里面的用户信息
const index = parseInt(tap.currentTarget.id); //获取当前的商品的索引值
let dataSource = that.data.dataSource; //购物车所有的商品数据
let quantity = dataSource[index].quantity; //获取购买数量
quantity = quantity + 1; //将购买数量 +1
dataSource[index].quantity = quantity; //更改当前商品的数量
that.setData({
dataSource: dataSource //更新商品数据
});
wx.request({
url: url,
data: { //发送给后端的参数
"cart_id": dataSource[index].cart_id,
"q": dataSource[index].quantity,
"id": dataSource[index].goods_id,
"uid": user_data.uid
},
method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
// header: {}, // 设置请求的 header
header: {
'content-type': 'application/json'
},
success: function (res) {
},
})
that.getTotalPrice(); //重新计算总价格
},
/**计算总价格 */
getTotalPrice() {
let good = this.data.dataSource; // 获取购物车列表
let total = 0;
for (let i = 0; i < good.length; i++) { // 循环列表得到每个数据
if (good[i].checks) { // 判断选中才会计算价格
total += good[i].quantity * good[i].price; // 所有价格加起来
}
}
this.setData({ // 最后赋值到data中渲染到页面
good: good,
total_all_price: total.toFixed(2),
});
}
实现减少商品数量和删除商品
思路:当用户点击减少按钮时,商品数量 -1 ,同时发送减少商品数量的请求,如果商品数量小于1,则发送删除商品请求,成功之后刷新当前页面
Tips: 刷新页面的目的是重新获取一次数据,这里我的获取数据是写在 onShow() 这个生命周期里,所以当用户删除商品成功以后执行 onShow() 这个生命周期函数
上代码
// 减少按钮被点击
reduceButtonClick:function(tap){
var that = this;
var user_data = wx.getStorageSync('user_data');
const index = parseInt(tap.currentTarget.id);
let dataSource = that.data.dataSource[index];
let quantity = dataSource.quantity; //获取购买数量
if (quantity == 1) { //判断是否等于1
wx.showModal({
title: '提示',
content: '确定将 ' + dataSource.name + ' 移出购物车吗?',
success: function (sm) {
if (sm.confirm) {
var tempData = that.data.dataSource; //所有商品数据
tempData.splice(index, 1); //从当前索引值开始删除1项数据
that.setData({
dataSource: tempData //更新数据
})
wx.request({
url: url, //发送删除请求
data: {
"cart_id": dataSource.cart_id,
"uid": user_data.uid
},
method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
// header: {}, // 设置请求的 header
header: {
'content-type': 'application/json'
},
success: function (res) {
that.onShow() //删除成功之后刷新当前页面
},
})
} else if (sm.cancel) {
return false;
}
}
})
} else { //如果商品数量不等于 1
var dataSource_2 = that.data.dataSource;
var quantity2 = quantity - 1;
dataSource_2[index].quantity = quantity2;
this.setData({
dataSource: dataSource_2
});
wx.request({
url: url,
data: {
"cart_id": dataSource_2[index].cart_id,
"q": dataSource_2[index].quantity,
"id": dataSource_2[index].goods_id,
"uid": user_data.uid
},
method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
// header: {}, // 设置请求的 header
header: {
'content-type': 'application/json'
},
success: function (res) {
},
})
}
that.getTotalPrice(); //重新计算总价格
},
/**计算总价格 */
getTotalPrice() {
let good = this.data.dataSource; // 获取购物车列表
let total = 0;
for (let i = 0; i < good.length; i++) { // 循环列表得到每个数据
if (good