<template>
  <view class="orderNotice">
    <view class="order-list" v-for="(item,index) in init_list" :key="index">
     <view class="fl-flex-item order-top">
        <view class="fl-flex chelvc-chelvc-align-center">
          <image :src="item.orderDetailDTO.orderItemList[0].goodsPic" mode="scaleToFill" />
          <view class="f-s-28 margin-left-xs">{{ item.orderDetailDTO.orderItemList[0].goodsName }}</view>
        </view>
        <u-icon name="arrow-right" color="#cbcbcb" size="15" />
      </view>
      <view>
        <view class="fl-flex-item title">
          <view class="text-bold text-black">订单{{ item.orderType }}</view>
          <view class="f-s-20 text-gray">{{ item.createTimeText }}</view>
        </view>
        <view class="fl-flex content">
          <view class="img">
            <image :src="item.orderDetailDTO.merchantInfo.logo" mode="scaleToFill" />
          </view>
          <view class="text apostrophe">
            <span> 订单号:{{ item.orderId }} </span>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
			<!-- 0->待付款；1-已付款；2->待发货；3->已发货；4->已完成；5->已关闭；6->无效订单 -->
<script>
  import { getOrderInform , clearInformFlag } from '@/api/client/message.js';
export default {
  data() {
    return {
      queryParams:{
		paging:'1,10',
        counting:true
      },
	  current:1,
	  size:10,
	  init_list:[],
	  typeEnum:[
		  { type:0 , name:'待付款' },
		  { type:1 , name:'已付款' },
		  { type:2 , name:'待发货' },
		  { type:3 , name:'已发货' },
		  { type:4 , name:'已完成' },
		  { type:5 , name:'已关闭' },
		  { type:6 , name:'无效订单' },
	  ]
    };
  },
  mounted(){
    this.handlerInitList()
  },
  onShow(){
	  // 已读消息
	clearInformFlag({type:'ORDER'}).then(res=>{
	})
  },
  methods: {
    handlerInitList(){
      getOrderInform(this.queryParams).then(res=>{
		this.init_list = res.data.records
		this.init_list.map(rs=>{
			 this.typeEnum.map(rc=>{
				 if(rs.orderStatus == rc.type){
					 rs.orderType = rc.name
				 }
			 })
		})
		this.init_list.map(rs=>{
			rs.createTimeText = uni.$u.timeFormat(rs.createTime, 'yyyy-mm-dd');
		})
      })
    }
  },
};
</script>

<style lang="scss" scoped>

.apostrophe {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.orderNotice {
  min-height: 100vh;
  padding: 20rpx;
  box-sizing: border-box;
  .order-list {
    height: 280rpx;
    background-color: #fff;
    border-radius: 20rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
	box-shadow: 0 0 15rpx 0 rgba(0,0,0,0.2);
    .order-top {
      height: 50rpx;
      border-bottom: 2rpx solid #fbfbfb;
      padding-bottom: 10rpx;
      image {
        height: 40rpx;
        width: 40rpx;
      }
    }
    .title {
      margin: 20rpx 0;
    }
    .content {
      height: 140rpx;
      background-color: #f8f8f8;
      .img {
        height: 140rpx;
        width: 140rpx;
        image {
          height: 140rpx;
          width: 140rpx;
        }
      }
      .text {
        color: #949494;
        font-size: 30rpx;
        height: 80rpx;
        margin: 30rpx 40rpx 20rpx 20rpx;
      }
    }
  }
}
</style>
