小程序在线支付三

<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>

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;}

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函数，其他的函数可以不用管它。
顺便说一下，支付功能请用真机测试，否则你会发现意想不到的问题，具体会出现什么问题，大家可以尝试看看。在此不再熬述。