小编推荐：Fundebug专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。
通过前面两节，我们把小程序支付的基本工作给完成了，现在我们如何在前端调用我们的接口呢，今天本章就是跟大家谈论一下。我们先看一下效果图
在线付款
付款界面
wxml代码
<view class="container">
<view class="orders">
<navigator url="../orderdetail/orderdetail?id={{item.g_id}}" class="order" wx:for="{{orderList}}" wx:key="{{item.g_id}}">
<view class="h">
<view class="l">订单编号：{{item.g_uuid}}</view>
<view class="r" wx:if="{{item.g_state == 1}}" ><text style='color:#EC2C2F'>待付款</text></view>
<view class="r" wx:elif="{{item.g_state == 2}}" ><text style='color:green'>已付款</text></view>
<view class="r" wx:elif="{{item.g_state == 3}}" ><text style='color:#ff5600'>已发货</text></view>
<view class="r" wx:elif="{{item.g_state == 4}}" ><text style='color:#333333'>订单取消</text></view>
<view class="r" wx:elif="{{item.g_state == 5}}" ><text style='color:green'>交易成功</text></view>
</view>
<view wx:for="{{item.child}}" wx:key="{{gitem.p_id}}" wx:for-item="gitem">
<view class="goods" >
<view class="img">
<image src="{{image_url}}{{gitem.p_img}}"></image>
</view>
<view class="info">
<text class="name">{{gitem.p_name}}</text>
<text class="number">共{{gitem.p_num}}件商品</text>
</view>
<view class="status" wx:if="{{gitem.msgcount <= 0 && item.g_state == 5}}">
<text class="pingjia" data-product-name="{{gitem.p_name}}" data-order-id="{{item.g_uuid}}" data-product-id="{{gitem.p_id}}" bindtap='comment'>评价</text>
</view>
</view>
</view>
<view class="b">
<view class="l">实付：<text class="txt">￥{{item.g_money}}</text> </view>
<view class="r" wx:if="{{item.g_state ==1}}">
<button class="btn_cancel" data-order-index="{{item.g_id}}" catchtap="cancelOrder">删除订单</button>
</view>
<view class="r" wx:if="{{item.g_state ==1}}">
<button class="btn" data-order-index="{{item.g_uuid}}" data-order-money="{{item.g_money}}" catchtap="payOrder">去付款</button>
</view>
</view>
</navigator>
</view>
<view wx:if="{{orderList.length>6}}" class="loadmore">
<block wx:if="{{nomore}}">
<text>{{nomoreText}}</text>
</block>
<block wx:else>
<text class="iconfont icon-loading loading" space="nbsp"></text>
<text> {{loadmoreText}}</text>
</block>
</view>
<view class="no-cart" wx:if="{{orderList.length <= 0}}">
<view class="c">
<view class="title-box">暂时没有订单信息～</view>
<view class="to-index-btn" bindtap="toIndexPage">去逛逛</view>
</view>
</view>
</view>
wxss代码
page{
height: 100%;
width: 100%;
background: #f4f4f4;
}
.orders{
height: auto;
width: 100%;
overflow: hidden;
}
.order{
margin-top: 20rpx;
background: #fff;
}
.order .h{
height: 83.3rpx;
line-height: 83.3rpx;
margin-left: 31.25rpx;
padding-right: 31.25rpx;
border-bottom: 1px solid #f4f4f4;
font-size: 30rpx;
color: #333;
}
.order .h .l{
float: left;
}
.order .h .r{
float: right;
color: #b4282d;
font-size: 24rpx;
}
.order .goods{
display: flex;
align-items: center;
height: 199rpx;
margin-left: 31.25rpx;width:100%;
}
.order .goods .img{
height:145.83rpx;
width:145.83rpx;
background: #f4f4f4;
}
.order .goods .img image{
height:145.83rpx;
width:145.83rpx;
}
.order .goods .info{
height: 145.83rpx;
flex: 1;
padding-left: 20rpx;
}
.order .goods .name{
margin-top: 30rpx;
display: block;
height: 44rpx;
line-height: 44rpx;
color: #333;
font-size: 30rpx;
}
.order .goods .number{
display: block;
height: 37rpx;
line-height: 37rpx;
color: #666;
font-size: 25rpx;
}
.order .goods .status{
/* width:105rpx;*/
color: #b4282d;
font-size: 25rpx;margin-right:60rpx;
}
.order .b{
height: 103rpx;
line-height: 103rpx;
margin-left: 31.25rpx;
padding-right: 31.25rpx;
border-top: 1px solid #f4f4f4;
font-size: 30rpx;
color: #333;
}
.order .b .l{
float: left;
}
.order .b .r{
float: right;
}
.order .b .btn{
margin-top: 19rpx;
height: 64.5rpx;
line-height: 64.5rpx;
text-align: center;
padding: 0 20rpx;
border-radius: 5rpx;
font-size: 26rpx;
color: #fff;
background: #b4282d;
}
.order .b .btn_cancel{
margin-top: 19rpx; margin-left: 19rpx;
height: 64.5rpx;
line-height: 64.5rpx;
text-align: center;
padding: 0 20rpx;
border-radius: 5rpx;
font-size: 26rpx;
color: #333333;
border:#CCCCCC 1px solid;
}
.loadmore {
height: 100rpx;
width: 100%;
line-height: 80rpx;
text-align: center;
margin-top: 0rpx;
}
.loadmore text {
color: #999;
}
@keyframes loading {
0% {transform: rotate(0deg)}
50% {transform: rotate(180deg)}
100% {transform: rotate(360deg)}
}
.loading {
display: inline-block;
transform-origin: 50% 50%;
animation: loading 1s linear infinite;
}
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1520838078027'); /* IE9*/
src: url('iconfont.eot?t=1520838078027#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAWkAAsAAAAACCgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kuaY21hcAAAAYAAAAB6AAAByKkz+SxnbHlmAAAB/AAAAYYAAAGYdRuBnWhlYWQAAAOEAAAALwAAADYQt9FAaGhlYQAAA7QAAAAcAAAAJAfeA4dobXR4AAAD0AAAABMAAAAYF+kAAGxvY2EAAAPkAAAADgAAAA4B4AE4bWF4cAAAA/QAAAAfAAAAIAEVAF1uYW1lAAAEFAAAAUUAAAJtPlT+fXBvc3QAAAVcAAAASAAAAFncWPV6eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sM4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVLxcw9zwv4EhhrmBoQEozAiSAwAxqA0feJzFkbENhTAMRJ8hfCHEKEyCmOeLgp6egilYzFPAOYGCCbjoRbmTFUcx0AC1GEQCWzBCf6WW85ou54lRvqel0nn21Tff/ThPpW/3yFT9rHCV7krR0X58Jvuu9Vt93qfbxRzmGz3R14L+DN8KMSffCzErPwo0FyyDIOcAAHicJY+7SgNREIZnzsleotmNe99sks1lkxwlGjBZEy+YiNgoFoKVYKEPoI2FIBZpBAtBwdJKCWgrKFj4ABbWgoKFFxArWxFZ3ejwNwPffD8DHMDPE72mNmjQD8MwAwsAyJcxL5M05phfIWU0cpxh6TJlHssJXr5CJ9HK87pZrfslixf4OMroYi1XrbMKYTjiN8kEVs00YiLpLKrFlEoPsMdm7k4wR07QyHipeHMomB1s6dWsJm7GVDWhqnsiz3EiIZG4jGuWGeWiPXzQ4eKOcZ0ZIBmMJZgzvyRlk+rqrr+eLlpRxHYbtWRWPm0pjhJm2zE1NSH0SaLtSF5Bx83XXluLpUsvEA6Gv+6TDzoKfLhYAlM8hRgPxcsajTwULr7v6FmXAaBbpN1lisiiKCBuECET2MGni6VlwruBjaIb3P/5DolJ/S7LsYal1BR8vi9c1sZCHfW+V+Dfh29hpwTQqOBIExuGjIJuWjfN6cj7+dEtnayPT3WWrr5kX3o8Xjyohxe/NMZLegAAeJxjYGRgYADi0vZZW+P5bb4ycLMwgMC1M277EPT/fhYGZgsgl4OBCSQKAEcNCx8AeJxjYGRgYG7438AQw8IAAkCSkQEVsAEARwwCb3icY2FgYGB+ycDAwoCKARKfAQEAAAAAAAB2AIgAngCwAMwAAHicY2BkYGBgYwhkYGUAASYg5gJCBob/YD4DABFIAXMAeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicY2BigAAuBuyAjZGJkZmRhZGVkY2RnYGxgqsoNSc1sThVt7SAIzk/tyAntSSVs6A0J0c3Jb88jz0nPzElMy+dgQEARPMOmw==') format('woff'),
url('iconfont.ttf?t=1520838078027') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1520838078027#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-release-up:before { content: "\e987"; }
.icon-complete:before { content: "\e992"; }
.icon-pull-down:before { content: "\e996"; }
.icon-loading:before { content: "\e9ac"; }
/* 没有任何评价对象*/
.no-cart{width: 100%;height: auto; margin: 0 auto;background-color:#ffffff;}
.no-cart .c{ width: 100%; height: auto;}
.no-cart .c image{ margin: 0 auto; display: block; text-align: center; width: 258rpx;height: 258rpx;}
.no-cart .c text{ margin: 0 auto;display: block; width: 258rpx; height: 29rpx; line-height: 29rpx; text-align: center; font-size: 29rpx;color: #999;}
.title-box{
width: 100%; padding-top: 330rpx;text-align: center;font-size:28rpx;color:#999;
background: url(http://login.pink333.com/uploads/20181026/cf3265d5f592acc4c214ec9de060cc0a.png) no-repeat center 205rpx;
background-size: 100rpx auto;
margin-bottom: 50rpx;
}
.to-index-btn{ color:#fff;background:#e64340; border-radius:6px; width:300rpx; height: auto;line-height: 70rpx; text-align: center; font-size:28rpx;margin: 0 auto; display: block;}
.pingjia{ color:#fff;background:#e64340; border-radius:6px; width:100rpx; height: auto;line-height: 70rpx; text-align: center; font-size:28rpx;margin: 0 auto; display: block;}
JS代码
const util = require('../../../utils/util.js');
const api = require('../../../config/api.js');
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
orderList: [],
pageNum: 1,
pageSize: 20,
loadmoreText: '正在加载更多数据',
nomoreText: '全部加载完成',
nomore: false,
hasMoreData: true,
image_url: app.globalData.image_url,
g_state:0
},
toIndexPage: function() {
wx.switchTab({
url: '/pages/mall/index/index',
})
},
/**
* 评价
*/
comment: function(event) {
let that = this;
let p_uuid = event.currentTarget.dataset.orderId; //获取订单编号
let s_id = event.currentTarget.dataset.productId; //产品ID
let s_title = event.currentTarget.dataset.productName;
wx.navigateTo({
url: '/pages/ucenter/comment/comment?p_uuid=' + p_uuid + '&s_id=' + s_id +'&s_title=' + s_title,
})
},
/**
* 取消订单
*/
cancelOrder: function (event) {
let that = this;
let orderIndex = event.currentTarget.dataset.orderIndex; //获取订单编号
console.log(orderIndex);
wx.showModal({
title: '提示',
content: '确定要取消此订单？',
success: function (res) {
console.log(res);
if (res.confirm) {
//用户确认删除
util.request(api.deleteOrder, { id: orderIndex }, 'POST').then(rs => {
that.getOrderList();
if (rs.errCode == 200) {
wx.showModal({
title: '提示',
content: rs.errMsg,
showCancel: false,
confirmText: '继续',
success: function (rss) {
}
})
}
});
}
}
})
},
/**
* 去付款
*/
payOrder: function(event) {
let that = this;
let orderIndex = event.currentTarget.dataset.orderIndex; //获取订单编号
let orderMOney = event.currentTarget.dataset.orderMoney; //订单金额
let user = wx.getStorageSync('userInfo');
util.request(api.PayPrepayId, { orderId: orderIndex, openid: user.m_openid, m_id: user.m_id }, 'POST').then(res => {
if (res.errMsg.state == 1) {
const payParam = res.errMsg;
wx.requestPayment({
'timeStamp': payParam.timeStamp+'',
'nonceStr': payParam.nonceStr,
'package': payParam.package,
'signType': payParam.signType,
'paySign': payParam.paySign,
'success': function (res) {
console.log(res);
},
'fail': function (res) {
console.log(res);
}
});
} else {
wx.showModal({
title: '提示',
content: res.errMsg.RETURN_MSG,
showCancel: false,
success: function (rs) { }
})
}
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.showLoading({
title: '加载中...',
success: function () {
}
});
this.setData({
g_state: options.g_state
});
this.getOrderList();
},
/**
* 显示订单列表
*/
getOrderList: function (message) {
var that = this;
let user = wx.getStorageSync('userInfo');
var http_pay='付款接口'; //上一章我们写的付款接口
util.request(, { g_state: that.data.g_state, pageNum: that.data.pageNum, pageSize: that.data.pageSize, m_id: user.m_id}, "POST").then(res => {
var contentlistTem = that.data.orderList;
if (res.errCode == 200) {
if (res.errMsg.pageNum == 1) {
contentlistTem = [];
}
var contentlist = res.errMsg.list;
if (that.data.pageNum >= res.errMsg.pageCount) {
that.setData({
orderList: contentlistTem.concat(contentlist),
hasMoreData: false
});
} else {
that.setData({
orderList: contentlistTem.concat(contentlist),
hasMoreData: true,
pageNum: that.data.pageNum + 1
});
}
wx.hideLoading();
}
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
this.getOrderList();
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
this.getOrderList();
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
备注：请大家具体看看 payOrder函数，其他的函数可以不用管它。
顺便说一下，支付功能请用真机测试，否则你会发现意想不到的问题，具体会出现什么问题，大家可以尝试看看。在此不再熬述。
以上就是小程序支付的所有内容，希望对大家有帮助。如果还有不明白的同学可以给我留言。
作者：陈楠酒肆
链接：https://www.jianshu.com/p/851546a612af
关于Fundebug
Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了9亿+错误事件，得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用！
