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

Lösung für das Problem, dass der Z-Index in CSS3 nicht wirksam wird

Ich habe vor kurzem eine Kombination aus CSS3 und...

Schritte zum Erstellen Ihres eigenen YUM-Repositorys

Einfach ausgedrückt lautet die IP der als Lager v...

Linux Cron geplante Ausführung von PHP-Code mit Parametern

1. Verwenden Sie zur Ausführung weiterhin ein PHP...

Detaillierte Erklärung zum dynamischen Festlegen des Browsertitels in Vue

Inhaltsverzeichnis Unsinn Text Der erste router/i...

Zusammenfassung der wichtigsten Docker-Befehle für Entwickler

Inhaltsverzeichnis Einführung in Docker Installat...

MySQL-Datumsfunktionen und Datumskonvertierungs- und -formatierungsfunktionen

MySQL ist eine kostenlose relationale Datenbank m...

Der Interviewer fragte, wie man in CSS ein festes Seitenverhältnis erreicht

Möglicherweise hatten Sie für diese Frage bisher ...

So stellen Sie eine Verbindung zum MySQL-Visualisierungstool Navicat her

Nach der Installation von Navicat Der folgende Fe...

So betreiben Sie eine MySQL-Datenbank mit dem ORM-Modell-Framework

Was ist ORM? ORM steht für Object Relational Mapp...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.20

Tutorial zum Herunterladen und Installieren von M...

Erläuterung der Docker Compose-Netzwerkeinstellungen

Grundlegende Konzepte Standardmäßig erstellt Comp...