study_sm/src/containers/center/class/train/index.vue

<template>
  <div class="m-right-block  mh576">
    <div class="right-block-bd ng-scope" ui-view="myStudyContent" style="position: relative;">
      <div class="panel-tit clear">
        <p class="fl">课程</p>
        <div class="tc waphide">
          <strong class="tc" style="color: red;font-size: 1.2rem;">{{setting.noticeMsg}}</strong>
        </div>
      </div>

      <ul class="m-course-list clear mt10 classlist" v-if="total>0">
        <li v-for="(item,index) in list" :key="item.course_id" class="pt-sola mt20 pb10">
          <div>
            <span v-if="item.isFinish==1" class="p-ico2 ico-passed"></span>
            <div class="img">
              <img :src="item.tb">

              <div class="hover-block">
                <div class="mask-bg tc"></div>
                <el-button @click="gotoPlay(item.courseId)" class="ui-btn">进入学习</el-button>
              </div>
            </div>

            <div class="tit"><a>{{item.name}}</a></div>
            <div class="info">
               <p class="w1"><span class="p-ico c1"></span> {{item.type}}</p>
               <p class="w2"><span class="p-ico c2"></span>{{item.nd||'2020'}}</p>
               <p class="w1">
                <span class="p-ico c3"></span> 获得<strong style="color: orange;">{{item.getXs/10}}</strong>学时
               </p>
               <p class="w2" >
                 <span class="p-ico c3"></span> 总共 <strong style="color: orange;">{{item.totalXs/10}}</strong>学时
               </p>
            </div>
          </div>
        </li>
      </ul>

      <el-pagination  class="m-pages"
      @current-change="handleCurrentChange" :current-page="page" :page-size="size" layout="total, prev, pager, next"
        :total="total">
      </el-pagination>

    </div>

  </div>
</template>

<script>
  import { httpServer} from "@/components/httpServer/httpServer.js";
  import { getMediaOptions} from "@/utils/index.js";
  import setting from '@/setting';
  export default {
    name: "Index",
    data() {
      return {
        page: 1,
        size: 12,
        total: 1,
        list: [],
        menus:{},
        info:{},
        options:{},
        media:{},
        setting,
        playDialog: false,
        listLoading: false
      };
    },
    beforeMount(){
      this.getData()
    },
    methods: {
      handleCurrentChange: function(currentPage) {
        this.page = currentPage;
        this.getData()
      },
      gotoPlay( courseId ){
        this.$router.push({name:'play', params:{courseId}})
      },
      getData() {
        let {page, size } = this
        let param = { from:(page - 1) * size, size }
        httpServer('course.getUserCourseList', param).then(({
          data,
          code
        }) => {
          this.list = data.list || 0;
          this.total = data.total || 0;
        })
      },
    }
  }
</script>

<style>
  @import url("./index.css");
  @import url("../../../../assets/css/course.css");
  @import url("../../../../assets/css/m-screen.css");
</style>