index.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. <template>
  2. <div class="app">
  3. <div class="m-right-block">
  4. <div class="right-block-bd">
  5. <!-- <div class="panel-tit mt30 clear"> -->
  6. <div class="text-xl leading-10 pb-4 text-blue">
  7. <p>最近学习课程</p>
  8. </div>
  9. <div class="clear mt10">
  10. <el-row :gutter="12" v-if="list && list.length > 0">
  11. <el-col v-for="item in list" :key="item.courseId" :span="8">
  12. <el-card>
  13. <div slot="header" class="clearfix">
  14. <span>{{item.name}}</span>
  15. <el-button style="float: right; padding: 3px 0" @click="gotoPlay(item.courseId)" type="text">前往</el-button>
  16. </div>
  17. <div class="text item flex">
  18. <div class="info pr-4">课程进度</div>
  19. <div class="info">{{getPercent(item)}}%</div>
  20. </div>
  21. <div class="text item flex">
  22. <div class="info pr-4">最近一次学习</div>
  23. <div class="info">{{item.endDate}}</div>
  24. </div>
  25. </el-card>
  26. </el-col>
  27. </el-row>
  28. <div v-else class="flex w-auto h-72 justify-center items-center text-gray-300 text-lg">
  29. 暂无信息
  30. </div>
  31. </div>
  32. </div>
  33. </div>
  34. </div>
  35. </template>
  36. <script>
  37. import {
  38. httpServer
  39. } from "@/components/httpServer/httpServer.js";
  40. export default {
  41. name: "Index",
  42. data() {
  43. return {
  44. page: 1,
  45. size: 6,
  46. total: 1,
  47. media: {},
  48. list: [],
  49. };
  50. },
  51. beforeMount() {
  52. this.getData()
  53. },
  54. methods: {
  55. gotoPlay(courseId) {
  56. this.$router.push({name:'play', params:{courseId}})
  57. },
  58. gotoPage(route) {
  59. this.$router.push(route);
  60. },
  61. getPercent(item) {
  62. if (item.getXs > item.totalXs) {
  63. return 100
  64. } else {
  65. return parseInt(item.getXs * 10000 / item.totalXs) / 100
  66. }
  67. },
  68. getData() {
  69. let {
  70. page,
  71. size
  72. } = this
  73. let param = {
  74. from: (page - 1) * size,
  75. isFree: 1,
  76. size
  77. }
  78. httpServer('course.GetHistoryCourseList', param).then(({
  79. data,
  80. code
  81. }) => {
  82. this.list = data.list || 0;
  83. this.total = data.total || 0;
  84. })
  85. }
  86. }
  87. };
  88. </script>
  89. <style lang="less">
  90. @import "./index.less";
  91. @import "../../../assets/css/course.css";
  92. </style>