<van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多数据啦~"
      @load="onLoad"
      offset="100"
    >
      <div class="order-list">
        <span class="order-header"
          >共&nbsp;{{ orderObj.orderNum || 0 }}&nbsp;条明细，共&nbsp;￥{{
            orderObj.orderSum || 0
          }}</span
        >
        <orderCard
          v-for="(item, index) in orderList"
          :item="item"
          :key="index"
        />
      </div>
    </van-list>

<template>
  <div class="order-card">
    <div class="card-left">
      <span class="card-black">{{ item.phone || noPhone }}</span>
      <span class="card-fontsize card-grey">
        <span>升数：{{ item.oilMass || noMass }}</span
        >&nbsp;&nbsp;
        <span>油号：{{ item.oilCode || noCode }}</span>
      </span>
      <span class="card-grey">{{ item.createOrderTime | filterTime }}</span>
    </div>
    <!-- 是否返利（0:否，1:是） -->
    <div class="card-right" v-show="item.isRebate == 0">
      {{ item.label }}
    </div>
    <div class="card-right-two" v-show="item.isRebate == 1">
      <span class="card-right-two-symbol"
        >￥<span class="card-right-two-amount">{{
          item.rebateSum || noMass
        }}</span></span
      >
      <span class="card-right-two-rebate">{{ item.label || noCode }}</span>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    item: Object
  },
  filters: {
    filterTime(e) {
      return e.replace(/-/g, ".");
    }
  },
  data() {
    return {
      noPhone: "",
      noMass: 0,
      noCode: "",
      noDate: ""
    };
  }
};
</script>
<style lang="less" scoped>
.order-card {
  background: #ffffff;
  border-radius: 0.6rem;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  padding: 1.5rem;
  height: 9.2rem;
  display: flex;
  justify-content: space-between;
  .card-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .card-black {
      font-size: 1.6rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      height: 2rem;
      line-height: 2rem;
      color: #333333;
    }
    .card-fontsize {
      font-size: 1.2rem;
    }
    .card-grey {
      height: 1.6rem;
      font-size: 1.2rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 1.6rem;
    }
  }
  .card-right {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
  }
  .card-right-two {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    .card-right-two-rebate {
      width: 100%;
      text-align: right;
      color: #ff7f00;
      font-size: 1.1rem;
    }
    .card-right-two-symbol {
      color: #333333;
      font-size: 1.4rem;
      font-weight: 500;
      .card-right-two-amount {
        font-size: 2.4rem;
      }
    }
  }
}
</style>