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

来源：jb51　　时间：2022/7/19 19:04:57　　对本文有异议

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

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