文章目录

前言

在电商的核心交易流程中，购物车是其中非常重要的一环，它承担商品加购、价格计算、促销活动展示等功能，与会员系统、商品系统、库存系统、订单系统等紧密结合。

vant-weapp的GoodsAction商品导航api

GoodsAction Props

GoodsActionIcon Props

GoodsActionButton Props

Events

GoodsActionIcon Slot

GoodsActionButton Slot

GoodsActionIcon 外部样式类

GoodsActionButton 外部样式类

一、商品购物车功能实现

// miniprogram/pages/cart/index.jsPage({/*** 页面的初始数据*/data: {showLoginPanel:false,cartIdSelectedResult:[],allIsSelected:false,editMode:false,carts:[],totalPrice:0},// 重新计算总价calcTotalPrice(){let totalPrice = 0let ids = this.data.cartIdSelectedResultlet carts = this.data.cartsids.forEach(id=>{carts.some(item=>{if (item.id == id){totalPrice += item.price * item.num return true }return false})})this.setData({totalPrice})},//改变编辑模式changeEditMode(){let editMode = !this.data.editModethis.setData({editMode})},onSelectGoodsItem(e){let cartIdSelectedResult = e.detailthis.setData({cartIdSelectedResult,});this.calcTotalPrice()},onSelectAll(event) {let allIsSelected = event.detaillet cartIdSelectedResult = this.data.cartIdSelectedResultcartIdSelectedResult.length = 0if (allIsSelected){let carts = this.data.cartsfor(let j=0;j<carts.length;j++){cartIdSelectedResult.push(`${carts[j].id}`)}}this.setData({allIsSelected,cartIdSelectedResult});this.calcTotalPrice()},/*** 页面显示的时候去加载数据*/async onShow(){let res = await getApp().wxp.request4({url:'http://localhost:3000/user/my/carts',method:'get'})if (res.data.msg == "ok"){let carts = res.data.data this.setData({carts})}},onCartConfirm(e){// 拿到列表数据let carts = this.data.carts let cartData = []let ids = this.data.cartIdSelectedResultif (ids.length == 0){wx.showModal({title: '未选择商品',showCancel: false})return}ids.forEach(id=>{carts.some(item=>{if (item.id == id){cartData.push(Object.assign({}, item))return true }return false})})wx.navigateTo({url: `/pages/confirm-order/index`,success: function(res) {res.eventChannel.emit('cartData', {data: cartData })}})},async onCartGoodsNumChanged(e){let cartGoodsId = e.currentTarget.dataset.id let oldNum = parseInt( e.currentTarget.dataset.num )// console.log('e.detail', typeof e.detail, cartGoodsId, oldNum)let num = e.detaillet data = {num}let res = await getApp().wxp.request4({url:`http://localhost:3000/user/my/carts/${cartGoodsId}`,method:'put',data })if (res.data.msg == 'ok'){wx.showToast({title: num > oldNum ? '增加成功' : '减少成功',})// 修复数据let carts = this.data.cartscarts.some(item=>{if (item.id == cartGoodsId){item.num = num return true }return false})this.calcTotalPrice()}},async removeCartGoods(e){let ids = this.data.cartIdSelectedResultif (ids.length == 0){wx.showModal({title: '没有选择商品',showCancel: false})return }let data = {ids}let res = await getApp().wxp.request4({url:'http://localhost:3000/user/my/carts',method:'delete',data})if (res.data.msg == 'ok'){let carts = this.data.cartsfor(let j=0;j<ids.length;j++){let id = ids[j]carts.some((item,index)=>{if (item.id == id){carts.splice(index,1)return true }return false })}this.setData({carts})}},})

{"usingComponents": {"van-cell": "@vant/weapp/cell/index","van-cell-group": "@vant/weapp/cell-group/index","van-button": "@vant/weapp/button/index","van-card": "@vant/weapp/card/index","van-stepper": "@vant/weapp/stepper/index","van-submit-bar": "@vant/weapp/submit-bar/index","van-checkbox": "@vant/weapp/checkbox/index","van-checkbox-group": "@vant/weapp/checkbox-group/index","LoginPanel": "../../components/login"}}

<!--miniprogram/pages/cart/index.wxml--><!-- <text>miniprogram/pages/cart/index.wxml</text> --><van-cell-group><van-cell title="购物车" value="" label="" border="{{ false }}"><van-button bindtap="changeEditMode" slot="right-icon" plain type="info" size="mini">{{editMode?'完成':'编辑'}}</van-button></van-cell></van-cell-group><block wx:for="{{carts}}" wx:key="id"><van-checkbox-group value="{{ cartIdSelectedResult }}" bind:change="onSelectGoodsItem"><view class="goods-card-container"><view style="width:30px;display:flex;align-items:center;justify-content:center;"><van-checkbox icon-size="17px" shape="square" name="{{item.id}}"></van-checkbox></view><view style="flex:1;background:white;"><van-card custom-class="goods-card" price="{{item.price*item.num/100}}元" desc="{{item.sku_desc}}" title="{{item.goods_name}}" thumb="{{item.goods_image}}"><view slot="footer"><van-stepper data-num="{{item.num}}" data-id="{{item.id}}" bind:change="onCartGoodsNumChanged" value="{{item.num}}" step="1" /></view></van-card></view></view></van-checkbox-group></block><van-submit-bar bind:submit="onCartConfirm" wx:if="{{!editMode}}" price="{{ totalPrice }}" button-text="提交订单"><van-checkbox value="{{ allIsSelected }}" bind:change="onSelectAll" shape="square">全选</van-checkbox><view wx:if="{{false}}" slot="tip">您的收货地址</view></van-submit-bar><van-cell-group wx:else title="" style="position: fixed;bottom: 0;left: 0;width: 100%;"><van-cell><view slot="title"><van-checkbox value="{{ allIsSelected }}" bind:change="onSelectAll" shape="square" name="all">全选</van-checkbox></view><van-button bindtap="removeCartGoods" size="mini" slot="right-icon" plain type="info">删除</van-button></van-cell></van-cell-group><LoginPanel show="{{showLoginPanel}}"></LoginPanel>

/* miniprogram/pages/cart/index.wxss */.goods-card{background-color: #fefefe !important;}.goods-card-container {display:flex;margin:10px;background:#fefefe;}.goods-card-container + .goods-card-container{padding-top: 10px;}

二、效果