摘要：订单详情页通过页面逻辑.js文件获取订单列表传过来的订单id，将当前订单id传入post接口来请求该订单的详细信息，最后通过数据绑定将订单详细信息动态绑定到订单详情页面结构.wxml文件。只有未支付的订单才显示取消订单按钮和立即支付按钮。取消订单成功后调用API接口wx.navigateBack关闭当前页面，返回上一页面或多级页面。立即支付按钮调用原生微信支付接口实现。.js文件// p
订单详情页通过页面逻辑.js文件获取订单列表传过来的订单id，将当前订单id传入post接口来请求该订单的详细信息，最后通过数据绑定将订单详细信息动态绑定到订单详情页面结构.wxml文件。只有未支付的订单才显示取消订单按钮和立即支付按钮。取消订单成功后调用API接口wx.navigateBack关闭当前页面，返回上一页面或多级页面。立即支付按钮调用原生微信支付接口实现。
.js文件
// pages/my/order_details.js
const app = getApp();
var com = require("../../utils/util.js");
Page({
/**
* 页面的初始数据
*/
data: {
orders : {},
list : {},
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (e) {
com.post('Api/Home/order_details', { id: e.id }, "setContent", this);
},
setContent : function(e){
this.setData({
orders: e.orders,
list: e.product
});
},
/**
* 取消订单，只有未支付的订单才可以取消订单
*/
cancelOrder : function(e){
com.post('Api/Home/cancel_order', { id: e.currentTarget.dataset.id }, "cancelAfter", this);
},
cancelAfter : function(e){
wx.navigateBack({
delta: 2
})
},
/**
* 支付按钮，只有未支付的订单才调用原生微信支付
*/
goPay : function(e){
wx.requestPayment({
'timeStamp': '',
'nonceStr': '',
'package': 'prepay_id=1',
'signType': 'MD5',
'paySign': '',
'success': function (res) {
},
'fail': function (res) {
}
})
}
}).wxml文件
<!--pages/my/order_details.wxml-->
<view class="fui-page order-create-page fui-page-current" style='height:100%;'>
<view class='fui-content navbar'>
<view class="order_detail_header">
<view class="order_detail_ststus">
<view>订单号: {{orders.order_no}}</view>
<view wx:if="{{orders.status == 0}}">等待付款</view>
<view wx:if="{{orders.status == 1}}">已付款 待发送</view>
<view wx:if="{{orders.status == 2}}">已完成</view>
<view>订单金额：¥ {{orders.money}}</view>
</view>
</view>
<!-- 地址 -->
<view class="fui-list-group">
<view class="fui-list">
<view class="fui-list-inner">
<view class="title">
收货人：
<span class="realname">{{orders.name}}</span>
<span class="mobile">{{orders.phone}}</span>
</view>
<view class="title">
<span class="address">{{orders.address}}</span>
</view>
</view>
</view>
</view>
<!-- 地址end -->
<!-- 商品 -->
<view class='fui-shop'>
<view class='fui-shop-list' wx:for="{{list}}" wx:key="">
<view class="fui-shop-list-media">
<image class="img" src="{{item.shop.imgs}}"></image>
</view>
<view class="shops" style='folat:left'>
<view class="subtitle">{{item.shop.title}}</view>
</view>
<view class="fui-list-angle">
<span style="font-size: 0.65rem;color: #000">￥<span class="marketprice">{{item.count}}</span></span>
<view style='color: #999;'>x{{item.price}}</view>
</view>
</view>
</view>
<!-- 商品end -->
<!-- 买家留言 -->
<view class="fui-cell-group">
<view class="fui-cell fui-cell-textarea">
<view class="fui-cell-label">
买家留言
</view>
<view class="fui-cell-info">
<textarea class='textarea' rows="2" disabled="true">{{orders.desc}}</textarea>
</view>
</view>
</view>
<!-- 买家留言end -->
<!-- 按钮 -->
<view class="fui-navbar" wx:if="{{orders.status == 0}}">
<button class="nav-item btn buybtn" style='background:#666;' bindtap="cancelOrder" data-id='{{orders.id}}'>取消订单</button>
<button class="nav-item btn btn-danger buybtn" bindtap="goPay" data-id='{{orders.id}}'>立即支付</button>
</view>
<!-- 按钮end -->
</view>
</view>
批改老师：天蓬老师批改时间：2018-12-31 16:32:15
老师总结：小程序中的这些操作, 考察的就是前端的基本功,别看是微信自定义一些样式,其实还是基于原生css的
