<!--pages/myOrder/orderDetail.wxml-->
<view class="container">
    <view class="order-title">
       <text ><text class="font-color-333">订单号</text><text style="margin-left:40rpx;">{{order.order_no}}</text></text>
       <text class="font-color-999">{{order.create_time}}</text>
    </view>
    <view class="order-status">
       <view class="group-hd">订单状态</view>
       <view wx:for="{{ order.order_stauts}}" wx:for-item="status"  class="{{status==order.order_stauts[0] ? 'content font-color-c24e4e' :'content'}}" >
            <text>{{status.update_time}}:</text>
            <text style="margin-left:40rpx;">{{status.content}}</text>
       </view>
    </view>
    <view class="order-group">
       <view class="group-hd">商品</view>
       <view class="group-bd  line-after-top ">
           <view class="food-list line-before-bottom" wx:for="{{order.order_foods}}" wx:for-item="foodlist">
              <image src="{{foodlist.foods_img}}" class="imgsize"></image>
              <view class="food-text">
                <view class="font-size-16">{{foodlist.foods_name}}</view>
                 <view><text class="font-color-999"><text class="font-color-c24e4e" style="font-size:40rpx;margin-left:24rpx;">¥{{foodlist.foods_price}}</text>{{foodlist.foods_weight}}</text>
                       <text class="font-color-999">数量：<text class="font-color-c24e4e" style="margin-left:24rpx;">{{foodlist.foods_num}}</text></text>
                 </view>
              </view>
           </view>
       </view>
       <view class="group-ft">
          <text class="font-color-999">订单总额：<text class="font-color-c24e4e" style="font-size:40rpx; margin-left:24rpx;">¥{{order.order_sum}}</text></text>
       </view>
    </view>
    <view class="address-group">
         <view class="address-group-hd line-before-bottom">
             <text>客户</text>
              <text>{{order.customer.customer_name}}</text>   
         </view>
         <view class="address-group-bd">
             <text>地址：{{order.customer.customer_address}}</text>
             <text ><text>收货人：{{order.customer.receiver}}</text><text style="margin-left:2em;">联系电话：{{order.customer.phone}}</text></text>
         </view>
    </view>
    <view class="order-group ">
       <view class="group-hd line-before-bottom">备注信息</view>
       <view class="beizhu font-color-c24e4e">
             {{order.remarks}}
       </view>
    </view>   
</view>

/* pages/myOrder/orderDetail.wxss */
.order-title{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 100rpx;
    background-color:#fff;
    padding: 0 30rpx;
    margin: 20rpx 0;
}
.order-group,.address-group{
    padding:0 30rpx;
    background-color:#fff;
}
.group-hd{
    display: flex;
    align-items: center;
    padding: 20rpx 0;
}
.group-bd{
    display: flex;
    flex-direction:column;
    align-items: center;
    padding: 20rpx 0;
}
.group-ft{
    display: flex;
    padding: 0rpx 0rpx 20rpx;
    justify-content:flex-end;
}
.food-list {
    display: flex;
    flex-direction: row;
    padding: 20rpx 0 ;
    width: 100%;
}
.food-list .imgsize{
    width: 120rpx;
    height: 120rpx;
    margin-right: 20rpx;
}
.food-list .food-text{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    
    
}
.food-text view{
    display: flex;
    justify-content: space-between;
    align-items:flex-end;
}

/*order-status*/
.order-status{
    line-height: 1;
    padding: 17rpx 30rpx 13rpx;
    background-color: #fff;
    margin-bottom: 20rpx;
}
.order-status .group-hd{
    margin-bottom: 10rpx;
}
.order-status .content{
    margin-bottom: 27rpx;
}

/*address-group*/
.address-group{
    margin-top: 20rpx;
}
.address-group-hd{
   height: 120rpx;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
}
.address-group-bd{
    padding: 30rpx 0;
    flex-direction:column;
      display: flex;
}
.order-group{
     margin: 20rpx 0;
}

.beizhu{
    padding: 30rpx 0;
}

// pages/myOrder/orderDetail.js
Page({
  data:{},
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    this.setData({
      order:{
        order_no:'SA02201703052988',
        create_time:'2017.03.05 18:30',
        order_stauts:[{
           update_time:'2017.03.05 18：16',
           content:'厂家已确认，准备发货'
        },
        {
           update_time:'2017.03.05 18：16',
           content:'厂家已确认，准备发货'
        },
        {
           update_time:'2017.03.05 18：16',
           content:'厂家已确认，准备发货'
        }],
        order_foods:[{
            foods_img:'/assets/testimages/timg1.jpg',
            foods_name:'永泰老酒1915 六瓶/件',
            foods_price:'1950',
            foods_weight:'/件(6瓶)',
            foods_num:1,
        },{
            foods_img:'/assets/testimages/timg1.jpg',
            foods_name:'永泰老酒1988 六瓶/件',
            foods_price:'1950',
            foods_weight:'/件(6瓶)',
            foods_num:2,
        }],
        order_sum:4549,
        customer:{
          customer_name:'迪巴拉公司袁小娇',
          customer_address:'湖北省武汉市硚口区人民路302号迪巴拉公司研发部',
          receiver:'李璇',
          phone:'13297090125'
          
        },
        remarks:'喝假酒喝怕了，请快点...'
      }
    })
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})