This article example shares the specific code of js to implement shopping cart calculation for your reference. The specific content is as follows Each store has corresponding product options, which can be selected by store, product selection, store selection, product quantity addition and subtraction, and deletion. Code: <script> export default { data() { return { count:0, //The number of all goods shopCarList: [], //All goods selectList:[] //Selected goods} }, computed: { //Total price selected selectPrice(){ return this.selectList.reduce((total,item,index)=>{ return total+item.quantity*(item.activityPrice || item.price); },0) }, //Total number of selections selectNum(){ return this.selectList.reduce((total,item,index)=>{ return total+item.quantity; },0) }, //Whether to select all isSelecetAll(){ return this.shopCarList.every(item=>{ return item.shopSelect===true }) } }, methods: { //Increment(itm){ itm.quantity<itm.stock?itm.quantity++:''; }, //decrement decrement(itm){ itm.quantity>1?itm.quantity--:'' }, //Select all click allChooseHandle(){ this.initSelectAll(!this.isSelectAll); }, //Product single-select click 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(); }, //Shop single-select click shopChooseHandle(item,index){ let Flag = !item.shopSelect; this.$set(item,'shopSelect',Flag); item.products.forEach((itm,idx)=>{ this.$set(itm,'productSelect',Flag); }) this.getSelected(); }, //Get the selected product getSelected(){ let tempArr = []; this.shopCarList.forEach((item,index)=>{ item.products.forEach((itm,idx)=>{ if(itm.productSelect){ tempArr.push(itm); } }) }) this.selectList = tempArr; }, //Whether to select all initialization initSelectAll(Flag){ this.shopCarList.forEach((item,index)=>{ this.$set(item,'shopSelect',Flag); item.products.forEach((itm,idx)=>{ this.$set(itm,'productSelect',Flag); }) }) this.getSelected(); }, //Get the shopping cart list getCarList(){ return this.$api.personal.getCarList().then(res=>{ if(res.result==='000'){ //Number of expired products let expiredNum = 0; res.data.expiredList.forEach(item=>{ item.products.forEach(itm=>{ expiredNum += itm.quantity }) }) // Valid product quantity this.count = res.data.count - expiredNum; this.shopCarList = res.data.shopCarList; return Promise.resolve() } }) }, //Delete click 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> The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: MySQL password is correct but cannot log in locally -1045
>>: Idea packaged into war package deployed to tomcat and access path issues (illustration and text)
Install linux7.2 Internet access configuration on...
This article example shares the specific code of ...
Effect screenshots: Implementation code: Copy code...
Table of contents Drop-down multiple-select box U...
Hyperlinks are the most frequently used HTML elem...
This article example shares the specific code of ...
Docker Overview Docker is an open source software...
There are many MySQL variables, some of which are...
1. This is a bit complicated to understand, I hop...
From development to deployment, do it yourself Wh...
Today I got familiar with the mouse zooming effect...
I struggled with this for a long time, and after s...
Table of contents Overview first step Step 2 Why ...
This article introduces Nginx from compilation an...
Anyone who has used the Linux system should know ...