src/views/video/editvideo.vue

@@ -6,7 +6,7 @@
       label-width="150px"
       :model="form"
       :rules="rules"
-      style="width: 50%; margin-top: 50px"
+      style="width: 80%; margin-top: 50px"
     >
       <el-form-item label="视频名称:" prop="title">
         <el-input v-model="form.title" placeholder="请输入视频名称" />
@@ -170,7 +170,7 @@
 </template>
 
 <script>
-import { videoAdd, videoEdit,videoDetail } from "./api/video";
+import { videoAdd, videoEdit, videoDetail } from "./api/video";
 import { chapterList } from "./api/chapter";
 export default {
   name: "DepartmentManagementEdit",
@@ -235,7 +235,7 @@ export default {
     this.videoId = route.query.videoId;
     if (route.query.videoId) {
       this.title = "编辑视频";
-      this.getDetail()
+      this.getDetail();
     } else {
       this.title = "添加视频";
     }
@@ -281,15 +281,29 @@ export default {
     },
     async getDetail() {
       const { data } = await videoDetail({
-        id:this.videoId
+        id: this.videoId,
       });
       console.log(data, "视频详情");
-      this.form = data
-      this.form.course_id = this.courseId
-      this.form.url_resource = data.url_resource
-      var arr = []
-      arr.push(data.fileList)
-      this.form.fileList = arr
+      this.form = data;
+      this.form.course_id = this.courseId;
+      this.form.url_resource = data.url_resource;
+      var arr = [];
+      arr.push(data.fileList);
+      this.form.fileList = arr;
+      let time = data.duration;
+      this.hours =
+        parseInt(time / 3600) < 10
+          ? "0" + parseInt(time / 3600)
+          : parseInt(time / 3600);
+      this.minute =
+        parseInt((time % 3600) / 60) < 10
+          ? "0" + parseInt((time % 3600) / 60)
+          : parseInt((time % 3600) / 60);
+      this.second =
+        parseInt((time % 3600) % 60) < 10
+          ? "0" + parseInt((time % 3600) % 60)
+          : parseInt((time % 3600) % 60);
+
       // this.chapterData = data.data;
     },
     //视频上传成功
@@ -329,7 +343,7 @@ export default {
       this.form.duration = this.hours * 3600 + this.minute * 60 + this.second;
       this.$refs["form"].validate(async (valid) => {
         if (valid) {
-          console.log(this.form)
+          console.log(this.form);
           const { message } = await videoEdit(this.form);
           this.$message({ message, type: "success" });
           this.$router.push({

src/views/video/watchRecord.vue

@@ -1,5 +1,11 @@
 <template>
   <div class="department-management-container">
+    <el-page-header
+      @back="goBack"
+      content="观看记录"
+      style="margin-bottom: 20px"
+    >
+    </el-page-header>
     <vab-query-form style="display: flex; justify-content: space-between">
       <vab-query-form-left-panel :span="12">
         <!-- 添加暂时不要求 -->
@@ -11,9 +17,17 @@
         <el-form :inline="true" :model="queryForm" @submit.native.prevent>
           <el-form-item>
             <el-input
-              v-model.trim="queryForm.title"
+              v-model.trim="queryForm.user_name"
               clearable
-              placeholder="请输入课程名称"
+              placeholder="学生姓名"
+              @keyup.enter.native="queryData"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-input
+              v-model.trim="queryForm.user_account"
+              clearable
+              placeholder="学号"
               @keyup.enter.native="queryData"
             />
           </el-form-item>
@@ -34,85 +48,48 @@
         type="index"
         width="60"
       />
-      <el-table-column align="center" label="图片">
-        <template #default="{ row }">
-          <el-image
-            v-if="row.thumb_resource != null"
-            :src="row.thumb_resource.url"
-          />
-          <div v-else>--</div>
-        </template>
-      </el-table-column>
       <el-table-column
         align="center"
-        label="课程名称"
+        label="课程"
         min-width="120"
         prop="title"
         show-overflow-tooltip
-      />
-      <el-table-column
-        align="center"
-        label="标签"
-        prop="labels"
-        show-overflow-tooltip
       >
-        <template #default="{ row }">
-          <span v-if="row.labels.length == 0">--</span>
-          <el-tag
-            v-for="(item, index) in row.labels"
-            :key="index"
-            type="success"
-          >
-            {{ item }}
-          </el-tag>
+      <template #default="{ row }">
+          <span>{{row.course.title}}</span>
         </template>
       </el-table-column>
-      <!-- <el-table-column
+      <el-table-column
         align="center"
-        label="课程类型"
+        label="姓名"
+        min-width="120"
+        prop="title"
         show-overflow-tooltip
       >
-        <template #default="{ row }">
-          <el-tag v-if="row.category != null">{{ row.category.name }}</el-tag>
-          <span v-else>--</span>
+      <template #default="{ row }">
+          <span>{{row.user.name}}</span>
         </template>
-      </el-table-column> -->
-      <el-table-column
-        align="center"
-        label="视频数量"
-        prop="video_nums"
-        show-overflow-tooltip
-      />
-      <el-table-column
-        align="center"
-        label="创建时间"
-        min-width="100"
-        prop="created_at"
-        show-overflow-tooltip
-      />
+      </el-table-column>
       <el-table-column
         align="center"
-        label="状态"
-        min-width="80"
-        prop="status"
+        label="观看进度"
+        min-width="120"
+        prop="title"
         show-overflow-tooltip
       >
-        <template #default="{ row }">
-          <el-tag v-if="row.status == 1"> 正常 </el-tag>
-          <el-tag v-if="row.status == 0" type="danger"> 禁用 </el-tag>
+      <template #default="{ row }">
+          <span>{{row.progress}}%</span>
         </template>
       </el-table-column>
+
       <el-table-column
         align="center"
-        fixed="right"
-        label="操作"
-        min-width="200"
-      >
-        <template #default="{ row }">
-          <el-button type="text" @click="handleEdit(row)"> 编辑 </el-button>
-          <el-button type="text" @click="courseDetail(row)"> 详情 </el-button>
-        </template>
-      </el-table-column>
+        label="最后观看时间"
+        min-width="150"
+        prop="watched_at"
+        show-overflow-tooltip
+      />
+
       <template #empty>
         <!-- <el-image
           class="vab-data-empty"
@@ -155,14 +132,21 @@ export default {
         page: 1,
         per_page: 15,
         title: "",
-        course_id:2
+        course_id:''
       },
     };
   },
   created() {
+    let route = this.$route;
+    this.queryForm.course_id = route.query.id;
     this.getCourseList();
   },
   methods: {
+    goBack() {
+      this.$router.push({
+        path: "/video/index",
+      });
+    },
     //修改排序事件
     cancelSort(row) {
       this.editStatus = 0;
@@ -198,16 +182,6 @@ export default {
         return;
       }
     },
-    courseDetail(row) {
-      console.log(row.id, "课程列表页跳转到课程详情页row.id就是课程id");
-      this.$router.push({
-        path: "/video/courseDetail",
-        query: {
-          id: row.id,
-          slug:row.slug
-        },
-      });
-    },
     handleSizeChange(val) {
       this.queryForm.per_page = val;
       this.getCourseList();
@@ -225,11 +199,10 @@ export default {
       this.listLoading = true;
       const { data } = await getList(this.queryForm);
       console.log(data, "课程列表信息");
-      // const { list, meta } = data;
-      // console.log(list);
-      // this.list = data.data;
-      // this.total = meta.pagination.total;
-      // this.listLoading = false;
+      this.list = data.data;
+      console.log(this.list)
+      this.total = data.meta.pagination.total;
+      this.listLoading = false;
     },
   },
 };