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

在我的GitHub上有校园二手交易微信小程序的源码，这里面包含了购物车的功能，GitHub地址：https://github.com/zhuyuzhu/Secondhand-goods-on-campus，该项目的pages文件夹下的shoppingCart文件夹就是购物车的代码。

购物车功能实现的逻辑：

（1）从服务器拿到的物品数据data里面，只有物品的信息，我们需要给每个物品数据中加入一个是否选中的属性

这样当我们在点击选择按钮的时候，就可以选中该物品，当再次点击的时候，就可以取消选择。

其中几个主要的功能：

（1）物品请求数据，使用微信小程序request请求，POST方式得到服务器传来的物品数据。

每次请求要想后端传入用户id和物品id（物品id根据后端要求进行处理，我每次传入请求到的物品中最后一个物品的id，后端会把这个id之后的5个值再传给前端）才得到的物品数据，每一次请求要判断还有没有数据，有数据则请求成功，没有数据就不请求。

（2）选中和取消选中单个物品

（3）选中或取消选中物品时，总价格要进行加减

每次触发选择事件，都会触发计算总价的方法

（4）全选按钮，实现物品的全选

当用户通过单选选择了所有物品时，“全选按钮”会自动改变为选中样式；当用户通过“全选按钮”选择所有商品的时候，每个商品都应该是选中状态。

（5）计算总价

任何一次触发该函数，都会重新计算价格，将总价变为0，再进行选中项的价格累加，而不是在原总价上累加或减某一个商品的价格

wxml代码：

<!--pages/shoppingCart/shoppingCart.wxml-->
<view class='box'><view class='wrapper'><view class="tab-content {{selectBook? 'select': 'noSelect'}}" bindtap='chooseBookCart'>书本</view><view class="tab-content {{selectThing? 'select': 'noSelect'}}" bindtap='chooseThingCart'>物品</view></view>
</view>
<!-- 书本 -->
<view class="cart-box" wx:if="{{selectBook}}"><!-- wx:for 渲染购物车列表 --><view wx:for="{{carts}}" wx:key="{{carts}}" class='cart-goods'><!-- wx:if 是否选择显示不同图标 --><view class='icon-wrapper' bindtap="selectList" data-index="{{index}}"><icon wx:if="{{item.selected}}" class='cart-icon' type="success" color="red"  /><icon wx:else type="circle" class='cart-icon'  /></view><view  class='cart-img'><image class="cart-thumb" src="{{item.picture}}"></image><view class='cart-message'><text class='name'>书名：{{item.bname}}</text><text class='author'>作者：{{item.author}}</text><text class='press'>出版社：{{item.press}}</text><text class='price'>价格：￥{{item.bprice}}</text></view></view><!-- 点击商品图片可跳转到商品详情 --><!-- 删除按钮 --><text bindtap="deleteList" data-index="{{index}}" class='delete'> × </text></view><view wx:if="{{isMyCartShow}}" class='bottom'>没有书本啦~_~</view>
</view>
<!-- 物品 -->
<view class="cart-box" wx:if="{{selectThing}}"><!-- wx:for 渲染购物车列表 --><view wx:for="{{thingCarts}}" wx:key="{{thingCarts}}" class='cart-goods'><!-- wx:if 是否选择显示不同图标 --><view class='icon-wrapper' bindtap="selectListThing" data-index="{{index}}"><icon wx:if="{{item.selected}}" class='cart-icon' type="success" color="red"  /><icon wx:else type="circle" class='cart-icon'  /></view><view  class='cart-img'><image class="cart-thumb" src="{{item.gpicture}}"></image><view class='cart-message'><text class="name">{{item.gname}}</text><text class="author">校区：{{item.gcollege}}</text><text class='author'>成色：{{item.gstatus}}</text><text class='author'>发布者：{{item.usersname}}</text><text class='price'>￥{{item.gprice}}</text></view></view><!-- 点击商品图片可跳转到商品详情 --><!-- 删除按钮 --><text bindtap="deleteListThing" data-index="{{index}}" class='delete'> × </text></view><view wx:if="{{isThingCartShow}}" class='bottom'>没有物品啦~_~</view>
</view>
<!-- 底部操作栏 -->
<view class='cart-bottom'><!-- wx:if 是否全选显示不同图标 --><icon wx:if="{{selectAllStatus}}" class='cart-iconAll' type="success_circle" color="red" bindtap="selectAll" /><icon wx:else type="circle" class='cart-iconAll' color="#ff7100" bindtap="selectAll" /><text class='cart-allSelect' bindtap="selectAll">全选</text><!-- 总价 --><text class='cart-allPrice'>合计:</text><text class='allPrice'>￥{{totalPrice}}</text><button class='btn-red' bindtap='toBuy' form-type='submit'>去结算</button>
</view>

wxss代码：

/* pages/shoppingCart/shoppingCart.wxss */
.wrapper {position: fixed;top: 0rpx;display: flex;width: 100%;height: 50rpx;justify-content: space-around;background-color: #fff;z-index: 9999;
}
.select {text-align: center;width: 50%;background-color: green;color: #fff;
}
.noSelect {width: 50%;text-align: center;
}
.cart-box {margin-top: 50rpx;margin-bottom: 100rpx;
}
.cart-goods {display: flex;flex-direction: row;padding: 30rpx;border-bottom: 3rpx solid #e6e6e6;
}
.icon-wrapper {line-height: 260rpx;
}.cart-icon {display: inline-block;margin: auto 10rpx;margin-left: -10rpx;}.cart-img {display: flex;width: 580rpx;height: 260rpx;
}
.cart-img image{margin: auto 0rpx;width: 165rpx;height: 225rpx;
}.cart-goods .cart-message {width: 380rpx;display: flex;flex-direction: column;margin: 0 20rpx;justify-content: space-around;}.name{font-weight: 600;color: #4a4a4a;font-size: 32rpx;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
}.author,.press{font-size: 28rpx;color: #9e9e9e;font-weight: 300;white-space: nowrap;text-overflow: ellipsis;overflow: hidden; }.price {font-size: 28rpx;color: #f40;font-weight: 300;white-space: nowrap;text-overflow: ellipsis;overflow: hidden; }.delete {position: absolute;right: 40rpx;margin-top: -10rpx;}.cart-bottom {position: fixed;width: 100%;height: 100rpx;background-color: white;bottom: 0rpx;}.cart-allPrice {float:left;padding: 0.5rem;font-weight: 100;margin-left: 70rpx;}.allPrice {float:left;padding: 0.5rem;font-weight: 100;margin-left: -30rpx;color: #f40;}.cart-allSelect {float:left;padding: 0.5rem;margin-left: -23rpx;font-weight: 100}.cart-iconAll {float:left;padding: 0.5rem;margin-top: 7rpx;}.btn-red {background-color: #f44336; /* 红色 */font-size: 40rpx;
}
button {position: fixed;right: 0;color: white;text-align: center;display: inline-block;font-size: 30rpx;border-radius: 0rpx;width: 30%;height: 100rpx;line-height: 100rpx;
}
.cart-list {display: flex;flex-direction: column;
}
.bottom {color: #666;text-align: center;font-size: 30rpx;}

微信js代码：

// pages/shoppingCart/shoppingCart.js
var app = getApp();
const orginalPrice = 0; //由于0.00在赋值时是0，用toFixed()取余
Page({/*** 页面的初始数据*/data: {selectTab: true,selectBook: true,selectThing: false, carts: [], // 购物车列表hasList: false, // 列表是否有数据totalPrice: orginalPrice.toFixed(2), // 总价，初始为0selectAllStatus: false, // 全选状态，默认全选bookId: '',isMyCartShow: false,studentId: '', myCartBookLength: '5',bookPrice: 0,thingId: '',thingCarts: [], // 物品列表isThingCartShow: false,myCartThingLength: '5',thingPrice: 0,},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {var that = this;var studentId = that.data.studentId;var hasList = that.data.hasList;try {var value = wx.getStorageSync('studentIdSync')if (value) {console.log(value); //同步得到studentId的值that.setData({studentId: value})}} catch (e) {console.log(0);}this.getBookCartList()},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {// 动态设置导航条标题wx.setNavigationBarTitle({title: '购物车'});wx.showNavigationBarLoading(); //在标题栏中显示加载图标setTimeout(function(){wx.stopPullDownRefresh(); //停止加载wx.hideNavigationBarLoading(); //隐藏加载icon},2000)},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {if (this.data.selectBook){this.getBookCartList()}else {this.getThingCartList()}},
getBookCartList(){console.log(1);var that = this;var url = app.globalData.huanbaoBase + 'getbooksbystudentid.php'var ismyCartShow = that.data.ismyCartShow;var carts = that.data.carts;var bookId = that.data.bookId;var myCartBookLength = that.data.myCartBookLength;var studentId = that.data.studentId;console.log(bookId, myCartBookLength);// if (myCartBookLength < 5) {//   that.setData({//     isMyCartShow: true//   })//   return// }wx.showToast({title: '加载中',icon: 'loading',duration: 1000,})wx.request({url,method: 'POST',header: { 'content-type': 'application/x-www-form-urlencoded ' },data: { //此处设置，一定要与后台一一对应，属性名和属性的先后位置。studentId: studentId,lastId: bookId,},success: res => {var carts = that.data.carts || [];var data = res.data.data;  console.log(data);if(data === undefined) {wx.hideToast()that.setData({isMyCartShow: true})return }that.setData({myCartBookLength: data.length  //每次获取5组值})myCartBookLength = data.length; that.setData({bookId: res.data.data[myCartBookLength - 1].bookid})console.log(myCartBookLength);data.forEach(item => {let messege = {selected: false,...item}carts.push(messege); //实现购物车的最近添加的物品，展现在最前面})that.setData({carts:  carts ,})},fail: err => {console.log(err);}})
},getThingCartList() {console.log(1);var that = this;var url = app.globalData.huanbaoBase + 'getthingsbystudentid.php'var isThingCartShow = that.data.isThingCartShow;var thingCarts = that.data.thingCarts;var thingId = that.data.thingId;var myCartThingLength = that.data.myCartThingLength;var studentId = that.data.studentId;var selectBook = that.data.selectBook;var selectThing = that.data.selectThing;console.log(thingId, myCartThingLength);// if (myCartThingLength < 5) {//   that.setData({//     isThingCartShow: true//   })//   return// }wx.showToast({title: '加载中',icon: 'loading',duration: 1000,})wx.request({url,method: 'POST',header: { 'content-type': 'application/x-www-form-urlencoded ' },data: { //此处设置，一定要与后台一一对应，属性名和属性的先后位置。studentId: studentId,lastId: thingId,},success: res => {var thingCarts = that.data.thingCarts || [];var data = res.data.data;console.log(data);if (data === undefined) {wx.hideToast()that.setData({isThingCartShow: true})return}that.setData({myCartThingLength: data.length  //每次获取5组值})myCartThingLength = data.length;that.setData({thingId: res.data.data[myCartThingLength - 1].goodid})console.log(myCartThingLength);data.forEach(item => {let messege = {selected: false,...item}thingCarts.push(messege); //实现购物车的最近添加的物品，展现在最前面})that.setData({thingCarts: thingCarts,})},fail: err => {console.log(err);}})},/*** 用户点击右上角分享*/onShareAppMessage: function () {},//计量总价getTotalPrice() {let carts = this.data.carts; // 获取购物车列表let thingPrice = parseFloat(this.data.thingPrice);let bookPrice = parseFloat(this.data.bookPrice);let total = 0.00;for (let i = 0; i < carts.length; i++) { // 循环列表得到每个数据if (carts[i].selected) { // 判断选中才会计算价格total += parseFloat(carts[i].bprice); // 所有价格加起来}}this.setData({bookPrice: total.toFixed(2)})total += thingPrice;this.setData({ // 最后赋值到data中渲染到页面carts: carts, totalPrice: total.toFixed(2) //保留小数后面2两位});},//选择事件selectList(e) {let that = this;const index = e.currentTarget.dataset.index;    // 获取data- 传进来的indexconsole.log(index);let selectAllStatus = that.data.selectAllStatus; //是否已经全选let str = true;  //用str与每一项进行状态判断let carts = that.data.carts;                    // 获取购物车列表const selected = carts[index].selected;         // 获取当前商品的选中状态carts[index].selected = !selected;              // 改变状态that.setData({carts: carts});that.getTotalPrice();                           // 重新获取总价for (var i = 0; i < carts.length; i++) {str = str && carts[i].selected;           //用str与每一项进行状态判断}if (str === true) {that.setData({selectAllStatus: true})} else {that.setData({selectAllStatus: false})}},//全选事件selectAll(e) {var that = this;let selectAllStatus = that.data.selectAllStatus;    // 是否全选状态let carts = that.data.carts;let thingCarts = that.data.thingCarts;var selectThing = that.data.selectThing;var selectBook = that.data.selectBook;if(selectBook) {selectAllStatus = !selectAllStatus;for (let i = 0; i < carts.length; i++) {carts[i].selected = selectAllStatus;            // 改变所有商品状态}that.setData({selectAllStatus: selectAllStatus,carts: carts});that.getTotalPrice();                               // 重新获取总价if (carts.length === 0) { //当没有物品时，不能再点“全选”wx.showModal({title: '提示',content: '购物车空空如也~',success: function (res) {   //模糊层成功出来后if (res.confirm) {console.log('用户点击确定')that.setData({selectAllStatus: false})} else {console.log('用户点击取消')that.setData({selectAllStatus: false})}},})}}else {selectAllStatus = !selectAllStatus;for (let i = 0; i < thingCarts.length; i++) {thingCarts[i].selected = selectAllStatus;            // 改变所有商品状态}that.setData({selectAllStatus: selectAllStatus,thingCarts: thingCarts});that.getTotalPriceThing();                               // 重新获取总价if (thingCarts.length === 0) { //当没有物品时，不能再点“全选”wx.showModal({title: '提示',content: '购物车空空如也~',success: function (res) {   //模糊层成功出来后if (res.confirm) {console.log('用户点击确定')that.setData({selectAllStatus: false})} else {console.log('用户点击取消')that.setData({selectAllStatus: false})}},})}}},//删除商品deleteList(e) {const index = e.currentTarget.dataset.index;var selectAllStatus = this.data.selectAllStatus;let carts = this.data.carts;let totalPrice = this.data.totalPrice;wx.showModal({title: '提示',content: '将此产品移除购物车？',success: res=> {if (res.confirm) {console.log('用户点击确定')carts.splice(index, 1);              // 删除购物车列表里这个商品this.setData({carts: carts});if (carts.length == 0) {                  // 如果购物车为空this.setData({hasList: false,             // 修改标识为false，显示购物车为空页面selectAllStatus: false,totalPrice: orginalPrice.toFixed(2)              //此时价格为0});} else {                              // 如果不为空this.getTotalPrice();           // 重新计算总价格}} else if (res.cancel) {console.log('用户点击取消')}}})},// 物品//计量总价getTotalPriceThing() {let thingCarts = this.data.thingCarts; // 获取购物车列表let total = 0; //注意后台返回的是字符串数字。let thingPrice = parseFloat(this.data.thingPrice);let bookPrice = parseFloat(this.data.bookPrice);for (let i = 0; i < thingCarts.length; i++) { // 循环列表得到每个数据if (thingCarts[i].selected) { // 判断选中才会计算价格  total += parseFloat(thingCarts[i].gprice); // 所有价格加起来  }}this.setData({thingPrice: total})total += bookPrice;this.setData({ // 最后赋值到data中渲染到页面thingCarts: thingCarts,totalPrice: total.toFixed(2) //保留小数后面2两位});},//选择事件selectListThing(e) {let that = this;const index = e.currentTarget.dataset.index;    // 获取data- 传进来的indexconsole.log(index);let selectAllStatus = that.data.selectAllStatus; //是否已经全选let str = true;  //用str与每一项进行状态判断let thingCarts = that.data.thingCarts;                    // 获取购物车列表const selected = thingCarts[index].selected;         // 获取当前商品的选中状态thingCarts[index].selected = !selected;              // 改变状态that.setData({thingCarts: thingCarts});that.getTotalPriceThing();                           // 重新获取总价for (var i = 0; i < thingCarts.length; i++) {str = str && thingCarts[i].selected;           //用str与每一项进行状态判断}console.log(str);if (str === true) {that.setData({selectAllStatus: true})} else {that.setData({selectAllStatus: false})}},//删除商品deleteListThing(e) {const index = e.currentTarget.dataset.index;var selectAllStatus = this.data.selectAllStatuslet thingCarts = this.data.thingCarts;let totalPrice = this.data.totalPrice;wx.showModal({title: '提示',content: '将此产品移除购物车？',success: res=> {if(res.confirm){console.log("用户点了确定")thingCarts.splice(index, 1);              // 删除购物车列表里这个商品this.setData({thingCarts: thingCarts});if (thingCarts.length == 0) {                  // 如果购物车为空this.setData({hasList: false,             // 修改标识为false，显示购物车为空页面selectAllStatus: false,totalPrice: orginalPrice.toFixed(2)              //此时价格为0});} else {                              // 如果不为空this.getTotalPrice();           // 重新计算总价格}}else if(res.cancel) {console.log("用户点了取消")}}})},chooseBookCart() {var that = this;var selectBook = that.data.selectBook;var selectThing = that.data.selectThing;let selectAllStatus = that.data.selectAllStatus; //是否已经全选let str = true;  //用str与每一项进行状态判断let carts = that.data.carts;  for (var i = 0; i < carts.length; i++) {str = str && carts[i].selected;           //用str与每一项进行状态判断}console.log(str);that.setData({selectBook: true,selectThing: false, })},chooseThingCart() {var that = this;var selectThing = that.data.selectThing;var selectBook = that.data.selectBook;var selectAllStatus = that.data.selectAllStatus;that.setData({selectBook: false,selectThing: true,})// 此时data中的数据改变，但是此时的属性值还未改变that.getThingCartList()},toBuy(){var totalPrice = this.data.totalPrice;var thingCarts = this.data.thingCarts;var bookCarts = this.data.carts;var bookId = this.data.bookId;var bookCart = [], thingCart = [];bookCarts.forEach(item=>{if (item.selected){bookCart.push(item);}})thingCarts.forEach(item=>{if (item.selected){thingCart.push(item);}})let shoppingCartList = {thingCart, bookCart};console.log(bookCart);if(totalPrice === '0.00'){console.log(totalPrice);}else {console.log(shoppingCartList);wx.navigateTo({url: '../settlement/settlement?bookCart='+bookCart,})}}
})

后端代码和数据库有时间再写吧。。。

微信小程序实现购物车功能相关推荐

微信小程序实战购物车功能
代码地址如下: http://www.demodashi.com/demo/12400.html 一.准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.com ...
微信小程序实现购物车功能，包含完整小程序代码和运行效果截图
微信小程序实现购物车功能,在商场比较常见,今天刚刚做好,效果不错. 下面从js文件,json文件,wxml文件和wxss文件,分享给大家. 直接上代码: 目录 1.index.js文件内容 2.ind ...
微信小程序之购物车功能
前言以往的购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能. 需求先来弄清楚购物车的需求. 单选.全选和取消, ...
小程序判断数组的index是否为空_微信小程序之购物车功能（仅学习）
购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能. 需求先来弄清楚购物车的需求. 单选.全选和取消,而且会随着选 ...
微信小程序之购物车功能 1
前言以往的购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能. 完整的小程序商城demo含购物车,请戳:wxapp ...
微信小程序商城开发功能构架介绍
微信小程序商城开发,微信小程序商城开发功能,微信小程序商城开发介绍.截止到2021年末初手机微信小程序总数就早就超过400万,而且网络购物小程序愈来愈占有蛮大的占有率,而这类的小程序大家一般称作商城小 ...
黯然微信小程序杂记（三）：微信小程序实现倒计时功能附讲解教学附源码
黯然微信小程序杂记(三):微信小程序实现倒计时功能附超详细注释附源码一.功能描述二.界面展示三.test.wxml代码四.test.js代码(注释很详细很易懂) CSDN私信我,有关微信 ...
微信小程序（购物车）--在wxml中设置保留小数位数
微信小程序(购物车)–在wxml中设置保留小数位数一.在该页面文件夹下新建一个wxs后缀的文件 var filters = {toFix: function (value) {return valu ...
微信小程序实现语音识别功能
原标题:微信小程序实现语音识别功能使用小程序实现语音识别功能,由于语音识别可以直接使用各厂家的API接口,并且小程序为腾讯所有,因此考虑到可能的低延时,采用了腾讯提供的免费API接口,准确讲是腾讯语 ...

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

微信小程序实现购物车功能相关推荐

最新文章

热门文章