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

Drei Beispiele für Unschärfe-Hintergrundeffekte mit CSS3

Beginnen wir nicht mit der Einleitung, sondern ko...

Installieren Sie Ethereum/Ethereum von Grund auf unter CentOS7

Inhaltsverzeichnis Vorwort Fügen Sie Sudo-Schreib...

Vue verwendet Monaco, um Codehervorhebung zu erreichen

Mithilfe der Vue-Sprache und Elementkomponenten m...

Vertikales und horizontales Aufteilen von MySQL-Tabellen

Vertikale Teilung Vertikale Aufteilung bezieht si...

So zeigen Sie die MySQL-Zeitzone an und legen sie fest

1. Überprüfen Sie die Zeitzone der Datenbank Vari...

Grundlegendes Tutorial zum WeChat-Miniprogramm: Verwendung von Echart

Vorwort Schauen wir uns zunächst den Endeffekt an...

Löschen von zwei Bildern mit derselben ID im Docker

Als ich heute einen Docker-Container erstellt hab...

So verwenden Sie eine VLAN-getaggte Ethernet-Karte im CentOS/RHEL-System

In einigen Szenarien möchten wir derselben Ethern...

Detaillierte Schritte zum Erstellen eines NFS-Dateifreigabeservers unter Linux

Linux erstellt NFS-Server Um den Datenaustausch z...

So erstellen Sie schnell eine LNMP-Umgebung mit Docker (neueste Version)

Vorwort Tipp: Hier können Sie den ungefähren Inha...

JavaScript Canvas implementiert Tic-Tac-Toe-Spiel

In diesem Artikel wird der spezifische Code von J...