微信小程序如何实现简单的购物车功能
本文小编为大家详细介绍“微信小程序如何实现简单的购物车功能”，内容详细，步骤清晰，细节处理妥当，希望这篇“微信小程序如何实现简单的购物车功能”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
实现一个购物车页面，需要哪些数据。整理下大概如下：
一个购物车商品列表(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) {},
})
},
读到这里，这篇“微信小程序如何实现简单的购物车功能”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注蜗牛博客行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
版权声明：如无特殊标注，文章均为本站原创，转载时请以链接形式注明文章出处。
评论