小程序：购物车项目案例(加减商品数量、全选与全不选、价格汇总、删除提示)

最近由于项目需要，就利用小程序做了个购物车功能的小demo，大家可以参考下。

功能点：

加减商品数量(可自定义商品数量)、汇总价格、全选与全不选、删除商品弹窗提示

主思路：

一、本地模拟Json数据格式的数组（1.购物车商品id：cid   2.标题title   3.图片地址   4.数量num   5.价格price   6.小计   7.是否选中selected）

二、点击复选框操作 如已经选中的，经点击变成未选中，反之而反之 点击依据index作为标识，而不用cid，方便遍历

三、全选操作 首次点击即为全部选中，再次点击为全不选。

四、bindCartNum加减运算函数，加减运算都使用这一个函数控制，同样依据index作为标识，点完写回num值。

五、删除购物车商品：carts.splice(index, 1); 同样依据index作为标识

shopCart.wxml布局页面：

<!-- 小程序购物车demo -->

<view class="body">
<!-- <>购物车列表 -->
<view class="carts-list">
<view wx:for="{{carts}}" class="carts-item" data-title="{{item.title}}" data-url="{{item.url}}" bindtap="bindViewTap">
<!-- //复选框 -->
<view class="carts-radio">
<icon wx:if="{{item.selected}}" type="success_circle" size="20" bindtap="bindCheckbox" data-index="{{index}}" />
<icon wx:else type="circle" size="20" bindtap="bindCheckbox" data-index="{{index}}" />
</view>
<!-- //商品信息 -->
<view class="carts-cnt">
<image class="carts-image" src="{{item.image}}" mode="aspectFill" />
<view class="carts-info">
<view class="carts-title clamp2">{{item.title}}</view>
<view class="carts-subtitle">
<text class="carts-price c--f60">￥{{item.price}}</text>
</view>
</view>
</view>
<!-- //数量加减 -->
<view class="carts-num">
<text class="minus {{minusStatuses[index]}}" data-index="{{index}}" data-type="-" bindtap="bindCartNum">-</text>
<input type="number" data-index="{{index}}" bindinput="bindIptCartNum" value="{{item.num}}" />
<text class="plus normal" data-index="{{index}}" data-type="+" bindtap="bindCartNum">+</text>
</view>
<!-- //删除 -->
<icon class="carts-del" type="clear" size="16" color="#ccc" data-index="{{index}}" bindtap="bindCartsDel" />
</view>
</view>

<!-- //加载提示 -->
<block wx:if="{{showLoading}}">
<view class="page-loading">
<text class="weui-loading" />
<text class="loading-text">加载中</text>
</view>
</block>

<view class="carts-footer">
<view class="bottomfixed">
<view class="inner">
<view class="chkAll" bindtap="bindSelectAll">
<icon wx:if="{{selectedAllStatus}}" type="success_circle" size="20" />
<icon wx:else type="circle" size="20" />
<text>全选</text>
</view>
<view class="total">合计：￥{{totalPrice}}</view>
<view wx:if="{{selectedNum != 0}}" class="btn-pay">去结算({{selectedNum}})</view>
<view wx:else class="btn-pay disabled">去结算({{selectedNum}})</view>
</view>
</view>
</view>

</view>

shopCart.wxss样式：

/* …… 小程序购物车 {{{ …… */
.c--f60{color: #f60;}
.clamp1, .clamp2, .clamp3{display: -webkit-box!important; overflow: hidden; -webkit-box-orient: vertical;}
.clamp1{-webkit-line-clamp:1;}
.clamp2{-webkit-line-clamp:2;}
.clamp3{-webkit-line-clamp:3;}

.carts-list{padding: 0 20rpx;}
.carts-list .carts-item{border-top: 1rpx solid #e3e3e3; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; padding: 20rpx 10rpx; width: 100%; position: relative;}
.carts-list .carts-item:nth-child(1){border-top: 0;}
.carts-item .carts-cnt{flex: 1; padding: 0 20rpx;}
.carts-cnt .carts-image{float:left; margin-right: 20rpx; height: 150rpx; width: 150rpx;}
.carts-cnt .carts-info{display: flex; flex-direction: column; justify-content: space-between; min-height: 150rpx;}
.carts-cnt .carts-title{font-size: 28rpx;}
.carts-cnt .carts-subtitle{display: flex; flex-direction: row; font-size: 28rpx;}
.carts-list .carts-item .carts-del{position: absolute; top: 20rpx; right: 10rpx;}

/*数量加减*/
.carts-num{border: 1rpx solid #aaa; border-radius: 5rpx; display: flex; align-items: center; align-self: flex-end; text-align: center; height: 50rpx;}
.carts-num input{border-left: 1rpx solid #aaa; border-right: 1rpx solid #aaa; font-size: 30rpx; font-family: arial; height: 50rpx; line-height: 50rpx; width: 80rpx;}
.carts-num .minus, .carts-num .plus{color: #000; text-align: center; line-height: 50rpx; width: 40rpx;}
.carts-num .minus{font-size: 30rpx;}
.carts-num .minus.disabled{color: #ccc;}
.carts-num .plus{font-size: 34rpx;}

绑定全选与全不选事件：





绑定文本框输入数量：