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

大家好，又见面了，我是你们的朋友全栈君。

wxml在此：

<!--pages/cart/cart.wxml-->
<!-- 当数据为空时 -->
<view class='noData' wx:if="{
  
  {dataList.length == 0}}">
  <view class='noDataImg'>
      <image src='/images/cart-nodata.png'></image>
  </view>
  <view class='noDataText'>您的购物车空空如也，去挑选喜欢的产品吧</view>
  <view class='gotype' catchtap='gotype'>
    去逛逛
  </view>
</view>
<!-- 当数据不为空时 -->
<view wx:else style='margin-bottom:130rpx;'>
    <!-- 商品列表 -->
    <view class='shopList' catchtap='checkThis' data-index='{
  
  {index}}' wx:for="{
  
  {dataList}}" wx:key="shopId">
      <view class="nocheck {
  
  {item.checked?'checkedBox':''}}">
        ✔
      </view>
      <view class='shopInfo'>
        <view class='shopImg'>
            <image src='{
  
  {item.imgUrl}}'></image>
        </view>
        <view class='shopCon'>
          <view class='title'>
            {
  
  {item.title}}
          </view>
          <view class='num'>
            数量{
  
  {item.num}}   {
  
  {item.color}}
          </view>
          <view>
            ￥{
  
  {item.price}}
          </view>
        </view>
      </view>
      <view class='payInfo'>
        <view>
            <view>
              共一件商品 应付 ￥{
  
  {item.money}}
            </view>
            <view class='payBtn' catchtap='signPay'>
              去支付
            </view>
        </view>

      </view>
    </view>
    <!-- 结算栏 -->
    <van-submit-bar
      loading="{
  
  {loading}}"
      price="{
  
  { totalMoney }}"
      button-text="去结算"
      bind:submit="doPay"
      custom-class="payBox"
    >
      <van-tag type="primary" class="checkbox">
        <van-checkbox value="{
  
  { allCheck }}" checked-color="#f44" bind:change="allCheck">全选</van-checkbox>
      </van-tag>
      <!-- <view slot="tip">
        您的收货地址不支持同城送, <text>修改地址</text>
      </view> -->
    </van-submit-bar>
</view>

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 () {

  }
})