Miniprogramm zur Implementierung des kompletten Einkaufswagens

<Ansicht wx:if="{{hasList}}">
  <Klasse anzeigen="Bestellliste">
    <Ansichtsklasse="Reihenfolge" wx:für="{{Liste}}" wx:Schlüssel="{{Index}}">
      <view class="xuanze" wx:if="{{item.selected}}" catchtap="selectList" data-index="{{index}}">
        <image src="/images/serch/xuanze.png" />
      </Ansicht>
      <Ansichtsklasse="xuanze" catchtap="Auswahlliste" Datenindex="{{index}}" wx:else>
        <image src="/images/serch/gouxuan.png" />
      </Ansicht>
      <!--Produktbilder auflisten-->
      <Klasse anzeigen="order_img">
        <image src="{{item.image}}" />
      </Ansicht>
      <Klasse anzeigen="Bestelltext">
        <Klasse anzeigen="text_top">
          <!--Listentitel-->
          <view class="title">{{item.title}}</view>
          <view class="detel" catchtap="löscht" data-index="{{index}}">
            <image src="/images/serch/detel.png" />
          </Ansicht>
        </Ansicht>
        <!--Spezifikationen-->
        <view class="size">Spezifikationen: {{item.pro_name}}</view>
        <Ansichtsklasse="text_bottom">
          <!--Preis-->
          <view class="Geld">￥{{Artikelpreis}}</view>
          <!--Produktmenge hinzufügen oder entfernen-->
          <Ansichtsklasse="Nummer">
            <!--Minus-Schaltfläche-->
            <view class="reduce" catchtap="btn_minus" data-obj="{{obj}}" data-index="{{index}}">
              <!--Schaltflächenbild-->
              <image src="/images/serch/jian-1.png" />
            </Ansicht>
            <!--Menge-->
            <view class="numb">{{item.num}}</view>
            <!--Schaltfläche „Hinzufügen“-->
            <Ansichtsklasse="Hinzufügen" catchtap="btn_add" data-index="{{index}}">
              <!--Schaltflächenbild-->
              <image src="/images/serch/add-1.png" />
            </Ansicht>
          </Ansicht>
        </Ansicht>
      </Ansicht>
    </Ansicht>
  </Ansicht>

  <!--Fester Boden-->
  <view class="kaufen">
    <Ansichtsklasse="Top_kaufen">
      <Ansichtsklasse="oben_links">
        <view class="left_img" catchtap="Alles auswählen" wx:if="{{Alles auswählenStatus}}">
          <image src="/images/serch/gouxuan.png" />
        </Ansicht>
        <Ansichtsklasse="left_img" catchtap="Alles auswählen" wx:else>
          <image src="/images/serch/gouxuan.png" />
        </Ansicht>
        <view class="left_name">Alles auswählen</view>
      </Ansicht>
      <Ansichtsklasse="oben_links">
        <Ansichtsklasse="left_img">
          <image src="/images/serch/fenxiang.png" />
        </Ansicht>
        <view class="left_name">Teilen</view>
      </Ansicht>
    </Ansicht>
    <Ansichtsklasse="buy_bottom">
      <Ansichtsklasse="buy_left">
        <view class="heji">Gesamt:￥{{totalPrice}}</view>
      </Ansicht>
      <view Klasse="Kaufrecht">
        <!--Bestellung abschicken-->
        <view class="liji " catchtap="btn_submit_order">Jetzt kaufen</view>
        <view class="liji two active">Termin zur Anprobe</view>
      </Ansicht>
    </Ansicht>
  </Ansicht>
</Ansicht>
<!--Keine Bestellung im Warenkorb-->
<Ansicht wx:sonst>
  <view class="list_none">Der Einkaufswagen ist leer~</view>
</Ansicht>

Seite {
  Hintergrundfarbe: rgba(238, 238, 238, 0,5);
}

.Befehl {
  Höhe: 238rpx;
  Hintergrundfarbe: #fefeff;
  Rand: 27rpx;
  Rahmenradius: 4rpx;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
}

.xuanze {
  Breite: 40rpx;
  Höhe: 40rpx;
  /* Hintergrundfarbe: dunkelgoldenrod; */
  Randradius: 50 %;
  Rand: 0 11rpx;
}

.Bild auswählen {
  Breite: 100 %;
  Höhe: 100%;
  Anzeige: Block;
  Randradius: 50 %;
}

.order_img {
  Breite: 180rpx;
  Höhe: 180rpx;
}

.order_img Bild {
  Breite: 100 %;
  Höhe: 100%;
  Anzeige: Block;
}

.Bestelltext {
  Rand links: 20rpx;
  Breite: 58 %;
  Höhe: 180rpx;
}

.text_top {
  Anzeige: Flex;
  Inhalt ausrichten: Abstand dazwischen;
  Elemente ausrichten: zentrieren;
}

.Titel {
  Breite: 70%;
  Schriftgröße: 28rpx;
  Farbe: #4b5248;
  Anzeige: -webkit-box;
  -webkit-box-orient: vertikal;
  -webkit-Leitungsklemme: 1;
  Überlauf: versteckt;
}

.detel {
  Breite: 30rpx;
  Höhe: 30rpx;
}

.detel Bild {
  Breite: 100 %;
  Höhe: 100%;
  Anzeige: Block;
}

.Größe {
  Schriftgröße: 24rpx;
  Farbe: #a8ada6;
}

.text_bottom {
  Anzeige: Flex;
  Rand oben: 50rpx;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: Abstand dazwischen;
}

.Geld {
  Schriftgröße: 30rpx;
  Farbe: #a5937f;
}

.Nummer {
  Anzeige: Flex;
  Inhalt ausrichten: Abstand herum;
  Elemente ausrichten: zentrieren;
  Breite: 170rpx;
}

.reduzieren {
  Breite: 46rpx;
  Höhe: 46rpx;
}

.Bild reduzieren {
  Breite: 100 %;
  Höhe: 100%;
  Anzeige: Block;
}

.betäuben {
  Schriftgröße: 30rpx;
  Farbe: #a5937f;
}

.hinzufügen {
  Breite: 46rpx;
  Höhe: 46rpx;
}

.Bild hinzufügen {
  Breite: 100 %;
  Höhe: 100%;
  Anzeige: Block;
}

/*Kaufen-Button*/

.kaufen {
  Höhe: 180rpx;
  Breite: 696rpx;
  Position: fest;
  links: 27rpx;
  unten: 41rpx;
  Hintergrundfarbe: #555555f3;
  Rahmenradius: 4rpx;
}

.top_kaufen {
  Rahmen unten: 1px durchgezogenes RGB (98, 98, 99);
  Höhe: 75rpx;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: Abstand dazwischen;
}

.oben_links {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
}

.links_img {
  Breite: 37rpx;
  Höhe: 37rpx;
  Rand: 11rpx;
}

.left_img Bild {
  Breite: 100 %;
  Höhe: 100%;
  Anzeige: Block;
}

.linker_name {
  Schriftgröße: 24rpx;
  Farbe: #fefeff;
  Rand rechts: 29rpx;
}

.bottom_kaufen {
  Anzeige: Flex;
  Höhe: 104rpx;
  Inhalt ausrichten: Abstand dazwischen;
  Elemente ausrichten: zentrieren;
  Polsterung: 0rpx 30rpx 0rpx 12rpx;
}

.links kaufen {
  Schriftgröße: 26rpx;
  Farbe: #fff;
}

.kauf_rechts {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
}

.liji {
  Breite: 180rpx;
  Höhe: 70rpx;
  Rand: 2rpx durchgezogen rgba(248, 248, 248, 1);
  Box-Größe: Rahmenbox;
  Rahmenradius: 4rpx;
  Zeilenhöhe: 70rpx;
  Textausrichtung: zentriert;
  Schriftgröße: 26rpx;
  Farbe: #FEFEFF;
}
.zwei{
  Rand links: 12rpx;
}
.aktiv{
  Hintergrundfarbe: #A5937F;
  Rand: keiner;
}

Seite({

  /**
   * Ausgangsdaten der Seite */
  Daten: {
    hasList: true, //Standardmäßige Anzeige von Listendaten //Produktlistendaten list: [{
        ID: 1,
        Titel: 'Gardener's Anti-Falten-Essenz',
        Bild: '/images/serch/2.png',
        pro_name: "30ml",
        Zahl: 1,
        Preis: 180,
        ausgewählt: true
      },
      {
        ID: 2,
        Titel: 'Evelyn Rose Handcreme',
        Bild: '/images/serch/1.png',
        pro_name: "25g",
        Zahl: 1,
        Preis: 62,
        ausgewählt: true
      },
      {
        ID: 2,
        Titel: 'Beruhigende Handcreme mit Haferflocken und Ziegenmilch',
        Bild: '/images/serch/2.png',
        pro_name: "75ml",
        Zahl: 1,
        Preis: 175,
        ausgewählt: true
      }
    ],
    //Betrag totalPrice: 0, //Gesamtpreis, zunächst 0
    //Alle Status auswählen selectAllStatus: true, //Alle Status auswählen, standardmäßig alle ausgewählt},

  /**
   * Lebenszyklusfunktion - auf Seitenladen warten*/
  beim Laden: Funktion (Optionen) {

  },

  /**
   * Lebenszyklusfunktion - Seitenanzeige überwachen*/
  onShow: Funktion() {
    wx.showToast({
      Titel: 'Wird geladen',
      Symbol: "wird geladen",
      Dauer: 1000
    })
    //Preismethode this.count_price();

  },

  /**Aktuelles Produktauswahlereignis*/
  wähleListe(e) {
    var das = dies;
    //Den ausgewählten Radioindex abrufen var index = e.currentTarget.dataset.index;
    //Produktlistendaten abrufen var list = that.data.list;
    //Standardmäßig alles auswählen that.data.selectAllStatus = true;
    //Array-Daten durchgehen, beurteilen – ausgewählt/nicht ausgewählt [ausgewählt]
    Liste[index].ausgewählt = !Liste[index].ausgewählt;
    //Wenn alle Array-Daten ausgewählt sind[true], wähle alle aus für (var i = list.length - 1; i >= 0; i--) {
      wenn (!list[i].selected) {
        that.data.selectAllStatus = falsch;
        brechen;
      }
    }
    // Daten erneut rendern that.setData({
      Liste: Liste,
      wähleAlleStatus aus: that.data.selectAllStatus
    })
    // Rufen Sie die Methode zum Berechnen des Betrags auf that.count_price();
  },

  // löschen deletes(e) {
    var das = dies;
    // Den Index abrufen const index = e.currentTarget.dataset.index;
    // Produktlistendaten abrufen let list = this.data.list;
    wx.showModal({
      Titel: 'Tipps',
      Inhalt: „Möchten Sie wirklich löschen?“,
      Erfolg: Funktion (Res) {
        wenn (res.bestätigen) {
          // Index ab 1 löschen
          Liste.splice(index, 1);
          // Daten zur Seitenwiedergabe that.setData({
            Liste: Liste
          });
          // Wenn die Daten leer sind if (!list.length) {
            dass.setData({
              hatListe: false
            });
          } anders {
            // Rufen Sie die Daten zur Betragsdarstellung auf that.count_price();
          }
        } anders {
          konsole.log(res);
        }
      },
      Fehler: Funktion (Res) {
        konsole.log(res);
      }
    })
  },

  /**Ereignis „Vollständige Auswahl im Einkaufswagen“*/
  wähleAlles(e) {
    // Standardmäßig alle Symbole auswählen let selectAllStatus = this.data.selectAllStatus;
    // wahr ----- falsch
    wähleAlleStatus = !wähleAlleStatus aus;
    // Produktdaten abrufen let list = this.data.list;
    // Durchlaufe die Liste, um zu ermitteln, ob die Daten ausgewählt sind für (let i = 0; i < list.length; i++) {
      Liste[i].selected = AlleStatus auswählen;
    }
    // Seite wird neu gerendert this.setData({
      wähleAlleStatus: wähleAlleStatus,
      Liste: Liste
    });
    //Berechnen Sie den Betrag mithilfe der Methode this.count_price();
  },

  /**Bindung plus Mengenereignis*/
  btn_add(e) {
    // Den angeklickten Index abrufen const index = e.currentTarget.dataset.index;
    // Produktdaten abrufen let list = this.data.list;
    // Anzahl der Produkte ermitteln let num = list[index].num;
    // Klicken, um num zu erhöhen = num + 1;
    Liste[Index].Nummer = Nummer;
    // Erneut rendern --- die neue Menge anzeigen this.setData({
      Liste: Liste
    });
    //Berechnen Sie den Betrag mithilfe der Methode this.count_price();
  },

  /**
   * Ereignis zur Reduzierung der Bindungsmenge */
  btn_minus(e) {
    // // Den angeklickten Index abrufen const index = e.currentTarget.dataset.index;
    // const obj = e.currentTarget.dataset.obj;
    // konsole.log(obj);
    // Produktdaten abrufen let list = this.data.list;
    // Anzahl der Produkte ermitteln let num = list[index].num;
    //Überprüfen Sie, ob Num kleiner oder gleich 1 ist. return; Klicken Sie auf invalid if (num <= 1) {
      gibt false zurück;
    }
    // andernfalls ist die Zahl größer als 1. Klicken Sie auf die Schaltfläche „Subtraktion“.
    Zahl = Zahl - 1;
    Liste[Index].Nummer = Nummer;
    // Rendere die Seite this.setData({
      Liste: Liste
    });
    // Rufen Sie die Methode zum Berechnen des Betrags auf this.count_price();
  },

  // Bestellung abschicken btn_submit_order() {
    var das = dies;
    Konsole.log(diese.Daten.Gesamtpreis);

    //Zahlung anfordern // wx.requestPayment(
    // {
    // 'Zeitstempel': '',
    // 'nonceStr': '',
    // 'Paket': '',
    // 'Zeichentyp': 'MD5',
    // 'paySign': '',
    // 'Erfolg': Funktion (res) { },
    // 'Fehler': Funktion (res) { },
    // 'vollständig': Funktion (res) { }
    // })
    wx.showModal({
      Titel: 'Tipps',
      Inhalt: 'Gesamtbetrag -' + that.data.totalPrice + "Noch nicht entwickelt",
    })
  },

  /**
   * Gesamtpreis berechnen */
  Zählpreis() {
    // Produktlistendaten abrufen let list = this.data.list;
    //Deklarieren Sie eine Variable, um den Array-Listenpreis zu erhalten
    sei total = 0;
    // Durchlaufe die Liste, um alle Daten abzurufen für (let i = 0; i < list.length; i++) {
      // Bestimmen Sie, ob der Preis ausgewählt und berechnet werden soll, wenn (list[i].selected) {
        // alle Preise addieren count_money
        Gesamtsumme += Liste[i].Anzahl * Liste[i].Preis;
      }
    }
    //Zum Schluss den Wert den Daten zuweisen und auf der Seite rendern this.setData({
      Liste: Liste,
      Gesamtpreis: total.toFixed(2)
    });
  },

})