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)
This article shares the specific code of JavaScri...
Table of contents Query Background 1. Like query ...
The shutdown.bat file has a sentence if not "...
Common methods for limiting input 1. To cancel the...
Table of contents Overview 1. RangeError 2. Refer...
Table of contents Symbol Data Type The reason why...
Sometimes you will see English commas ",&quo...
This article uses examples to illustrate the prin...
Two cases: 1. With index 2. Without index Prerequ...
Previously, I introduced the use of the charAt() ...
1. Add the following code to http{} in nginx.conf...
Table of contents Preface 1. Optimistic Locking A...
Join uses the Nested-Loop Join algorithm. There a...
This article shares the specific code of React to...
Table of contents Preface Front-end structure Bac...