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

Zusammenfassung der 7 Fallstricke bei der Verwendung von React

Inhaltsverzeichnis 1. Komponentenaufblähung 2. Än...

So führen Sie Tomcat-Quellcode im Maven-Modus aus

Vorwort Kürzlich habe ich den Startvorgang von To...

So beheben Sie den Startfehler des Docker-Containers

Frage: Nach dem Neustart des Computers kann der M...

MySQL 5.7.10 Installations- und Konfigurations-Tutorial unter Windows

MySQL bietet zwei verschiedene Versionen für unte...

MySQL bedingte Abfrage und/oder Verwendung und Priorität Beispielanalyse

Dieser Artikel veranschaulicht anhand von Beispie...

Linux-Installation Apache-Server-Konfigurationsprozess

Bereiten Sie die Taschen vor Installieren Überprü...

Beispiele für die Verwendung von „Provide“ und „Inject“ in Vue2.0/3.0

Inhaltsverzeichnis 1. Was ist der Nutzen von Prov...

Lösung zum Verlassen von Lücken zwischen BootStrap-Rastern

Inhaltsverzeichnis [Siehe ein Beispiel]: [Der urs...

Miniprogramm zur Implementierung einer einfachen Listenfunktion

In diesem Artikelbeispiel wird der spezifische Co...

MySQL Online-DDL-Tool Gh-Ost-Prinzipanalyse

Inhaltsverzeichnis 1. Einleitung 1.1 Grundsatz 1....

So verwenden Sie den Linux-Paste-Befehl

01. Befehlsübersicht Der Einfügebefehl fügt die e...

Beispiel für ein WeChat-Applet zum Erzielen des rotierenden Laterneneffekts

Vorwort In der täglichen Entwicklung stoßen wir h...