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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序 购物车简单实例

    微信小程序,这里实现购物车功能的小demo,有需要此功能的朋友可以参考下. 摘要: 加减商品数量,汇总价格,全选与全不选 设计思路: 一.从网络上传入以下Json数据格式的数组 1.购物车id:cid 2.标题title 3.数量num 4.图片地址 5.价格price 6.小计 7.是否选中selected 二.点击复选框toggle操作 如已经选中的,经点击变成未选中,反之而反之 点击依据index作为标识,而不用cid,方便遍历 三.全选操作 首次点击即为全部选中,再次点击为全不选,全选按

  • 微信小程序实战篇之购物车的实现代码示例

    哈喽,大家好,快半个月没写了,现在提笔都有点生硬了,一直没更新的原因,一个是代码君也要上班,加上最近工作比较忙,还有就是写文章一直未被认可,所以没什么动力再创作了,那时真的坚持不下去,打算放弃了,感谢读者曹明,一个韩国的研究生读者,支持我,并给我鼓励,期待我更新下一篇,我非常感动,瞬间战斗力恢复,其实你们简单的点赞,评论,都是给我最大的支持,好了,煽情完毕,该讲今天的重点了,购物车,购物车的界面实现到不是很难,难点是处理里面的逻辑,无论是小程序,还是APP,购物车的逻辑都是最难的,下面开始教大家

  • 微信小程序利用swiper+css实现购物车商品删除功能

    要实现的购物车效果如下: 小程序通过bind与catch绑定事件,没有event.stopPropagation()方法. bind:不会阻止冒泡事件向上冒泡, catch:可以阻止冒泡事件向上冒泡 用touchstart.touchmove.touchend实现滑块效果,无法动态js控制何时冒泡何时阻止冒泡,就会出现用bind时,左右上下滑动乱窜:用catch,商品区域只能左右滑动,无法上下滚动 而小程序提供的swiper通过css就可以实现删除滑块效果,同时不影响页面的正常滚动.具体如下 <

  • 微信小程序实现购物车功能

    本文实例为大家分享了微信小程序实现购物车功能的具体代码,供大家参考,具体内容如下 1.购物车界面功能实现 先来弄清楚购物车的需求. 单选.全选和取消,而且会随着选中的商品计算出总价 单个商品购买数量的增加和减少 删除商品.当购物车为空时,页面会变为空购物车的布局 根据设计图,我们可以先实现静态页面.接下来,再看看一个购物车需要什么样的数据. 首先是一个商品列表(carts),列表里的单品需要:商品图(image),商品名(title),单价(price),数量(num),是否选中(selecte

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

    这个微信小程序的购物车功能,通过参照各大电商平台的功能和界面,然后总结出来的. 效果图 功能描述 1.可单选,全选/取消全选 2.增加.减少.手动编辑商品的数量 3.根据商品的数量统计价格 代码实现 此处省略一万字,废话不多说,直接上代码吧! WXML静态布局.绑定"死"数据(主要功能代码) <view class="list"> <block wx:for="{{dataArr}}" wx:key="index&qu

  • 微信小程序实现购物车代码实例详解

    其实购物车都是类似的实现方法,只不过小程序是有他的数据层和业务层,在这里把之前的做法记录一下,分享出来也希望能给需要的小伙伴带来参考价值在最开始的时候先从本地存储中获取购物车数据,因为我们会切换页面 在页面切换的过程中需要实时重新加载购物车的数据,所以我们把获取的方法写在onShow中,而不是onLoad中: onShow: function () { const cart = wx.getStorageSync("cart"); let address = wx.getStorage

  • 微信小程序购物车、父子组件传值及calc的注意事项总结

    前言 在做微信小程序时,觉得小组里对购物车的实现不是很完美,就自己尝试的写了下,然后用到了父子组件传值,父子组件传值的话,和vue框架上是非常相似的,以及calc这个css函数,calc有个注意点,自己不怎么用,一时间有差点忘了,这里记录下 下面话不多说了,来一起看看详细的介绍吧 1.效果图 2.子组件实现 要实现图中删除的效果,使用组件的形式更好做点,我当时本想直接在pages里实现,不过结果就是,滑动时,所有的商品都显示了删除按钮,除非用数组将每个商品要移动的距离存储起来,不过这样的话就很麻

  • 微信小程序实现加入购物车滑动轨迹

    本文实例为大家分享了微信小程序实现加入购物车滑动轨迹的具体代码,供大家参考,具体内容如下 index.wxss .good_box { width: 80rpx; height: 80rpx; position: fixed; border-radius: 50%; overflow: hidden; left: 50%; top: 50%; z-index: 99; } index.wxml <view class="iconfont icongouwuche recommend_ite

  • 微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能

    实现的效果就是: 1.点击全选选中所有商品,再点击全选,取消勾选 2.在选中的同时获取需要的商品id,获取后是以字符串拼接的形式 拼成一个字符串 3.点击删除按钮时删除选中的商品 点击全选 再次点击全选框 wxml关键代码 重要代码 value="{{item.goods_id}}" -->checkbox被选中的值就是这个goods_id checked="{{item.checked}}" -->checked代表选中与否 ,ture选中,false

  • 微信小程序之购物车功能

    前言 以往的购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能. 需求 先来弄清楚购物车的需求. 单选.全选和取消,而且会随着选中的商品计算出总价 单个商品购买数量的增加和减少 删除商品.当购物车为空时,页面会变为空购物车的布局 根据设计图,我们可以先实现静态页面.接下来,再看看一个购物车需要什么样的数据. 首先是一个商品列表(carts),列表里的单品需要:商品图(image),商品名(title),单价(pr

随机推荐