<template>
  <div>
    <div class="tips" v-if="orderList.length < 1">

    </div>
    <div v-for="data in orderList" class="list">
      <div class="head">
        <div class="bg-img" v-if="data.goods_desc" :style="{backgroundImage: `url(${data.goods_desc.img[0].url})`}">

        </div>
        <div class="content">
          <div class="title">{{data.goods_name}}</div>
          <div v-if="data.goods_desc" class="desc">{{data.goods_desc.desc}}</div>
          <div class="time">付款时间：{{data.pay_at}}</div>
        </div>
      </div>
      <div class="footer">
        <span class="payMoney">实付：{{data.money/100}}</span>
        <span :class="{red:data.status === 1}">{{data.status | orderType}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  import {getOrderListApi} from "../service/api";
  import {ORDERTYPE} from "../util/wordbook";

  export default {
    name: "order",
    data(){
      return {
        orderList:[]
      }
    },
    filters:{
      orderType(value){
        return ORDERTYPE[value]
      }
    },
    mounted(){
      this.initPage()
    },
    methods:{
      initPage(){
        getOrderListApi({status:1}).then(res=>{
          res.list.forEach(i=>{
            if(i.goods_desc){
              i.goods_desc= JSON.parse(i.goods_desc)
            }
          });
          this.orderList = res.list
        })
      }
    }
  }
</script>

<style scoped lang="less">
 @import "../util/public";
  .list{
    .bg-img{
      width: 80*@toVw;
      height: 80*@toVw;
      background-size:100% 100% ;
    }
    .head{
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: 1.4em;
      position: relative;
      flex-flow: row nowrap;
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 12px;
      padding: 12px;
      border: 1px solid #ccc;
      border-top-left-radius: 9px;
      border-top-right-radius: 9px;
      .content{
        font-size: 3.2vw;
        color: #999;
        .title{
          font-size: 3.73333vw;
          color: #666;
        }
      }
    }
    .footer{
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
      margin-left: 10px;
      margin-right: 10px;
      padding: 6px 12px;
      color: #999;
      font-size: 12 * @toVw;
      border: 1px solid #ccc;
      border-top: none;
      border-bottom-left-radius: 9px;
      border-bottom-right-radius: 9px;
      box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.1);
      span{
        margin: 0;
        line-height: 20 * @toVw;
      }
      .red{
        color: #f06a33;
      }
    }
 }
</style>