微信小程序实现简单的购物车功能

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

本文实例为大家分享了微信小程序实现简单购物车的具体代码，供大家参考，具体内容如下

实现一个购物车页面，需要哪些数据。整理下大概如下：
一个购物车商品列表(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 class="lazy" data-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) {},
    })
  },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

阅读原文内容投诉