微信小程序红色空购物车选择结算页面样式设计制作开发教程

本文给大家带来的是微信小程序红色空购物车选择结算页面样式设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<!--pages/cart/cart.wxml-->
<view class="page">
  <view class="shop df" wx:for="{{productData}}">
        <image class="sh_slt" src="{{item.ImgUrl}}"></image>
        <view class="df_1">            
            <view class="sp_text">
                <navigator url="../index/detail?productId={{item.ProID}}">
                    <view class="sp_tit ovh1">{{item.ProductName}}</view>
                </navigator>
                <view class="sp_neb">数量：×{{item.BuyCount}}</view>
                <view class="sp_jg">¥：{{item.Price}}</view>
                <button class="dle" data-card-id="{{item.CartID}}" bindtap="removeShopCard">删除</button> 
                <navigator class="dle" url="../order/pay?productId={{item.ProID}}&cartId={{item.CartID}}&buyCount={{item.BuyCount}}">下单</navigator>
            </view>
        </view>
    </view> 
<!--样式-->  
<view class="container carts-list" wx:if="{{carts==''}}">
    <view class="pp">
         <image class="carts-image" src="../../images/cart.jpg" mode="aspectFill"/>
         <view class="cla">购物车空空如也</view>
    </view>
</view>
<view class="container carts-list">
<!--勾-->
     <view wx:for="{{carts}}" class="carts-item" data-title="{{item.pro_name}}" id="{{item.id}}">
         <icon wx:if="{{item.selected}}" type="success_circle"    size="20" bindtap="bindCheckbox" data-index="{{index}}"/>
         <icon wx:else type="circle" size="20" bindtap="bindCheckbox" data-index="{{index}}"/>
     <!--img-->
     <view>
         <image class="carts-image" src="{{item.photo_x}}" mode="aspectFill"/>
    </view>
    <!--文字-->
   <view class="carts-text">
       <text class="carts-title">{{item.pro_name}}</text>
    <view class="carts-subtitle">
        <text class="carts-price">¥ {{item.price}}</text>
    </view>
     </view>
<!--右边-->
     <view class="title">
        <text bindtap="removeShopCard" data-cartid="{{item.id}}" class="modal-close">x</text>
         <view class="stepper">
       <!-- 减号 -->
             <text class="{{minusStatuses[index]}}" data-index="{{index}}" bindtap="bindMinus" data-cartid="{{item.id}}">-</text>
       <!-- 数值 -->
                <input type="number" bindchange="bindManual" value="{{item.num}}" />
       <!-- 加号 -->
              <text class="normal" data-index="{{index}}" bindtap="bindPlus" data-cartid="{{item.id}}">+</text>
      </view> 
       </view>

  </view>
</view>


<!--底部-->
<view class="carts-footer">
   <view bindtap="bindSelectAll">
       <icon wx:if="{{selectedAllStatus}}" type="success_circle" size="20"/>
        <icon wx:else type="circle" size="20" />
        <text>全选</text>
        <text class="reds">{{total}}</text>
   </view>
       <view class="button" bindtap='bindCheckout'>结算</view>
</view>


</view>

二、wxss样式文件代码如下：

/* pages/cart/cart.wxss */
page{  background: white;}
.clearbutton{
    background: #fff; 
    display: inline-block;
    margin:3% 3% 2% 3%; 
    color: #dd2727;
    font-size: 14px;
    width: 94%;
}
.shop{
    background: #fff;
    padding: 4%;
    margin-bottom: 10px;
}
.shop checkbox{ 
    margin-top: 27px;
    }
.sh_slt{
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 5px;
    margin-right: 4%;
    margin-left: 3%;
    float: left;
}
.sp_text{
    float: left;
    line-height: 20px;
    width: 100%;
    }
.sp_tit{
    width: 100%;
    overflow: hidden;
    font-size: 14px;
}
.sp_neb{
    width: 100%;
    overflow: hidden;
    font-size: 12px;
    color: #999;
}
.sp_jg{
    width: 100%;
    overflow: hidden;
    font-size: 14px;
    color: #fc0628;
}
.dle{
    color: #999;
    font-size: 12px;
    float: right;
    margin-left: 10px;
}
.dle image{
    width: 18px;
    height: 18px;
    vertical-align: sub;
}
.jk_bottom{
    position: fixed;
    bottom: 0;
    background: #fff;
    width: 100%; 
    display: inline-flex;
    border-bottom: 1px solid #eee; 
    font-size: 14px;
    color: #999;       
}
.jk_bottom checkbox{
    margin: 4% 0 4% 4%;    
}
.jk_bottom .heji{
    margin-top: 5.5%;
    width: 30%; 
    text-align: right;   
}
.jk_bottom .all{
    margin-top: 5.5%;
    padding-left: 2%;  
}
.jk_bottom .js_button{
    background: #dd2727;
    float: right;
    color: #fff;
    font-size: 16px;
    text-align: center;
    width: 40%;
    position: absolute;
    right: 0;
    line-height: 50px;
}
.bottom_clear{
    clear: clear;
    height: 1px;
    margin-top: 60px;
}



/*外部容器*/
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
} 
 /*复选框样式*/
.carts-list icon {
  margin-top: 60rpx;
  margin-right: 20rpx;
}
/*整体列表*/
.carts-list {
  display: flex;
  flex-direction: column;
  padding: 20rpx 40rpx;
   background: #fff;
}
 
/*每行单元格*/
.carts-item {
  display: flex;
  flex-direction: row;
  height:150rpx;
  /*width属性解决标题文字太短而缩略图偏移*/
  width:100%;
  border-bottom: 1px solid #eee;
  padding: 30rpx 0;
}
 
/*左部图片*/
.carts-image {
  margin-top:140%;
  width:150rpx;
  height:150rpx;
}
 
 
/*右部描述*/
.carts-text {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
 
/*右上部分标题*/
.carts-title {
  margin: 10rpx;
  font-size: 28rpx;
} 
/*右下部分价格与数量*/
.carts-subtitle {
  font-size: 25rpx;
  color:darkgray;
  padding: 0 20rpx;
  display: flex;
  flex-direction: row;
  justify-content:space-between;
}
 
/*价格*/
.carts-price {
  color: #f60;
}
/*底部按钮*/
.carts-footer {
  width: 100%;
  height: 80rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
   position: fixed;
    bottom: 0;
    border-top: 1px solid #eee;
    background: #eee;
    z-index:999;
}
/*复选框*/
.carts-footer icon {
  margin-left: 20rpx;
  margin-top: 10rpx;
  color: #fff;
}
 
/*全选字样*/
.carts-footer text {
  font-size: 30rpx;
  margin-left: 8rpx;
  line-height: 10rpx;
}
 
/*立即结算按钮*/
.carts-footer .button {
  line-height: 80rpx;
  text-align: center;
  width:220rpx;
  height: 80rpx;
  background-color: #dd2727;
  color: white;
  font-size: 36rpx;
  font-weight: 700;
  border-radius: 0;
  border: 0;
}
.stepper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-top: 40rpx;
}
.stepper text {
  background-color: #f2f2f2;
  margin: 5px 0;
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  font-weight: 900;
  color: #939393;
  border-radius:6rpx; 
  border:1px solid #fff;
    /*border-left:1px solid #fff ;*/
}
.stepper input {
  width: 43px;
  height: 25px;
  text-align: center;
  /*background-color: #f2f2f2;*/
  border-radius:6rpx; 
  border-top: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2
}
.modal-close{
    margin-left:200rpx ;
    padding: 20px 0;  color: #939393;
}
.page{
  
    padding-bottom: 60rpx;
}
.reds{
    color: red;
}


.pp{
  text-align: center;
}
.cla{
      font-family: '微软雅黑';
      color: #ccc;
}

三、js页面代码如下：

var app = getApp();
// pages/cart/cart.js
Page({
  data:{
    page:1,
    minusStatuses: ['disabled', 'disabled', 'normal', 'normal', 'disabled'],
    total: 0,
    carts: []
  },

bindMinus: function(e) {
    var that = this;
    var index = parseInt(e.currentTarget.dataset.index);
    var num = that.data.carts[index].num;
    // 如果只有1件了，就不允许再减了
    if (num > 1) {
      num --;
    }
    console.log(num);
    var cart_id = e.currentTarget.dataset.cartid;
    wx.request({
      url: app.d.ceshiUrl + '/Api/Shopping/up_cart',
      method:'post',
      data: {
        user_id: app.globalData.userInfo.id,
        num:num,
        cart_id:cart_id
      },
      header: {
        'Content-Type':  'application/x-www-form-urlencoded'
      },
      success: function (res) {
        var status = res.data.status;
        if(status==1){
          // 只有大于一件的时候，才能normal状态，否则disable状态
          var minusStatus = num <= 1 ? 'disabled' : 'normal';
          // 购物车数据
          var carts = that.data.carts;
          carts[index].num = num;
          // 按钮可用状态
          var minusStatuses = that.data.minusStatuses;
          minusStatuses[index] = minusStatus;
          // 将数值与状态写回
          that.setData({
            minusStatuses: minusStatuses
          });
          that.sum();
        }else{
          wx.showToast({
            title: '操作失败！',
            duration: 2000
          });
        }
      },
      fail: function() {
        // fail
        wx.showToast({
          title: '网络异常！',
          duration: 2000
        });
      }
    });
},

bindPlus: function(e) {
    var that = this;
    var index = parseInt(e.currentTarget.dataset.index);
    var num = that.data.carts[index].num;
    // 自增
    num ++;
    console.log(num);
    var cart_id = e.currentTarget.dataset.cartid;
    wx.request({
      url: app.d.ceshiUrl + '/Api/Shopping/up_cart',
      method:'post',
      data: {
        user_id: app.globalData.userInfo.id,
        num:num,
        cart_id:cart_id
      },
      header: {
        'Content-Type':  'application/x-www-form-urlencoded'
      },
      success: function (res) {
        var status = res.data.status;
        if(status==1){
          // 只有大于一件的时候，才能normal状态，否则disable状态
          var minusStatus = num <= 1 ? 'disabled' : 'normal';
          // 购物车数据
          var carts = that.data.carts;
          carts[index].num = num;
          // 按钮可用状态
          var minusStatuses = that.data.minusStatuses;
          minusStatuses[index] = minusStatus;
          // 将数值与状态写回
          that.setData({
            minusStatuses: minusStatuses
          });
          that.sum();
        }else{
          wx.showToast({
            title: '操作失败！',
            duration: 2000
          });
        }
      },
      fail: function() {
        // fail
        wx.showToast({
          title: '网络异常！',
          duration: 2000
        });
      }
    });
}, 

bindCheckbox: function(e) {
  /*绑定点击事件，将checkbox样式改变为选中与非选中*/
  //拿到下标值，以在carts作遍历指示用
  var index = parseInt(e.currentTarget.dataset.index);
  //原始的icon状态
  var selected = this.data.carts[index].selected;
  var carts = this.data.carts;
  // 对勾选状态取反
  carts[index].selected = !selected;
  // 写回经点击修改后的数组
  this.setData({
    carts: carts
  });
  this.sum()
},

bindSelectAll: function() {
   // 环境中目前已选状态
   var selectedAllStatus = this.data.selectedAllStatus;
   // 取反操作
   selectedAllStatus = !selectedAllStatus;
   // 购物车数据，关键是处理selected值
   var carts = this.data.carts;
   // 遍历
   for (var i = 0; i < carts.length; i++) {
     carts[i].selected = selectedAllStatus;
   }
   this.setData({
     selectedAllStatus: selectedAllStatus,
     carts: carts
   });
   this.sum()
 },

bindCheckout: function() {
   // 初始化toastStr字符串
   var toastStr = '';
   // 遍历取出已勾选的cid
   for (var i = 0; i < this.data.carts.length; i++) {
     if (this.data.carts[i].selected) {
       toastStr += this.data.carts[i].id;
       toastStr += ',';
     }
   }
   if (toastStr==''){
     wx.showToast({
       title: '请选择要结算的商品！',
       duration: 2000
     });
     return false;
   }
   //存回data
   wx.navigateTo({
     url: '../order/pay?cartId=' + toastStr,
   })
 },

 bindToastChange: function() {
   this.setData({
     toastHidden: true
   });
 },

sum: function() {
    var carts = this.data.carts;
    // 计算总金额
    var total = 0;
    for (var i = 0; i < carts.length; i++) {
      if (carts[i].selected) {
        total += carts[i].num * carts[i].price;
      }
    }
    // 写回经点击修改后的数组
    this.setData({
      carts: carts,
      total: '¥ ' + total
    });
  },

onLoad:function(options){
    this.loadProductData();
    this.sum();
},

onShow:function(){
  this.loadProductData();
},

removeShopCard:function(e){
    var that = this;
    var cardId = e.currentTarget.dataset.cartid;
    wx.showModal({
      title: '提示',
      content: '你确认移除吗',
      success: function(res) {
        res.confirm && wx.request({
          url: app.d.ceshiUrl + '/Api/Shopping/delete',
          method:'post',
          data: {
            cart_id: cardId,
          },
          header: {
            'Content-Type':  'application/x-www-form-urlencoded'
          },
          success: function (res) {
            //--init data
            var data = res.data;
            if(data.status == 1){
              //that.data.productData.length =0;
              that.loadProductData();
            }else{
              wx.showToast({
                title: '操作失败！',
                duration: 2000
              });
            }
          },
        });
      },
      fail: function() {
        // fail
        wx.showToast({
          title: '网络异常！',
          duration: 2000
        });
      }
    });
  },

// 数据案例
  loadProductData:function(){
    var that = this;
    wx.request({
      url: app.d.ceshiUrl + '/Api/Shopping/index',
      method:'post',
      data: {
        user_id: app.globalData.userInfo.id
      },
      header: {
        'Content-Type':  'application/x-www-form-urlencoded'
      },
      success: function (res) {
        //--init data
        var cart = res.data.cart;
        that.setData({
          carts:cart,
        });
        //endInitData
      },
    });
  },

})

模板简介：该模板名称为【微信小程序红色空购物车选择结算页面样式设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。