您好,登錄后才能下訂單哦!
這篇文章主要介紹js如何實(shí)現(xiàn)購(gòu)物車(chē)計(jì)算,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
具體內(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)物車(chē)列表 getCarList(){ return this.$api.personal.getCarList().then(res=>{ if(res.result==='000'){ //過(guò)期商品數(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>
以上是“js如何實(shí)現(xiàn)購(gòu)物車(chē)計(jì)算”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。