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

Page({  data: {    carts:[],        // 购物车列表    hasList:false,     // 列表是否有数据    totalPrice:0,      // 总价，初始为0    selectAllStatus:true  // 全选状态，默认全选  },  onShow() {    this.setData({     hasList: true,    // 既然有数据了，那设为true吧     carts:[      {id:1,title:'新鲜芹菜 半斤',image:'/image/s5.png',num:4,price:0.01,selected:true},      {id:2,title:'素米 500g',image:'/image/s6.png',num:1,price:0.03,selected:true}     ]    });   },})

<view>  <!-- wx:for 渲染购物车列表 -->  <view>      <!-- wx:if 是否选择显示不同图标 -->    <icon></icon>    <icon></icon>        <!-- 点击商品图片可跳转到商品详情 -->    <navigator>      <image></image>    </navigator>        <text>{{item.title}}</text>    <text>￥{{item.price}}</text>        <!-- 增加减少数量按钮 -->    <view>      <text>-</text>      <text>{{item.num}}</text>      <text>+</text>    </view>        <!-- 删除按钮 -->    <text> × </text>  </view></view><!-- 底部操作栏 --><view>  <!-- wx:if 是否全选显示不同图标 -->  <icon></icon>  <icon></icon>  <text>全选</text>    <!-- 总价 -->  <text>￥{{totalPrice}}</text></view>

getTotalPrice() {  let carts = this.data.carts;         // 获取购物车列表  let total = 0;  for(let i = 0; i<carts.length><p></p><p>页面中的其他操作会导致总价格变化的都需要调用该方法。</p><p><span style="color: #800000"><strong>选择事件</strong></span></p><p>点击时选中，再点击又变成没选中状态，其实就是改变 selected 字段。通过 data-index="{{index}}" 把当前商品在列表数组中的下标传给事件。</p><p class="jb51code"></p><pre class="brush:js;toolbar:false;">selectList(e) {  const index = e.currentTarget.dataset.index;  // 获取data- 传进来的index  let carts = this.data.carts;          // 获取购物车列表  const selected = carts[index].selected;     // 获取当前商品的选中状态  carts[index].selected = !selected;       // 改变状态  this.setData({    carts: carts  });  this.getTotalPrice();              // 重新获取总价}

selectAll(e) {  let selectAllStatus = this.data.selectAllStatus;  // 是否全选状态  selectAllStatus = !selectAllStatus;  let carts = this.data.carts;  for (let i = 0; i <p></p><p><span style="color: #800000"><strong>增减数量</strong></span></p><p>点击+号，num加1，点击-号，如果num &gt; 1，则减1</p><p class="jb51code"></p><pre class="brush:js;toolbar:false;">// 增加数量addCount(e) {  const index = e.currentTarget.dataset.index;  let carts = this.data.carts;  let num = carts[index].num;  num = num + 1;  carts[index].num = num;  this.setData({   carts: carts  });  this.getTotalPrice();},// 减少数量minusCount(e) {  const index = e.currentTarget.dataset.index;  let carts = this.data.carts;  let num = carts[index].num;  if(num <p></p><p><span style="color: #800000"><strong>删除商品</strong></span></p><p>点击删除按钮则从购物车列表中删除当前元素，删除之后如果购物车为空，改变购物车为空标识hasList为false</p><p class="jb51code"></p><pre class="brush:js;toolbar:false;">deleteList(e) {  const index = e.currentTarget.dataset.index;  let carts = this.data.carts;  carts.splice(index,1);       // 删除购物车列表里这个商品  this.setData({    carts: carts  });  if(!carts.length){         // 如果购物车为空    this.setData({      hasList: false       // 修改标识为false，显示购物车为空页面    });  }else{               // 如果不为空    this.getTotalPrice();      // 重新计算总价格  }  }