提交相关代码

fhKeeper/formulahousekeeper/course-pc/src/views/gcpCertification/gcpCertification.vue

@@ -3,6 +3,14 @@
     <h2 class="title">GCP证书上传</h2>
     <div class="upload-height">
       <div class="upload-area">
+        <!-- 上传按钮 -->
+        <div class="imageUpload">
+          <el-upload ref="pictureCardRef" action="#" list-type="picture-card" :multiple="true"
+            :show-file-list="false" :http-request="uploadGCPImg" accept="image/*">
+            <i class="el-icon-plus"></i>
+          </el-upload>
+        </div>
+        <!-- 视频或图片 -->
         <div class="image-list">
           <div v-for="(file, index) in fileList" :key="index" :class="`${!file.loading ? 'image-item-hover' : ''} image-item`">
             <img :src="file.url" class="cert-image" @click="previewImage(index)">
@@ -15,13 +23,6 @@
             </div>
           </div>
         </div>
-        <!-- 上传按钮 -->
-        <div class="imageUpload">
-          <el-upload ref="pictureCardRef" action="#" list-type="picture-card" :multiple="true"
-            :show-file-list="false" :http-request="uploadGCPImg" accept="image/*">
-            <i class="el-icon-plus"></i>
-          </el-upload>
-        </div>
       </div>
     </div>
   </div>
@@ -166,6 +167,9 @@ export default {
   flex-wrap: wrap;
   gap: 20px;
   margin-bottom: 30px;
+}
+
+.imageUpload {
   margin-right: 20px;
 }
 

fhKeeper/formulahousekeeper/course-pc/src/views/hotTopicCarousel/hotTopicCarousel.vue

@@ -3,27 +3,36 @@
     <h2 class="title">轮播图热点内容</h2>
     <div class="upload-height">
       <div class="upload-area">
+        <!-- 上传按钮 -->
+        <div class="imageUpload">
+          <el-upload ref="pictureCardRef" action="#" list-type="picture-card" :multiple="true" :show-file-list="false"
+            :http-request="uploadGCPImg" accept="video/mp4,video/avi,video/x-msvideo">
+            <i class="el-icon-plus"></i>
+          </el-upload>
+        </div>
+        <!-- 视频或图片 -->
         <div class="image-list">
-          <div v-for="(file, index) in fileList" :key="index" :class="`${!file.loading ? 'image-item-hover' : ''} image-item`">
+          <div v-for="(file, index) in fileList" :key="index"
+            :class="`${!file.loading ? 'image-item-hover' : ''} image-item`">
             <img :src="require('../../assets/image/yunketang.png')" class="cert-image" @click="previewImage(index)">
             <div class="image-actions" v-if="!file.loading">
               <el-button type="danger" icon="el-icon-delete" circle @click.stop="removeImage(index)"></el-button>
-              <el-button type="primary" icon="el-icon-view" circle></el-button>
+              <el-button type="primary" icon="el-icon-view" circle @click.stop="previewingVideo(index)"></el-button>
             </div>
             <div class="image-actions-loging" v-if="file.loading">
               文件上传中...
             </div>
           </div>
         </div>
-        <!-- 上传按钮 -->
-        <div class="imageUpload">
-          <el-upload ref="pictureCardRef" action="#" list-type="picture-card" :multiple="true"
-            :show-file-list="false" :http-request="uploadGCPImg" accept="video/mp4,video/avi,video/x-msvideo">
-            <i class="el-icon-plus"></i>
-          </el-upload>
-        </div>
       </div>
     </div>
+
+    <!-- 预览视频 -->
+    <el-dialog title="预览视频" append-to-body :visible.sync="previewingVideoVisable" width="900px" top="6.5vh" :before-close="handleClose">
+      <div class="previewingVideo">
+        <video :src="previewVideoSrc" :poster="require('../../assets/image/yunketang.png')" controls></video>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -36,9 +45,16 @@ export default {
       fileList: [],
       imageList: [],
       imageListTime: null,
+      previewingVideoVisable: false,
+      previewVideoSrc: ''
     }
   },
   methods: {
+    previewingVideo(index) {
+      const row = this.fileList[index]
+      this.previewVideoSrc = row.url
+      this.previewingVideoVisable = true
+    },
     uploadGCPImg(file) {
       this.imageList.unshift(file.file)
       if (this.imageListTime) {
@@ -117,6 +133,10 @@ export default {
   padding: 20px;
 }
 
+.imageUpload {
+  margin-right: 20px;
+}
+
 .title {
   text-align: center;
   margin-bottom: 30px;
@@ -143,7 +163,6 @@ export default {
   flex-wrap: wrap;
   gap: 20px;
   margin-bottom: 30px;
-  margin-right: 20px;
 }
 
 .image-item {