微信小程序商城模板微信支付付款页面样式模板制作设计下载

制作好以后效果图如下：

一、wxml页面代码如下：

<import src="../../templates/toast/toast.wxml" />
<scroll-view class="main" scroll-y="true" class="{{!loading ? '':'hidden'}} order-confirm">
    <view class="">
        <view class="address" bindtap="navigateToAddress">
            <image class="top-line" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA8AAAAAJBAMAAAAP91hJAAAAGFBMVEXL2/DovMXv7/Tt7PLQ3vHs1t3pwsvd5fIjChGoAAAAaklEQVRYw2PADliMlBBAVRAXEENSpuzAgAsUKdHKtECchiUjqTLBaRb7UHAY5W7DBM5K1HXsSIsTKjmMcreNZuDB77DRDDz44mQ0Aw/zOBnNwMM7TkYz8DCPk9EMPLzjZDQDD/M4GVQZGADFzTTgbQo27gAAAABJRU5ErkJggg=="></image>
            <view class="content">
                <image class="address_icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAzCAMAAADWxGo6AAAAPFBMVEUAAAA1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTXZGDj+AAAAE3RSTlMApITvI3IWBAzeyluYafu4NkVSae+KEgAAAadJREFUSMeFVe2SgCAILM38oqnc93/XaxoP9NBufyHispDY8gfbsUY8iOuxLR/w+Q2zMdo3PPtZ5G2B9JBV+gTYexgYCKCtE0MABR25R8RNKX+cu4q0ID9QT7B/YkOEGRdgEHsNBFJB460b0U87GHE3K4uPfm+wwpM7oaG44w6d3Mx2hFS5E15Q40KUDGeTDdaUYiwaTSfbB7IQwPlXvoOkyjiqtYrzhPs1HU4hWFmqpE9STRIJiGwIU5HQwhmETKjolcJpiRPo0BNLA5w61P7HasFcnrVmCc2s1TO/wcUdiF6uCXfgguF75USBkS9P0phb8S/BgkKdNPsYrFDM0IwYyDlCM1QBpxTQVOMdXjg/3A5I7bW/SuluekKQBX1OAdcn3dCQXgos51AIsN36wKFi1BYf9ZPZrgnVVGpkGKUIfkgKBF3nMVZqdKHq+Nxr4LTTVVJFoF/dSqoZSD+YbtbBq/dcqtvqlVUvq8YK1ytaP64bttlKV5ba9G75QJJtw8emEq5aPaefoQB7bX4R7/yXpn55046lEBL36Qt+xYNVfabJNA3b9AMxcxcGcyvZQgAAAABJRU5ErkJggg=="></image>
                <view class="address_text">
                    <view class="adr">
                        <text>{{address.consignee}} {{address.mobile}}</text>
                    </view>
                    <view class="ddress">
                        <text>{{address.address}}</text>
                    </view>
                </view>
                <image class="arrow" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAtBAMAAACzED1lAAAAJ1BMVEUAAABhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFz0jeiAAAADHRSTlMAFE2vB2yMJfbjN8sDf6kTAAAAmUlEQVQoz2PYIcAAB3MmItg1px3gbK4zBggJnWMINuuZAAQn5xCCzXxmAZzNMuc4QkLiBMI+9jNbEBJrDiPYTGcSEJyYowg22xkFBMfmFILtfaYAzmac04hk30kHhH24vMGE7A2bA5jiCPUIcxDmI+zFdA/CnQj3I/yF8C9mOCDCBxFuiPBEhDO28GfFcDgiHhHxiy3ekdMDACnzNDtn0cBHAAAAAElFTkSuQmCC"></image>
            </view>
            <image class="bottom-line" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA8AAAAAJBAMAAAAP91hJAAAAGFBMVEXL2/DovMXv7/Tt7PLQ3vHs1t3pwsvd5fIjChGoAAAAaklEQVRYw2PADliMlBBAVRAXEENSpuzAgAsUKdHKtECchiUjqTLBaRb7UHAY5W7DBM5K1HXsSIsTKjmMcreNZuDB77DRDDz44mQ0Aw/zOBnNwMM7TkYz8DCPk9EMPLzjZDQDD/M4GVQZGADFzTTgbQo27gAAAABJRU5ErkJggg=="></image>
        </view>
        <view class="items-list">
            <view wx:for="{{cartList}}" wx:for-item="product" class="product">
                <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="price">
                        <view class="real">￥ {{product.real_price}}
                            <view class="num">x{{product.goods_number}}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="statistics">
            <view class="border-bottom"> 商品总额
                <text> ￥ {{totalPay}}</text>
            </view>
            <view>运费
                <text>￥ {{freight}}</text>
            </view>
        </view>
        <view class="wechat">
            <image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUUxQTkzNjc2RDM2MTFFNjlEREI5QzYzQjdDQTFGN0MiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUUxQTkzNjg2RDM2MTFFNjlEREI5QzYzQjdDQTFGN0MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFRENFQkFFOTZEMzYxMUU2OUREQjlDNjNCN0NBMUY3QyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFRENFQkFFQTZEMzYxMUU2OUREQjlDNjNCN0NBMUY3QyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqnYZZwAAAPZSURBVHja1JpZbExRGMfP3LQlQRtBLYmgVVIaKVW1hKC8EUoilgdaW1q1JB5EagslhDQoIoTwQKXRBzSiYkmFakNoLBVFhUSE1GgbNKGM/2e+24zJnTvnLjNz55/80jsz586c/z3b951Tl8fjESRXnUtYVAaYAEaBoaAf6AO68Oc/wFfwETSCp+A+eCRskMuikSlgCZgBkkzW4TWoAmXgXriNLALrwHhhr2pAKbhg9EbFYPmZoBacD4EJ0kRuGepy2aEwQs11HFwHWSL0ood0Axy108hw8BysFuFXAXgGUqwamcqzS6qInEaCJzyxmDJCffQ2iBWRV1dQDaYbNTKG+6jTdBOkyxrpwe6dqsc8bv9TjEbBa6C7Q0385Kn/VzAjBTyXO9HAEVACPgRb2alLtUWbAa0W2RNlBvJBX7Cjs0XQGgm4bokSA9RzDoI8fk11b1NnrZUOMFDCEfRGHRMLwCsfE6Tlvi3SEKHVW3YMJIJDYKHGZxQ+pbkQy9JTeOPUQQzlcleK1ymTHMOhuawOg/fgQBgMDOLcZLbE92aTkUwDFanjBekFKAfdQmCAVAj2c4wlo0wa7MMMGFnKf69yVFpr0yBWlcrxVKkBE/9SDTLS38ANlJv34ut3vNmwzwYDpE2gQS/C1dEAGuxuXPQ0cNNmsNfvvdGcxydyZc5JVp40llvASurcTEbaDTYjtcRgm2avYlBkw/e0K9wNjIhmk8kWf1jNPItseiAdZKTVxI0bTP5gLK8JlHmm2bgutZCRZhM3zuMYx4hmgZdgfQgW2GYy8tbkzXmS5cjwaXAFDAlRpNBERupN3lwoUWax8G6J5oY45KlXLOTnSTpT5kBQwdNw7zDEbtVk5K6FzDA/QEs18jgKh6juNYony/OHn54ZUVg9DsSBaeCOifDCqi6C32o+ks7bLGb1idPOSIiiinrfzYc6frrRpAdqnRWDs5DTtFa9UPzcVUaRiUrOj0Rnzs5dS3A6+UVo70A6SR2cTrRptYg6leVEQWvk+C8ZSoAm2+lgE8VaQyDQscJ2cMqBJqhOW7U+0DvoWQGOOcjECa6TMGqEtAZsMZF82a1tIsgZpsxh6G5wJkIGaAadA3YFKyh7PB0fARNnhfc097JMYVkjGWE0UMU5/TLh/d8VKcksfL10MjtKmmglTbahC13iWanGzBfIGEkJUO4kWMXX8zmMp+3XESL4GeR34d1FfwhucSt8s/IkZIz4b6m6OaEq93mvwienSeDsMZFD+zh+n2a+z0yTsPlgScbIJJ/rMo6S3TrlWy3mNqYkO9gpdZ3LmwluJ8YtfwUYAFjN7UocXomPAAAAAElFTkSuQmCC"></image>
            <text>微信支付</text>
        </view>
        <view class="settlement"> 
            <view class="text"><text>合计：</text>
            <text class="price">￥ {{totalPay}}</text>
            </view>
            <button bindtap="postOrder">去付款</button>
        </view>
    </view>
     <template is="toast" data="{{...toast}}" />
</scroll-view>
<loading hidden="{{!loading}}">正在加载中...</loading>
<loading hidden="{{!exec}}">正在处理中...</loading>

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

.main {
    padding: 0;
   
    margin: 0;
    background-color: #f8f8f8;
    font-family: -apple-system, SF UI Text, Helvetica Neue, Helvetica, Arial, sans-serif;
    box-sizing: border-box;
}
.order-confirm {
    height: 100%;
    padding-top: 0.5rem;
    color: #353535;
    position: relative;
      background-color: #f8f8f8;
}
.order-confirm .address {
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: #FFF;
}

.order-confirm .address .top-line{
    width: 100%;
    position: absolute;
    top: 0;
    height: 7rpx;
}
.order-confirm .address .bottom-line{
    width: 100%;
    position: absolute;
    bottom: 0;
    height: 7rpx;
}
.order-confirm .address .content{
    padding: 0 0.6rem;
    overflow: hidden;
    line-height: 156rpx;
    font-size: 0.8rem;
    margin: 0.6rem 0;
}
.order-confirm .address .content .address_icon {
    height: 30rpx;
    float: left;
    width: 0.6rem;
    margin-top: 1.1rem;
}
.order-confirm .address .content .address_text{
    float: left;
    padding: 0 0.5rem;
    width: 13rem;
}
.order-confirm .address .adr{
    line-height: 1.2rem;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
 }
 .order-confirm .address .ddress{
        display: block;
    margin-top: 0.2rem;
    line-height: 0.8rem;
    font-size: 0.65rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
 }
 .order-confirm .address .arrow{
    height: 40rpx;
    float: right;
    width: 19rpx;
    margin-top: 1.1rem;
}
.items-list {
    width: 100%;
    background: #FFF;
    padding: 0rem 0.4rem;
    margin: 0;
    margin-top: 0.5rem;
    display: block;
}

.items-list .product {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #EFEFEF;
    padding: 0.75rem 0.35rem;
    list-style: none;
    background: #FFF;
    display: list-item;
}
.items-list .product .img image{
    display: block;
    float: left;
    width: 3.7rem;
    height: 3.7rem;
    border: 1px solid #D6D6D6;
    margin-right: 0.5rem;
}
.items-list .product .param{
    position: relative;
    height: 3.7rem;
    font-size: 0.6rem;
    line-height: 0.7rem;
    width: 100%;
}
.items-list  .param .title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width:10.6rem;
}
.items-list  .param .type {
    margin: 0.3rem 0;
    color: #A0A0A0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.items-list .param .price { 
    position: absolute;
    top: 0rem;
    right: 0.45rem;
    font-size: 0.7rem;
    float: right;
}
.items-list .param .num{ 
    padding-top: 0.3rem;
    text-align: center;
}

.settlement {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 118rpx;
    background-color: #EFEFEF;
    line-height: 2.5rem;
    font-size: 0.85rem;
    z-index:999;
    padding: 5rpx 0.75rem;
    box-sizing:border-box;
}
.settlement .price{
    color:red;
}
.settlement .text {
    display: inline-block;
    padding-top:10rpx;
}
.settlement text{
   height: 30rpx;
   position: relative;
   padding-top: 20rpx;
}
.statistics {
    margin-top: 0.5rem;
    padding: 0 0.4rem;
    background-color: #FFF;
    
}
.statistics view{
    height: 1.8rem;
    line-height: 1.8rem;
    font-size: 0.7rem;
    padding: 0 0.45rem;
}
.border-bottom{
    border-bottom: 1px solid #EFEFEF;
}
.statistics text{
    display: block;
    float: right;
    padding: 0 0.45rem;
}

.wechat{
    width: 100%;
    height: 120rpx;
    line-height: 120rpx;
    padding: 0 28.125rpx;
    background-color: #FFF;
    margin-top: 18.75rpx;
    font-size: 0.8rem;
}
.wechat image{
    width: 60rpx;
    float: left;
    height: 60rpx;
    margin-top: 28.125rpx;
}
.wechat text{
    text-indent: 18.75rpx;
    display: inline-block;
}
.settlement button {
    float: right;
    background-color: #FF2D4B;
    color: #FFF;
    width: 185rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 0.2rem;
    margin-top: 0.4rem;
    border: none;
    outline: none;
    font-size: 23.4375rpx;
}

三、js页面代码如下：

import Promise from '../../lib/promiseEs6Fix';
import request from '../../lib/request';
import resource from '../../lib/resource';

const app = getApp();
Page({
  data: {
    shop_id: app.globalData.shop_id,
    address: [],
    cartList: [],
    freight: 0,
    totalPay: 0,
    ok: 1,
    loading: true,
    exec:false,
  },
  //页面刷新重新
  onShow(){
    resource.fetchAddresses().then(res => {
      res.data.forEach(item => {
        if (item.is_default) {
          this.setData({address:item})
        }
      });

    })
  },
  onLoad() {
    const requests = ['/balance', '/cart/indexCart',
        '/users/addresses'
      ]
      .map(path => (
        request({ path })
        .then(response => response.data)
        .catch(() => [])
      ));
    Promise.all(requests).then(([balance, carInfo, addressList]) => {
      let address = [];
      let cartList = [];
      let buyNumber = 0;
      let totalPay = 0;
      let ok = 0;
      addressList.forEach((item) => {
        if (item.is_default) {
          ok = 1;
          address = item;
        }
      });
      carInfo.forEach((item) => {
        item.real_price = item.real_price.toFixed(2);
        item.market_price = item.market_price.toFixed(2);
        if (item.status) {
          buyNumber += item.goods_number;
          totalPay += item.goods_number * item.real_price;
          cartList.push(item);
        }
      });
      let freight = 0;
      resource.getShipping(this.data.shop_id, address.city).then((res) => {
        if (Number(res.statusCode) !== 200) {
          ok = 1 && ok;
        } else {
          freight = res;
          ok = 0 && ok;
        }
      });
      totalPay = totalPay.toFixed(2);
      freight = freight.toFixed(2);
      var loading = false;
      this.setData({ loading, address, ok, cartList, freight, totalPay });
    });
  },
  postOrder() {
    this.setData({exec: true});
    resource.postOrder({
      address_id: this.data.address.address_id,
      pay_way: 'wx',
      shop_id: this.data.shop_id
    }).then(res => {
      app.globalData.subOrderSn = res.data.order_sn;
      app.globalData.price = res.data.total_fee;
      resource.getPaySign({ out_trade_no: res.data.order_sn, AppID: app.globalData.appId }).then(payRes => {
        console.log(payRes);
        if (payRes.statusCode == 200) {
          const wechatData = payRes.data.payment;
          wx.requestPayment({
            'appId': wechatData.appId,
            'timeStamp': wechatData.timeStamp,
            'nonceStr': wechatData.nonceStr,
            'package': wechatData.package,
            'signType': 'MD5',
            'paySign': wechatData.paySign,
            'success': function(res) {
              if (res.errMsg === 'requestPayment:ok') {
                console.log('success');
                app.globalData.type = 'success';
                wx.navigateTo({
                  url: '../result/result'
                });
              } else if (res.errMsg === 'requestPayment:cancel') {
                app.globalData.type = 'fail';
                wx.navigateTo({
                  url: '../orders/orders?t=unpaid'
                });
              }
            },
            'fail': function(res) {
              app.globalData.type = 'fail';
                wx.navigateTo({
                  url: '../orders/orders?t=unpaid'
                });
              console.log('fail');
            },
            'complete': function(res) {
                // wx.navigateTo({
                //   url: '../orders/orders?t=unpaid'
                // });
              console.log('complete');
            }
          });
           this.setData({exec: false});
        } else {
          this.setData({
            exec : false,
            toast: {
              toastClass: 'yatoast',
              toastMessage: '获取支付验证错误!'
            }
          });
          setTimeout(() => {
            this.setData({
              toast: {
                toastClass: '',
                toastMessage: ''
              }
            });
          }, 2000);
        }
      });
    });
  },

  navigateToAddress() {
    wx.navigateTo({
      url: '../addresses/addresses',
    });
  }
});

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