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

本文小編為大家詳細介紹“微信小程序如何實現簡單的購物車功能”，內容詳細，步驟清晰，細節處理妥當，希望這篇“微信小程序如何實現簡單的購物車功能”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

實現一個購物車頁面，需要哪些數據。整理下大概如下：
一個購物車商品列表(carts)，列表里的單個item包含：商品id(id)，商品圖(image)，商品名(title)，單價(price)，數量(amount)，單選按鈕(selected)；
全選按鈕，需要一個字段(selectAllStatus)表示是否全選；
總價(totalPrice)；
總數量（totalNum）。
還有一個需要判斷的是購物車是否為空(hasList)的字段。
購物車主要的幾個功能：商品數量的加減、單選、全選、計算總價格、總數量、商品刪除。

wxml代碼：

<!-- 購物車商品列表 -->
<view class="list">
  <view wx:if="{{hasList}}">
    <block wx:for="{{carts}}" wx:key="id">
      <view class="item-section" bindlongpress="delItem" data-index="{{index}}">
        <!-- 單選按鈕 是否選中顯示不同的圖標 -->
        <view class="radio-section" wx:if="{{item.selected}}" data-index="{{index}}" bindtap="changeSelect">
          <icon type="success_circle" color="#f00"></icon>
        </view>
        <view class="radio-section" wx:else  data-index="{{index}}" bindtap="changeSelect">
          <icon type="circle" color="#ccc"></icon>
        </view>
        
        <view class="cart-info">
          <view class="img">
          <!-- 圖片跳轉到詳情頁 -->
          <navigator  url="/pages/good-detail/good-detail?productId={{item.prodId}}">
            <image src="{{item.prodPic}}" mode="aspectFill" />
          </navigator>
          </view>
          <view class="info-rt">
            <view class="title">{{item.prodName}}</view>
            <view>
              <view class="price">￥{{item.prodPrice}}</view>
              <!-- 數量加減操作 -->
              <view class="numarea">
                <text class="sign num-minus" data-types="minus" data-index="{{index}}" bindtap="changeNum">-</text>
                <text class="num-input">{{item.amount}}</text>
                <text class="sign num-plus" data-types="plus" data-index="{{index}}" bindtap="changeNum">+</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </block>
  </view>

  <view wx:else>
    <view>購物車還沒有商品哦~~</view>
    <navigator open-type='switchTab' url="/pages/allproduct/allproduct" class="toShopping">去逛逛</navigator>
  </view>
</view>

<!-- 底部操作欄 -->
<view class="bottom-box">
  <view class="select-all" wx:if="{{selectAllStatus}}" data-select="{{selectAllStatus}}" bindtap="selectAll">
    <icon type="success_circle" color="#f00"></icon>
    <text>全選</text>
  </view>
  <view class="select-all" wx:else bindtap="selectAll">
    <icon type="circle" color="#ccc"></icon>
    <text>全選</text>
  </view> 
  <view class="total-price">合計:￥{{totalPrice}}</view>
  <view class="toBuy" bindtap="submitOrder" data-num ="{{totalNum}}">去結算（{{totalNum}}）</view>
</view>

代碼實現：

初始展示購物車商品

Page({
  /**
   * 頁面的初始數據
   */
    data: {
    carts: [], //購物車商品列表
    hasList: false, // 列表是否有數據
    totalPrice: 0, // 總價，初始為0
    totalNum: 0, //去結算括號里的總數量
    selectAllStatus: false, // 全選狀態
    userId: '',
   },
    //根據userId得到購物車列表數據
  getList: function() {
    let that = this
    let userId = that.data.userId
    let carts = that.data.carts
    wx.request({
      url: 'xxx.com/api/ShoppingCar/getShoppingCar?userId=' + userId,
      header: {
        'content-type': 'application/json'
      },
      method: 'GET',
      success: function(res) {
        console.log(res)
        let items = res.data.items
        //當購物車不為空才進行后續判斷操作
        if(items !== null){
          if (items.length > 0) {
            that.setData({
              hasList: true, // 有數據了，那設為true
              carts: res.data.items,
              shoppingCarId: res.data.shoppingCarId,
              buyerId: res.data.buyerId
            })
          } else {
            console.log('購物車沒有商品')
          }
        } else{
          return false
        }
      },
      fail: function(res) {},
      complete: function(res) {},
    })
  },
  
  onShow: function(){
      //onLoad 和onReady 只執行一次 所以數據放在onshow里每次打開頁面都會執行
     this.getList()
     this.calcTotalPrice()
     this.totalNum()
   }
 })

商品數量的加減：點擊+號，amount 加1，點擊-號，如果amount > 1，則減1；利用wxml頁面中綁定的type屬性，直接在方法中判斷是操作加號還是減號

//加減按鈕操作
  changeNum: function(e) {
    //console.log(e)
    let that = this
    let types = e.target.dataset.types, //加和減按鈕上分別設置了types屬性
      index = e.target.dataset.index,
      cartsData = that.data.carts; //初始購物車列表數據
    console.log(cartsData[index])
    let amount = cartsData[index].amount
    if (types == 'minus') {
      if (amount <= 1) { //不允許購物車數量低于1
        wx.showToast({
          title: '數量不能少于1',
        })
        return false
      } else {
        amount = amount - 1
        cartsData[index].amount = amount
        //修改數量后重新渲染頁面
        that.setData({
          carts: cartsData
        })
      }
    }
    if (types == 'plus') {
      amount = amount + 1
      cartsData[index].amount = amount
      that.setData({
        carts: cartsData
      })
    }
    that.calcTotalPrice()
    that.totalNum()
    wx.request({
      url: 'xxx.com/api/ShoppingCarItem/uptTransItem',
      data: {
        "transItemId": cartsData[index].transItemId,
        "prodId": cartsData[index].prodId,
        "amount": cartsData[index].amount,
        "shoppingCarId": cartsData[index].shoppingCarId
      },
      header: {
        'content-type': 'application/json'
      },
      method: 'POST',
      success: function(res) {
        console.log(res)
      },
      fail: function(res) {},
      complete: function(res) {},
    })
  },

單選事件：

//單個商品選中事件
changeSelect: function(e) {
    //console.log(e)
    let cartsData = this.data.carts
    let index = e.currentTarget.dataset.index
    //切換選中狀態
    cartsData[index].selected = !cartsData[index].selected
    // 循環數組數據，判斷----選中/未選中[selected]
    //新定義一個flag, 當循環商品的選中狀態為true,flag+1;所有商品都為選中狀態，則為全選
    let flag = 0
    for (let i = 0, len = cartsData.length; i < len; i++) {
      if (cartsData[i].selected == true) {
        flag += 1
      }
    }
    if (cartsData.length == flag) {
      this.data.selectAllStatus = true;
    } else {
      this.data.selectAllStatus = false;
    }
    this.setData({
      carts: cartsData,
      selectAllStatus: this.data.selectAllStatus
    })
    this.calcTotalPrice()
    this.totalNum()
  },

全選事件：

//購物車全選按鈕
  selectAll: function(e) {
    //console.log(e)
    let selectAllStatus = e.currentTarget.dataset.select; //先判斷是否為全選
    let cartsData = this.data.carts
    //將true 轉為 false(所有商品未選中狀態)
    selectAllStatus = !selectAllStatus
    for (let i = 0, len = cartsData.length; i < len; i++) {
      cartsData[i].selected = selectAllStatus
    }
    // 頁面重新渲染
    this.setData({
      selectAllStatus: selectAllStatus,
      carts: cartsData
    })
    this.calcTotalPrice()
    this.totalNum()
  },

計算總價格：

//計算商品總價
//總價 = 選中的商品1的 價格 * 數量 + 選中的商品2的 價格 * 數量 + ...
  calcTotalPrice: function() {
    //獲取商品列表數據
    let cartsData = this.data.carts
    //聲明一個變量接收數組列表price
    let total = 0
    for (let i = 0, len = cartsData.length; i < len; i++) {
      if (cartsData[i].selected) { //判斷選中才會計算價格
        total += cartsData[i].amount * cartsData[i].prodPrice;
      }
    }
    this.setData({ // 最后賦值到data中渲染到頁面
      carts: cartsData,
      totalPrice: total.toFixed(2)
    });
  },

計算總數量：

//總數量
  totalNum: function() {
    let cartsData = this.data.carts
    //新定義初始變量
    let totalNum = 0
    for (let i = 0, len = cartsData.length; i < len; i++) {
      if (cartsData[i].selected) {
        totalNum += cartsData[i].amount
      }
    }
    this.setData({
      totalNum: totalNum
    })
  },

刪除單個商品：

//刪除商品
  delItem: function(e) {
    //console.log(e)
    let that = this
    let cartsData = that.data.carts
    let index = e.currentTarget.dataset.index
    wx.request({
      url: 'xxx.com/api/ShoppingCarItem/delTransItem?value=' + cartsData[index].transItemId,
      header: {
        'content-type': 'application/json'
      },
      method: 'POST',
      success: function(res) {
        console.log(res)
        wx.showModal({
          title: '提示',
          content: '確認刪除嗎',
          success: function(res) {
        console.log(res)
        wx.showModal({
          title: '提示',
          content: '確認刪除嗎',
          success: function(res) {
            console.log(res)
            if (res.confirm) {
              cartsData.splice(index, 1)  //刪除購物車列表里這個商品
              that.setData({
                carts: cartsData
              })
              that.calcTotalPrice()
              that.totalNum()
              // 如果購物車為空
              if (cartsData.length == 0) {
                that.setData({ //修改標識為false，顯示購物車為空頁面
                  hasList: false
                });
              }
            }
          }
        })
      },
      fail: function(res) {},
      complete: function(res) {},
    })
  },

讀到這里，這篇“微信小程序如何實現簡單的購物車功能”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。