微信小程序?qū)崿F(xiàn)購物車功能

更新時間：2020年11月18日 12:01:09 作者：前端設計詩

這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)購物車功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序?qū)崿F(xiàn)購物車功能的具體代碼，供大家參考，具體內(nèi)容如下

1、購物車界面功能實現(xiàn)

先來弄清楚購物車的需求。

單選、全選和取消，而且會隨著選中的商品計算出總價
單個商品購買數(shù)量的增加和減少
刪除商品。當購物車為空時，頁面會變?yōu)榭召徫镘嚨牟季?br />

根據(jù)設計圖，我們可以先實現(xiàn)靜態(tài)頁面。接下來，再看看一個購物車需要什么樣的數(shù)據(jù)。

首先是一個商品列表(carts)，列表里的單品需要：商品圖(image)，商品名(title)，單價(price)，數(shù)量(num)，是否選中(selected)，商品id(id)
然后左下角的全選，需要一個字段(selectAllStatus)表示是否全選了右下角的總價(totalPrice)最后需要知道購物車是否為空(hasList)
知道了需要這些數(shù)據(jù)，在頁面初始化的時候我們先定義好這些。

2、下面是代碼

<view class="main">
 <view wx:if="{{hasList}}">
  <view class="cart-box">
   <view class="cart-list" wx:for="{{carts}}" wx:key="{{index}}">
    <icon wx:if="{{item.selected}}" type="success" color="red" data-index="{{index}}" class="cart-pro-select" bindtap="selectList"/>
    <icon wx:else type="circle" class="cart-pro-select" data-index="{{index}}" bindtap="selectList"/>
    <navigator url="../details/details?id={{item.id}}"><image class="cart-thumb" src="{{item.image}}"/></navigator>
    <text class="cart-pro-name">{{item.title}}</text>
    <text class="cart-pro-price">￥{{item.price}}</text>
    <view class="cart-count-box">
     <text class="cart-count-down" bindtap="minusCount" data-obj="{{obj}}" data-index="{{index}}">-</text>
     <text class="cart-count-num">{{item.num}}</text>
     <text class="cart-count-add" bindtap="addCount" data-index="{{index}}">+</text>
    </view>
     <text class="cart-del" bindtap="deleteList" data-index="{{index}}">x</text>
   </view>
  </view>
   
   <view class="cart-footer">
    <icon wx:if="{{selectAllStatus}}" type="success_circle" color="#fff" class="total-select" bindtap="selectAll"/>
    <icon wx:else type="circle" color="#fff" class="total-select" bindtap="selectAll"></icon>
    <view class="order-icon">
     <navigator url="../orders/orders"><image src="/image/icon3.png" /></navigator>
    </view>
    <text>全選</text>
    <text class="cart-total-price">￥{{totalPrice}}</text>
   </view> 
 </view>
 <view wx:else>
  <view class="cart-no-data">購物車是空的哦</view>
 </view> 
</view>

js:

// page/component/cart/cart.js
Page({

 /**
 * 頁面的初始數(shù)據(jù)
 */
 data: {
  carts: [], //購物車列表
  hasList: false, //列表是否有數(shù)據(jù)
  totalPrice: 0, // 總價 初始為0 
  selectAllStatus: true, // 全選狀態(tài) 默認全選
  obj: {
  name: "hello"
  }
 },

 /**
 * 生命周期函數(shù)--監(jiān)聽頁面加載
 */
 onLoad: function (options) {

 },

 /**
 * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
 */
 onReady: function () {

 },

 /**
 * 生命周期函數(shù)--監(jiān)聽頁面顯示
 */
 onShow: function () {
  this.setData({
   hasList: true, // 含有數(shù)據(jù) 設為true 
   carts: [
   {id: 1, title: '新鮮芹菜 半斤', image:'/image/s5.png',num:4,price: 0.01,seclected:true},
   {id: 2, title: '素米 500g', image: '/image/s6.png', num: 1, price: 0.03, seclected:true}
   ]
  });
  this.getTotalPrice();
 },
 // 當前商品選中事件
 selectList(e) {
 const index = e.currentTarget.dataset.index; //獲取 data 傳進來的index
 let carts = this.data.carts;   // 獲取購物車列表
 const seclected = carts[index].seclected; //獲取當前商品的選中狀態(tài)
 carts[index].seclected = !seclected; // 改變狀態(tài)
 this.setData({
  carts: carts
 });
 this.getTotalPrice();      //重新獲取總價
 },

 // 刪除購物車當前商品
deleteList(e) {
 const index = e.currentTarget.dataset.index;
 let carts = this.data.carts;
 carts.splice(index, 1);     // 刪除購物車列表里這個商品
 this.setData({
 carts: carts
 });
 if (!carts.length) {     // 如果購物車為空
 this.setData({
  hasList: false     // 修改標識為false 顯示購物車為空頁面
 });
 } else {        // 如果不為空 
 this.getTotalPrice();    // 重新計算總價格
 }
},

// 購物車全選事件

selectAll(e) {
 let selectAllStatus = this.data.selectAllStatus; // 是否全選狀態(tài)
 selectAllStatus = !selectAllStatus;
 let carts = this.data.carts;

 for (let i = 0; i < carts.length; i++) {
  carts[i].selected = selectAllStatus;
 }           // 改變所有商品狀態(tài)
 this.setData({
  selectAllStatus: selectAllStatus,
  carts: carts
 });
 this.getTotalPrice();  //重新獲取總價
},

// 綁定加數(shù)量事件
addCount(e) {
 const index = e.currentTarget.dataset.index;
 let carts = this.data.carts;
 let num = carts[index].num;
 num = num + 1;
 carts[index].num = num;
 this.setData({
 carts: carts
 });
 this.getTotalPrice();
},

// 綁定減數(shù)量事件
minusCount(e) {
 const index = e.currentTarget.dataset.index;
 const obj = e.currentTarget.dataset.obj;
 let carts = this.data.carts;
 let num = carts[index].num;
 if (num <= 1) {
  return false;
 }
 num = num - 1;
 carts[index].num = num;
 this.setData({
  carts: carts
 });
 this.getTotalPrice();
},

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

 /**
 * 生命周期函數(shù)--監(jiān)聽頁面隱藏
 */
 onHide: function () {

 },

 /**
 * 生命周期函數(shù)--監(jiān)聽頁面卸載
 */
 onUnload: function () {

 },

 /**
 * 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
 */
 onPullDownRefresh: function () {

 },

 /**
 * 頁面上拉觸底事件的處理函數(shù)
 */
 onReachBottom: function () {

 },

 /**
 * 用戶點擊右上角分享
 */
 onShareAppMessage: function () {

 }
})