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

Vue implements interface sliding effect

This article example shares the specific code of ...

HTML background color gradient effect achieved through CSS style

Effect screenshots: Implementation code: Copy code...

ElementUI implements sample code for drop-down options and multiple-select boxes

Table of contents Drop-down multiple-select box U...

HTML code example: detailed explanation of hyperlinks

Hyperlinks are the most frequently used HTML elem...

Detailed explanation of Vue Notepad example

This article example shares the specific code of ...

Introduction to Docker containers

Docker Overview Docker is an open source software...

Several important MySQL variables

There are many MySQL variables, some of which are...

Detailed explanation of Vue's custom event content distribution

1. This is a bit complicated to understand, I hop...

Try Docker+Nginx to deploy single page application method

From development to deployment, do it yourself Wh...

About the IE label LI text wrapping problem

I struggled with this for a long time, and after s...

How to implement simple data monitoring with JS

Table of contents Overview first step Step 2 Why ...

How to get the size of a Linux system directory using the du command

Anyone who has used the Linux system should know ...