js method to realize shopping cart calculation

js method to realize shopping cart calculation

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:
  • JS realizes the calculation of the total price of goods in the shopping cart

<<:  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)

Recommend

JavaScript canvas to achieve scratch lottery example

This article shares the specific code of JavaScri...

What does input type mean and how to limit input

Common methods for limiting input 1. To cancel the...

7 native JS error types you should know

Table of contents Overview 1. RangeError 2. Refer...

Let’s talk about the symbol data type in ES6 in detail

Table of contents Symbol Data Type The reason why...

About if contains comma expression in JavaScript

Sometimes you will see English commas ",&quo...

Detailed explanation of the principle and usage of MySQL views

This article uses examples to illustrate the prin...

Will Update in a Mysql transaction lock the table?

Two cases: 1. With index 2. Without index Prerequ...

How to configure nginx to limit the access frequency of the same IP

1. Add the following code to http{} in nginx.conf...

MySQL lock control concurrency method

Table of contents Preface 1. Optimistic Locking A...

MYSQL database basics - Join operation principle

Join uses the Nested-Loop Join algorithm. There a...

React realizes secondary linkage effect (staircase effect)

This article shares the specific code of React to...

How to manage large file uploads and breakpoint resume based on js

Table of contents Preface Front-end structure Bac...