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

Posted on by

本文實例為大傢分享瞭微信小程序實現簡單購物車的具體代碼，供大傢參考，具體內容如下

實現一個購物車頁面，需要哪些數據。整理下大概如下：
一個購物車商品列表(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) {},
    })
  },

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

推薦閱讀：