js實(shí)現(xiàn)購(gòu)物車計(jì)算的方法
本文實(shí)例為大家分享了js實(shí)現(xiàn)購(gòu)物車計(jì)算的具體代碼,供大家參考,具體內(nèi)容如下
以店鋪為單位,每個(gè)店鋪下面有對(duì)應(yīng)的商品選項(xiàng),可全選,商品單選,店鋪單選,商品數(shù)量加減,刪除
代碼:
<script> export default { data() { return { count:0, //所有商品的數(shù)量和 shopCarList: [], //所有商品 selectList:[] //已選擇的商品 } }, computed: { //選擇的合計(jì)價(jià)格 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(); }, //獲取購(gòu)物車列表 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>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Net微信網(wǎng)頁(yè)開發(fā) 使用微信JS-SDK獲取當(dāng)前地理位置過程詳解
這篇文章主要介紹了Net微信網(wǎng)頁(yè)開發(fā) 使用微信JS-SDK獲取當(dāng)前地理位置過程詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08javascript實(shí)現(xiàn)五星評(píng)價(jià)代碼(源碼下載)
大家在淘寶購(gòu)物之后,都會(huì)對(duì)賣家的服務(wù)進(jìn)行評(píng)論,那么五星評(píng)價(jià)代碼是怎么實(shí)現(xiàn)的呢?下面小編給大家介紹基于Javascript實(shí)現(xiàn)五星評(píng)價(jià)代碼,有需要的朋友可以參考下2015-08-08JavaScript簡(jiǎn)單實(shí)現(xiàn)網(wǎng)頁(yè)回到頂部功能
JavaScript簡(jiǎn)單實(shí)現(xiàn)網(wǎng)頁(yè)回到頂部功能,大家可以參考一下2013-11-11原生javascript移動(dòng)端滑動(dòng)banner效果
這篇文章主要為大家詳細(xì)介紹了原生javascript移動(dòng)端滑動(dòng)banner效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03詳解JS中的compose函數(shù)和pipe函數(shù)用法
這篇文章主要介紹了JS中的compose函數(shù)和pipe函數(shù)用法,想深入了解Javascript的同學(xué),可以參考下2021-04-04