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

Practice of dynamically creating dialog according to file name in vue+el-element

Table of contents background accomplish 1. Encaps...

Detailed explanation of CSS image splicing technology (sprite image)

CSS image splicing technology 1. Image stitching ...

What are the core modules of node.js

Table of contents Global Object Global objects an...

Use of Linux date command

1. Command Introduction The date command is used ...

Use js to write a simple snake game

This article shares the specific code of a simple...

Tutorial on customizing rpm packages and building yum repositories for Centos

1 Keep the rpm package downloaded when yum instal...

How to change the password of mysql5.7.20 under linux CentOS 7.4

After MySQL was upgraded to version 5.7, its secu...

Detailed explanation of Javascript closures and applications

Table of contents Preface 1. What is a closure? 1...

Complete step record of vue encapsulation TabBar component

Table of contents Implementation ideas: Step 1: C...

Difference between src and href attributes

There is a difference between src and href, and t...

Detailed explanation of Angular data binding and its implementation

Table of contents Preface What is data binding? T...

MySQL 8.0.19 installation and configuration method graphic tutorial

This article records the installation and configu...