小程序购物车功能

小程序购物车

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

<view class="box">
  <view class="titleBox">
    <view class="selectBox">选择</view>
    <view class="imagebox">商品图片</view>
    <view class="goodname">名称</view>
    <view class="pricebox">单价</view>
  </view>

  <view class="goodListBox">
    <view wx:for="{{goodListArr}}" wx:key="index" class="good">
      <view >
        <checkbox value="{{item.id}}" checked="{{item.is_check}}" data-index="{{index}}" bindtap="itemCheckFn"/>
      </view>
      <view class="imagebox">
        <image src="{{item.img}}"></image>
      </view>
      <view class="goodname">
        <view>{{item.good_name}}</view>
        <view class="numBox">
          <view data-index="{{index}}" bindtap="delNumFn"><span class="button">-</span></view>
          <input type="number" value="{{item.good_num}}" data-index="{{index}}" bindinput="writeNumberFn"/>
          <view data-index="{{index}}" bindtap="addNumFn"><span class="button">+</span></view>
        </view>
      </view>
      <view class="pricebox">{{item.good_price}}</view>
    </view>
  </view>

  <view class="bottomBox">
    <label bindtap="allCheckFn">
      <checkbox checked="{{allCheck}}"/>
      <span>全选</span>
    </label>

    <view>总数量:{{totalNum}}</view>
    <view>总价格:{{totalPrice}}</view>
    <view>去结算</view>
  </view>
</view>

.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<this.data.goodListArr.length;i++){
      this.data.goodListArr[i].is_check = (!this.data.allCheck)
    }
    this.setData({
      allCheck:(!this.data.allCheck)
    })
    this.data.goodListArr.map(item=>{
      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<this.data.goodListArr.length;i++){
      if (this.data.goodListArr[i].is_check) {
        num += Number(this.data.goodListArr[i].good_num)
      }
    }
    this.setData({
      totalNum:num
    })
  },

  // 封装计算总价格
  totalPriceFn(){
    var total = 0
    for(var i=0;i<this.data.goodListArr.length;i++){
      if (this.data.goodListArr[i].is_check) {
        total += Number(this.data.goodListArr[i].good_num)*Number(this.data.goodListArr[i].good_price)
      }
    }
    this.setData({
      totalPrice:total
    })
  },
})