Bladeren bron

课程管理和视频增加排序

liupeng 4 weken geleden
bovenliggende
commit
0871310ab1
2 gewijzigde bestanden met toevoegingen van 36 en 22 verwijderingen
  1. 29 22
      src/views/components/course/userCourseCatalogDetails.vue
  2. 7 0
      src/views/course/userCourse/index.vue

+ 29 - 22
src/views/components/course/userCourseCatalogDetails.vue

@@ -8,6 +8,12 @@
         <el-input v-model="queryParams.title" placeholder="请输入小节名称" clearable size="small"
                   @keyup.enter.native="handleQuery" />
       </el-form-item>
+      <el-form-item label="排序" prop="sorting" clearable size="small">
+        <el-select v-model="queryParams.sorting" >
+          <el-option label="升序" value="1" />
+          <el-option label="降序" value="2" />
+        </el-select>
+      </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -418,7 +424,8 @@ export default {
         pageNum: 1,
         pageSize: 10,
         courseId: null,
-        title: null
+        title: null,
+        sorting:"1",
       },
       addBatchData: {
         open: false,
@@ -654,19 +661,19 @@ export default {
       }
       return true;
     },
-    
+
     // 验证缩略图尺寸
     validateThumbnailImage(imageUrl) {
       if (!imageUrl) {
         this.thumbnailValidation.show = false;
         return;
       }
-      
+
       console.log('开始验证缩略图尺寸:', imageUrl);
-      
+
       const img = new Image();
       const config = this.thumbnailSizeConfig;
-      
+
       // 设置超时处理
       const timeoutId = setTimeout(() => {
         this.thumbnailValidation = {
@@ -676,23 +683,23 @@ export default {
         };
         console.log('图片加载超时');
       }, 10000);
-      
+
       img.onload = () => {
         clearTimeout(timeoutId);
         const { width: actualWidth, height: actualHeight } = img;
         const { width: expectedWidth, height: expectedHeight, tolerance } = config;
-        
+
         console.log(`实际尺寸: ${actualWidth}x${actualHeight}px, 期望尺寸: ${expectedWidth}x${expectedHeight}px`);
-        
+
         // 计算比例差异
         const expectedRatio = expectedWidth / expectedHeight;
         const actualRatio = actualWidth / actualHeight;
         const ratioDiff = Math.abs(actualRatio - expectedRatio) / expectedRatio;
-        
+
         console.log(`期望比例: ${expectedRatio.toFixed(3)}, 实际比例: ${actualRatio.toFixed(3)}, 差异: ${(ratioDiff * 100).toFixed(2)}%`);
-        
+
         this.thumbnailValidation.show = true;
-        
+
         if (ratioDiff <= tolerance) {
           this.thumbnailValidation.type = 'success';
           this.thumbnailValidation.message = `✓ 尺寸符合要求 (实际: ${actualWidth}x${actualHeight}px)`;
@@ -703,11 +710,11 @@ export default {
           console.log('尺寸验证失败');
         }
       };
-      
+
       img.onerror = (error) => {
         clearTimeout(timeoutId);
         console.error('图片加载失败:', error);
-        
+
         // 检查URL格式和可访问性
         this.checkImageUrl(imageUrl).then(isValid => {
           if (!isValid) {
@@ -725,27 +732,27 @@ export default {
           }
         });
       };
-      
+
       // 处理完整的图片URL
       const fullImageUrl = this.getFullImageUrl(imageUrl);
       img.crossOrigin = 'anonymous'; // 尝试处理跨域
       img.src = fullImageUrl;
     },
-    
+
     // 获取完整的图片URL
     getFullImageUrl(imageUrl) {
       if (!imageUrl) return '';
-      
+
       // 如果已经是完整URL(http/https开头)
       if (imageUrl.startsWith('http://') || imageUrl.startsWith('https://')) {
         return imageUrl;
       }
-      
+
       // 如果是base64
       if (imageUrl.startsWith('data:image/')) {
         return imageUrl;
       }
-      
+
       // 如果是相对路径,拼接基础URL
       const baseUrl = process.env.VUE_APP_BASE_API || '';
       if (imageUrl.startsWith('/')) {
@@ -754,7 +761,7 @@ export default {
         return baseUrl + '/' + imageUrl;
       }
     },
-    
+
     // 检查图片URL有效性
     async checkImageUrl(imageUrl) {
       try {
@@ -766,7 +773,7 @@ export default {
         return false;
       }
     },
-    
+
     getDetails(courseId, courseName, isPrivate) {
       this.isPrivate = isPrivate
       this.courseName = courseName
@@ -892,14 +899,14 @@ export default {
         setTimeout(() => {
           this.$refs.videoUpload.resetUpload();
         }, 500);
-        
+
         // 如果有缩略图,验证其尺寸
         if (this.form.thumbnail) {
           setTimeout(() => {
             this.validateThumbnailImage(this.form.thumbnail);
           }, 1000);
         }
-        
+
         this.open = true;
         this.title = "修改课堂视频";
       });

+ 7 - 0
src/views/course/userCourse/index.vue

@@ -51,6 +51,12 @@
           />
         </el-select>
       </el-form-item>
+      <el-form-item label="排序" prop="sorting">
+        <el-select v-model="queryParams.sorting" >
+            <el-option label="升序" value="1" />
+            <el-option label="降序" value="2" />
+        </el-select>
+      </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -359,6 +365,7 @@ export default {
         price: null,
         isPrivate: 1,
         companyIdsList:[],
+        sorting: "1",
       },
       // 表单参数
       form: {},