微信小程序黑色顶部订单结算页面样式模板制作设计下载

制作好以后效果图如下：

一、wxml页面代码如下：

<import src="../../templates/toast/toast.wxml" />
<view id="shopping-cart" class="{{(cartList.length==0 && !loading) ? '':'hidden'}}">
    <view class="empty">
        <image class="icon" src="data:image/png;base64,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" alt="购物车"></image>
        <text>购物车还空着，快去挑选商品吧</text>
        <view class="btn btn-default" ui-sref="home" catchtap='navigateTo'>随便逛逛</view>
    </view>
</view>
<scroll-view class="car-index {{(cartList.length>0 && !loading) ? '':'hidden'}}" scroll-y="true">
    <view class="car">
        <view class="cart {{(cartList.length>0 && !loading) ? '':'hidden'}}">
            <view wx:for="{{cartList}}" wx:for-item="product" class="product">
                <view class="checkbox clearfix add-btn">
                    <icon type="{{product.status ? 'success' : 'circle'}}" color="{{product.status ? 'red' : ''}}" size="20" bindtap="selectProduct" data-checked-status="{{checkedStatus}}" data-id="{{product.id}}"></icon>
                </view>
                <view class="img">
                    <image class="image" src="{{product.thumb_url}}" mode="scaleToFill"></image>
                </view>
                <view class="param">
                    <view class="title">
                        <text>{{product.goods_name}}</text>
                    </view>
                    <view class="type">
                        <text>{{product.goods_attr}}</text>
                    </view>
                    <view class="quantity">
                        <view class="btn-ad {{product.decr_class}}" bindtap="changeNumber" data-id="{{product.id}}" data-type="min">-</view>
                        <view class="count">{{product.goods_number}}</view>
                        <view class="btn-ad {{product.plus_class}}" bindtap="changeNumber" data-id="{{product.id}}" data-type="plus">+</view>
                    </view>
                    <view class="price">
                        <view class="real">￥ {{product.real_price}}</view>
                        <view class="cost">￥ {{product.market_price}}</view>
                    </view>
                    <view class="del" bindtap="delProduct" data-id="{{product.id}}">
                        <image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAtBAMAAADINP+pAAAAKlBMVEUAAACgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKApyNsCAAAADXRSTlMA7Fohd8KHlks1seQKRhs+AQAAAI1JREFUOMtjgAHmvXfv3r1twIAODC8KCgrKbkYX5rxbACS5MDTMvQam1sI1pIaCwV0HMO/URQg3gUH2LhhcgajiWQvhCjAcNgYDmLnMEO4BBtoDNww/LgZTskDMdBPolEtARigQs1yCi7MBmRzXgYy7o+Kj4iSJI9LVFcx0hQB0FBdEA7IQ8bV30QHQ0QA9wJXpSEY20AAAAABJRU5ErkJggg=="></image>
                    </view>
                </view>
            </view>
        </view>
        <view class="statistics">
            共{{totalNumber}}件商品
            <view class="sum">
                小计：
                <text>￥ {{totalPrice}}</text>
            </view>
        </view>
    </view>
    <view class="balance">
        <view class="checkbox">
            <icon type="{{checkedStatus ? 'success' : 'circle'}}" color="{{checkedStatus ? 'red' : ''}}" size="20" bindtap="selectProduct" data-id="0" data-checked-status="{{checkedStatus}}"></icon>
            <text>全选</text>
        </view>
        <button class="button" bindtap="toSettlement">结算({{buyNumber}})</button>
        <view class="price">
            合计：
            <view class="sum">
                ￥ {{buyPrice}}
            </view>
            <view class="hint">不含运费</view>
        </view>
    </view>
    <template is="toast" data="{{...toast}}" />
</scroll-view>
<loading hidden="{{!loading}}">正在加载中...</loading>

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

.car-index {
    margin: 0;
    height: 100%;
    background-color: #f8f8f8;
    padding: 0;
    font-family: -apple-system, SF UI Text, Helvetica Neue, Helvetica, Arial, sans-serif;
}
.car{
    width: 100%;
    list-style: none;
    background: #FFF;
    margin-top:0.3rem;
    padding: 0.4rem;
    margin-bottom: 48.75px;
    font-size: 0.6rem;
    box-sizing: border-box;
    display: block;
    float: left;
}
.product {
    position: relative;
    width: 100%;
    height: 5rem;
    border-bottom: 1px solid #EFEFEF;
    padding: 0.5rem 0;
    display: list-item;
    text-align: -webkit-match-parent;
    float: left;
}
.product .checkbox {
    position: relative;
    width: 1.9rem;
    height: 120rpx;
    float: left;
    margin: 40rpx 0rpx 0rpx 20rpx;
    display: inline-block;
}

.product .image{
    width: 4.3rem;
    height: 4.3rem;
    border: 1px solid #D6D6D6;
    margin-left: 0.2rem;
}
.product .param{
    position: relative;
    width: 11.3rem;
    height: 4.3rem;
    padding-left: 0.45rem;
    display: inline-block;
    list-style: none;
    background: #FFF;
    padding-bottom: 0;
    margin: 0;
    font-size: 0.8rem;

}
.product .param view {
    float: left;
}
.img {
    display: inline-block;
}
.param .title{
    font-size: 0.6rem;
    width: 8.6rem;
    line-height: 0.65rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.param .type{
    font-size: 0.6rem;
    line-height: 1rem;
    color: #A0A0A0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.param .quantity{
    position: absolute;
    bottom: 0;
    overflow: hidden;
    height: 1rem;
    border: 1px solid #D6D6D6;
    border-radius: 0.1rem;
}
.param .quantity .btn-ad{ 
    width: 1.2rem;
    height: 100%;
    text-align: center;
    line-height: 1rem;
    color: #A0A0A0;
    display: inline-block;
}
.param .price {
    position: absolute;
    top: 0;
    right: 0;
    text-align: right;
    line-height: 0.65rem;
    padding-right: 0.4rem;
}
.param .price .real {
    float: none;
}
.param .price .cost {
    font-size: 0.65rem;
    text-decoration: line-through;
    color: #A0A0A0;
    float: none;
}

.param .del {
    position: absolute;
    bottom: 0.1rem;
    right: 0.4rem;
}
.param .del image {
    width: 0.8rem;
    height: 0.8rem;
}
.param .quantity .count {
    color: #353535;
    width: 1.8rem;
    border-right: 1px solid #D6D6D6;
    border-left: 1px solid #D6D6D6;
    height: 100%;
    float: left;
    text-align: center;
    line-height: 1rem;
}
.statistics {
    width: 100%;
    height: 1.75rem;
    line-height: 1.75rem;
    display: inline-block;
    padding: 0 0.4rem;
    font-size: 0.8rem;
}
 .sum{
    display: inline-block;
    float: right;
    margin-right: 1rem;
    color: red;
}
.balance {
    position: fixed;
    bottom: 1.875rpx;
    width: 100%;
    height: 120rpx;
    background: #FCFCFC;
    box-shadow: 1px 0 20px 1px #F0F0F0;
    padding: 0 28.125rpx;
    font-size: 28.125rpx;
    box-sizing:border-box;
}

.balance .checkbox {
    position: relative;
    margin: 40rpx 0rpx 0rpx 20rpx;
    display: inline-block;
    height: 2.7rem;
    width: 2.9rem;
    float: left;
    padding-top:0.2rem;
}

.balance .checkbox text {
    display: inline-block;
    float: right;
    padding-top: 3rpx;
    padding-right:1rpx;
}

.balance .button{
    width: 3.9rem;
    height: 80rpx;
    line-height: 80rpx;
    float: right;
    text-align: center;
    margin-top: 0.45rem;
    padding: 0;
    border-radius: .25rem;
    background-color: #fc3151;
    color: white;
    font-size: .85rem;
    border: none;
    outline: none;
}
.balance .price{
    float: right;
    padding: 0.45rem 0.6rem;
    text-align: right;
    font-size: 0.95rem;
}
.balance .hint {
    color: #A0A0A0;
    font-size: 0.55rem;
    text-align: right;
    margin-right: 1rem;
}
.param .quantity  .disabled {
    color: #efefef;
    background-color: #efefef;
}

.hidden {
    display: none;
}


#shopping-cart {
    overflow: auto;
    padding-top: 16rpx;
    padding-bottom: 104rpx;
    width: 100%;
    height: 100%;
    box-sizing:border-box;
    border-bottom: 1rpx solid #ddd;
}

#shopping-cart .empty {
    position: absolute;
    top: 38.2%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    text-align: center;
}
#shopping-cart .empty .icon {
    width: 160rpx;
    height: 160rpx;
    display: block;
    margin: auto;
}

#shopping-cart .empty text {
    display: block;
    margin: auto;
    font-size: 24rpx;
    line-height: 48rpx;
    color: #A0A0A0;
    padding: 36rpx 0;
}

#shopping-cart .empty view {
    width: 288rpx;
    height: 66rpx;
    line-height: 66rpx;
    margin: auto;
    font-size: 26rpx;
    border-radius: 8rpx;
    background-color: #FF2D4B;
    color: #FFF;
    text-align: center;
}

page {
    background-color: #f8f8f8;
}

三、js页面代码如下：

var app = getApp();
import resource from '../../lib/resource';

Page({
  data: {
    loading: true,
    cartList: [],
    totalNumber: 0,
    totalPrice: 0,
    checkedStatus: true,
    buyNumber: 0,
    buyPrice: 0,
  },
  onShow() {
    const that = this;
    resource.fetchCartIndex().then(res => {
      var totalNumber = 0;
      var totalPrice = 0;
      var buyNumber = 0;
      var buyPrice = 0;
      res.data.forEach(item => {
        // 保留两位小数点
        item.real_price = item.real_price.toFixed(2);
        item.market_price = item.market_price.toFixed(2);
        if (!item.status) {
          that.setData({ checkedStatus: false });
        } else {
          buyNumber += item.goods_number;
          buyPrice += item.goods_number * item.real_price;
        }
        totalNumber += item.goods_number;
        totalPrice += item.goods_number * item.real_price;
        if (item.goods_number == item.stock_num) {
          item.plus_class = "disabled";
        } else {
          item.plus_class = "";
        }
        if (item.goods_number == 1) {
          item.decr_class = "disabled";
        } else {
          item.decr_class = "";
        }
      })
      that.setData({
        cartList: res.data,
        loading: false,
        totalNumber: totalNumber,
        totalPrice: totalPrice.toFixed(2),
        buyNumber: buyNumber,
        buyPrice: buyPrice.toFixed(2)
      });

    })
  },
  // 选择商品
  selectProduct(event) {
    var cartId = event.currentTarget.dataset.id;
    var checkedStatus = event.currentTarget.dataset.checkedStatus;
    var totalNumber = 0;
    var totalPrice = 0;
    var buyNumber = 0;
    var buyPrice = 0;
    var id = [];
    checkedStatus = checkedStatus === true;
    var changeStatus = true;
    this.data.cartList.forEach(item => {
      if (item.id == cartId || cartId == 0) {
        if (item.status != !checkedStatus) {
          id.push(item.id);
        }
        item.status = cartId == 0 ? !checkedStatus : !item.status;

      }
      if (!item.status) {
        changeStatus = false;
      } else {
        buyNumber += item.goods_number;
        buyPrice += item.goods_number * item.real_price;
      }
      totalNumber += item.goods_number;
      totalPrice += item.goods_number * item.real_price;
    });
    resource.updCartStatus(id.join()).then(res => {});
    changeStatus = cartId == 0 ? !checkedStatus : changeStatus;
    this.setData({
      cartList: this.data.cartList,
      checkedStatus: changeStatus,
      totalNumber: totalNumber,
      totalPrice: totalPrice.toFixed(2),
      buyNumber: buyNumber,
      buyPrice: buyPrice.toFixed(2)
    });
  },
  // 改变商品数量
  changeNumber(event) {
    var cartId = event.currentTarget.dataset.id;
    var optType = event.currentTarget.dataset.type;
    var totalNumber = 0;
    var totalPrice = 0;
    var buyNumber = 0;
    var buyPrice = 0;
    this.data.cartList.forEach(item => {
      if (item.id == cartId) {
        if (optType == 'plus') {
          if (item.stock_num == item.goods_number) {
            this.setData({
              toast: {
                toastClass: 'yatoast',
                toastMessage: '该宝贝不能购买更多哦'
              }
            });
            setTimeout(() => {
              this.setData({
                toast: {
                  toastClass: '',
                  toastMessage: ''
                }
              });
            }, 2000);
          } else {
            item.goods_number++;
            resource.updCartNumber(cartId, optType);
          }

        } else {

          if (item.goods_number <= 1) {
            this.setData({
              toast: {
                toastClass: 'yatoast',
                toastMessage: '亲，不能再减少了哦'
              }
            });
            setTimeout(() => {
              this.setData({
                toast: {
                  toastClass: '',
                  toastMessage: ''
                }
              });
            }, 2000);
          } else {
            item.goods_number--;
            resource.updCartNumber(cartId, optType);
          }
        }
        if (item.goods_number == item.stock_num) {
          item.plus_class = "disabled";
        } else {
          item.plus_class = "";
        }
        if (item.goods_number == 1) {
          item.decr_class = "disabled";
        } else {
          item.decr_class = "";
        }
      }
      if (!item.status) {

      } else {
        buyNumber += item.goods_number;
        buyPrice += item.goods_number * item.real_price;
      }
      totalNumber += item.goods_number;
      totalPrice += item.goods_number * item.real_price;
    });
    this.setData({
      cartList: this.data.cartList,
      totalNumber: totalNumber,
      totalPrice: totalPrice.toFixed(2),
      buyNumber: buyNumber,
      buyPrice: buyPrice.toFixed(2)
    });
  },
  // 去结算页面
  toSettlement() {
    if(this.data.buyNumber == 0) {
       resource.showTips(this, '你还未勾选商品'); return;
    }
    wx.navigateTo({
      url: '../settlement/settlement',
    });
  },
  // 去除购物车物品
  delProduct(event) {
    wx.showModal({
      content: '你确定在购物车中删除该商品',
      showCancel: true,
      success: (res) => {
        if(res.confirm == 0) {
          return;
        }
        var id = event.currentTarget.dataset.id;
        var cartList = this.data.cartList;
        var totalNumber = 0;
        var totalPrice = 0;
        var buyNumber = 0;
        var buyPrice = 0;
        var delKey = 0;
        cartList.forEach((item, key) => {
          if (item.id == id) {
            delKey = key;
          } else {
            if (!item.status) {

            } else {
              buyNumber += item.goods_number;
              buyPrice += item.goods_number * item.real_price;
            }
            totalNumber += item.goods_number;
            totalPrice += item.goods_number * item.real_price;
          }
        });
        cartList.splice(delKey, 1);
        resource.delCartProduct(id).then(res => {
          console.log(res);
          if (res.statusCode == 200) {
            this.setData({
              cartList: cartList,
              totalNumber: totalNumber,
              totalPrice: totalPrice.toFixed(2),
              buyNumber: buyNumber,
              buyPrice: buyPrice.toFixed(2)
            });
          }
        });
      }
    });
  },
  navigateTo() {
    wx.switchTab({
      url: '../home/home'
    });
  }
});

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