サマリー：訂單詳情頁(yè)通過頁(yè)面邏輯.js文件獲取訂單列表傳過來的訂單id，將當(dāng)前訂單id傳入post接口來請(qǐng)求該訂單的詳細(xì)信息，最后通過數(shù)據(jù)綁定將訂單詳細(xì)信息動(dòng)態(tài)綁定到訂單詳情頁(yè)面結(jié)構(gòu).wxml文件。只有未支付的訂單才顯示取消訂單按鈕和立即支付按鈕。取消訂單成功后調(diào)用API接口wx.navigateBack關(guān)閉當(dāng)前頁(yè)面，返回上一頁(yè)面或多級(jí)頁(yè)面。立即支付按鈕調(diào)用原生微信支付接口實(shí)現(xiàn)。.js文件// p

訂單詳情頁(yè)通過頁(yè)面邏輯.js文件獲取訂單列表傳過來的訂單id，將當(dāng)前訂單id傳入post接口來請(qǐng)求該訂單的詳細(xì)信息，最后通過數(shù)據(jù)綁定將訂單詳細(xì)信息動(dòng)態(tài)綁定到訂單詳情頁(yè)面結(jié)構(gòu).wxml文件。只有未支付的訂單才顯示取消訂單按鈕和立即支付按鈕。取消訂單成功后調(diào)用API接口wx.navigateBack關(guān)閉當(dāng)前頁(yè)面，返回上一頁(yè)面或多級(jí)頁(yè)面。立即支付按鈕調(diào)用原生微信支付接口實(shí)現(xiàn)。

.js文件

// pages/my/order_details.js
const app = getApp();
var com = require("../../utils/util.js");
Page({
  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    orders : {},
    list   : {},
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
   */
  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
    })
  },
  /**
   * 支付按鈕，只有未支付的訂單才調(diào)用原生微信支付
   */
  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>訂單號(hào): {{orders.order_no}}</view>
        <view wx:if="{{orders.status == 0}}">等待付款</view>
        <view wx:if="{{orders.status == 1}}">已付款 待發(fā)送</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>

添削の先生：天蓬老師添削時(shí)間：2018-12-31 16:32:15
先生のまとめ：小程序中的這些操作, 考察的就是前端的基本功,別看是微信自定義一些樣式,其實(shí)還是基于原生css的