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

<template>
  <div class="gcp-certification">
    <h2 class="title">GCP证书上传</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="file.url" 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 @click.stop="previewImage(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="image/*">
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

Vue.use(Viewer)

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(`/gcp-show/uploadAndSave`, formData, res => {
          this.fileList[i].url = checkAndAddUpload(res.data.url)
          this.fileList[i].name = res.data.id
          this.fileList[i].loading = false
        }, err => {
          this.fileList[i].loading = false
          this.fileList[i].imgError = '图片上传失败'
        })
      }

      setTimeout(() => {
        this.imageList = []
        this.$refs.pictureCardRef.clearFiles()
      }, 1500)
    },
    removeImage(index) {
      this.$confirm('此操作将永久删除该图片, 是否继续?', '删除图片', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        post(`/gcp-show/delete`, { id: this.fileList[index].name }).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.fileList.splice(index, 1)
        })
      })
    },
    previewImage(index) {
      this.$viewerApi({
        images: this.fileList.map(f => f.url),
        options: {
          initialViewIndex: index,
          toolbar: {
            zoomIn: 1,
            zoomOut: 1,
            oneToOne: 1,
            reset: 1,
            prev: 1,
            next: 1,
            rotateLeft: 1,
            rotateRight: 1,
            flipHorizontal: 1,
            flipVertical: 1
          }
        }
      })
    },
    obtainCertificateList() {
      post(`/gcp-show/list`, {}).then(res => {
        this.fileList = res.data.map(item => {
          return {
            name: item.id,
            url: checkAndAddUpload(item.url),
            loading: false,
            imgError: ''
          }
        })
      })
    }
  },
  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>