微商城订单详情页总结及实现

摘要：订单详情页通过页面逻辑.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的