资源文件列表

src/views/book/courseware/create/components/base/common/SelectResource.vue

@@ -30,13 +30,11 @@
       >
         <template v-if="type_index === 0"> <el-image :src="item.file_url" fit="contain" /></template>
         <template v-else-if="type_index === 1">
-          <!-- <AudioLine
-            ref="audioLine"
-            :audio-id="'resource-audio-' + index"
-            :mp3="item.file_url"
-            :get-cur-time="getCurTime"
-            :width="200"
-          /> -->
+          <div class="sources-item-border sources-item-audio">
+            <SvgIcon icon-class="mp3" size="16" />
+            <span>{{ realFormatSecond(item.media_duration) }}</span>
+            <SvgIcon icon-class="play-large-fill" size="16" @click="viewDialog(item)" />
+          </div>
         </template>
         <template v-else-if="type_index === 2">
           <video
@@ -49,11 +47,13 @@
           ></video>
         </template>
         <template v-else-if="type_index === 3">
-          <!-- <iframe class="sources-item-border" :src="item.new_path" width="100%" height="300px" frameborder="0"></iframe> -->
+          <el-image style="height: 90px" :src="require('@/assets/h5-games.png')" fit="contain" />
         </template>
-        <template v-else-if="type_index === 4"> </template>
+        <template v-else-if="type_index === 4">
+          <el-image style="height: 90px" :src="require('@/assets/3d-model.png')" fit="contain"
+        /></template>
         <template v-else-if="type_index === 5">
-          <!-- <iframe class="sources-item-border" :src="item.new_path" width="100%" height="300px" frameborder="0"></iframe> -->
+          <el-image style="height: 90px" :src="require('@/assets/txt.png')" fit="contain" />
         </template>
 
         <el-popover placement="bottom" width="300" trigger="hover">
@@ -68,12 +68,7 @@
             <div class="sources-info">
               <p class="name">
                 {{ item.name
-                }}<SvgIcon
-                  v-show="item.file_id && type_index !== 0"
-                  icon-class="uploadPreview"
-                  size="16"
-                  @click="viewDialog(item)"
-                />
+                }}<SvgIcon v-show="item.file_id" icon-class="uploadPreview" size="16" @click="viewDialog(item)" />
               </p>
               <b class="label">{{ item.label }}</b>
             </div>
@@ -273,7 +268,41 @@ export default {
     changeSort() {
       this.isDesc = !this.isDesc;
     },
-    getCurTime() {},
+    // 将整数转换成 时：分：秒的格式
+    realFormatSecond(value) {
+      let theTime = parseInt(value); // 秒
+      let theTime1 = 0; // 分
+      let theTime2 = 0; // 小时
+      if (theTime > 60) {
+        theTime1 = parseInt(theTime / 60);
+        theTime = parseInt(theTime % 60);
+        if (theTime1 > 60) {
+          theTime2 = parseInt(theTime1 / 60);
+          theTime1 = parseInt(theTime1 % 60);
+        }
+      }
+      let result = String(parseInt(theTime));
+      if (result < 10) {
+        result = `0${result}`;
+      }
+      if (theTime1 > 0) {
+        result = `${String(parseInt(theTime1))}:${result}`;
+        if (theTime1 < 10) {
+          result = `0${result}`;
+        }
+      } else {
+        result = `00:${result}`;
+      }
+      if (theTime2 > 0) {
+        result = `${String(parseInt(theTime2))}:${result}`;
+        if (theTime2 < 10) {
+          result = `0${result}`;
+        }
+      } else {
+        // result = "00:" + result;
+      }
+      return result;
+    },
     // 选择资源
     confirmSelect() {
       if (!this.select_sources_id) {
@@ -296,17 +325,17 @@ export default {
         const suffix = file.name.slice(file.name.lastIndexOf('.') + 1, file.name.length).toLowerCase();
         if (suffix === 'html') {
           this.newpath = file.file_url;
-          this.visible = true;
+          this.visible_flag = true;
         } else {
           H5StartupFile({ file_id: file.file_id, index_file_name: 'index.html' }).then((res) => {
             this.newpath = res.file_url;
-            this.visible = true;
+            this.visible_flag = true;
           });
         }
       } else {
         GetFileURLMap({ file_id_list: [file.file_id] }).then(({ url_map }) => {
           this.newpath = `${this.file_preview_url}onlinePreview?url=${Base64.encode(url_map[file.file_id])}`;
-          this.visible = true;
+          this.visible_flag = true;
         });
       }
     },
@@ -371,6 +400,13 @@ export default {
         border: 1px solid #ccc;
       }
 
+      &-audio {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 9px 5px;
+      }
+
       .el-image {
         width: 100%;
         height: 140px;
@@ -390,7 +426,8 @@ export default {
       }
 
       &.active {
-        .el-image {
+        .el-image,
+        .sources-item-border {
           border-color: #f90;
         }
 

src/views/personal_workbench/project/ProductionResourceManage.vue

@@ -57,14 +57,11 @@
           >
             <template v-if="type_index === 0"> <el-image :src="item.file_url" fit="contain" /></template>
             <template v-else-if="type_index === 1">
-              <!-- <AudioLine
-                ref="audioLine"
-                :audio-id="'resource-audio-' + index"
-                :mp3="item.file_url"
-                :get-cur-time="getCurTime"
-                :width="200"
-              /> -->
-              <!-- {{ item.media_duration }} -->
+              <div class="sources-item-border sources-item-audio">
+                <SvgIcon icon-class="mp3" size="16" />
+                <span>{{ realFormatSecond(item.media_duration) }}</span>
+                <SvgIcon icon-class="play-large-fill" size="16" @click="viewDialog(item)" />
+              </div>
             </template>
             <template v-else-if="type_index === 2">
               <video
@@ -77,23 +74,13 @@
               ></video>
             </template>
             <template v-else-if="type_index === 3">
-              <!-- <iframe
-                class="sources-item-border"
-                :src="item.new_path"
-                width="100%"
-                height="300px"
-                frameborder="0"
-              ></iframe> -->
+              <el-image style="height: 90px" :src="require('../../../assets/h5-games.png')" fit="contain" />
             </template>
-            <template v-else-if="type_index === 4"> </template>
+            <template v-else-if="type_index === 4">
+              <el-image style="height: 90px" :src="require('../../../assets/3d-model.png')" fit="contain"
+            /></template>
             <template v-else-if="type_index === 5">
-              <!-- <iframe
-                class="sources-item-border"
-                :src="item.new_path"
-                width="100%"
-                height="300px"
-                frameborder="0"
-              ></iframe> -->
+              <el-image style="height: 90px" :src="require('../../../assets/txt.png')" fit="contain" />
             </template>
 
             <el-popover placement="bottom" width="300" trigger="hover">
@@ -108,12 +95,7 @@
                 <div class="sources-info">
                   <p class="name">
                     {{ item.name }}
-                    <SvgIcon
-                      v-show="item.file_id && type_index !== 0"
-                      icon-class="uploadPreview"
-                      size="16"
-                      @click="viewDialog(item)"
-                    />
+                    <SvgIcon v-show="item.file_id" icon-class="uploadPreview" size="16" @click="viewDialog(item)" />
                   </p>
                   <b class="label">{{ item.label }}</b>
                 </div>
@@ -605,7 +587,41 @@ export default {
         intro: item.intro,
       };
     },
-    getCurTime() {},
+    // 将整数转换成 时：分：秒的格式
+    realFormatSecond(value) {
+      let theTime = parseInt(value); // 秒
+      let theTime1 = 0; // 分
+      let theTime2 = 0; // 小时
+      if (theTime > 60) {
+        theTime1 = parseInt(theTime / 60);
+        theTime = parseInt(theTime % 60);
+        if (theTime1 > 60) {
+          theTime2 = parseInt(theTime1 / 60);
+          theTime1 = parseInt(theTime1 % 60);
+        }
+      }
+      let result = String(parseInt(theTime));
+      if (result < 10) {
+        result = `0${result}`;
+      }
+      if (theTime1 > 0) {
+        result = `${String(parseInt(theTime1))}:${result}`;
+        if (theTime1 < 10) {
+          result = `0${result}`;
+        }
+      } else {
+        result = `00:${result}`;
+      }
+      if (theTime2 > 0) {
+        result = `${String(parseInt(theTime2))}:${result}`;
+        if (theTime2 < 10) {
+          result = `0${result}`;
+        }
+      } else {
+        // result = "00:" + result;
+      }
+      return result;
+    },
     // 更新信息确定按钮
     submitSourceInfo() {
       this.loading = true;
@@ -971,6 +987,13 @@ export default {
           border: 1px solid #ccc;
         }
 
+        &-audio {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 9px 5px;
+        }
+
         .el-image {
           width: 100%;
           height: 140px;
@@ -990,7 +1013,8 @@ export default {
         }
 
         &.active {
-          .el-image {
+          .el-image,
+          .sources-item-border {
             border-color: #f90;
           }