微信小程序加入购物车

还是假数据，接上一个页面，来进行点击事件，在上一个页面里添加bindtap,就可以wxml

<view class="shopping_cart"  bindtap="bindViewTab" >
    加入购物车
 </view> 
 <view bindtap="buynow" class="shopping_cart">立即购买</view> 

然后在写一下点击之后出现的加入数量的遮盖层wxml

<!--加入购物车遮盖层  -->
<view class="zan-dialog {{ showDialog ? 'zan-dialog--show' : '' }}" catchtouchmove='ture' >
    <view class="zan-dialog__mask" bindtap="zandialog"/>//取消弹窗
    <view class="zan-dialog__container">
        <view style="display: flex;">
             <view style="flex: 1;" style="width: 125rpx;height: 125rpx;">
                <image style="width: 100%;height: 100%;" src="{{list.url}}" ></image>
             </view>
             <view style="flex: 1;margin-left: 30rpx;">
                 <view>{{list.title}}</view>
                 <view>￥{{list.price}}
                 <span>库存：{{}}</span></view>
             </view> 
        </view>
        <view>数量</view>
        <view>
            <text class="decrease" bindtap="decrease">-</text>
            <text class="phonenumber">{{num}}</text>
            <text class="increase" bindtap="increase">+</text>
        </view>
    </view>
</view>

遮盖层css

/* 遮盖层 */
.zan-dialog__mask {
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 5;
    background: rgba(0, 0, 0, 0.5);
    height: 100vh;
    width: 100%;
    display: none;
   }
   
   .zan-dialog__container {
    position: fixed;
    bottom: 100rpx;
    width: 100%;
    height: 350rpx;
    background: #ffffff;
    transform: translateY(300%);
    transition: all 0.4s ease;
    z-index: 12;
   border-radius: 20rpx 20rpx 0rpx 0rpx;
   padding: 25rpx;
   }
   .zan-dialog--show .zan-dialog__container {
    transform: translateY(0);
   }
   
   .zan-dialog--show .zan-dialog__mask {
    display: block;
   }
 /*加减*/
   .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 ;
   }

接下来就是点击加入购物车按钮，出现弹窗以及取消和添加的js

遮盖层首先下data里的初始值是false
showDialog:flase
//加入购物车
bindViewTab:function(e){
   /* 先进行一个判断，判断数量是不是等于0，如果是的话showDialog=ture，如果不是的话 
    showDialog=flase，*/
  if(this.data.num === 0){
            this.setData({
              showDialog: ture
            })  
    } else {
       let productInfo = this.data.list//当前的数据
           productInfo.num = productInfo.num+this.data.num 
           //当前数据的数量等于当前数量加上现在输入的数量
           var shopping = wx.getStorageSync('shopping') || [];//变量等于本地储存或[]
               shopping.push(productInfo)//添加到变量里
            //判断物品id是否一样
               let idArr = []  //相同id放在同一数组中 
               let resultArr = []  //最终结果数组 
               for(let i = 0;i < shopping.length; i++){//遍历shopping
                  let index = idArr.indexOf(shopping[i].id)
                  if(index > -1){  //有相同id存在的话,获取index索引位置
                    resultArr[index].num += shopping[i].num  //取相同id的数量累加
                  }else{
                    idArr.push(shopping[i].id)
                    resultArr.push(shopping[i])
                  }
                }
              wx.setStorageSync('shopping',resultArr)//本地存储
              wx.showToast({
                title: '添加购物车成功',
                icon: 'success',
                duration: 2000,
              })
              this.setData({
                showDialog: false,
                num:0,//总数清理，方便下次使用
                jial:resultArr.length//数量的长度，就购物车图标上的数量
              })
            }
}

遮盖层的加减js 

//点击遮盖层最外面的黑色透明背景showDialog=false
 zandialog:function(){
      this.setData({
        showDialog:false
      })
    },
 //减
  decrease:function(e){
    if(this.data.num < 1){//判断小于1的时候
         wx.showToast({
            title: '不能再减了~',
            icon:'none'
          })
          return ;
        }
        var Num = this.data.num - 1;
        this.setData({//添加到data里面
          num: Num
        })
      },
  //加
  increase:function(e){
        var Num = this.data.num + 1;
        this.setData({
          num: Num
        })
      },