微信小程序——实战：发起微信支付，并根据支付结果显示页面

微信小程序——实战：发起微信支付，并根据支付结果显示页面

1.界面

2.项目结构

3.核心代码

1.trade.js封装前端流水号

module.exports = {
    tradeno: function() {
        var e = new Date().getTime();
        return "fk" + parseInt(1e11 * Math.random() + 1e11) + parseInt(1e4 * Math.random() + 1e4) + e;
    }
};

2.index.js发起支付

gopay:function(payRes){
    var ts = this
    ts.setData({
      ssn: t.tradeno(), //前端流水号
      price: payRes.currentTarget.dataset.num/100
    })
    //调用预订单接口，得到返回值
    e.request('/managementchanel/woaPresettlement?parkid=' + a.globalData.parkid, {
      txnNum: '',//交易类型
      corporation: '',//法人编号
      mchntNo: '', //商户号
      payAcctInfo: [{
        acctType: '03',//支付账户类型00-零钱账户，01-积分账户，02-卡券账户，03-微信账户
        transCcy: 'CNY',//交易币种
        transAmt: payRes.currentTarget.dataset.num,//交易金额（单位：分）
      }],
      goodDesc: "",//商品描述
      traceNo: ts.data.ssn,//交易流水号
      termIp: '10.10.10.11',//终端IP地址
      tradeType: 'JSAPI',//交易支付类型
      openId: wx.getStorageSync('openid'),//用户标识
      usr_num: payRes.currentTarget.dataset.id,//车牌号
    }, 'POST').then((res) => {
      //根据返回值，调用wx.支付接口
      if ((res.statusCode + '').indexOf('20') === 0) {
        wx.requestPayment({
          timeStamp: res.data.timeStamp,//支付时间戳
          nonceStr: res.data.nonceStr,//随机字符串
          package: res.data.payPackage,//支付数据包
          signType: res.data.signType,//签名方式
          paySign: res.data.paySign,//支付签名域
          success(res) {
            //跳转页面之前，再去查询支付结果
            ts.updateOrder(payRes.currentTarget.dataset.id);
          },
          fail(res) {
            wx.showToast({title: '微信支付发起失败',icon: 'none'})
          },
        });
      } else {
        wx.showToast({title: '微信支付发起失败',icon: 'none'})
      }
    });
  },
  //查询支付结果，跳转页面
  updateOrder(usr_num) {
    var that = this;
    //支付成功回调，获取预订单，参0数：账户流水号，调查询接口
    e.request('/managementchanel/checkPayResult?parkid=' + a.globalData.parkid, {usr_num: usr_num}, 'POST').then((res) => {
      if (res.data.pay_status == '3') {
        setTimeout(() => {
          wx.redirectTo({
            url: "../status/status?desc=支付成功&price=" + res.data.bill_at/100 + "元&status=success&title=支付成功"
          });}, 1000);
      } else if (res.data.pay_status == '-3') {
        setTimeout(() => {
          wx.redirectTo({
            url: "../status/status?desc=支付失败&status=fail&title=支付失败"
          });}, 1000);
      } else{
        setTimeout(() => { that.updateOrder();}, 1200);
      }
    });
  },

3.staus页面根据传过来的参数不同展示效果不同

• status.js

var e = require("../../utils/trade.js"),
  t = require("../../utils/token.js"),
  r = require("../../utils/request.js"),
  a = getApp();

Page({
  data: {
    status: '', // 成功或失败状态
    desc: '', // 描述
    url: '../index/index', // 要返回的页面地址
    title: '提示', // 页面标题
    openType: 'redirect', // 返回页面的跳转方式 具体值参考小程序API
  },
  onLoad: function (e) {
    console.log(e)
    var ts = this;
    if(e.status=='success'){ ts.setData({desc:'成功支付'+e.price,title:e.title,status:e.status})
    }else{ ts.setData({ desc: '支付失败!', title: e.title,status:e.status})}
  },
  onReady: function () { },
  onShow: function () { },
  onHide: function () { },
  onUnload: function () { },
  onPullDownRefresh: function () { },
  onReachBottom: function () { },
  onShareAppMessage: function () { }
});

• status.json

{
  "navigationBarTitleText": "提示",
  "navigationBarBackgroundColor": "#2F6BB4"
}

• status.wxml

    
        
        {{desc}}
        确认
    

• status.wxss

 .icon{
        width: 136rpx;
        height: 136rpx;
        display: block;
        margin: 110rpx auto;
    }
    .desc{
        margin-bottom: 240rpx;
        font-size: 34rpx;
        text-align: center;
    }
    .btn{
        width: 500rpx;
        height: 90rpx;
        margin: auto;
        line-height: 90rpx;
        border-radius: 45rpx;
        background: #2F6BB4;
        color: #fff;
        text-align: center;
    }