【微信小程序】 实现购物车
原生实现，不使用任何框架，网上没有啥好看的购物车，而且都是抄来抄去的，我来写一个好点的作为参考吧，拿来就能用。
接口自行添加。
链接：购物车代码片段。图片太大了没办法上传到代码片段，自己找几张图片就行。
购物车功能包括：
- 显示默认地址，或选择地址（需定向到你自己的页面去选择，这里不做演示）
- 显示店铺，点击店铺可全选该店铺的所有商品
- 显示商品，可选择商品，增加或减少数量，可左滑删除
- 左滑删除：如果有一个已经显示出删除按钮，未操作，此时滑动另一个商品，之前的显示将回归原位
- 选择商品下方显示总价并结算订单
- 选择全部购物车商品
- 显示已失效商品
效果图片
cart.wxml
<!-- 选择地址 --><view class="choose-address"> <view class="address">配送至：<text>{{address}}</text></view> <image class="img" src="/images/arrow_right_grey.svg"></image></view><!-- 生效商品区域 --><view class="cart-effect"> <block wx:for="{{cartEffectList}}" wx:key="key" wx:for-item="item"> <checkbox-group class="check-group" wx:if="{{item.merchandises.length > 0}}"> <checkbox class="check-store-all" data-store="{{item.store}}" bind:tap="checkStoreAll" checked="{{item.checked || item.merchandiseChecked}}"> <view class="store">{{item.store}}</view> </checkbox> <block wx:for="{{item.merchandises}}" wx:key="key" wx:for-item="merchandise"> <movable-area class="move-area"> <movable-view class="move-view" x="{{merchandise.x}}" data-store="{{item.store}}" data-id="{{merchandise.id}}" direction="horizontal" out-of-bounds="true" damping="50" inertia="true" bind:touchstart="touchStart" bind:touchmove="touchMove" bind:touchend="touchEnd" bindchange="touchChange"> <view class="info"> <checkbox class="merchandise-check" data-store="{{item.store}}" data-merchandise="{{merchandise}}" bind:tap="checkSingle" checked="{{merchandise.checked}}"></checkbox> <view class="merchandise"> <image class="merchandise-img" src="{{merchandise.imgUrl}}"></image> <view class="merchandise-name">{{merchandise.name}}</view> <view class="merchandise-price">￥{{merchandise.price}}/瓶</view> <view class="merchandise-amount"> <view class="minus" data-store="{{item.store}}" data-id="{{merchandise.id}}" bind:tap="minusAmount">-</view> <view class="amount">{{merchandise.amount}}</view> <view class="plus" data-store="{{item.store}}" data-id="{{merchandise.id}}" bind:tap="plusAmount">+</view> </view> </view> </view> </movable-view> <view class="delete" data-store="{{item.store}}" data-id="{{merchandise.id}}" bind:tap="deleteMerchandise">删除</view> </movable-area> </block> </checkbox-group> </block></view><!-- 失效商品 --><view class="cart-lapse"> <block wx:for="{{cartLapseList}}" wx:key="key"> <checkbox-group class="check-group" bindchange="checkStoreAll"> <view class="store">已失效商品（{{cartLapseList.length}}）</view> <movable-area class="move-area"> <movable-view class="move-view" x="{{item.x}}" data-id="{{item.id}}" direction="horizontal" out-of-bounds="true" damping="50" inertia="true" bind:touchstart="touchStart" bind:touchmove="touchMove" bind:touchend="touchEnd" bindchange="touchChange"> <view class="info"> <checkbox class="merchandise-check" disabled="true"></checkbox> <view class="merchandise"> <view class="sold-out"> <image class="merchandise-img" src="{{item.imgUrl}}"></image> <view class="status">{{item.info}}</view> </view> <view class="merchandise-name">{{item.name}}</view> <view class="merchandise-price">￥{{item.price}}/瓶</view> <view class="merchandise-amount"> <view class="minus" style="color: gray;">-</view> <view class="amount" style="color: gray;">{{item.amount}}</view> <view class="plus" style="color: gray;">+</view> </view> </view> </view> </movable-view> <view class="delete" data-id="{{item.id}}" bind:tap="deleteMerchandise">删除</view> </movable-area> </checkbox-group> </block></view><!-- 结算 --><view class="count"> <checkbox class="check-all" bind:tap="checkAll" checked="{{checkedAll}}">全选</checkbox> <view class="grand">合计：￥{{total}}</view> <button class="lapse {{totalCount > 0 ? 'settle-btn' : ''}}" bind:tap="settleBill" hover-class="settle-bill" disabled="{{totalCount == 0}}" loading="{{showLoading}}">结算({{totalCount}})</button></view>cart.wxss
page { padding: 16rpx; padding-bottom: 172rpx; box-sizing: border-box;}/* 选择地址 */.choose-address { display: flex; align-items: center; justify-content: flex-start; text-align: left;}.choose-address .address { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.choose-address .img { width: 32rpx; height: 32rpx;}/* 选择地址 *//* 生效商品 */.cart-effect { display: flex; flex-direction: column;}.cart-effect .check-group { background-color: #fbfbfd; padding: 16rpx; box-sizing: border-box; border-radius: 32rpx; margin-top: 16rpx; z-index: 11;}.cart-effect .check-group .check-store-all { display: flex; justify-content: flex-start; align-items: center;}.cart-effect .check-group .store { font-size: 36rpx; font-weight: bolder; margin-left: 8rpx;}.cart-effect .check-group .move-area{ /* 减去删除部分的宽度 */ width: calc(100% - 128rpx); height: 280rpx; position: relative; display: flex;}.cart-effect .check-group .move-area .move-view { display: flex; justify-content: center; align-items: center; height: 100%; /* 上面减了多少宽度，下面就要加多少，不然无法起到遮挡作用 */ width: calc(100% + 128rpx); background-color: #fbfbfd; box-sizing: border-box; z-index: 10; padding-right: 12rpx;}.cart-effect .check-group .move-area .delete { position: absolute; top: 0; bottom: 0; left: 100%; /* 删除部分的宽度 */ width: 128rpx; text-align: center; z-index: 9; display: flex; justify-content: center; align-items: center; background-color: #f43838; color: #fbfbfd;}.cart-effect .check-group .move-area .move-view .info { display: flex; justify-content: center; align-items: center; width: 100vw; overflow: hidden; box-sizing: border-box;}.cart-effect .check-group .move-area .move-view .info .merchandise { display: grid; grid-template-columns: 1fr 2fr 2fr; grid-template-rows: 110rpx 60rpx; grid-column-gap: 12rpx; grid-row-gap: 12rpx;}.cart-effect .check-group .move-area .move-view .info .merchandise .merchandise-img { width: 180rpx; height: 180rpx; border-radius: 50%; grid-column: 1 / 2; grid-row: 1 / 3;}.cart-effect .check-group .move-area .move-view .info .merchandise .merchandise-name { grid-column: 2 / 4; grid-row: 1 / 2; font-size: 32rpx;}.cart-effect .check-group .move-area .move-view .info .merchandise .merchandise-price { grid-column: 2 / 3; grid-row: 2 / 3; font-size: 32rpx; font-weight: 550;}.cart-effect .check-group .move-area .move-view .merchandise .merchandise-amount { grid-column: 3 / 4; grid-row: 2 / 3; text-align: right; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; text-align: center; line-height: 50rpx;}.cart-effect .check-group .move-area .move-view .merchandise .merchandise-amount .minus { font-size: 42rpx; background-color: #e5e5e5; border-radius: 16rpx;}.cart-effect .check-group .move-area .move-view .merchandise .merchandise-amount .amount { font-size: 36rpx;}.cart-effect .check-group .move-area .move-view .merchandise .merchandise-amount .plus { background-color: #e5e5e5; border-radius: 16rpx; font-size: 42rpx;}/* 失效商品 */.cart-lapse { display: flex; flex-direction: column;}.cart-lapse .check-group { background-color: #fbfbfd; padding: 16rpx; box-sizing: border-box; border-radius: 32rpx; margin-top: 16rpx; z-index: 11;}.cart-lapse .check-group .check-store-all { display: flex; justify-content: flex-start; align-items: center;}.cart-lapse .check-group .store { font-size: 36rpx; font-weight: bolder;}.cart-lapse .check-group .move-area{ /* 减去删除部分的宽度 */ width: calc(100% - 128rpx); height: 280rpx; position: relative; display: flex;}.cart-lapse .check-group .move-area .move-view { display: flex; justify-content: center; align-items: center; height: 100%; /* 上面减了多少宽度，下面就要加多少，不然无法起到遮挡作用 */ width: calc(100% + 128rpx); background-color: #fbfbfd; box-sizing: border-box; z-index: 10; padding-right: 12rpx;}.cart-lapse .check-group .move-area .delete { position: absolute; top: 0; bottom: 0; left: 100%; /* 删除部分的宽度 */ width: 128rpx; text-align: center; z-index: 9; display: flex; justify-content: center; align-items: center; background-color: #f43838; color: #fbfbfd;}.cart-lapse .check-group .move-area .move-view .info { display: flex; justify-content: center; align-items: center; width: 100vw; overflow: hidden; box-sizing: border-box;}.cart-lapse .check-group .move-area .move-view .info .merchandise { display: grid; grid-template-columns: 1fr 2fr 2fr; grid-template-rows: 110rpx 60rpx; grid-column-gap: 12rpx; grid-row-gap: 12rpx;}.cart-lapse .check-group .move-area .move-view .info .merchandise .sold-out { position: relative; width: 180rpx; height: 180rpx; border-radius: 50%;}.cart-lapse .check-group .move-area .move-view .info .merchandise .sold-out .merchandise-img { width: 100%; height: 100%; border-radius: 50%; grid-column: 1 / 2; grid-row: 1 / 3;}.cart-lapse .check-group .move-area .move-view .info .merchandise .sold-out .status{ width: 100%; height: 100%; background-color: #1a1a1a90; position: absolute; top: 0; left: 0; text-align: center; display: flex; justify-content: center; align-items: center; border-radius: 50%; color: #fbfbfb; font-size: 36rpx; font-weight: 500;}.cart-lapse .check-group .move-area .move-view .info .merchandise .merchandise-name { grid-column: 2 / 4; grid-row: 1 / 2; font-size: 32rpx;}.cart-lapse .check-group .move-area .move-view .info .merchandise .merchandise-price { grid-column: 2 / 3; grid-row: 2 / 3; font-size: 32rpx; font-weight: 550;}.cart-lapse .check-group .move-area .move-view .merchandise .merchandise-amount { grid-column: 3 / 4; grid-row: 2 / 3; text-align: right; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; text-align: center; line-height: 60rpx;}.cart-lapse .check-group .move-area .move-view .merchandise .merchandise-amount .minus { font-size: 42rpx; background-color: #e5e5e5; border-radius: 16rpx;}.cart-lapse .check-group .move-area .move-view .merchandise .merchandise-amount .amount { font-size: 36rpx;}.cart-lapse .check-group .move-area .move-view .merchandise .merchandise-amount .plus { background-color: #e5e5e5; border-radius: 16rpx; font-size: 42rpx;}.count { width: calc(100% - 32rpx); box-sizing: border-box; margin-top: 16rpx; padding: 16rpx; background-color: #fbfbfd; border-radius: 120rpx; position: fixed; bottom: 42rpx; z-index: 99; display: flex; justify-content: space-between; align-items: center; border: 1rpx solid #e5e5e5;}.count .check-all{ font-size: 34rpx; font-weight: 550;}.count .grand { width: 50%; text-align: right; font-size: 32rpx; font-weight: 550; color: #d1362f;}.count .lapse { width: 200rpx; height: 80rpx; color: #fdfdfd; border-radius: 120rpx; margin: 0; text-align: center; background-color: #e5e5e5; padding: 0; line-height: 80rpx;}.count .settle-btn { background-color: #d1362f;}.count .settle-bill { background-color: #d1362f80}cart.js
Page({ /** * 页面的初始数据 */ data: { address: "XX省XX市XX区XX街道XX号XX室", cartEffectList: [], // 生效商品 example: [ { store: "龙门客栈", checked: false, merchandiseChecked: false, merchandises: [ { id: "1", imgUrl: "/images/wine1.jpg", name: "宫廷玉液酒", price: 180, amount: 1, status: 0, x: 0, checked: false, }, { id: "2", imgUrl: "/images/wine2.png", name: "群英荟萃", price: 98, amount: 99, status: 1, x: 0, checked: false, }, { id: "3", imgUrl: "/images/wine3.png", name: "二锅头", price: 28, amount: 1, status: 1, x: 0, checked: false, }, ] }, { store: "八马茶叶", checked: false, merchandiseChecked: false, merchandises: [ { id: "1", imgUrl: "/images/wine3.png", name: "黑普洱茶饼", price: 1800, amount: 1, status: 1, x: 0, checked: false, }, ] }, ], // 失效商品 cartLapseList: [ { id: "3", imgUrl: "/images/wine2.png", name: "威士忌", info: "已售罄", price: 148, amount: 1, x: 0, status: -1, checked: false, } ], startX: 0, moveStore: '', delBtnW: 128, isLeft: 0, total: 0, totalCount: 0, checkedAll: false, billLoading: false, }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { this.getCartList(); }, /** * 生命周期函数--监听页面显示 */ onShow() { }, /** * 获取用户购物车 */ getCartList() { let cartEffectList = this.data.example; wx.setStorageSync('cartEffectList', cartEffectList); this.setData({ cartEffectList: cartEffectList, }); }, /** * 店铺全选 * @param {*} e */ checkStoreAll(e) { let storeName = e.currentTarget.dataset.store; let cartEffectList = this.data.cartEffectList; let updatedCart = cartEffectList.map(store => { if (store.store === storeName) { // 切换商店的已勾选标记 store.checked = !store.checked; // 重置商店的商品已勾选标记 store.merchandiseChecked = false; store.merchandises = store.merchandises.map(merch => { // 根据商店的已检查标记更新商品的已选择标记 merch.checked = store.checked; return merch; }); } return store; }); this.setData({ cartEffectList: updatedCart }); this.grand(); }, /** * 单个选择 * @param {*} e */ checkSingle(e) { let storeName = e.currentTarget.dataset.store; let merchandiseData = e.currentTarget.dataset.merchandise; let cartEffectList = this.data.cartEffectList; let updatedCart = cartEffectList.map(store => { if (store.store === storeName) { store.merchandises = store.merchandises.map(merch => { if (merch.id === merchandiseData.id) { // 更改商品的选择状态 merch.checked = !merch.checked; // 更改店铺的选中状态 store.merchandiseChecked = merch.checked; } return merch; }); } return store; }); this.setData({ cartEffectList: updatedCart }); this.grand(); }, /** * 减少数量，下限为1 * @param {*} e */ minusAmount(e) { let storeName = e.currentTarget.dataset.store; let id = e.currentTarget.dataset.id; let cartEffectList = this.data.cartEffectList; let updatedCart = cartEffectList.map(store => { if (store.store === storeName) { // 更新商店的已选择商品标记 store.merchandiseChecked = true; store.merchandises = store.merchandises.map(merch => { if (merch.id === id) { // 更新商品的选择状态 merch.checked = true; if (merch.amount > 1) { merch.amount--; } else { wx.showModal({ content: '宝贝数量不能再减少了', showCancel: false, }); } } return merch; }); } return store; }); this.setData({ cartEffectList: updatedCart }); this.grand(); }, /** * 增加数量，上限为99 * @param {*} e */ plusAmount(e) { let storeName = e.currentTarget.dataset.store; let id = e.currentTarget.dataset.id; let cartEffectList = this.data.cartEffectList; let updatedCart = cartEffectList.map(store => { if (store.store === storeName) { // 更新店铺的选中状态 store.merchandiseChecked = true; store.merchandises = store.merchandises.map(merch => { if (merch.id === id) { // 更新商品的选择状态 merch.checked = true; if (merch.amount < 99) { merch.amount++; } else { wx.showModal({ content: '宝贝数量不能再增加了', showCancel: false, }); } } return merch; }); } return store; }); this.setData({ cartEffectList: updatedCart }); this.grand(); }, /** * 删除商品 * @param {*} e */ deleteMerchandise(e) { let storeName = e.currentTarget.dataset.store; let id = e.currentTarget.dataset.id; let cartEffectList = this.data.cartEffectList; let cartLapseList = this.data.cartLapseList; // 遍历每个商店 let updatedEffectCart = cartEffectList.map(store => { if (store.store === storeName) { // 如果是目标商店，过滤掉指定ID的商品 store.merchandises = store.merchandises.filter(merch => merch.id !== id); } return store; }); cartLapseList = cartLapseList.filter(item => item.id !== id); this.setData({ cartEffectList: updatedEffectCart, cartLapseList: cartLapseList }); }, /** * 全选 */ checkAll() { let cartEffectList = this.data.cartEffectList; let checkedAll = this.data.checkedAll; // 使用map方法更新每个商店和商品的选中状态 let updatedCart = cartEffectList.map(store => { return { ...store, checked: !checkedAll, merchandiseChecked: !checkedAll, merchandises: store.merchandises.map(merch => ({ ...merch, checked: !checkedAll })) }; }); this.setData({ cartEffectList: updatedCart, checkedAll: !checkedAll, }); this.grand(); }, /** * 合计 */ grand() { let cartEffectList = this.data.cartEffectList; // 初始化总价和总数量 let total = 0; let totalCount = 0; cartEffectList.forEach(store => { store.merchandises.forEach(merch => { if (merch.checked) { total += merch.amount * merch.price; totalCount += merch.amount; } }); }); this.setData({ total: total, totalCount: totalCount, }); }, /** * 结算 */ settleBill() { this.setData({ showLoading: true, }); // 进行深拷贝 let cartEffectList = JSON.parse(JSON.stringify(this.data.cartEffectList)); // 筛选出未选中的商店或没有选中商品的商店 let filteredStores = cartEffectList.filter(store => { if (store.checked) { // 如果商店被选中，保留它 return true; } // 从商店中筛选出未选中的商品 store.merchandises = store.merchandises.filter(merch => merch.checked); // 如果筛选后，商店有选中的商品，保留该商店 return store.merchandises.length > 0; }); wx.navigateTo({ url: `/pages/index/settle-bill/settle-bill?chosenList=${JSON.stringify(filteredStores)}`, complete: () => { this.setData({ showLoading: false, }); } }); }, /** * 开始滑动 * @param {*} e */ touchStart (e) { let index = e.currentTarget.dataset.id; let store = e.currentTarget.dataset.store; let cartEffectList = this.data.cartEffectList; let cartLapseList = this.data.cartLapseList; // 复位，这样子就能保证一次显示一个删除按钮 for (let i in cartEffectList) { for (let j in cartEffectList[i].merchandises) { cartEffectList[i].merchandises[j].x = 0 } } for (let i in cartLapseList) { cartLapseList[i].x = 0; } // 判断是否为多触点 if (e.touches.length == 1) { // 记录开始触摸的位置 this.setData({ startX: e.touches[0].clientX, cartEffectList: cartEffectList, cartLapseList: cartLapseList }); } }, /** * 开始移动 * @param {*} e */ touchMove (e) { let id = e.currentTarget.dataset.id; let store = e.currentTarget.dataset.store; if (e.touches.length == 1) { // 记录移动的距离 let disX = e.touches[0].clientX - this.data.startX; // 大于0则时向右滑，复位 if (disX >= 0) { // 向右滑 this.setData({ isLeft: 0 }); } else { // 小于则是向左滑 this.setData({ isLeft: 1 }); } } }, /** * 滑动终点 * @param {*} e */ touchEnd (e) { let id = e.currentTarget.dataset.id; let store = e.currentTarget.dataset.store; let delw = this.data.delBtnW; if (e.touches.length == 1) { let endX = e.touches[0].clientX - this.data.startX; if (endX < 0) { this.setXmove(id, store, - delw); } else { this.setXmove(id, store, 0); } } }, /** * 滑动事件 * @param {*} e */ touchChange (e) { let delw = this.data.delBtnW; let store = e.currentTarget.dataset.store; let id = e.currentTarget.dataset.id; if (this.data.isLeft) { if (e.detail.source == 'friction') { if (e.detail.x < 0) { this.setXmove(id, store, -delw); } else { this.setXmove(id, store, 0); } } } else { if (e.detail.source == 'friction') { this.setXmove(id, store, 0); } } }, /** * 设置起始位置 * @param {*} id * @param {*} store * @param {*} x */ setXmove(id, store, x) { let that = this; if (store) { let cartEffectList = this.data.cartEffectList; for (let i in cartEffectList) { if (cartEffectList[i].store == store) { for (let j in cartEffectList[i].merchandises) { if (cartEffectList[i].merchandises[j].id == id) { cartEffectList[i].merchandises[j].x = x; } } } } that.setData({ cartEffectList: cartEffectList, }); } else { let cartLapseList = this.data.cartLapseList; for (let i in cartLapseList) { if (cartLapseList[i].id == id) { cartLapseList[i].x = x; } } that.setData({ cartLapseList: cartLapseList, }); } }})checkbox样式更改
checkbox .wx-checkbox-input{ width: 40rpx; height: 40rpx; border-radius: 50%;}/* 选中后的背景样式 */checkbox .wx-checkbox-input.wx-checkbox-input-checked{ background: #b0474c;}/* 选中后的勾子样式 */checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{ width: 40rpx; height: 40rpx; line-height: 40rpx; border-radius: 50%; text-align: center; font-size:32rpx; color:#fbfbfd; background: transparent; transform:translate(-50%, -50%) scale(1); -webkit-transform:translate(-50%, -50%) scale(1);}
