yb课堂 订单列表开发，完结 《四十五》

Order.vue

<template>
  <div class="main">
      <!--订单列表-->
    <div class="list" v-if="orders.length>0">
        <div class="box" v-for="(item,index) of orders" :key="index">
            <router-link :to="{path:'/coursedetail',query:{video_id:item.video_id}}"></router-link>
            <div class="smallbox">
                <div class="imgdiv">
                    <img :src="item.video_img" alt="课程图片" />
                </div>
                <div class="txtdiv">
                    <p class="title">{{item.video_title}}</p>
                    <p class="price">{{(item.total_fee/100).toFixed(2)}}</p>
                </div>
            </div>
        </div>
    </div>
    <div class="no_order" v-else>
        <p>暂未购买课程</p>
    </div>
   <common-footer></common-footer>
  </div>
</template>
<script>
import CommonFooter from "@/components/CommonFooter";
import { getOrderList } from "@/api/getData.js";
export default {
  components: {
    CommonFooter
  },
  data() {
    return {
      orders: []
    };
  },
  methods: {
    //获取订单列表
    async getOrderList() {
      try {
        const result = await getOrderList(this.$store.state.token);
        if (result.data.code == 0) {
          this.orders = result.data.data || [];
        }
      } catch (err) {
        console.log(err);
      }
    }
  },
  mounted() {
    this.getOrderList();
  }
};
</script>
<style lang="scss" scoped>
.list {
  padding: 0 20px;
}
// 视频个体
.box {
  padding: 20px 0;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  // 标题
  .title {
    font-size: 14px;
    margin-bottom: 15px;
  }
  // 订单详情
  .smallbox {
    //flex左右排列，两端对⻬
    display: flex;
    justify-content: space-between;
    .imgdiv {
       90px;
      height: 60px;
      flex-shrink: 0;
      img {
         100%;
        height: 100%;
        border-radius: 10px;
      }
    }
    .textdiv p {
      margin-top: 10px;
      padding-left: 10px;
    }
  }
}
.no_order {
  margin-top: 50px;
  text-align: center;
}
</style>