<template>
  <div>
    <div class="order-list">
      <ul>
        <template v-for="(item, index) in order">
          <li :key="index">
            <div class="order-info">
              <img :src="item.product_image" alt="">
              <div class="txt">{{item.product_name}}</div>
            </div>
            <div class="deti">
              <div class="tit">课程状态：</div>
              <div class="val">{{item.status === 1 ? '已付款' : '未付款' }}</div>
            </div>
            <div class="deti">
              <div class="tit">共计：</div>
              <div class="val">{{item.total_fee}}</div>
            </div>
            <div class="deti">
              <div class="val col" v-if="item.status === 1">购买成功</div>
              <div class="val col" v-else>继续购买</div>
            </div>
          </li>
        </template>
      </ul>
    </div>
  </div>
</template>
<script>
import * as api from '@/api/pay.js'
export default {
  data() {
    return {
      order: []
    }
  },
  mounted() {
    this.getMyOrder()
  },
  methods: {
    getMyOrder() {
      api.getMyOrder().then(res => {
        if (res.code === 0) {
          this.order = res.data.orders
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.order-list{
  li{
    padding: .1rem .4rem;
    margin-bottom: .4rem;
  }
  .order-info{
    display: flex;
    img{
      width: 2.4rem;
      height: 2.4rem;
      display: block;
    }
    .txt{
      margin-left: .2rem;
      font-size: .3rem;
      color: #222;
      word-wrap: break-word;
    }
  }
  .deti{
    display: flex;
    margin-top: .4rem;
    .tit{
      font-size: .26rem;
      color: #222;
    }
    .val{
      font-size: .26rem;
      color: #222;
      margin-left: auto;
    }
    .col{
      color: #FF6767;
      font-size: .3rem;
    }
  }
}
</style>
