首页手记微信小程序购物车案例

微信小程序购物车案例

标签：

Html/CSS JavaScript

最近呢，我看到有人在问微信小程序的购物车怎么写，我呢就在这里写一写；

购物车主要的就是全选的判断、勾选单个物品判断是否全选、计算总价
效果Gif图：

直接简单粗暴的上代码；

wxml代码：

<view class='header'>
  <view class='check_box'>        
     <image class='check_img' src='../../img/check_icon_false.png' hidden='{{allsel}}' catchtap='allcheckTap'></image>        
     <image class='check_img' src='../../img/check_icon_true.png' hidden='{{!allsel}}' catchtap='allcheckTap'></image>        
     <text class='check_text' catchtap='allcheckTap'>全选</text>    
  </view>    
  <text class='header_text' catchtap='adminTap'>{{adminShow?'取消管理':'管理'}}</text>
</view>
<view class='main'>  
    <view class='shop' wx:for='{{shopcarData}}' wx:key='this'>    
        <view class='shop_check_box' data-index='{{index}}' catchtap='checkTap'>        
            <image class='check_img' hidden='{{item.check}}' src='../../img/check_icon_false.png'></image>        
            <image class='check_img' hidden='{{!item.check}}' src='../../img/check_icon_true.png'></image>    
        </view>    
        <image 
            class='shop_img' 
            src='http://wxxapp.duapp.com/img/banner1.png' 
            mode='aspectFill' 
            catchtap='navshopdetailTap'>
        </image>    
        <view class='shop_detail' catchtap='navshopdetailTap'>        
            <text class='shop_name'>{{item.name}}</text>        
            <text class='shop_type'>{{item.types}}</text>        
            <view class='shop_detail_bottom'>            
                <text class='shop_price'>￥{{item.price}}</text>            
                <view class='num_change'>                
                    <image 
                        class='minus_icon' 
                        hidden='{{item.num<2}}' 
                        src='../../img/minus_icon.png' 
                        data-index='{{index}}' 
                        data-types='minus'  
                        catchtap='numchangeTap'>
                    </image>
                    <image 
                        class='minus_icon' 
                        hidden='{{item.num>=2}}' 
                        src='../../img/minus_icon_false.png'>
                     </image>                
                    <text class='shop_num'>{{item.num}}</text>                
                    <image 
                        class='add_icon' 
                        data-index='{{index}}' 
                        data-types='add'  
                        catchtap='numchangeTap' 
                        src='../../img/add_icon.png'>
                    </image>            
                </view>        
            </view>    
         </view>  
        </view>
</view>
<view class='footer'>    
   <text class='footer_total_text' hidden='{{adminShow}}'>合计：<text class='footer_total_price'>￥{{total}}</text></text>    
   <text class='footer_total' hidden='{{adminShow}}' catchtap='goclearingTap'>结算</text>    
   <text class='deleteshop' catchtap='deleteshopTap' hidden='{{!adminShow}}'>移除商品</text>    
   <text class='deleteshop' catchtap='addcollectTap' hidden='{{!adminShow}}'>加入收藏夹</text>
</view>

接下来是wxss:

page{  
    background: #f3f7f7;  
    height: 100%;  
    width: 100%;  
    display: flex;  
    flex-direction: column;
}
.header{  
    padding: 0 20rpx;  
    background: #fff;  
    height: 90rpx;  
    display: flex;  
    border-bottom: 1px solid #efefef;
}
.check_box{  
    flex: 1;  
    display: flex;  
    line-height: 90rpx;  
    font-size: 30rpx;
}
.check_img{  
    width: 38rpx;  
    height: 38rpx;  
    margin-top:26rpx;
}
.check_text{  
    margin-left: 15rpx;  
    line-height: 90rpx;
}
.header_text{
  font-size: 30rpx;  
  line-height: 90rpx;  
  padding:0 6rpx;  
  color: #ff9600;
}
.main{
  flex: 1;  
  overflow:auto;/* winphone8和android4+ */  
  -webkit-overflow-scrolling: touch; /* ios5+ */
}
.shop{
  background: #fff;  
  display: flex;  
  padding:20rpx;  
  border-bottom: 1px solid #efefef;
}
.shop_check_box{
  margin-top: 45rpx;
}
.shop_img{
  width: 180rpx;  
  height: 180rpx;  
  margin:0 20rpx;
}
.shop_detail{
  flex: 1;
}
.shop_name{
  font-size: 30rpx;  
  line-height: 40rpx;  
  display: block;  
  max-height: 80rpx;  
  word-break:break-all;  
  display:-webkit-box;  
  -webkit-line-clamp:2;  
  -webkit-box-orient:vertical;  
  overflow:hidden;
}.shop_type{
  display: block;  
  font-size: 26rpx;  
  color: #ccc;  
  line-height: 50rpx;
}
.shop_detail_bottom{
  display: flex;
}
.shop_price{
  line-height: 50rpx;  
  flex: 1;  
}
.num_change{
  display: flex;  
  padding-top: 11rpx;
}
.shop_num{
  line-height: 38rpx;  
  height: 38rpx;  
  width: 60rpx;  
  text-align: center;  
  font-size: 30rpx;
}
.add_icon,.minus_icon{
  width: 38rpx;  
  height: 38rpx;
}

好了，接下来是js代码：

var app=getApp();
Page({  
    data: {
          adminShow:false,//管理      
          shopcarData:[],//购物车数据      
          total:0,//总金额      
          allsel:false,//全选      
          selarr:[],//选择的货物      
          hintText:'',//提示的内容      
          hintShow:false//是否显示提示  
},  

//点击全选  
allcheckTap:function(){
    let shopcar=this.data.shopcarData,        
         allsel = !this.data.allsel,//点击全选后allsel变化
         total=0;    
    for(let i=0,len=shopcar.length;i<len;i++){
        shopcar[i].check=allsel;//所有商品的选中状态和allsel值一样
        if(allsel){//如果为选中状态则计算商品的价格
          total += shopcar[i].price * shopcar[i].num;
        }    
    }    
    this.data.selarr=allsel?shopcar:[];//如果选中状态为true那么所有商品为选中状态，将物品加入选中变量，否则为空    
    this.setData({
          allsel:allsel,      
          shopcarData: shopcar,
          total:total,      
          selarr: this.data.selarr    
    });  
},  
//点击移除商品  
deleteshopTap:function(){
    var allsel = this.data.allsel,        
         shopcar=this.data.shopcarData,        
         selarr=this.data.selarr;    
    if(allsel){
       shopcar=[];      
       this.setData({
         allsel: false      
       });    
    }else{
       console.log(selarr);
         for(var i = 0, len = selarr.length;i<len;i++){//将选中的商品从购物车移除        
             console.log(selarr[i].id);        
             for(var lens=shopcar.length-1,j=lens;j>=0;j--){
                console.log(shopcar[j].id);          
                if(selarr[i].id==shopcar[j].id){
                   shopcar.splice(j, 1);          
                }        
             }      
          }         
     }    
     this.setData({      
         shopcarData:shopcar,      
         total:0    
     });  
},  
//点击加入收藏夹，这里按自己需求写吧  
addcollectTap:function(){ 

},  
//点击管理按钮，是否显示管理的选项  
adminTap:function(){
    this.setData({
      adminShow: !this.data.adminShow    
    });  
},  
//点击单个选择按钮  
checkTap:function(e){
    let Index=e.currentTarget.dataset.index,        
         shopcar=this.data.shopcarData,        
         total=this.data.total,        
         selarr=this.data.selarr;    
    shopcar[Index].check = !shopcar[Index].check||false;    
    if(shopcar[Index].check){  
      total += shopcar[Index].num * shopcar[Index].price;      
      selarr.push(shopcar[Index]);    
    }else{ 
      total -= shopcar[Index].num * shopcar[Index].price;      
      for(let i=0,len=selarr.length;i<len;i++){
        if(shopcar[Index].id==selarr[i].id){
          selarr.splice(i,1);
          break;        
        }      
      }    
    }    
    this.setData({  
      shopcarData:shopcar,      
      total: total,      
      selarr: selarr    
    });    
    this.judgmentAll();//每次按钮点击后都判断是否满足全选的条件  
},  
//点击加减按钮  
numchangeTap:function(e){  
  let Index=e.currentTarget.dataset.index,//点击的商品下标值        
       shopcar=this.data.shopcarData,        
       types=e.currentTarget.dataset.types,//是加号还是减号        
       total=this.data.total;//总计    
  switch(types){   
    case 'add':      
        shopcar[Index].num++;//对应商品的数量+1      
        shopcar[Index].check && (total +=parseInt(shopcar[Index].price));//如果商品为选中的，则合计价格+商品单价      
        break;      
    case 'minus':      
        shopcar[Index].num--;//对应商品的数量-1      
        shopcar[Index].check && (total -= parseInt(shopcar[Index].price));//如果商品为选中的，则合计价格-商品单价      
        break;    
  }    
  this.setData({    
    shopcarData:shopcar,      
    total: total    
  });  
},  
//判断是否为全选  
judgmentAll:function(){  
  let shopcar=this.data.shopcarData,        
       shoplen=shopcar.length,        
       lenIndex=0;//选中的物品的个数    
  for(let i=0;i<shoplen;i++){//计算购物车选中的商品的个数    
    shopcar[i].check && lenIndex++;    
  }    
  this.setData({    
    allsel: lenIndex == shoplen//如果购物车选中的个数和购物车里货物的总数相同，则为全选，反之为未全选    
  });  
},   
onLoad: function (options) {

},   
onReady: function () {

},   
/**   * 生命周期函数--监听页面显示   */  
onShow: function () {   
  var shopcarData = app.globalData.shopcarData,//这里我是把购物车的数据放到app.js里的，这里取出来，开发的时候视情况加载自己的数据
     total=0,        
     selarr=this.data.selarr;    
  for(let i=0,len=shopcarData.length;i<len;i++){//这里是对选中的商品的价格进行总结    
    if(shopcarData[i].check){        
        total+= shopcarData[i].num * shopcarData[i].price;        
        selarr.push(shopcarData[i]);      
     }    
  }    
  this.setData({   
    shopcarData: shopcarData,      
    total: total,      
    selarr: selarr    
  });    
  this.judgmentAll();//判断是否全选  
}

最后是app.js里的购物车里的数据

App({
    globalData:{
        shopcarData: [{//购物车   
           id: '1',     
           name: '折后i啊手动阀就是点击发送的金佛啊是是假的佛山折后i啊手动阀就是点击发送的金佛啊是是假的佛山',      
           price: '230',      
           num: 1,      
           types: '白色/39码',      
           check:true    
         }, {    
           id: '2',      
           name: '啊哈额和福特好热惊讶所以就如同撒打发士大夫',      
           price: '332',      
           num: 1,      
           types: '粉色/38码'    
         }, {   
           id: '3',      
           name: '啊如何呀还是大范围推广哇额饿啊日hers的说法的事发生的',      
           price: '120',      
           num: 1,     
           types: '白色/41码',      
           check: true    
         }, {      
           id: '4',      
           name: '阿桑的歌也会更好的反对犯得上的事发生的',      
           price: '320',      
           num: 1,      
           types: '黑色/37码',      
           check: true    
         }, {     
           id: '5',      
           name: '阿桑的歌微软噶士大夫啊士大夫但是飞洒地方士大夫撒',      
           price: '630',      
           num: 1,      
           types: '白色/39码',      
           check: true    
         }]
     }

})

好了上面就是关于微信小程序购物车的例子，

如果有哪里有问题，或者你有什么好的建议或者意见请留言，谢谢

点击查看更多内容