This article mainly introduces relevant information about a simple example of the WeChat mini program shopping cart. Friends who need it can refer to

WeChat mini program. Here is a small demo that implements the shopping cart function. If you need this function Friends can refer to it.

Abstract: Add or subtract product quantity, summarize price, select all or none

Design ideas:

1. From the Internet Upload the array in the following Json data format 1. Shopping cart id: cid 2. Title title 3. Quantity num 4. Image address 5. Price price 6. Subtotal 7. Whether selected

is selected 2. Click Repeat If the marquee toggle operation is already selected, it will become unselected by clicking. On the contrary, the click will be based on index as the identifier instead of cid, which facilitates traversal

3. Select all operation The first click will select all, and then click again Click to unselect all, and the select all button itself will also follow the toggle transformation

4. Click the settlement button to take out the selected cid array for submission to the server through the network. Here is a toast as a demonstration of the result. .

5. Use stepper to perform addition and subtraction operations, also use index as the identifier, and write back the num value after clicking.

6. Layout, select all and align with the bottom of the checkout button, the shopping cart mall adaptive height, similar to Android weight.

Steps:

Initial data rendering

1.1 Layout and style sheet

The top is a product list, and the bottom It is a select all button and an immediate settlement button

The left part of the product list is the product thumbnail, the upper right is the product title, and the lower right is the product price and quantity. The product quantity uses WXStepper to implement addition and subtraction operations

js: Initialize a data source, which is often obtained from the network. For related interfaces, see: https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html

Page({
  data:{
    carts: [
      {cid:1008,title:'Zippo打火機(jī)',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:'得力訂書(shū)機(jī)',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},
    ]
  }
})

Layout file

<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屬性解決標(biāo)題文字太短而縮略圖偏移*/
  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;
}

/*右上部分標(biāo)題*/
.carts-title {
  margin: 10rpx;
  font-size: 30rpx;
}

/*右下部分價(jià)格與數(shù)量*/
.carts-subtitle {
  font-size: 25rpx;
  color:darkgray;
  padding: 0 20rpx;
  display: flex;
  flex-direction: row;
  justify-content:space-between;
}

/*價(jià)格*/
.carts-price {
  color: #f60;
}

1.2 Integrate WXStepper

1.2.1 Copy component content

[2016-10-16]

Copy the content of stepper.wxss to cart.wxss

Copy the contents of stepper.wxml to cart.wxml

The difference from the previous single component is that the array minusStatuses needs to be defined here to correspond to each plus and minus button. Of course, there is no problem in merging it into carts.

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

The original static character WXStepper is replaced with the following code

 <view class="stepper">
        <!-- 減號(hào) -->
        <text class="{{minusStatuses[index]}}" data-index="{{index}}" bindtap="bindMinus">-</text>
        <!-- 數(shù)值 -->
        <input type="number" bindchange="bindManual" value="{{item.num}}" />
        <!-- 加號(hào) -->
        <text class="normal" data-index="{{index}}" bindtap="bindPlus">+</text>
       </view>

js code bindMinus and bindPlus are transformed as follows:

bindMinus: function(e) {
    var index = parseInt(e.currentTarget.dataset.index);
    var num = this.data.carts[index].num;
    // 如果只有1件了，就不允許再減了
    if (num > 1) {
      num --;
    }
    // 只有大于一件的時(shí)候，才能normal狀態(tài)，否則disable狀態(tài)
    var minusStatus = num <= 1 ? &#39;disabled&#39; : &#39;normal&#39;;
    // 購(gòu)物車(chē)數(shù)據(jù)
    var carts = this.data.carts;
    carts[index].num = num;
    // 按鈕可用狀態(tài)
    var minusStatuses = this.data.minusStatuses;
    minusStatuses[index] = minusStatus;
    // 將數(shù)值與狀態(tài)寫(xiě)回
    this.setData({
      carts: carts,
      minusStatuses: minusStatuses
    });
  },
  bindPlus: function(e) {
    var index = parseInt(e.currentTarget.dataset.index);
    var num = this.data.carts[index].num;
    // 自增
    num ++;
    // 只有大于一件的時(shí)候，才能normal狀態(tài)，否則disable狀態(tài)
    var minusStatus = num <= 1 ? &#39;disabled&#39; : &#39;normal&#39;;
    // 購(gòu)物車(chē)數(shù)據(jù)
    var carts = this.data.carts;
    carts[index].num = num;
    // 按鈕可用狀態(tài)
    var minusStatuses = this.data.minusStatuses;
    minusStatuses[index] = minusStatus;
    // 將數(shù)值與狀態(tài)寫(xiě)回
    this.setData({
      carts: carts,
      minusStatuses: minusStatuses
    });
  },

The effect is as shown:

##[2016-10-17]

Correction of saving the number of manual changes to an array

1.3 Integrating LXCheckboxGroup

Copy the layout file code to wxml. Here you need to judge the selected status. Generally, the shopping cart check status is recorded in Network.

The index value is used to pass value js and used for traversal.

 <!-- 復(fù)選框圖標(biāo) -->
    <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}}"/>

The check box is centered

/*復(fù)選框樣式*/
.carts-list icon {
  margin-top: 60rpx;
  margin-right: 20rpx;
}

Bind the click check box event to invert the selection state.

  bindCheckbox: function(e) {
    /*綁定點(diǎn)擊事件，將checkbox樣式改變?yōu)檫x中與非選中*/
    //拿到下標(biāo)值，以在carts作遍歷指示用
    var index = parseInt(e.currentTarget.dataset.index);
    //原始的icon狀態(tài)
    var selected = this.data.carts[index].selected;
    var carts = this.data.carts;
    // 對(duì)勾選狀態(tài)取反
    carts[index].selected = !selected;
    // 寫(xiě)回經(jīng)點(diǎn)擊修改后的數(shù)組
    this.setData({
      carts: carts
    });
  }

Rendering:

1.4 Add select all and immediate settlement buttons

1.4.1 Modify the layout file to achieve The above buttons are aligned at the bottom, using flex and fixed height.

Reduce it to 3 lines to see if it is still at the bottom; in addition, make sure it is suspended at the bottom and will not be scrolled by the scrolling of the list items.

 <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">立即結(jié)算</view>
  </view>

I used Settlement Now before, but I found that it was impossible to achieve dispersed alignment of all selected components and the settlement button, and it did not respond to the following styles

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

Style Table

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

/*復(fù)選框*/
.carts-footer icon {
  margin-left: 20rpx;
}

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

/*立即結(jié)算按鈕*/
.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 Select all and unselect all events

Implement the bindSelectAll event and change the all-selected state

First define a data value to record the all-selected state

selectedAllStatus: false

Event implementation:

 bindSelectAll: function() {
    // 環(huán)境中目前已選狀態(tài)
    var selectedAllStatus = this.data.selectedAllStatus;
    // 取反操作
    selectedAllStatus = !selectedAllStatus;
    // 購(gòu)物車(chē)數(shù)據(jù)，關(guān)鍵是處理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 Immediate settlement displays the currently selected cid for When submitted to the Internet, the product quantity should be included in the cid. The back-end design should only focus on the cid and uid

The layout file should also bury the toast. JS only needs to change the display of the toast.

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

Bind the event bindCheckout for immediate settlement and pop up the cid pop-up window

 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 Add margin-bottom: 80rpx; and modify the top margin to zero so that the bottom components and separation do not appear repeatedly. Padding: 0 40rpx;

1.5.2 Bottom button.carts-footer Add background: white;

1.5 .3 .carts-footer join

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

##1.6 Summary

1.6.1 First define a data source and bury it in the layout file

total: ''

{{total}}

1.6.2 General summary function

sum: function() {
    var carts = this.data.carts;
    // 計(jì)算總金額
    var total = 0;
    for (var i = 0; i < carts.length; i++) {
      if (carts[i].selected) {
        total += carts[i].num * carts[i].price;
      }
    }
    // 寫(xiě)回經(jīng)點(diǎn)擊修改后的數(shù)組
    this.setData({
      carts: carts,
      total: &#39;￥&#39; + total
    });
  }

Then bindMinus This.sum() is called in bindPlus bindCheckbox bindSelectAll onLoad

As shown in the figure:

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

WeChat mini program makes takeout menu ordering function

How to implement it in the development of WeChat mini program E-commerce shopping cart logic

The above is the detailed content of Simple example of shopping cart in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!