小程序购物车功能

小程序购物车

简单实现小程序购物车全选反选，单选，计算数量，总价等。样式简单，可以自行根据需求写样式，主要看逻辑。
上代码
.wxml

  
    选择
    商品图片
    名称
    单价
  

  
    
      
        
      
      
        
      
      
        {{item.good_name}}
        
          -
          
          +
        
      
      {{item.good_price}}
    
  

  
    
      
      全选
    

    总数量:{{totalNum}}
    总价格:{{totalPrice}}
    去结算
  

.wxss

.box{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.titleBox{
  height: 80rpx;
  background: #C7C763;
  display: flex;
  align-items: center;
}

.titleBox view{
  text-align: center;
}

.titleBox .selectBox{
  width: 12%;
}

.titleBox .imagebox{
  width: 33%;
}

.titleBox .goodname{
  width: 33%;
}

.titleBox .pricebox{
  flex: 1;
}

.box .goodListBox{
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 0 20rpx;
}

.box .goodListBox .selectBox{
  width: 12%;
  text-align: center;
}

.box .goodListBox .imagebox{
  width: 33%;
  margin-right: 20rpx;
}

.box .goodListBox .imagebox image{
  width: 200rpx;
  height: 200rpx;
}

.box .goodListBox .goodname{
  width: 33%;
  text-align: center;
}

.box .goodListBox .pricebox{
  flex: 1;
  text-align: center;
}

.box .goodListBox .good{
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #ddd;
}

.box .goodListBox .numBox{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20rpx;
}

.box .goodListBox .numBox view{
  width: 100rpx;
}

.box .bottomBox{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80rpx;
  padding: 0 20rpx;
  background: #C7C763;
}

.box .bottomBox view:last-child{
  background-color: red;
  color: #fff;
  width: 100rpx;
  height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26rpx;
  border-radius: 5rpx;
}

.js

const app = getApp()
Page({
  data: {
    allCheck:false,       //全选
    goodListArr:[
      {id:1,good_name:'橙子',good_price:'10',good_num:'1',is_check:false,img:'/images/orange.png'},
      {id:2,good_name:'香蕉',good_price:'20',good_num:'2',is_check:false,img:'/images/banana.png'},
      {id:3,good_name:'苹果',good_price:'30',good_num:'3',is_check:false,img:'/images/apple.png'},
      {id:4,good_name:'榴莲',good_price:'40',good_num:'4',is_check:false,img:'/images/durian.png'},
      {id:5,good_name:'荔枝',good_price:'40',good_num:'4',is_check:false,img:'/images/litchi.png'},
      {id:6,good_name:'凤梨',good_price:'40',good_num:'4',is_check:false,img:'/images/pineapple.png'},
      {id:7,good_name:'猕猴桃',good_price:'40',good_num:'4',is_check:false,img:'/images/kiwifruit.png'},
      {id:8,good_name:'芒果',good_price:'40',good_num:'4',is_check:false,img:'/images/mango.png'},
      {id:9,good_name:'水蜜桃',good_price:'40',good_num:'4',is_check:false,img:'/images/honey_peach.png'},
      {id:10,good_name:'樱桃',good_price:'40',good_num:'4',is_check:false,img:'/images/cherry.png'},
      {id:11,good_name:'葡萄',good_price:'40',good_num:'4',is_check:false,img:'/images/grape.png'},
    ],
    totalNum:0,           //总数量
    totalPrice:0.00,      //总价格
  },

  // 全选反选
  allCheckFn(e){
    for(var i=0;i{
      item.is_check = this.data.allCheck
    })
    this.setData({
      goodListArr:this.data.goodListArr
    })
    this.totalNumFn()
    this.totalPriceFn()
  },

  // 选中一个
  itemCheckFn(e){
    var index = e.currentTarget.dataset.index
    this.setData({
      ['goodListArr['+index+'].is_check']:(!this.data.goodListArr[index].is_check)
    })

    this.data.allCheck = !this.data.goodListArr.some(sel => !sel.is_check)
    this.setData({
      allCheck:this.data.allCheck
    })
    this.totalNumFn()
    this.totalPriceFn()
  },

  // 增加数量
  addNumFn(e){
    var index = e.currentTarget.dataset.index
    this.setData({
      ['goodListArr['+index+'].good_num']:Number(this.data.goodListArr[index].good_num) +1
    })
    this.totalNumFn()
    this.totalPriceFn()
  },

  // 减少数量
  delNumFn(e){
    var index = e.currentTarget.dataset.index
    if (Number(this.data.goodListArr[index].good_num)<=1) {
      wx.showToast({
        title: '不能再减了',
        icon:'error'
      })
      return
    } else {
      this.setData({
        ['goodListArr['+index+'].good_num']:Number(this.data.goodListArr[index].good_num) -1
      })
    }
    this.totalNumFn()
    this.totalPriceFn()
  },  

  // 输入数量
  writeNumberFn(e){
    var index = e.currentTarget.dataset.index
    this.setData({
      ['goodListArr['+index+'].good_num']:Number(e.detail.value)
    })
    this.totalNumFn()
    this.totalPriceFn()
  },

  // 封装计算数量
  totalNumFn(){
    var num = 0
    for(var i=0;i