小程式線上支付三
阿新 • • 發佈：2018-11-27
通過前面兩節，我們把小程式支付的基本工作給完成了，現在我們如何在前端呼叫我們的介面呢，今天本章就是跟大家談論一下。我們先看一下效果圖
線上付款
付款介面
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函式，其他的函式可以不用管它。
順便說一下，支付功能請用真機測試，否則你會發現意想不到的問題，具體會出現什麼問題，大家可以嘗試看看。在此不再熬述。
以上就是小程式支付的所有內容，希望對大家有幫助。如果還有不明白的同學可以給我留言。