小程序商城订单支付界面（小程序）

wxml在此：

  
      
  
  您的购物车空空如也，去挑选喜欢的产品吧
  
    去逛逛
  



    
    
      
        ✔
      
      
        
            
        
        
          
            {{item.title}}
          
          
            数量{{item.num}}   {{item.color}}
          
          
            ￥{{item.price}}
          
        
      
      
        
            
              共一件商品 应付 ￥{{item.money}}
            
            
              去支付
            
        

      
    
    
    
      
        全选
      
      
    

wxss在此：

/* pages/cart/cart.wxss */
/* 数据为空 */
.noData{
  margin: 200rpx 40rpx 0 40rpx;
  text-align: center
}
.noDataImg{
  width: 100%;
  height: 300rpx;
}
.noDataText{
  font-size: 32rpx;
  margin: 20rpx 0;
  color: #ccc
}
.gotype{
  width: 60%;
  margin:60rpx auto;
  padding: 20rpx 0;
  background: #AE211A;
  color: #f1f1f1
}
/* 数据不为空 */
.nocheck{
  position: absolute;
  top: 80rpx;
  left: 0rpx;
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  text-align: center;
  border: 1px solid #e3e3e3;
  color:#e3e3e3;
  line-height: 30rpx;
  font-size: 20rpx;  
}
.checkedBox{
  background: #f44;
  color: #fff;
}
.shopList{
  margin:0 20rpx;
  position: relative;
  border-top: 1px solid #e3e3e3;
  border-bottom: 1px solid #e3e3e3;
}
.shopInfo{
  padding:20rpx 0 20rpx 60rpx;
  display: flex
}
.shopImg{
  width: 160rpx;
  height: 160rpx;
}
.shopCon{
  margin-left: 40rpx;
  font-size: 30rpx;
}
.num{
  padding: 24rpx 0;
  color: #ccc
}
.payInfo{
  padding:20rpx 40rpx;
  border-top: 1px solid #e3e3e3;
  display: flex;
  justify-content: flex-end;
}
.payBtn{  
  width: 100rpx;
  margin-top: 20rpx;
  margin-left: 140rpx;
  text-align: center;
  padding: 10rpx 20rpx;
  color:#f44;
  border: 1px solid #f44
}
.payBox{
  box-shadow: 0 0 10rpx #e3e3e3
}
.checkbox{
  margin-left: 40rpx;
}

js在此：

Page({
  /**
   * 页面的初始数据
   */
  data: {
    allCheck:false,
    loading:false,
    totalMoney:0,
    dataList:[
      { imgUrl:"/images/show.jpg",title:"长袖衬衫春秋新款",num:"1",color:"白色",price:"139.00",money:"500",checked:false},
      { imgUrl: "/images/show.jpg", title: "长袖衬衫春秋新款", num: "1", color: "白色", price: "139.00", money: "500", checked: false },
      { imgUrl: "/images/show.jpg", title: "长袖衬衫春秋新款", num: "1", color: "白色", price: "139.00", money: "500", checked: false },
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.isAll()
  },
  gotype(){
    wx.navigateTo({
      url: '/pages/type/type',
    })
  },
  checkThis(e){
    let index = e.currentTarget.dataset.index
    console.log(e)
    let checkIndex = "dataList["+index+"].checked"    
    this.setData({
      [checkIndex]:!this.data.dataList[index].checked
    })
    this.isAll()
  },
  allCheck(e){
    for(let k in this.data.dataList){
      this.data.dataList[k].checked = e.detail
    }
    this.setData({
      allCheck:e.detail,
      dataList:this.data.dataList
    })
    this.isAll()
  },
  // 判断是否全选
  isAll(){
    let checkedNum = 0
    let money = 0
    this.data.dataList.forEach((all) => {
      if (all.checked) {
        checkedNum++
        money += Number(all.money)*100
      }
    })
    if(checkedNum == this.data.dataList.length){
      this.setData({
        allCheck: true,
        totalMoney: money
      })
    }else{
      this.setData({
        allCheck: false,
        totalMoney:money
      })
    }
  },
  signPay(e){
    console.log('支付')
  },
  doPay(e){
    console.log(e)
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})