微信小程序购物车页面,数据，选中，不选中，全选，删除和批量删除

接上一个页面，我们已经把要加的物品以及数量本地已经储存好了，现在可以用了，首先页面是这样的

没有数据是页面

有数据时候的页面

现在先把他的wxml页面写出来

<view style="padding-top: {{pageTopHeight}}px;">
    <view class="shopping_wrap">
        <view class="shopping_p">
            <view style="text-align: left;flex: 1;">100%正品保证</view>
            <view style="text-align: center;flex: 1;">所以商品精挑细选</view>
            <view style="text-align: right;flex: 1;">售后无忧</view>
        </view>
        <view style="padding: 20rpx;display: flex;">
            <view style="flex: 1;">
                购物数量
               <span style="color: #fc5452;padding-left: 10rpx;">{{sunm}}</span>
            </view>
             //有数据的时候出现，是管理也是删除
            <view wx:if="{{list.length != 0}}" bindtap="management">
                 {{edit_name}}
            </view>
       </view>
    </view>
    <!-- 购物车商品 -->
      //判断有数据的时候出现
    <view wx:if="{{list.length != 0}}" style="margin:50rpx 0;width: 100%;" >
       <view style="background-color: #fff;padding: 30rpx;">
        <view>乐优直采></view>
          //遍历数据
         <view wx:for="{{list}}" wx:key="id" style="display: flex;padding: 30rpx 0;" >
            <view style="display: flex;">
                //选中和没选中，我用的是图片
                <view style="margin-right: 10rpx;margin-top: 50rpx;">
                    //来进行判断是true和false
                  <image  wx:if="{{item.checked}}"  data-index="{{index}}" 
                    class="radio_chek" bindtap="selectList" 
                    src='/Images/31xuanzhong.png'></image>
                  <image wx:else src='/Images/yuanxingweixuanzhong.png'  
                  class="radio_chek" data-index="{{index}}" bindtap="selectList"></image>
               </view>
             //遍历商品图片
                <image bindtap="bindViewTab" id="{{item.id}}"  style="width: 1 
                 50rpx;height: 150rpx;" src="{{item.url}}" ></image>
           </view>    
            <view style="margin-top: 15rpx;margin-left: 20rpx;"> 
                <view style="line-height: 40rpx;"  bindtap="bindViewTab" id=" 
                {{item.id}}">{{item.title}}</view>
                <view style="color: #e93323;line-height: 80rpx;"  bindtap="bindViewTab" 
                id="{{item.id}}">￥{{item.price}}</view>
                // 加减
                <view style="padding-left: 200rpx;margin-top: -45rpx;">
                   <text class="decrease" bindtap="decrease" data-index=" 
                     {{index}}">-</text>
                    <text class="phonenumber">{{item.num}}</text>
                    <text class="increase" bindtap="increase" data-index=" 
                      {{index}}">+</text> 
                  </view>
             </view>
         </view>
       </view>
        <view style="display: flex;background: #fff;padding:30rpx 20rpx ;position: 
          absolute;bottom: 0;width: 100%;">
           //全选
            <view style="flex:1">
                 // 选中与不选中
                <image wx:if="{{selectAllStatus===true}}"  class="total-select" 
                bindtap="selectAll" src='/Images/31xuanzhong.png'></image>
                <image  wx:else  class="total-select" 
                 bindtap="selectAll"src='/Images/yuanxingweixuanzhong.png'></image>
                <text style="position: absolute;top: 35rpx;left: 85rpx;">全选({{sunm}}) 
                 </text>
            </view>
            <view style='flex: 1;text-align: right;display:{{show_edit}}'>
               <text style="color: #e93323;margin-left: -30rpx;">￥{{totalPrice}}</text>
               <text class="placeanorder" bindtap="immediately">立即下单</text>
            </view>
            <view style='flex: 1;text-align: right;display:{{edit_show}}'>
                <text class="delete" bindtap="deleteList"  data-id="{{item.id}}"> 删除 
              </text>
            </view>
        </view>
    </view>
      //如果没有数据的话
     <view wx:else>
        <image style="width: 100%;height: 100vh;" src="/Images/8.png"></image> 
     </view>
</view>

 出来之后把他的js写出来，页面，加，减已经计算

data的数据   
data: {
        totalPrice:'0',//总价
        sunm:"0", //数量
        selectAllStatus:false, //全选
        edit_name:'管理',
        show_edit: "block",
        edit_show: "none",    
    },
获取数据
onLoad: function (options) {
      setInterval(() => { 
        var li = wx.getStorageSync('shopping')//商品本地存储
        this.setData({//数据添加到data里面
            list:li,
            sunm:li.num
        })

      },100)
    },
 //减
 decrease:function(e){
    const index = e.currentTarget.dataset.index; // 获取点击的索引
        // 获取商品数据
        let list = this.data.list;
        // 获取商品数量
        let num = list[index].num;
        // 判断num小于等于1  return; 点击无效
        if (num <= 1) {
          return false;
        }
        // else  num大于1  点击减按钮  数量--
        num = num - 1;
        list[index].num = num;
        this.setData({ //数据添加到data里面
          list: list
        });
        wx.setStorageSync('shopping',list)//本地存储
        // 调用计算金额方法
        this.count_price();
      },
  //加
  increase:function(e){
         // 获取点击的索引
        const index = e.currentTarget.dataset.index;
        // 获取商品数据
        let list = this.data.list;
        // 获取商品数量
        let num = list[index].num;
        // 点击递增
        num = num + 1;
        list[index].num = num;
        // console.log(list[index].num,'list[index].num')
        var Num = this.data.num + 1;
        this.setData({//数据添加到data里面
          list: list,
        })
        wx.setStorageSync('shopping',list)//本地存储
        this.count_price() // 调用计算金额方法
     },
     //计算
     count_price() {
        // 获取商品列表数据
        let list = this.data.list;
        // 声明一个变量接收数组列表price
        let total = 0;
        let sunlu = 0
        // 循环列表得到每个数据
        for (let i = 0; i < list.length; i++) {
          // 判断选中计算价格
          if (list[i].checked === true) {
            // 所有价格加起来 count_money
            total += list[i].num * list[i].price;
            sunlu += list[i].id.length;
            list[i]. totalPrice = total
          }
         
        }
        wx.setStorageSync('shopping',list)
        // 最后赋值到data中渲染到页面
        this.setData({
          sunm:sunlu,
          totalPrice: total.toFixed(2)
        });
      },

接下来是选中和不选以及全选

页面以及js

 

// 选中
selectList(e) {
   var that=this;
    // 获取选中的索引
   var index = e.currentTarget.dataset.index;
    // 获取到商品列表数据
    var list = that.data.list;
     // 默认全选
     that.data.selectAllStatus = true;
    // 循环数组数据，判断----选中/未选中[selected]
     list[index].checked = !list[index].checked;
     // 如果数组数据全部为selected[true],全选
      for (var i = list.length - 1; i >= 0; i--) {
        if (!list[i].checked) {
           that.data.selectAllStatus =false;
            break;
          }
        }
        // 重新渲染数据
        that.setData({
          list: list,
          selectAllStatus: that.data.selectAllStatus

        })
        // 调用计算金额方法
        that.count_price();  
    },
    // 全选
    selectAll:function(e){
       // 全选ICON默认选中
        let selectAllStatus = this.data.selectAllStatus;
        console.log( selectAllStatus," selectAllStatus")
        // true  -----   false
        selectAllStatus = !selectAllStatus;
        // 获取商品数据
        let list = this.data.list;
        console.log( list,"  this.data.list")
        // 循环遍历判断列表中的数据是否选中
        for (let i = 0; i < list.length; i++) {
          list[i].checked = selectAllStatus;
        }
       
        // 页面重新渲染
        this.setData({
          selectAllStatus: selectAllStatus,
          list: list
        });
        // 计算金额方法
        this.count_price();

    },

管理，取消和删除的页面和js

 

// 管理/取消
management:function(){
   var that = this;
   var bool=true;
   if(bool){//在data里面初始值是管理
       that.setData({
          edit_show: "block",//下面按钮会变成删除
          edit_name: "取消",
          show_edit:"none"
        })
        bool=false;
      }else{
        that.setData({
          edit_show: "none",
          edit_name: "管理",
          show_edit: "block"//下面按钮会变成立即下单
        })
        bool = true;
      }
    },
//删除 批量删除
deleteList:function(e){
     // 获取商品列表数据
     let list = this.data.list;
     var ll = []
     //遍历数据
     for (let i = 0; i < list.length; i++) {
       if(list[i].checked ===true){//判断一下按钮等于true吗，有的话走下面的
          list[i].index = i//添加一下下标
          ll.push(list[i]) //添加到数组里
       }
     }
     if(ll.length!=''){//判断数组里不等于空
      var index=[]//数据的下标
      var numl = ll.length//数据的长度
      for (let i = 0; i < ll.length; i++) {//遍历数据
            index.push(ll[i].index) //添加数据的下标    
      }
      this.data.list.splice(index,numl);//删除数据的下标和数量
        // 更新data数据对象  
        if (this.data.list.length > 0) {
            this.setData({
              list: this.data.list,
              sunm:0,
            })
          wx.setStorageSync('shopping',this.data.list);//本地存储
      } else {
          this.setData({
              list: this.data.list.checked,
              sunm:0,
           })
        wx.setStorageSync('shopping', []);//本地存储
  
      }
    }else{//等于空的话走这一步
      wx.showToast({
        title: '请选择商品',
        icon:'none'
      })
      
    }
 },

wxss

/* 正品 */
.shopping_wrap{
    display: block;
    width: 100%;
    background: #fff;
    padding-top: 50rpx;
}
.shopping_p{
    display: flex;
   line-height: 70rpx;
   background: #f5f5f5;
   width: 100%;
   font-size: 12px;
   color: #b6b6b6;
   padding: 0px 80rpx;
}
  /* 加减 */
  .decrease{
    padding: 8rpx 30rpx;
    border-top:1px solid #bbbbbb;
    border-left:1px solid #bbbbbb;
    border-bottom:1px solid #bbbbbb ;
}
.phonenumber{
 padding: 8rpx 30rpx;
 border: 1px solid #bbbbbb;
}
.increase{
 padding: 8rpx 30rpx;
 border-top:1px solid #bbbbbb ;
 border-right:1px solid #bbbbbb ;
 border-bottom:1px solid #bbbbbbbd ;
}
/*  */
.radio_chek{
    width: 50rpx;
    height: 50rpx;
}
/*  */
.total-select{

    width: 50rpx;
    height: 50rpx;
}
/* 下单 */
.placeanorder{
    background: #e93323;
    color: #fff;
    padding: 10px 50rpx;
    border-radius: 100rpx;
    margin-left: 20rpx;
}
.delete{
    border: 1px solid #e93323;
    padding: 10px 60rpx;
    color:#e93323 ;
    border-radius: 100rpx;
}

现在购物车这一块已完毕，有更简单的也可以留言，我可以在改进改进