abstract：总结：本章主要学习到了，查询到订单数据和商品数据，赋值到前端模板，以及两个按钮的实现，去支付和取消订单，了解到了操作的逻辑，对于数据的传参理解还不是很清楚，希望能通过多看几遍视频能明白。、/******************** order_details.wxml *************************/<!--pages/my/order_detai
总结：本章主要学习到了，查询到订单数据和商品数据，赋值到前端模板，以及两个按钮的实现，去支付和取消订单，了解到了操作的逻辑，对于数据的传参理解还不是很清楚，希望能通过多看几遍视频能明白。、
/******************** order_details.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>
/********************** order_details.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) {
}
})
}
})
