Einfaches Beispiel für einen Warenkorb im WeChat-Miniprogramm

In diesem Artikel werden hauptsächlich relevante Informationen zu einem einfachen Beispiel des WeChat-Miniprogramm-Warenkorbs vorgestellt. Freunde, die es benötigen, können sich auf das WeChat-Miniprogramm beziehen. Hier ist eine kleine Demo, die die Warenkorbfunktion implementiert . Wenn Sie diese Funktion benötigen, können Freunde darauf verweisen.

Zusammenfassung: Produktmenge hinzufügen oder subtrahieren, Preis zusammenfassen, alle auswählen oder nicht alle auswählen

Designideen:

1 Laden Sie das Array im folgenden JSON-Datenformat hoch. 1. Warenkorb-ID: cid 2. Titeltitel 3. Mengennummer 4. Bildadresse 5. Preispreis 6. Zwischensumme 7. Ob ausgewählt werden soll

2 . Klicken Sie auf „Wiederholen“. Wenn die Auswahl zum Umschalten des Markierungsfelds bereits ausgewählt ist, wird die Auswahl durch Klicken aufgehoben. Im Gegenteil, der Klick basiert auf dem Index als Bezeichner und nicht auf der CID, was zum Durchlaufen praktisch ist.

3. Operation „Alles auswählen“ Beim ersten Klicken wird alles ausgewählt und dann erneut geklickt. Klicken Sie, um die Auswahl aller aufzuheben. Die Schaltfläche „Alles auswählen“ selbst folgt ebenfalls der Umschalttransformation

4. Klicken Sie auf die Schaltfläche „Abrechnung“, um das ausgewählte CID-Array zu entfernen Zur Übermittlung an den Server über das Netzwerk finden Sie hier einen Toast zur Demonstration des Ergebnisses.

5. Verwenden Sie Stepper, um Additions- und Subtraktionsoperationen durchzuführen, verwenden Sie auch den Index als Bezeichner und schreiben Sie den Num-Wert nach dem Klicken zurück.

Sechstens: Layout, alles auswählen und am unteren Rand der Kassenschaltfläche ausrichten, die adaptive Höhe des Einkaufswagen-Malls, ähnlich dem Android-Gewicht.

Schritte:

Anfangsdatenrendering

1.1 Layout und Stylesheet

Oben ist eine Produktliste, Unten befindet sich die Schaltfläche „Alles auswählen“ und die Schaltfläche „Sofortige Abrechnung“.

Der linke Teil der Produktliste ist die Miniaturansicht des Produkts, oben rechts der Produkttitel und unten rechts der Produktpreis und die Produktmenge . Die Produktmenge verwendet WXStepper, um Additions- und Subtraktionsoperationen zu implementieren.

js: Initialisieren Sie eine Datenquelle, die häufig aus dem Netzwerk bezogen wird. Weitere Informationen finden Sie unter: https://mp.weixin.qq.com /debug/wxadoc/dev/api/network-request.html

Page({
  data:{
    carts: [
      {cid:1008,title:'Zippo打火机',image:'https://img12.360buyimg.com/n7/jfs/t2584/348/1423193442/572601/ae464607/573d5eb3N45589898.jpg',num:'1',price:'198.0',sum:'198.0',selected:true},
      {cid:1012,title:'iPhone7 Plus',image:'https://img13.360buyimg.com/n7/jfs/t3235/100/1618018440/139400/44fd706e/57d11c33N5cd57490.jpg',num:'1',price:'7188.0',sum:'7188.0',selected:true},
      {cid:1031,title:'得力订书机',image:'https://img10.360buyimg.com/n7/jfs/t2005/172/380624319/93846/b51b5345/5604bc5eN956aa615.jpg',num:'3',price:'15.0',sum:'45.0',selected:false},
      {cid:1054,title:'康师傅妙芙蛋糕',image:'https://img14.360buyimg.com/n7/jfs/t2614/323/914471624/300618/d60b89b6/572af106Nea021684.jpg',num:'2',price:'15.2',sum:'30.4',selected:false},
      {cid:1063,title:'英雄钢笔',image:'https://img10.360buyimg.com/n7/jfs/t1636/60/1264801432/53355/bb6a3fd1/55c180ddNbe50ad4a.jpg',num:'1',price:'122.0',sum:'122.0',selected:true},
    ]
  }
})

Layoutdatei

<view class="container carts-list">
  <view wx:for="{{carts}}" class="carts-item" data-title="{{item.title}}" data-url="{{item.url}}" bindtap="bindViewTap">
    <view>
     <image class="carts-image" src="{{item.image}}" mode="aspectFill"/>
    </view>
   <view class="carts-text">
    <text class="carts-title">{{item.title}}</text>
    <view class="carts-subtitle">
     <text class="carts-price">{{item.sum}}</text>
     <text>WXStepper</text>
    </view>
   </view>
  </view>
</view>

Style Sheet

/*外部容器*/
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
} 

/*整体列表*/
.carts-list {
  display: flex;
  flex-direction: column;
  padding: 20rpx 40rpx;
}

/*每行单元格*/
.carts-item {
  display: flex;
  flex-direction: row;
  height:150rpx;
  /*width属性解决标题文字太短而缩略图偏移*/
  width:100%;
  border-bottom: 1px solid #eee;
  padding: 30rpx 0;
}

/*左部图片*/
.carts-image {
  width:150rpx;
  height:150rpx;
}


/*右部描述*/
.carts-text {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/*右上部分标题*/
.carts-title {
  margin: 10rpx;
  font-size: 30rpx;
}

/*右下部分价格与数量*/
.carts-subtitle {
  font-size: 25rpx;
  color:darkgray;
  padding: 0 20rpx;
  display: flex;
  flex-direction: row;
  justify-content:space-between;
}

/*价格*/
.carts-price {
  color: #f60;
}

1.2 WXStepper integrieren

1.2.1 Komponenteninhalt kopieren

[2016-10-16]

Kopieren Sie den Inhalt von stepper.wxss nach cart.wxss

Kopieren Sie den Inhalt von stepper.wxml nach cart.wxml

Der Unterschied zur vorherigen Einzelkomponente besteht darin, dass das Array minusStatuses ist Hier definiert, dass sie jeder Plus- und Minus-Taste entspricht. Das Zusammenführen in Einkaufswagen ist natürlich kein Problem.

minusStatuses: ['disabled', 'disabled', 'normal', 'normal', 'disabled']

Ersetzen Sie das ursprüngliche statische Zeichen WXStepper durch den folgenden Code

 <view class="stepper">
        <!-- 减号 -->
        <text class="{{minusStatuses[index]}}" data-index="{{index}}" bindtap="bindMinus">-</text>
        <!-- 数值 -->
        <input type="number" bindchange="bindManual" value="{{item.num}}" />
        <!-- 加号 -->
        <text class="normal" data-index="{{index}}" bindtap="bindPlus">+</text>
       </view>

js-Code bindMinus und bindPlus werden wie folgt transformiert:

bindMinus: function(e) {
    var index = parseInt(e.currentTarget.dataset.index);
    var num = this.data.carts[index].num;
    // 如果只有1件了，就不允许再减了
    if (num > 1) {
      num --;
    }
    // 只有大于一件的时候，才能normal状态，否则disable状态
    var minusStatus = num <= 1 ? &#39;disabled&#39; : &#39;normal&#39;;
    // 购物车数据
    var carts = this.data.carts;
    carts[index].num = num;
    // 按钮可用状态
    var minusStatuses = this.data.minusStatuses;
    minusStatuses[index] = minusStatus;
    // 将数值与状态写回
    this.setData({
      carts: carts,
      minusStatuses: minusStatuses
    });
  },
  bindPlus: function(e) {
    var index = parseInt(e.currentTarget.dataset.index);
    var num = this.data.carts[index].num;
    // 自增
    num ++;
    // 只有大于一件的时候，才能normal状态，否则disable状态
    var minusStatus = num <= 1 ? &#39;disabled&#39; : &#39;normal&#39;;
    // 购物车数据
    var carts = this.data.carts;
    carts[index].num = num;
    // 按钮可用状态
    var minusStatuses = this.data.minusStatuses;
    minusStatuses[index] = minusStatus;
    // 将数值与状态写回
    this.setData({
      carts: carts,
      minusStatuses: minusStatuses
    });
  },

Der Effekt ist wie gezeigt:

[2016-10-17]

Korrektur der Anzahl der manuellen Änderungen an einem Array

1.3 Integration von LXCheckboxGroup

Kopieren Sie den Layout-Dateicode nach wxml , wird der Status der Warenkorbprüfung im Netzwerk erfasst.

Der Indexwert wird verwendet, um den Wert js für Durchlaufzwecke zu übergeben.

 <!-- 复选框图标 -->
    <icon wx:if="{{item.selected}}" type="success_circle" size="20" bindtap="bindCheckbox" data-index="{{index}}"/>
    <icon wx:else type="circle" size="20" bindtap="bindCheckbox" data-index="{{index}}"/>

Das Kontrollkästchen ist zentriert

/*复选框样式*/
.carts-list icon {
  margin-top: 60rpx;
  margin-right: 20rpx;
}

Binden Sie das Klick-Kontrollkästchen-Ereignis, um den Auswahlstatus umzukehren.

  bindCheckbox: function(e) {
    /*绑定点击事件，将checkbox样式改变为选中与非选中*/
    //拿到下标值，以在carts作遍历指示用
    var index = parseInt(e.currentTarget.dataset.index);
    //原始的icon状态
    var selected = this.data.carts[index].selected;
    var carts = this.data.carts;
    // 对勾选状态取反
    carts[index].selected = !selected;
    // 写回经点击修改后的数组
    this.setData({
      carts: carts
    });
  }

Rendering:

1.4 Schaltflächen „Alles auswählen“ und „Sofort festlegen“ hinzufügen

1.4.1 Ändern Sie die zu implementierende Layoutdatei Die oben genannten Schaltflächen sind unten ausgerichtet, wobei Flex und feste Höhe verwendet werden.

Reduzieren Sie es auf 3 Zeilen, um zu sehen, ob es noch ganz unten steht. Stellen Sie außerdem sicher, dass es ganz unten hängt und beim Scrollen der Listenelemente nicht gescrollt wird.

 <view class="carts-footer">
    <view bindtap="bindSelectAll">
      <icon wx:if="{{selectedAllStatus}}" type="success_circle" size="20"/>
      <icon wx:else type="circle" size="20" />
      <text>全选</text>
    </view>
    <view class="button">立即结算</view>
  </view>

Früher habe ich zur Implementierung die dezentrale Ausrichtung aller ausgewählten Komponenten und die Schaltfläche „Abrechnung“ verwendet und es hat nicht darauf reagiert folgender Stil

  display: flex;
  flex-direction: row;
  justify-content: space-between;

Stil.

/*底部按钮*/
.carts-footer {
  width: 100%;
  height: 80rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/*复选框*/
.carts-footer icon {
  margin-left: 20rpx;
}

/*全选字样*/
.carts-footer text {
  font-size: 30rpx;
  margin-left: 8rpx;
  line-height: 10rpx;
}

/*立即结算按钮*/
.carts-footer .button {
  line-height: 80rpx;
  text-align: center;
  width:220rpx;
  height: 80rpx;
  background-color: #f60;
  color: white;
  font-size: 36rpx;
  border-radius: 0;
  border: 0;
}

1.4.2 Alle Ereignisse auswählen und die Auswahl aller Ereignisse aufheben

Implementieren Sie das bindSelectAll-Ereignis und ändern Sie den „All-selected“-Status

Definieren Sie zunächst einen Datenwert, um den Gesamtauswahlstatus aufzuzeichnen

selectedAllStatus: false

Ereignisimplementierung:

 bindSelectAll: function() {
    // 环境中目前已选状态
    var selectedAllStatus = this.data.selectedAllStatus;
    // 取反操作
    selectedAllStatus = !selectedAllStatus;
    // 购物车数据，关键是处理selected值
    var carts = this.data.carts;
    // 遍历
    for (var i = 0; i < carts.length; i++) {
      carts[i].selected = selectedAllStatus;
    }
    this.setData({
      selectedAllStatus: selectedAllStatus,
      carts: carts
    });
  }

1.4.3 Bei der sofortigen Abrechnung wird die aktuell ausgewählte CID angezeigt. Bei der Übermittlung an das Internet sollte die Produktmenge in der CID enthalten sein. Das Back-End-Design sollte sich nur auf die CID und die UID konzentrieren.

Die Layoutdatei sollte Begraben Sie auch den Toast. JS muss nur die Anzeige des Toasts ändern.

<toast hidden="{{toastHidden}}" bindchange="bindToastChange">
  {{toastStr}}
</toast>

bindCheckout für sofortige Abrechnung und Popup-CID-Popup-Fenster

 bindCheckout: function() {
    // 初始化toastStr字符串
    var toastStr = 'cid:';
    // 遍历取出已勾选的cid
    for (var i = 0; i < this.data.carts.length; i++) {
      if (this.data.carts[i].selected) {
        toastStr += this.data.carts[i].cid;
        toastStr += &#39; &#39;;
      }
    }
    //存回data
    this.setData({
      toastHidden: false,
      toastStr: toastStr
    });
  },
  bindToastChange: function() {
    this.setData({
      toastHidden: true
    });
  }

1.5 Bottom Floating Fixed

1.5.1 Product list.carts-list Margin-bottom hinzufügen: 80rpx; und ändern Sie den oberen Rand auf Null, damit die unteren Komponenten und die Trennung nicht wiederholt angezeigt werden: 0 40rpx;

1.5.2 Unterer Button.carts-footer Hintergrund hinzufügen: weiß;

1.5 .3 .carts-footer hinzugefügt

  position: fixed;
  bottom: 0;
  border-top: 1px solid #eee;

1.6 Zusammenfassung

1.6.1 Definieren Sie zunächst eine Datenquelle und vergraben Sie sie in der Layoutdatei

total: ''

28f128881ce1cdc57a572953e91f7d0f{{total}}273e21371c5d5e701d3c98517a0bfa41

1.6.2 Allgemeine Zusammenfassungsfunktion

sum: function() {
    var carts = this.data.carts;
    // 计算总金额
    var total = 0;
    for (var i = 0; i < carts.length; i++) {
      if (carts[i].selected) {
        total += carts[i].num * carts[i].price;
      }
    }
    // 写回经点击修改后的数组
    this.setData({
      carts: carts,
      total: &#39;￥&#39; + total
    });
  }

und dann in bindMinus bzw. bindPlus bindCheckbox bindSelectAll ruft this.sum()

in onLoad auf, wie gezeigt:

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

WeChat-Applet zum Erstellen einer Bestellfunktion für Menüs zum Mitnehmen

So implementieren Sie es in der WeChat-Applet-Entwicklung E -Commerce-Warenkorblogik

Das obige ist der detaillierte Inhalt vonEinfaches Beispiel für einen Warenkorb im WeChat-Miniprogramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!