小程序之购物车逻辑-即速应用

工作之余，写个小程序购物车

Cart.wxml

view class="main"    view wx:if="{{hasList}}" !--hasList判断是否存在购物列表--        view class="cart-box"            view class="cart-list" wx:for="{{carts}}" wx:key="{{index}}"                icon wx:if="{{item.selected}}" type="success" color="red" data-index="{{index}}"  class="cart-pro-select" bindtap="selectList"/                icon wx:else type="circle" class="cart-pro-select" data-index="{{index}}" bindtap="selectList"/!--item.selected判断是否选中--!--../details/details?id={{item.id}}  跳转具体商品页--                navigator url="../details/details?id={{item.id}}"image class="cart-thumb" src="{{item.image}}"/image/navigator                text class="cart-pro-name"{{item.title}}/text                text class="cart-pro-price"￥{{item.price}}/text                view class="cart-count-box"!--data-obj 自定义属性--                    text class="cart-count-down" bindtap="minusCount" data-obj="{{obj}}" data-index="{{index}}"-/text                    text class="cart-count-num"{{item.num}}/text                    text class="cart-count-add" bindtap="addCount" data-index="{{index}}"+/text                /view                text class="cart-del" bindtap="deleteList" data-index="{{index}}"×/text            /view        /view        view class="cart-footer"!--全选功能--            icon wx:if="{{selectAllStatus}}" type="success_circle" color="#fff" class="total-select" bindtap="selectAll"/            icon wx:else type="circle" color="#fff" class="total-select" bindtap="selectAll"/!--全选功能--!--调转支付页面--            view class="order-icon"                navigator url="../orders/orders"image src="/image/icon3.png"/image/navigator            /view!--调转支付页面--            text全选/text            text class="cart-toatl-price"￥{{totalPrice}}/text        /view    /view    view wx:else        view class="cart-no-data"购物车是空的哦~/view    /view/view

Cart.wxss

.cart-box{    padding-bottom: 100rpx;}.cart-list{    position: relative;    padding: 20rpx 20rpx 20rpx 285rpx;    height: 185rpx;    border-bottom: 1rpx solid #e9e9e9;}.cart-list .cart-pro-select{    position: absolute;    left: 20rpx;    top: 90rpx;    width: 45rpx;    height: 45rpx;}.cart-list .cart-thumb{    position: absolute;    top: 20rpx;    left: 85rpx;    width: 185rpx;    height: 185rpx;}.cart-list .cart-pro-name{    display: inline-block;    width: 300rpx;    height: 105rpx;    line-height: 50rpx;    overflow: hidden;}.cart-list .cart-pro-price{    display: inline-block;    float: right;    height: 105rpx;    line-height: 50rpx;}.cart-list .cart-count-box{    position: absolute;    left: 285;    bottom: 20rpx;    width: 250rpx;    height: 80rpx;}.cart-list .cart-count-box text{    display: inline-block;    line-height: 80rpx;    text-align: center;}.cart-count-down,.cart-count-add{    font-size: 44rpx;    width: 50rpx;    height: 100%;}.cart-count-num{    width: 150rpx;}.cart-del{    position: absolute;    right: 20rpx;    bottom: 20rpx;    width: 80rpx;    height: 80rpx;    line-height: 80rpx;    text-align: center;    font-size: 44rpx;}.cart-footer{    position: fixed;    bottom: 0;    left: 0;    width: 100%;    height: 90rpx;    line-height: 90rpx;    padding:0 100rpx 0 80rpx;    box-sizing: border-box;    background: #AB956D;    color: #fff;}.total-select{    position: absolute;    left: 20rpx;    top: 25rpx;    width: 45rpx;    height: 45rpx;}.order-icon{    position: absolute;    right: 40rpx;    top: 25rpx;    width: 45rpx;    height: 45rpx;}.order-icon image,.order-icon navigator{  display: block;  width: 45rpx;  height: 45rpx;}.cart-toatl-price{    float: right;    width: 120rpx;}.cart-no-data{    padding:40rpx 0;    color: #999;    text-align: center;}

Cart.js

Page({  data: {    carts:[],               // 购物车列表    hasList:false,          // 列表是否有数据    totalPrice:0,           // 总价，初始为0    selectAllStatus:true,    // 全选状态，默认全选    obj:{        name:"hello"    }  },  onShow() {    this.setData({      hasList: 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}      ]    });    this.getTotalPrice();  },  /**   * 当前商品选中事件   */  selectList(e) {    console.log(e)    const index = e.currentTarget.dataset.index;    let carts = this.data.carts;    const selected = carts[index].selected;    carts[index].selected = !selected;    this.setData({      carts: carts    });    this.getTotalPrice();  },  /**   * 删除购物车当前商品   */  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      });    }else{      this.getTotalPrice();    }  },  /**   * 购物车全选事件   */  selectAll(e) {    let selectAllStatus = this.data.selectAllStatus;    selectAllStatus = !selectAllStatus;    let carts = this.data.carts;    for (let i = 0; i  carts.length; i++) {      carts[i].selected = selectAllStatus;    }    this.setData({      selectAllStatus: selectAllStatus,      carts: carts    });    this.getTotalPrice();  },  /**   * 绑定加数量事件   */  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;    const obj = e.currentTarget.dataset.obj;    let carts = this.data.carts;    let num = carts[index].num;    if(num = 1){      return false;    }    num = num - 1;    carts[index].num = num;    this.setData({      carts: carts    });    this.getTotalPrice();  },  /**   * 计算总价   */  getTotalPrice() {    let carts = this.data.carts;                  // 获取购物车列表    let total = 0;    for(let i = 0; icarts.length; i++) {         // 循环列表得到每个数据      if(carts[i].selected) {                     // 判断选中才会计算价格        total += carts[i].num * carts[i].price;   // 所有价格加起来      }    }    this.setData({                                // 最后赋值到data中渲染到页面      carts: carts,      totalPrice: total.toFixed(2)    });  }})