js實(shí)現(xiàn)購物車計(jì)算的方法
更新時間:2021年08月18日 11:44:14 作者:qq_43561241
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)購物車的計(jì)算方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)購物車計(jì)算的具體代碼,供大家參考,具體內(nèi)容如下
以店鋪為單位,每個店鋪下面有對應(yīng)的商品選項(xiàng),可全選,商品單選,店鋪單選,商品數(shù)量加減,刪除

代碼:
<script>
export default {
data() {
return {
count:0, //所有商品的數(shù)量和
shopCarList: [], //所有商品
selectList:[] //已選擇的商品
}
},
computed: {
//選擇的合計(jì)價格
selectPrice(){
return this.selectList.reduce((total,item,index)=>{
return total+item.quantity*(item.activityPrice || item.price);
},0)
},
//選擇的合計(jì)數(shù)量
selectNum(){
return this.selectList.reduce((total,item,index)=>{
return total+item.quantity;
},0)
},
//是否全選
isSelecetAll(){
return this.shopCarList.every(item=>{
return item.shopSelect===true
})
}
},
methods: {
//增加
increment(itm){
itm.quantity<itm.stock?itm.quantity++:'';
},
//減少
decrement(itm){
itm.quantity>1?itm.quantity--:''
},
//全選點(diǎn)擊
allChooseHandle(){
this.initSelectAll(!this.isSelecetAll);
},
//商品單選點(diǎn)擊
productChooseHandle(itm,index){
let productFlag = !itm.productSelect;
this.$set(itm,'productSelect',productFlag);
let shopFlag = this.shopCarList[index].products.every(i=>{
return i.productSelect===true;
})
this.$set(this.shopCarList[index],'shopSelect',shopFlag);
this.getSelected();
},
//店鋪單選點(diǎn)擊
shopChooseHandle(item,index){
let Flag = !item.shopSelect;
this.$set(item,'shopSelect',Flag);
item.products.forEach((itm,idx)=>{
this.$set(itm,'productSelect',Flag);
})
this.getSelected();
},
//獲取已選商品
getSelected(){
let tempArr = [];
this.shopCarList.forEach((item,index)=>{
item.products.forEach((itm,idx)=>{
if(itm.productSelect){
tempArr.push(itm);
}
})
})
this.selectList = tempArr;
},
//是否全選初始化
initSelectAll(Flag){
this.shopCarList.forEach((item,index)=>{
this.$set(item,'shopSelect',Flag);
item.products.forEach((itm,idx)=>{
this.$set(itm,'productSelect',Flag);
})
})
this.getSelected();
},
//獲取購物車列表
getCarList(){
return this.$api.personal.getCarList().then(res=>{
if(res.result==='000'){
//過期商品數(shù)
let expiredNum = 0;
res.data.expiredList.forEach(item=>{
item.products.forEach(itm=>{
expiredNum += itm.quantity
})
})
//有效商品數(shù)量
this.count = res.data.count - expiredNum;
this.shopCarList = res.data.shopCarList;
return Promise.resolve()
}
})
},
//刪除點(diǎn)擊
delCarList(itm,index,idx){
this.$api.personal.delCarList( [itm.carId] ).then(res=>{
if(res.result==='000'){
this.count -= itm.quantity;
this.shopCarList[index].products.splice(idx,1);
if(this.shopCarList[index].products.length===0){
this.shopCarList.splice(index,1);
}
this.getSelected();
}
})
},
},
created() {
this.getCarList().then(()=>{
this.initSelectAll(true);
});
},
};
</script>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
Net微信網(wǎng)頁開發(fā) 使用微信JS-SDK獲取當(dāng)前地理位置過程詳解
這篇文章主要介紹了Net微信網(wǎng)頁開發(fā) 使用微信JS-SDK獲取當(dāng)前地理位置過程詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08
javascript實(shí)現(xiàn)五星評價代碼(源碼下載)
大家在淘寶購物之后,都會對賣家的服務(wù)進(jìn)行評論,那么五星評價代碼是怎么實(shí)現(xiàn)的呢?下面小編給大家介紹基于Javascript實(shí)現(xiàn)五星評價代碼,有需要的朋友可以參考下2015-08-08
JavaScript簡單實(shí)現(xiàn)網(wǎng)頁回到頂部功能
JavaScript簡單實(shí)現(xiàn)網(wǎng)頁回到頂部功能,大家可以參考一下2013-11-11
詳解JS中的compose函數(shù)和pipe函數(shù)用法
這篇文章主要介紹了JS中的compose函數(shù)和pipe函數(shù)用法,想深入了解Javascript的同學(xué),可以參考下2021-04-04

