微信小程序实现简单的购物车功能
更新时间：2022年07月19日 16:29:36 作者：eva_feng
这篇文章主要为大家详细介绍了微信小程序实现简单的购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现简单购物车的具体代码，供大家参考，具体内容如下
实现一个购物车页面，需要哪些数据。整理下大概如下：
一个购物车商品列表(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) {},
})
},以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
JavaScript获取并更改input标签name属性的方法
这篇文章主要介绍了JavaScript获取并更改input标签name属性的方法,涉及javascript针对表单元素属性的相关操作技巧,需要的朋友可以参考下2015-07-07
JavaScript中Object.values()的用法举例
这篇文章主要给大家介绍了关于JavaScript中Object.values()的用法举例,Object.values()是JavaScript中一个内置的静态函数,用于返回一个对象中所有属性值的数组,需要的朋友可以参考下2023-09-09
函数式编程语言在学术领域已经存在相当长一段时间了，但是从历史上看，它们没有丰富的工具和库可供使用。随着 .NET 平台上的 Haskell 的出现，函数式编程变得更加流行。一些传统的编程语言，例如 C++ 和 JavaScript，引入了由函数式编程提供的一些构造和特性。在许多情况下，JavaScript 的重复代码导致了一些拙劣的编码。如果使用函数式编程，就可以避免这些问题。此外，可以利用函数式编程风格编写更加优美的回调。2008-05-05
这篇文章主要介绍了如何实现鼠标滑过出现预览的大图提示效果,需要的朋友可以参考下2014-02-02
这篇文章主要为大家详细介绍了js实现图片轮播效果的学习笔记，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
在项目开发过程中经常会遇到数组中包含很多重复的内容，即脏数据去脏的操作，本文着重讲解了数组去重的几种方法。需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
下面小编就为大家带来一篇js通过指定下标或指定元素进行删除数组的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
BootstrapValidator验证用户名已存在（ajax）
这篇文章主要为大家详细介绍了BootstrapValidator验证用户名已存在，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
这篇文章主要为大家介绍了JS的数组方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
这篇文章主要介绍了JavaScript设计模式之享元模式,结合实例形式较为详细的分析了javascript享元模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下2019-01-01
最新评论