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)
Table of contents Preface Introduction to QueryCa...
meta is an auxiliary tag in the head area of htm...
Four practical vue custom instructions 1. v-drag ...
The effect achievedImplementation Code html <d...
Overview Nginx can use variables to simplify conf...
This article shares the specific code of Vue to i...
Q: I don’t know what is the difference between xml...
MySQL 8.0: MVCC for Large Objects in InnoDB In th...
Use "onInput(event)" to detect whether ...
When using Maven to manage projects, how to uploa...
Record some of the processes of using node-media-...
Redux is a data state management plug-in. When us...
Table of contents Dirty pages (memory pages) Why ...
By default, Docker runs over a non-networked UNIX...
Table of contents Preface InnoDB storage architec...