小程序購物車操作
小程序購物車操作
[基礎(chǔ)用法]
功能：用于小程序購物車操作(數(shù)量遞增、數(shù)量遞減、選中單個、取消單個、選中全部、取消全部、刪除)
用法：
第一步：在config.js文件中找到config設(shè)置
第二步：搜索一下shop_cart_action這個接口是否已經(jīng)存在定義(有的小程序模板已經(jīng)定義)，如果沒有定義的話，在里面的底部新增以下代碼
shopCartActionUrl: getApiUrl('shop_cart_action')
并復(fù)制紅色部分待用，如果已經(jīng)存在，則直接復(fù)制使用即可
第三步：接口調(diào)用請求，如果定義名稱不同，使用第二步復(fù)制的內(nèi)容替換紅框內(nèi)選中的部分
提供參考的實例代碼：
/**
* 遞增指定的商品數(shù)量
* 接收參數(shù)
* e 點擊對象參數(shù)
* 接口傳參
* action: 操作方法(數(shù)量遞增(add))
* product_id: 操作商品ID
* spec_value_id: 操作商品規(guī)格ID
*/
onAddCount(e) {
let _this = this,
index = e.currentTarget.dataset.index,
cart_list = _this.data.cart_list,
cartListData = _this.data.cart_list[index];
cartListData['product_num']++;
cart_list[index] = cartListData;
// 后端同步更新
wx.showLoading({title: '加載中', mask: true});
let postData = {
action: 'add',
product_id: cartListData.product_id,
spec_value_id: cartListData.spec_value_id
};
App._requestApi(_this, App.globalData.config.shopCartActionUrl, postData,
function (result) {
_this.updateTotalPrice(cart_list);
wx.hideLoading();
}
);
},
/**
* 遞減指定的商品數(shù)量
* 接收參數(shù)
* e 點擊對象參數(shù)
* 接口傳參
* action: 操作方法(數(shù)量遞減(less))
* product_id: 操作商品ID
* spec_value_id: 操作商品規(guī)格ID
*/
onSubCount(e) {
let _this = this,
index = e.currentTarget.dataset.index,
cart_list = _this.data.cart_list,
cartListData = _this.data.cart_list[index];
if (1 >= cartListData['product_num']) return false;
cartListData['product_num']--;
cart_list[index] = cartListData;
// 后端同步更新
wx.showLoading({title: '加載中', mask: true});
let postData = {
action: 'less',
product_id: cartListData.product_id,
spec_value_id: cartListData.spec_value_id
};
App._requestApi(_this, App.globalData.config.shopCartActionUrl, postData,
function (result) {
_this.updateTotalPrice(cart_list);
wx.hideLoading();
}
);
},
/**
* 選中單個or取消單個
* 接收參數(shù)
* e 點擊對象參數(shù)
* 接口傳參
* action: 操作方法(選中單個or取消單個(selected))
* selected: 操作商品選中狀態(tài)
* product_id: 操作商品ID
* spec_value_id: 操作商品規(guī)格ID
*/
onChecked(e) {
let _this = this,
index = e.currentTarget.dataset.index,
cart_list = _this.data.cart_list,
cartListData = _this.data.cart_list[index];
// 后端同步更新
wx.showLoading({title: '加載中', mask: true});
let postData = {
action: 'selected',
selected: cartListData.selected,
product_id: cartListData.product_id,
spec_value_id: cartListData.spec_value_id
};
App._requestApi(_this, App.globalData.config.shopCartActionUrl, postData,
function (result) {
cartListData['selected'] = cartListData['selected'] == 1 ? 0 : 1;
cart_list[index] = cartListData;
_this.updateTotalPrice(cart_list);
wx.hideLoading();
}
);
},
/**
* 選中全部or取消全部
* 接收參數(shù)
* e 點擊對象參數(shù)
* 接口傳參
* action: 操作方法(選中全部or取消全部(all_selected))
* all_selected: 全部商品選中 or 全部商品取消
*/
onCheckedAll(e) {
let _this = this,
cart_list = _this.data.cart_list;
// 后端同步更新
wx.showLoading({title: '加載中', mask: true});
let postData = {
action: 'all_selected',
all_selected: !_this.data.checkedAll ? 1 : 0
};
App._requestApi(_this, App.globalData.config.shopCartActionUrl, postData,
function (result) {
cart_list.forEach(item => {
item.selected = !_this.data.checkedAll ? 1 : 0
});
_this.setData({
cart_list,
checkedAll: !_this.data.checkedAll ? 1 : 0
});
_this.updateTotalPrice(cart_list);
wx.hideLoading();
}
);
},
/**
* 購物車商品刪除
* 接收參數(shù)
* e 點擊對象參數(shù)
* 接口傳參
* action: 操作方法(刪除(del))
* cart_id: 購物車商品ID
*/
onDelete(e) {
let _this = this;
let cart_ids = [e.currentTarget.dataset.aid];
// 后端同步更新
wx.showLoading({title: '加載中', mask: true});
let postData = {
action: 'del',
cart_id: cart_ids
};
App._requestPost(_this, App.globalData.config.shopCartActionUrl, postData,
function (result) {
_this.getCartList();
App.showSuccess('刪除成功');
wx.hideLoading();
},
function (result) {
App.showError(result.msg);
}
);
},
/**
* 更新購物車已選商品總價格
*/
updateTotalPrice(cart_list) {
let _this = this;
let cart_list_length = 0;
let cartTotalPrice = 0;
if (cart_list.length > 0) {
cart_list.forEach(item => {
if (1 == item.selected) {
cart_list_length++;
cartTotalPrice += (Number(item.users_price) * Number(item.product_num));
}
});
} else {
let cart_list = [];
}
_this.setData({
cart_list,
cartTotalPrice: cartTotalPrice.toFixed(2),
checkedAll: cart_list_length == cart_list.length
});
},
文檔最后更新時間：2023-03-03 11:44:59