微信小程序 “万利商城”实战之十七：订单查询功能的编码实现（完结篇）

用户在“我的”页面查看不同状态的订单会跳转到订单列表页面，不同的订单状态会传递不同的参数，

订单列表页根据接收的参数到服务端抓取不同的数据显示给用户，先看页面呈现：

 

orderList.wxml代码如下：

<view class="container">
 
  <view class="orderState1">
    <text class="{{stateNo==1?'bgred':'bgwhite'}}">全部</text>
    <text class="{{stateNo==2?'bgred':'bgwhite'}}">待支付</text>
    <text class="{{stateNo==3?'bgred':'bgwhite'}}">待收货</text>
    <text class="{{stateNo==4?'bgred':'bgwhite'}}">已完成</text>
    <text class="{{stateNo==5?'bgred':'bgwhite'}}">已失效</text>
  </view>

 
 <view class="list1" wx:for="{{productList}}" wx:key="produceId">

   <view>
     <image class="image1" src="{{item.imageUrl}}"></image>
   </view>

  <view class="detail1">
    <text>{{index+1}}. {{item.productName}}</text>
    <text class="oriPrice1">￥{{item.originalPrice}}</text>

    <view class="priceInfo1">
      <text>￥</text>
      <text class="price1">{{item.price}}</text>
      <text decode="true">&emsp;</text>
      <text decode="true">x&nbsp;</text>
      <text class="qty1">{{item.productQty}}</text>
      <text decode="true">&emsp;</text>
      <text decode="true">金额&nbsp;:&nbsp;</text>
      <text class="price1">{{item.price*item.productQty}}</text>
    </view>
  </view>

  </view>
 
 
 </view>

orderList.wxss代码如下 ：

.orderState1{
  width: 100%;
  display:flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
}
.bgred{
  background-color: red; 
  color:white;
  padding:10rpx 10rpx;
}
.bgwhite{
  background-color: gray; 
  color:white;
  padding:5rpx 5rpx;
}

.image1
{
  width:200rpx;
  height:200rpx;
}


.list1
{
  border:solid 3rpx #c0c0c0;
  width: 96%;
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 20rpx;
  align-content:space-around
}

.detail1
{ 
  display:flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

 

.priceInfo1
{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;  
  align-items: baseline;
}
.price1{
  color: #E80808;
  font-size: 16pt;
} 
.oriPrice1
{
 text-decoration:line-through;
 margin-left: 20rpx;
}
.qty1{ 
  font-size: 16pt;
}

不同订单状态进来时上部的导航菜单应该有不同的显示便于用户查看，

所以在每个状态项上用三目运算符?:来根据传递的参数用不同的wxss来显示。

 

最后来看orderList.js文件的编码：

  data: {
    productList: [], 
    stateNo:1
  },

  
  initProductList:function()
  {
    var _this=this;
    wx.request({
      url: 'http://www.tm.com/webapi/orders',
      data:{'orderState':this.data.stateNo},
      method:'GET',
      success:function(res){
        //var products=res.data;
        var products=[
          {'productId':111,'productName':'女装T恤简洁11','price':12.9,'originalPrice':22.9,'imageUrl':'../../images/product11.jpg',
          'inShoppingCart':0,'productQty':2},
          {'productId':133,'productName':'女装T恤简洁33','price':18.9,'originalPrice':38.9,'imageUrl':'../../images/product33.jpg',
          'inShoppingCart':0,'productQty':1}
        ];
        _this.setData({productList:products}); 
      }
    })
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) { 
    this.setData({stateNo:options.orderState}); 
    this.initProductList();
  },

orderList.js页面加载的时候首先执行onLoad()函数，

在此函数中先调用setData()设置变量stateNo的值供页面其他地方调用， 

上一个页面传递进来的值用options.orderState的形式来接收，且一定要放在onLoad()函数中。

初始化订单数据的时候要用data:{'orderState':this.data.stateNo},传递订单状态参数到服务器端，

服务器端接收到orderState这个参数后去数据库查询相应的订单信息给小程序来显示。

 

注：这里的订单列表为了聚焦订单自身的业务逻辑没有做分页的处理，

分页的处理方式可以参考前面的章节，原理是一样的。

至此，我们整个微信小程序“万利商城”实战演练就完结了，后面还会介绍一些微信小程序的小技巧。