对接题库看

src/apis/course.js

@@ -205,4 +205,13 @@ export default {
 			params: data
 		})
 	},
+  studRrecordListUserRecord(data) {
+		return request({
+			url: '/study/record/listUserRecord',
+			method: 'get',
+			params: data
+		})
+	},
+
+  
 }

src/pages/person-center/play-record/index.vue

@@ -5,18 +5,28 @@
       <a class="clear-btn">清空记录</a>
     </div>
     <div class="play-record__body">
-      <div class="date-item" v-for="(item, index) in 2" :key="index">
-        <div class="date-item__header">2022-12-23</div>
+      <div class="date-item" v-for="(item, index) in recordList" :key="index">
+        <div class="date-item__header">{{ item.date }}</div>
         <div class="date-item__body">
           <div class="list">
-            <div class="course-item" v-for="(item, index) in 2" :key="index">
-              <div class="course-item__header">这是节名称</div>
+            <div class="course-item">
+              <div class="course-item__header">{{ item.sectionName }}</div>
               <div class="course-item__body">
-                <div class="img"></div>
+                <div
+                  class="img"
+                  @click="
+                    go('/my-course-detail/' + item.goodsId, {
+                      gradeId: item.gradeId,
+                      orderGoodsId: item.orderGoodsId,
+                    })
+                  "
+                >
+                  <img :src="$tools.splitImgHost(item.coverUrl, true)" alt="" />
+                </div>
                 <div class="text">
                   <div class="title">
-                    二级建造师建设工程施工管理
-                    <div class="note">60学时</div>
+                    {{ item.goodsName }}
+                    <!-- <div class="note">60学时</div> -->
                   </div>
                   <div class="progress">
                     学习进度
@@ -24,7 +34,11 @@
                       class="progress-line"
                       :text-inside="true"
                       :stroke-width="16"
-                      :percentage="70"
+                      :percentage="
+                        toFixed(
+                          (item.videoCurrentTime / item.durationTime) * 100
+                        )
+                      "
                     ></el-progress>
                   </div>
                 </div>
@@ -39,6 +53,20 @@
         </div>
       </div>
     </div>
+
+    <div class="play-record__footer">
+      <div class="pagination">
+        <el-pagination
+          @current-change="currentChange"
+          background
+          layout="prev, pager, next"
+          :total="total"
+          :pager-count="5"
+          :page-size="params.pageSize"
+        >
+        </el-pagination>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -48,15 +76,52 @@ export default {
   data() {
     return {
       activeName: "1",
+      recordList: [],
+      total: 0,
+      params: {
+        pageNum: 1,
+        pageSize: 10,
+      },
     };
   },
-  mounted() {},
+  mounted() {
+    this.studRrecordListUserRecord();
+  },
   methods: {
+    toFixed(num) {
+      if (num) {
+        let str = String(num).indexOf(".");
+
+        if (str != -1) {
+          return +num.toFixed(2);
+        } else {
+          return num;
+        }
+      } else {
+        return 0;
+      }
+    },
     pay() {
       this.$router.push({
         path: "payment-success",
       });
     },
+    currentChange(e) {
+      this.params.pageNum = e;
+      this.studRrecordListUserRecord();
+    },
+    studRrecordListUserRecord() {
+      this.$request.studRrecordListUserRecord(this.params).then((res) => {
+        this.recordList = res.rows;
+        this.total = res.total;
+      });
+    },
+    go(path, query) {
+      this.$router.push({
+        path,
+        query,
+      });
+    },
   },
 };
 </script>
@@ -120,10 +185,15 @@ export default {
 
             &__body {
               .img {
+                cursor: pointer;
                 float: left;
                 width: 160px;
                 height: 90px;
-                background: #3f8dfd;
+
+                img {
+                  max-width: 100%;
+                  max-height: 100%;
+                }
               }
 
               .text {
@@ -199,5 +269,12 @@ export default {
       }
     }
   }
+
+  &__footer {
+    .pagination {
+      padding: 30px 0;
+      text-align: center;
+    }
+  }
 }
 </style>