提交轮播热点内容

fhKeeper/formulahousekeeper/course-pc/src/routes.js

@@ -13,6 +13,7 @@ import offlineTraining from './views/offlineTraining/offlineTraining.vue'
 import examCertification from './views/examCertification/examCertification.vue'
 import gcpCertification from './views/gcpCertification/gcpCertification.vue'
 import offlineRegistration from './views/offlineRegistration/registration.vue'
+import hotTopicCarousel from './views/hotTopicCarousel/hotTopicCarousel.vue'
 
 Vue.use(Router)
 
@@ -91,6 +92,16 @@ export const allRouters = [
             { path: '/offline-registration', component: offlineRegistration, name: '线下研修班报名' }
         ]
     },
+    {
+        path: '/hotTopic-carousel',
+        component: Home,
+        name: '轮播热点内容',
+        iconCls: 'iconfont firerock-iconkehu',
+        leaf: true,
+        children: [
+            { path: '/hotTopic-carousel', component: hotTopicCarousel, name: '轮播热点内容' }
+        ]
+    },
     {
         path: '/gcpc-certification',
         component: Home,

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

@@ -123,7 +123,7 @@ export default {
             loading: false,
             imgError: ''
           }
-        })
+        }).reverse()
       })
     }
   },

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

@@ -0,0 +1,206 @@
+<template>
+  <div class="gcp-certification">
+    <h2 class="title">轮播图热点内容</h2>
+    <div class="upload-height">
+      <div class="upload-area">
+        <div class="image-list">
+          <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>
+            </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>
+  </div>
+</template>
+
+<script>
+import { post, checkAndAddUpload } from '../../api'
+export default {
+  name: 'GcpCertification',
+  data() {
+    return {
+      fileList: [],
+      imageList: [],
+      imageListTime: null,
+    }
+  },
+  methods: {
+    uploadGCPImg(file) {
+      this.imageList.unshift(file.file)
+      if (this.imageListTime) {
+        clearTimeout(this.imageListTime)
+      }
+      this.imageListTime = setTimeout(() => {
+        this.batchUploadGCPimg()
+      }, 500)
+    },
+    batchUploadGCPimg() {
+      for (let i = 0; i < this.imageList.length; i++) {
+        const formData = new FormData()
+        formData.append('coverImage', this.imageList[i])
+        this.fileList.unshift({
+          name: 'a',
+          loading: true,
+          url: '',
+          imgError: ''
+        })
+        this.http.uploadFile(`/course-carousel/uploadAndSave`, formData, res => {
+          this.fileList[i].url = checkAndAddUpload(res.data.courseUrl)
+          this.fileList[i].name = res.data.id
+          this.fileList[i].loading = false
+        }, err => {
+          this.fileList.splice(i, 1)
+          this.$message({
+            type: 'error',
+            message: '视频上传失败'
+          })
+        })
+      }
+
+      setTimeout(() => {
+        this.imageList = []
+        this.$refs.pictureCardRef.clearFiles()
+      }, 1500)
+    },
+    removeImage(index) {
+      this.$confirm('此操作将永久删除该视频, 是否继续?', '删除视频', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        post(`/course-carousel/delete`, { id: this.fileList[index].name }).then(res => {
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          })
+          this.fileList.splice(index, 1)
+        })
+      })
+    },
+    obtainCertificateList() {
+      post(`/course-carousel/list`, {}).then(res => {
+        this.fileList = res.data.map(item => {
+          return {
+            name: item.id,
+            url: checkAndAddUpload(item.courseUrl),
+            loading: false,
+            imgError: ''
+          }
+        }).reverse()
+      })
+    }
+  },
+  mounted() {
+    this.obtainCertificateList()
+  }
+}
+</script>
+
+<style scoped>
+.gcp-certification {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.title {
+  text-align: center;
+  margin-bottom: 30px;
+  color: #333;
+}
+
+.upload-area {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 30px;
+}
+
+.upload-height {
+  height: 70vh;
+  overflow-y: auto;
+}
+
+.hide-upload>>>.el-upload--picture-card {
+  display: none;
+}
+
+.image-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin-bottom: 30px;
+  margin-right: 20px;
+}
+
+.image-item {
+  position: relative;
+  width: 148px;
+  height: 148px;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  transition: all 0.3s;
+}
+
+.image-item:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
+}
+
+.image-item-hover:hover .image-actions {
+  opacity: 1;
+}
+
+.cert-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  cursor: pointer;
+}
+
+.image-actions {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, .5);
+  gap: 10px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.image-actions-loging {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, .5);
+  color: #fff;
+}
+
+.submit-area {
+  text-align: center;
+}
+</style>