DDR爱好者之家 Design By 杰米

这个微信小程序的购物车功能,通过参照各大电商平台的功能和界面,然后总结出来的。

效果图

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

功能描述

1、可单选,全选/取消全选
2、增加、减少、手动编辑商品的数量
3、根据商品的数量统计价格 

代码实现

此处省略一万字,废话不多说,直接上代码吧!

WXML静态布局、绑定“死”数据(主要功能代码)

<view class="list">
 <block wx:for="{{dataArr}}" wx:key="index" wx:for-item="item">
  <view class="li clearfix">
  <!-- 单品选择按钮 -->
  <view class="check" wx:if="{{item.selected}}" bindtap="selectList" data-index="{{index}}"><text class="iconfont icon-dagou"></text></view>
  <view class="check" wx:else bindtap="selectList" data-index="{{index}}"><text class="iconfont icon-choose"></text></view>
 
  <view class="img fl"><image src="/UploadFiles/2021-04-02/{{item.image}}">

WXSS:样式有点多,就不放上来啦,需要的可以留下你的邮箱地址哦 

JS:

当页面刚加载进来,当然要先onShow一下,默认全选,统计购物车里所有商品的价格。PS:这里建议用onShow,因为每次进入购物车都需要重新加载数据,而onLoad和onReady只在初始化的时候执行一次。

onShow() {
 this.getTotalPrice();
}

统计总价(该页面还有其它地方需要调用到这个方法)

// 统计总价
getTotalPrice() {
 // 获取购物车列表
 let dataArr = this.data.dataArr;
 let total = 0;
 // 循环列表
 for(let i = 0; i<dataArr.length; i++) {
 // 判断选中才会计算价格
 if(dataArr[i].selected) {
  // 所有价格加起来
  total += dataArr[i].num * dataArr[i].price;
 }
 }
 // 赋值到data中渲染到页面
 this.setData({ 
 dataArr: dataArr,
 totalPrice: total.toFixed(2)
 });
}

选择商品(单选),通过 data-index="{{index}}" 把当前商品在列表数组中的下标传给事件,在更改单个商品的状态时,也要注意全选的状态,还有重新统计总价。

// 选择事件
selectList(e) {
 // 获取data- 传进来的index
 let index = e.currentTarget.dataset.index;
 // 获取购物车列表
 let dataArr = this.data.dataArr;
 // 获取当前商品的选中状态
 let selected = dataArr[index].selected;
 // 改变状态
 dataArr[index].selected = !selected;
 this.setData({
 dataArr: dataArr
 });
 
 // 改变全选状态
 for (var i=0; i<this.data.dataArr.length; i++){
 // 当状态为全选时,每个元素其中有一个为false,则取消全选
 // 当状态为非全选时,每个元素都为true,则全选
 if(this.data.selectAllStatus){
  if(!this.data.dataArr[i].selected){
  this.setData({
   selectAllStatus: false
  });
  break;
  }
 }else {
  if(this.data.dataArr[i].selected){
  this.setData({
   selectAllStatus: true
  });
  }else {
  this.setData({
   selectAllStatus: false
  });
  break;
  }
 }
 }
 
 // 重新统计总价
 this.getTotalPrice();
}

商品全选/取消全选,该状态更改之后也要重新统计总价哦,包括后面的,我就不再提示了

// 全选事件
selectAll(e) {
 // 是否全选状态
 let selectAllStatus = this.data.selectAllStatus;
 selectAllStatus = !selectAllStatus;
 let dataArr = this.data.dataArr;
 for (let i = 0; i < dataArr.length; i++) {
 // 改变所有商品状态
 dataArr[i].selected = selectAllStatus;
 }
 this.setData({
 selectAllStatus: selectAllStatus,
 dataArr: dataArr
 });
 // 重新统计总价
 this.getTotalPrice();
}

另外,还有增加或减少数量的方法。

温馨提示:减少数量时注意不能少于1(参考某宝商城的做法)

// 增加数量
addCount(e) {
 let index = e.currentTarget.dataset.index;
 let dataArr = this.data.dataArr;
 let num = dataArr[index].num;
 num = num + 1;
 dataArr[index].num = num;
 this.setData({
 dataArr: dataArr
 });
 // 重新统计总价
 this.getTotalPrice();
},
 
// 减少数量
minusCount(e) {
 let index = e.currentTarget.dataset.index;
 let dataArr = this.data.dataArr;
 let num = dataArr[index].num;
 if(num <= 1){
 wx.showToast({
  title: '宝贝不能再减少啦',
  icon: 'none'
 })
 return false;
 }
 num = num - 1;
 dataArr[index].num = num;
 this.setData({
 dataArr: dataArr
 });
 // 重新统计总价
 this.getTotalPrice();
}

然后,还有手动输入数量的方法

// 输入数量
inputCount(e) {
 let index = e.currentTarget.dataset.index;
 let dataArr = this.data.dataArr;
 let num = e.detail.value;
 dataArr[index].num = num;
 this.setData({
 dataArr: dataArr
 });
 // 重新统计总价
 this.getTotalPrice();
}

别忘了,手动输入数量也要有不能少于1的判断哦,我这里是在input失去焦点时做的判断,当然也是参考某宝商城的做法

// 失去焦点时判断数量是否小于1
bindblur(e) {
 let index = e.currentTarget.dataset.index;
 let dataArr = this.data.dataArr;
 let num = e.detail.value;
 if(num < 1){
 wx.showToast({
  title: '数量不能小于1',
  icon: 'none'
 })
 num = 1;
 dataArr[index].num = num;
 this.setData({
  dataArr: dataArr
 });
 // 重新统计总价
 this.getTotalPrice();
 }
}

最后,就是去结算了,在处理完一堆噼里啪啦的业务之后,跳转到结算页面

// 去结算
toOrder() {
 // 处理数据
 // *****
 // Author: Moss
 // QQ: 827291427
 // *****
 
 // 跳转结算页面
 wx.navigateTo({
 url: '/pages/shop/order/order'
 })
}

虽然,购物车的功能没有太难,但是涉及到的微信小程序的知识点还是挺多的,可以从中学习并掌握!

希望能帮到浏览这篇文章的你,当然更希望你能在阅读之后自己能写出来,而不是复制粘贴来敷衍任务。

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

DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?