123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596 |
- <template>
- <div class="app">
- <div class="m-right-block">
- <div class="right-block-bd">
- <!-- <div class="panel-tit mt30 clear"> -->
- <div class="text-xl leading-10 pb-4 text-blue">
- <p>最近学习课程</p>
- </div>
- <div class="clear mt10">
- <el-row :gutter="12" v-if="list && list.length > 0">
- <el-col v-for="item in list" :key="item.courseId" :span="8">
- <el-card>
- <div slot="header" class="clearfix">
- <span>{{item.name}}</span>
- <el-button style="float: right; padding: 3px 0" @click="gotoPlay(item.courseId)" type="text">前往</el-button>
- </div>
- <div class="text item flex">
- <div class="info pr-4">课程进度</div>
- <div class="info">{{getPercent(item)}}%</div>
- </div>
- <div class="text item flex">
- <div class="info pr-4">最近一次学习</div>
- <div class="info">{{item.endDate}}</div>
- </div>
- </el-card>
- </el-col>
- </el-row>
- <div v-else class="flex w-auto h-72 justify-center items-center text-gray-300 text-lg">
- 暂无信息
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import {
- httpServer
- } from "@/components/httpServer/httpServer.js";
- export default {
- name: "Index",
- data() {
- return {
- page: 1,
- size: 6,
- total: 1,
- media: {},
- list: [],
- };
- },
- beforeMount() {
- this.getData()
- },
- methods: {
- gotoPlay(courseId) {
- this.$router.push({name:'play', params:{courseId}})
- },
- gotoPage(route) {
- this.$router.push(route);
- },
- getPercent(item) {
- if (item.getXs > item.totalXs) {
- return 100
- } else {
- return parseInt(item.getXs * 10000 / item.totalXs) / 100
- }
- },
- getData() {
- let {
- page,
- size
- } = this
- let param = {
- from: (page - 1) * size,
- isFree: 1,
- size
- }
- httpServer('course.GetHistoryCourseList', param).then(({
- data,
- code
- }) => {
- this.list = data.list || 0;
- this.total = data.total || 0;
- })
- }
- }
- };
- </script>
- <style lang="less">
- @import "./index.less";
- @import "../../../assets/css/course.css";
- </style>
|