js-Methode zur Realisierung der Warenkorbberechnung

js-Methode zur Realisierung der Warenkorbberechnung

In diesem Artikelbeispiel wird der spezifische Code von js zur Implementierung der Warenkorbberechnung zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Jeder Shop verfügt über entsprechende Produktoptionen, die nach Shop, Produktauswahl, Shopauswahl, Hinzufügen und Entfernen der Produktmenge sowie Löschen ausgewählt werden können.

Code:

<Skript>
Standard exportieren {
    Daten() {
        zurückkehren {
            count:0, //Die Anzahl aller Waren shopCarList: [], //Alle Waren selectList:[] //Ausgewählte Waren}
    },
    berechnet: {
        //Gesamtpreis ausgewählt selectPrice(){
            gib dies zurück.selectList.reduce((Gesamt,Element,Index)=>{
                gib Gesamtsumme+Artikelmenge*(Artikelaktivitätspreis || Artikelpreis) zurück;
            },0)
        },
        //Gesamtzahl der Auswahlen selectNum(){
            gib dies zurück.selectList.reduce((Gesamt,Element,Index)=>{
                gib Gesamtsumme+Artikelmenge zurück;
            },0)
        },
        //Ob alles ausgewählt werden soll, isSelecetAll(){
            gib dies zurück.shopCarList.every(item=>{
                Artikel zurückgeben.shopSelect===true
            })
        }
    },
    Methoden: {
        //Inkrement(itm){
            itm.quantity<itm.bestand?itm.quantity++:'';
        },
        //dekrementieren dekrement(itm){
            Artikelmenge>1?Artikelmenge--:''
        },
        //Alles auswählen, auf allChooseHandle() klicken{
            dies.initSelectAll(!dies.istSelectAll);
        },
        //Produkt-Einzelauswahlklick productChooseHandle(itm,index){
            let productFlag = !itm.productSelect;
            dies.$set(itm,'productSelect',productFlag);
 
            let shopFlag = this.shopCarList[index].products.every(i=>{
                gibt i.productSelect===true zurück;
            })
            dies.$set(dieses.shopCarList[index],'shopSelect',shopFlag);
            dies.getSelected();
        },
        //Shop-Einzelauswahl-Klick shopChooseHandle(item,index){
            let Flag = !item.shopSelect;
            dies.$set(item,'shopSelect',Flag);
            Artikel.Produkte.fürJeden((itm,idx)=>{
                dies.$set(itm,'productSelect',Flag);
            })
            dies.getSelected();
        },
        //Das ausgewählte Produkt abrufen getSelected(){
            lass tempArr = [];
            dies.shopCarList.forEach((item,index)=>{
                Artikel.Produkte.fürJeden((itm,idx)=>{
                    wenn(itm.productSelect){
                        tempArr.push(itm);
                    }
                })
            })
            diese.selectList = tempArr;
        },
        //Ob die Initialisierung alle auswählen soll initSelectAll(Flag){
            dies.shopCarList.forEach((item,index)=>{
                dies.$set(item,'shopSelect',Flag);
                Artikel.Produkte.fürJeden((itm,idx)=>{
                    dies.$set(itm,'productSelect',Flag);
                })
            })
            dies.getSelected();
        },
        //Warenkorbliste abrufen getCarList(){
            gib dies zurück.$api.personal.getCarList().then(res=>{
                wenn(res.result==='000'){
                    //Anzahl abgelaufener Produkte let expiredNum = 0;
                    res.data.expiredList.fürJeden(item=>{
                        Artikel.Produkte.fürJeden(itm=>{
                            abgelaufeneNummer += Artikelmenge
                        })
                    })
                    // Gültige Produktmenge this.count = res.data.count - expiredNum;
                    diese.shopCarList = res.data.shopCarList;
                    Promise.resolve() zurückgeben
                }
            })
        },
        //Löschen-Klick delCarList(itm,index,idx){
            dies.$api.personal.delCarList( [itm.carId] ).dann(res=>{
                wenn(res.result==='000'){
                    diese.Anzahl -=itm.quantity;
                    diese.shopCarList[index].products.splice(idx,1);
                    wenn(this.shopCarList[index].products.length===0){
                        dies.shopCarList.splice(index,1);
                    }
                    dies.getSelected();
                }
            })
        },
    },
    erstellt() {
        dies.getCarList().then(()=>{
            Dies.initSelectAll(true);
        });
    },
};
</Skript>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • JS realisiert die Berechnung des Gesamtpreises der Waren im Warenkorb

<<:  MySQL-Passwort ist korrekt, aber keine lokale Anmeldung möglich -1045

>>:  Idee in einem War-Paket verpackt, auf Tomcat bereitgestellt und Probleme mit dem Zugriffspfad (Abbildung und Text)

Artikel empfehlen

Ein Artikel zum Erlernen von CSS3-Bildrändern

Mit der CSS3-Eigenschaft „border-image“ können Si...

Verwendung und Beschreibung des HTML-Tags tbody

Das Tbody-Element sollte in Verbindung mit den Ele...

Detaillierte Erklärung des Explain-Typs in MySQL

Einführung: In vielen Fällen denken viele Leute, ...

html+css+js zur Realisierung der Funktion der Fotovorschau und des Bildhochladens

Vorwort: Wenn wir Webseiten erstellen, müssen wir...

html-Seite!--[if IE]...![endif]--Detaillierte Einführung in die Verwendung

Code kopieren Der Code lautet wie folgt: <!--[...

So installieren Sie Theano und Keras auf einem Ubuntu-System

Hinweis: Das System ist Ubuntu 14.04LTS, ein 32-B...

Wie MLSQL Stack das Stream-Debugging vereinfacht

Vorwort Ein Klassenkamerad untersucht die Streami...

So zeichnen Sie eine vertikale Linie zwischen zwei Div-Tags in HTML

Als ich kürzlich eine Schnittstelle zeichnete, st...

Detaillierte Erklärung der HTML-Download-Funktion

Das neue Projekt ist im Grunde abgeschlossen. Es ...

Detaillierte Erklärung dieser Zeigerfunktion in JS

Die Pfeilfunktion ist eine neue Funktion in ES6. ...

Analyse des Uniapp-Einsteiger-NVUE-Klettergrubenrekords

Inhaltsverzeichnis Vorwort Hallo Welt Bild Rahmen...