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

 在我的GitHub上有校园二手交易微信小程序的源码，这里面包含了购物车的功能，GitHub地址：https://github.com/zhuyuzhu/Secondhand-goods-on-campus，该项目的pages文件夹下的shoppingCart文件夹就是购物车的代码。

购物车功能实现的逻辑：

（1）从服务器拿到的物品数据data里面，只有物品的信息，我们需要给每个物品数据中加入一个是否选中的属性

这样当我们在点击选择按钮的时候，就可以选中该物品，当再次点击的时候，就可以取消选择。

其中几个主要的功能：

（1）物品请求数据，使用微信小程序request请求，POST方式得到服务器传来的物品数据。

每次请求要想后端传入用户id和物品id（物品id根据后端要求进行处理，我每次传入请求到的物品中最后一个物品的id，后端会把这个id之后的5个值再传给前端）才得到的物品数据，每一次请求要判断还有没有数据，有数据则请求成功，没有数据就不请求。

（2）选中和取消选中单个物品

（3）选中或取消选中物品时，总价格要进行加减

每次触发选择事件，都会触发计算总价的方法

（4）全选按钮，实现物品的全选

当用户通过单选选择了所有物品时，“全选按钮”会自动改变为选中样式；当用户通过“全选按钮”选择所有商品的时候，每个商品都应该是选中状态。

（5）计算总价

任何一次触发该函数，都会重新计算价格，将总价变为0，再进行选中项的价格累加，而不是在原总价上累加或减某一个商品的价格

wxml代码： 

<!--pages/shoppingCart/shoppingCart.wxml-->
<view class='box'>
  <view class='wrapper'>
    <view class="tab-content {
  
  {selectBook? 'select': 'noSelect'}}" bindtap='chooseBookCart'>书本</view>
    <view class="tab-content {
  
  {selectThing? 'select': 'noSelect'}}" bindtap='chooseThingCart'>物品</view>

  </view>
</view>
<!-- 书本 -->
<view class="cart-box" wx:if="{
  
  {selectBook}}">
  <!-- wx:for 渲染购物车列表 -->
  <view wx:for="{
  
  {carts}}" wx:key="{
  
  {carts}}" class='cart-goods'>
    <!-- wx:if 是否选择显示不同图标 -->
 <view class='icon-wrapper' bindtap="selectList" data-index="{
  
  {index}}">
    <icon wx:if="{
  
  {item.selected}}" class='cart-icon' type="success" color="red"  />
    <icon wx:else type="circle" class='cart-icon'  />
    </view>
    <view  class='cart-img'>
      <image class="cart-thumb" src="{
  
  {item.picture}}"></image>
      <view class='cart-message'>
        <text class='name'>书名：{
  
  {item.bname}}</text>
        <text class='author'>作者：{
  
  {item.author}}</text>
        <text class='press'>出版社：{
  
  {item.press}}</text>
        <text class='price'>价格：￥{
  
  {item.bprice}}</text>
      </view>
    </view>
    <!-- 点击商品图片可跳转到商品详情 -->
    
    <!-- 删除按钮 -->
    <text bindtap="deleteList" data-index="{
  
  {index}}" class='delete'> × </text>
  </view>
  <view wx:if="{
  
  {isMyCartShow}}" class='bottom'>没有书本啦~_~</view>
</view>
<!-- 物品 -->
<view class="cart-box" wx:if="{
  
  {selectThing}}">
  <!-- wx:for 渲染购物车列表 -->
  <view wx:for="{
  
  {thingCarts}}" wx:key="{
  
  {thingCarts}}" class='cart-goods'>
    <!-- wx:if 是否选择显示不同图标 -->
     <view class='icon-wrapper' bindtap="selectListThing" data-index="{
  
  {index}}">
    <icon wx:if="{
  
  {item.selected}}" class='cart-icon' type="success" color="red"  />
    <icon wx:else type="circle" class='cart-icon'  />
    </view>

    <view  class='cart-img'>
      <image class="cart-thumb" src="{
  
  {item.gpicture}}"></image>
      <view class='cart-message'>
        <text class="name">{
  
  {item.gname}}</text>
        <text class="author">校区：{
  
  {item.gcollege}}</text>
        <text class='author'>成色：{
  
  {item.gstatus}}</text>
        <text class='author'>发布者：{
  
  {item.usersname}}</text>
        <text class='price'>￥{
  
  {item.gprice}}</text>
      </view>
    </view>
    <!-- 点击商品图片可跳转到商品详情 -->
    
    <!-- 删除按钮 -->
    <text bindtap="deleteListThing" data-index="{