微信小程序實現簡單購物車功能

Posted on by

這個微信小程序的購物車功能，通過參照各大電商平臺的功能和界面，然後總結出來的。

效果圖

功能描述

1、可單選，全選/取消全選
2、增加、減少、手動編輯商品的數量
3、根據商品的數量統計價格 

代碼實現

此處省略一萬字，廢話不多說，直接上代碼吧！

WXML靜態佈局、綁定“死”數據（主要功能代碼）

<view class="list">
 <block wx:for="{{dataArr}}" wx:key="index" wx:for-item="item">
  <view class="li clearfix">
  <!-- 單品選擇按鈕 -->
  <view class="check" wx:if="{{item.selected}}" bindtap="selectList" data-index="{{index}}"><text class="iconfont icon-dagou"></text></view>
  <view class="check" wx:else bindtap="selectList" data-index="{{index}}"><text class="iconfont icon-choose"></text></view>
 
  <view class="img fl"><image src="{{item.image}}" mode="aspectFill"></image></view>
  <view class="right fr">
   <view class="title ellipsis-2">{{item.title}}</view>
 
   <!-- 增加減少編輯數量 -->
   <view class="num_w clearfix">
   <view class="fl" bindtap="minusCount" data-index="{{index}}">-</view>
   <view class="fl num"><input type="number" value="{{item.num}}" bindinput="inputCount" bindblur="bindblur" data-index="{{index}}" /></view>
   <view class="fl" bindtap="addCount" data-index="{{index}}">+</view>
   </view>
 
   <view class="price">￥{{item.price}}</view>
  </view>
  </view>
 </block>
 </view>
 <view class="bottom clearfix">
 <!-- 全選/取消全選按鈕 -->
 <view class="check fl">
  <text class="iconfont icon-dagou" wx:if="{{selectAllStatus}}" bindtap="selectAll"></text>
  <text class="iconfont icon-choose" wx:else bindtap="selectAll"></text>
  <text class="text">全選</text>
 </view>
 
 <view class="button gradientButton fr"><button bindtap="toOrder">去結算</button></view>
 
 <!-- 總價 -->
 <view class="price fr">合計：<text>￥{{totalPrice}}</text></view>
</view>

WXSS：樣式有點多，就不放上來啦，需要的可以留下你的郵箱地址哦 

JS：

當頁面剛加載進來，當然要先onShow一下，默認全選，統計購物車裡所有商品的價格。PS：這裡建議用onShow，因為每次進入購物車都需要重新加載數據，而onLoad和onReady隻在初始化的時候執行一次。

onShow() {
 this.getTotalPrice();
}

統計總價（該頁面還有其它地方需要調用到這個方法）

// 統計總價
getTotalPrice() {
 // 獲取購物車列表
 let dataArr = this.data.dataArr;
 let total = 0;
 // 循環列表
 for(let i = 0; i<dataArr.length; i++) {
 // 判斷選中才會計算價格
 if(dataArr[i].selected) {
  // 所有價格加起來
  total += dataArr[i].num * dataArr[i].price;
 }
 }
 // 賦值到data中渲染到頁面
 this.setData({ 
 dataArr: dataArr,
 totalPrice: total.toFixed(2)
 });
}

選擇商品（單選），通過 data-index=”{{index}}” 把當前商品在列表數組中的下標傳給事件，在更改單個商品的狀態時，也要註意全選的狀態，還有重新統計總價。

// 選擇事件
selectList(e) {
 // 獲取data- 傳進來的index
 let index = e.currentTarget.dataset.index;
 // 獲取購物車列表
 let dataArr = this.data.dataArr;
 // 獲取當前商品的選中狀態
 let selected = dataArr[index].selected;
 // 改變狀態
 dataArr[index].selected = !selected;
 this.setData({
 dataArr: dataArr
 });
 
 // 改變全選狀態
 for (var i=0; i<this.data.dataArr.length; i++){
 // 當狀態為全選時，每個元素其中有一個為false，則取消全選
 // 當狀態為非全選時，每個元素都為true，則全選
 if(this.data.selectAllStatus){
  if(!this.data.dataArr[i].selected){
  this.setData({
   selectAllStatus: false
  });
  break;
  }
 }else {
  if(this.data.dataArr[i].selected){
  this.setData({
   selectAllStatus: true
  });
  }else {
  this.setData({
   selectAllStatus: false
  });
  break;
  }
 }
 }
 
 // 重新統計總價
 this.getTotalPrice();
}

商品全選/取消全選，該狀態更改之後也要重新統計總價哦，包括後面的，我就不再提示瞭

// 全選事件
selectAll(e) {
 // 是否全選狀態
 let selectAllStatus = this.data.selectAllStatus;
 selectAllStatus = !selectAllStatus;
 let dataArr = this.data.dataArr;
 for (let i = 0; i < dataArr.length; i++) {
 // 改變所有商品狀態
 dataArr[i].selected = selectAllStatus;
 }
 this.setData({
 selectAllStatus: selectAllStatus,
 dataArr: dataArr
 });
 // 重新統計總價
 this.getTotalPrice();
}

另外，還有增加或減少數量的方法。

溫馨提示：減少數量時註意不能少於1（參考某寶商城的做法）

// 增加數量
addCount(e) {
 let index = e.currentTarget.dataset.index;
 let dataArr = this.data.dataArr;
 let num = dataArr[index].num;
 num = num + 1;
 dataArr[index].num = num;
 this.setData({
 dataArr: dataArr
 });
 // 重新統計總價
 this.getTotalPrice();
},
 
// 減少數量
minusCount(e) {
 let index = e.currentTarget.dataset.index;
 let dataArr = this.data.dataArr;
 let num = dataArr[index].num;
 if(num <= 1){
 wx.showToast({
  title: '寶貝不能再減少啦',
  icon: 'none'
 })
 return false;
 }
 num = num - 1;
 dataArr[index].num = num;
 this.setData({
 dataArr: dataArr
 });
 // 重新統計總價
 this.getTotalPrice();
}

然後，還有手動輸入數量的方法

// 輸入數量
inputCount(e) {
 let index = e.currentTarget.dataset.index;
 let dataArr = this.data.dataArr;
 let num = e.detail.value;
 dataArr[index].num = num;
 this.setData({
 dataArr: dataArr
 });
 // 重新統計總價
 this.getTotalPrice();
}

別忘瞭，手動輸入數量也要有不能少於1的判斷哦，我這裡是在input失去焦點時做的判斷，當然也是參考某寶商城的做法

// 失去焦點時判斷數量是否小於1
bindblur(e) {
 let index = e.currentTarget.dataset.index;
 let dataArr = this.data.dataArr;
 let num = e.detail.value;
 if(num < 1){
 wx.showToast({
  title: '數量不能小於1',
  icon: 'none'
 })
 num = 1;
 dataArr[index].num = num;
 this.setData({
  dataArr: dataArr
 });
 // 重新統計總價
 this.getTotalPrice();
 }
}

最後，就是去結算瞭，在處理完一堆噼裡啪啦的業務之後，跳轉到結算頁面

// 去結算
toOrder() {
 // 處理數據
 // *****
 // Author: Moss
 // QQ: 827291427
 // *****
 
 // 跳轉結算頁面
 wx.navigateTo({
 url: '/pages/shop/order/order'
 })
}

雖然，購物車的功能沒有太難，但是涉及到的微信小程序的知識點還是挺多的，可以從中學習並掌握！

希望能幫到瀏覽這篇文章的你，當然更希望你能在閱讀之後自己能寫出來，而不是復制粘貼來敷衍任務。

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：