'update'

src/components/live/CurMaterial.vue

@@ -152,6 +152,7 @@ export default {
       category: '',
       file_relative_path: '',
       file_url_https: '',
+      pdfNum: 0,
       pdfSrc: '',
       numPages: 1,
       curStudentID: '',
@@ -349,7 +350,22 @@ export default {
     },
 
     getNumPages(url) {
-      const loadingTask = pdf.createLoadingTask(`${process.env.VUE_APP_PDF}${url}`);
+      const loading = this.$loading({ text: 'pdf 加载中...' });
+      const loadingTask = pdf.createLoadingTask(`${process.env.VUE_APP_PDF}${url}`, {
+        onProgress: ({ loaded, total }) => {
+          const progress = loaded / total;
+          if (progress < 1) return;
+          if (Number.isInteger(loaded / 1024) && progress >= 1) {
+            if (this.pdfNum === 0) {
+              this.pdfNum += 1;
+            }
+            if (this.pdfNum === 1) {
+              this.pdfNum = 0;
+              loading.close();
+            }
+          }
+        }
+      });
       loadingTask.promise
         .then(pdf => {
           this.pdfSrc = loadingTask;
@@ -358,6 +374,8 @@ export default {
         .catch(err => {
           console.error('pdf加载失败', err);
           this.$message.error(this.$i18n.t('Key323'));
+          this.pdfNum = 0;
+          loading.close();
         });
     },
 

src/components/select/SelectTemplate.vue

@@ -34,6 +34,12 @@
       <el-table-column :label="$t('Key250')">
         <template slot-scope="{ row }"> <i class="el-icon-date" /> {{ row.begin_date }} - {{ row.end_date }} </template>
       </el-table-column>
+
+      <el-table-column fixed="right" width="100" label="操作">
+        <template slot-scope="{ row }">
+          <router-link :to="`/TemplateDetails?id=${row.id}`">查看</router-link>
+        </template>
+      </el-table-column>
     </el-table>
 
     <el-pagination

src/router/index.js

@@ -111,6 +111,7 @@ const routes = [
       }
     ]
   },
+  // 0元付款成功
   {
     path: '/OrderPaySuccess',
     component: Layout,
@@ -166,6 +167,7 @@ const routes = [
       }
     ]
   },
+  // 课程详情
   {
     path: '/course_details',
     component: Layout,
@@ -173,7 +175,19 @@ const routes = [
     children: [
       {
         path: '/GoodsDetail',
-        component: () => import('@/views/course_details/index')
+        component: () => import('@/views/course_details')
+      }
+    ]
+  },
+  // 模板详情
+  {
+    path: '/template_details',
+    component: Layout,
+    redirect: '/TemplateDetails',
+    children: [
+      {
+        path: '/TemplateDetails',
+        component: () => import('@/views/template_details')
       }
     ]
   },

src/views/task_details/student/index.vue

@@ -338,9 +338,11 @@ export default {
     },
 
     fillTaskExecuteInfo_Student() {
-      if (this.file_list.length <= 0) {
+      // 基础任务，必须提交作业
+      if (this.my_execute_info.is_finished === 'false' && this.teaching_type === 12 && this.file_list.length <= 0) {
         return this.$message.warning('请先提交作业');
       }
+
       const homework_file_id_list = [];
       this.file_list.forEach(item => {
         homework_file_id_list.push(item.file_id);

src/views/template_details/index.vue

@@ -0,0 +1,384 @@
+<template>
+  <div class="template_details">
+    <div
+      v-if="isData && CourseData.is_release === 'true' && CourseData.is_deleted === 'false'"
+      v-loading="loading"
+      class="details_container"
+    >
+      <header class="title">{{ CourseData.name }}</header>
+      <main class="main">
+        <div v-for="(item, i) in CourseData.cs_item_list" :key="i" class="course-list">
+          <div class="courseOne">
+            <div class="title">
+              <div>
+                <span>{{ i + 1 }}.</span>
+                <span>{{ item.name }}</span>
+              </div>
+              <div class="courseOne-time">{{ item.begin_time }} ~ {{ item.end_time }}</div>
+            </div>
+          </div>
+          <div class="course-content">
+            <el-collapse @change="handleChange(item.id)">
+              <el-collapse-item :name="item.id">
+                <div slot="title" class="Coursetasks">
+                  {{ $t('Key392') }}
+                  <img
+                    class="arrow"
+                    :src="
+                      openList.includes(item.id)
+                        ? require('../../assets/course_details/open1.png')
+                        : require('../../assets/course_details/open2.png')
+                    "
+                  />
+                </div>
+                <div class="courseContent">
+                  <template v-for="li in courseContentList">
+                    <div v-if="item[li.id].length > 0" :key="li.id" class="tasks">
+                      <div class="title">
+                        <span class="red-circle" /><span>{{ $t(li.name) }}</span>
+                      </div>
+                      <div class="content">
+                        <el-collapse-item v-for="(it, it_i) in item[li.id]" :key="it_i" :name="it.id">
+                          <div slot="title" :class="openList.includes(it.id) ? 'contenttitle2' : 'contenttitle'">
+                            <span :title="it.name">{{ it.name }}</span>
+                            <span>
+                              <span class="gray">{{ it.begin_time }} ~ {{ it.end_time }}</span>
+                              <span class="gray">···</span>
+                            </span>
+                          </div>
+                          <div class="detail">
+                            <div>
+                              <span>{{ $t('Key393') }}</span>
+                              <p>
+                                {{ it.content }}
+                              </p>
+                            </div>
+                            <div v-if="it.courseware_list.length > 0">
+                              <span>{{ $t('Key309') }}</span>
+                              <div>
+                                <div
+                                  v-for="(courseware, courseware_i) in it.courseware_list"
+                                  :key="courseware_i"
+                                  class="btn"
+                                >
+                                  <img src="../../assets/course_details/file.png" alt="" />
+                                  <span> {{ courseware.courseware_name }} </span>
+                                </div>
+                              </div>
+                            </div>
+                            <div v-if="it.accessory_list.length > 0">
+                              <span>{{ $t('Key394') }}</span>
+                              <div>
+                                <div
+                                  v-for="(accessory, accessory_i) in it.accessory_list"
+                                  :key="accessory_i"
+                                  class="btn"
+                                >
+                                  <img src="../../assets/course_details/fileType1.png" alt="" />
+                                  <span> {{ accessory.file_name }} </span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </el-collapse-item>
+                      </div>
+                    </div>
+                  </template>
+                </div>
+              </el-collapse-item>
+            </el-collapse>
+          </div>
+        </div>
+      </main>
+    </div>
+
+    <div v-else-if="!loading" class="non-existent">
+      {{
+        CourseData.is_deleted === 'true'
+          ? '无法查看，课程已删除'
+          : CourseData.is_release === 'false'
+          ? '无法查看，课程已下架'
+          : '课程不存在'
+      }}
+    </div>
+  </div>
+</template>
+
+<script>
+import { GetCourseInfoBox } from '@/api/course';
+
+export default {
+  data() {
+    const query = this.$route.query;
+
+    return {
+      id: query.id,
+      CourseData: null,
+      isData: false,
+      loading: true,
+      openList: [],
+      courseContentList: [
+        { id: 'pre_task_list', name: 'Key353' },
+        { id: 'mid_task_list', name: 'Key354' },
+        { id: 'after_task_list', name: 'Key355' }
+      ]
+    };
+  },
+  created() {
+    GetCourseInfoBox({ id: this.id })
+      .then(res => {
+        this.CourseData = res;
+        this.isData = 'id' in res;
+        this.loading = false;
+      })
+      .catch(() => {
+        this.loading = false;
+      });
+  },
+  methods: {
+    // 课程任务的打开和关闭
+    handleChange(val) {
+      this.openList.includes(val) ? this.openList.splice(this.openList.indexOf(val), 1) : this.openList.push(val);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.template_details {
+  min-height: 100%;
+  padding: 52px 0 20px;
+  background: #e5e5e5;
+
+  .details_container {
+    display: flex;
+    flex-direction: column;
+    row-gap: 24px;
+    width: 1200px;
+    min-height: calc(100vh - 168px);
+    margin: 0 auto;
+  }
+
+  header.title {
+    font-size: 20px;
+    font-weight: 700;
+
+    &::before {
+      display: inline-block;
+      width: 4px;
+      height: 13px;
+      margin-right: 16px;
+      content: '';
+      background-color: $basic-color;
+    }
+  }
+
+  .main {
+    flex: 1;
+    width: 100%;
+    padding: 40px;
+    background-color: #fff;
+    border-radius: 8px;
+
+    .course-list {
+      font-size: 18px;
+      background: #fff;
+
+      & + .course-list {
+        margin-top: 30px;
+      }
+
+      > :not(.courseOne) {
+        padding-left: 40px;
+        margin-top: 16px;
+      }
+
+      .courseOne {
+        .title {
+          display: flex;
+          justify-content: space-between;
+
+          > div:nth-child(1) {
+            font-size: 20px;
+            font-weight: bold;
+
+            span {
+              margin-right: 24px;
+            }
+          }
+        }
+
+        &-time {
+          color: #737373;
+        }
+      }
+
+      .course-content {
+        width: 670px;
+      }
+
+      .Coursetasks {
+        display: flex;
+        align-items: center;
+        font-size: 16px;
+        cursor: pointer;
+
+        .arrow {
+          width: 24px;
+          margin-left: 8px;
+        }
+      }
+
+      .courseContent {
+        .tasks {
+          padding-left: 10px;
+
+          .title {
+            font-size: 16px;
+            color: #2c2c2c;
+
+            .red-circle {
+              position: relative;
+              right: 3px;
+              display: inline-block;
+              width: 8px;
+              height: 8px;
+              margin-right: 16px;
+              background: #fe6d68;
+              border-radius: 50%;
+            }
+          }
+
+          .content {
+            padding-bottom: 10px;
+            padding-left: 20px;
+            margin-top: 16px;
+            border-left: 1px solid #fe6d68;
+
+            %contenttitle,
+            .contenttitle {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              width: 670px;
+              padding: 0 10px;
+              font-size: 16px;
+              cursor: pointer;
+              background: #fff;
+              border: 1px solid #e6e6e6;
+              border-radius: 8px;
+
+              img {
+                width: 16px;
+                margin-left: 8px;
+              }
+
+              span {
+                margin-left: 16px;
+              }
+
+              > span:first-child {
+                width: 180px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+
+              .gray {
+                opacity: 0.5;
+              }
+            }
+
+            .contenttitle2 {
+              @extend %contenttitle;
+
+              background: #f9f9f9;
+              border-bottom-right-radius: 0;
+              border-bottom-left-radius: 0;
+            }
+
+            .detail {
+              width: 599px;
+              padding-bottom: 24px;
+              background: #fff;
+              border: 1px solid #e7e7e7;
+              border-bottom-right-radius: 8px;
+              border-bottom-left-radius: 8px;
+              box-shadow: 0 2px 8px rgba(0, 0, 0, 10%);
+
+              > div {
+                display: flex;
+                align-items: center;
+                margin-top: 24px;
+
+                > :nth-child(1) {
+                  width: 78px;
+                  min-width: 78px;
+                  margin-left: 24px;
+                  font-size: 16px;
+                  color: #000;
+                }
+
+                > :nth-child(2) {
+                  margin-left: 16px;
+
+                  img {
+                    width: 24px;
+                  }
+
+                  .btn {
+                    display: flex;
+                    align-items: center;
+                    width: 270px;
+                    height: 40px;
+                    cursor: pointer;
+                    background: #fff;
+                    border: 1px solid #dbdbdb;
+                    border-radius: 4px;
+
+                    img {
+                      margin-right: 8px;
+                      margin-left: 16px;
+                    }
+                  }
+
+                  .btn:not(:nth-child(1)) {
+                    margin-top: 8px;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.el-collapse {
+  border-style: none;
+
+  &-item + &-item {
+    margin-top: 12px;
+  }
+
+  .el-collapse-item__header {
+    border-style: none;
+
+    .l-collapse-item__arrow,
+    .el-icon-arrow-right {
+      display: none;
+    }
+  }
+
+  .el-collapse-item__wrap {
+    border-style: none;
+  }
+
+  .el-collapse-item__content {
+    padding-bottom: 0;
+  }
+}
+</style>