menduner/src/views/recruit/enterprise/informationManagement/informationSettingsComponents/enterpriseAlbum.vue

<!-- 企业相册 -->
<template>
  <div v-if="!imgList.length" class="text-center">
    <Empty :elevation="false" message="您还没有企业相册，马上去上传图片吧！"></Empty>
    <v-btn prepend-icon="mdi mdi-upload" color="primary" @click.stop="openFileInput">
      {{ $t('common.uploadPictures') }}
      <input
        type="file"
        ref="fileInput"
        accept="image/png, image/jpg, image/jpeg, video/*"
        style="display: none;"
        @change="handleUploadFile"
      />
    </v-btn>
  </div>
  <div v-else>
    <div class="mb-3">
      <v-btn prepend-icon="mdi mdi-upload" color="primary" @click.stop="openFileInput">
        {{ $t('common.uploadPictures') }}
        <input
          type="file"
          ref="fileInput"
          accept="image/png, image/jpg, image/jpeg, video/*"
          style="display: none;"
          @change="handleUploadFile"
        />
      </v-btn>
    </div>
    <div class="imgItem" v-for="(item, index) in imgList" :key="index" @click="handleClick(index)">
      <v-img v-if="checkIsImage(item)" width="100%" height="100%" :src="item"></v-img>
      <video v-else class="videos-radius mr-3" :src="item" controls height="172" width="172" preload="preload"></video>
      <div class="operate">
        <span></span>
        <span class="mdi mdi-trash-can-outline" @click="handleDelete(item)"></span>
      </div>
    </div>
  </div>
  <PreviewImg v-if="showPreview" :current="current" :list="imgList" @close="showPreview = !showPreview"></PreviewImg>
</template>

<script setup>
defineOptions({name: 'informationSettingsComponents-enterpriseAlbum'})
import { ref } from 'vue'
import { checkIsImage } from '@/utils'
import { uploadFile } from '@/api/common'
import { useI18n } from '@/hooks/web/useI18n'
import { getEnterpriseBaseInfo, updateEnterpriseAlbum } from '@/api/enterprise'
import Snackbar from '@/plugins/snackbar'
import Confirm from '@/plugins/confirm'

const { t } = useI18n()
const imgList = ref([])

const getInfo = async () => {
  const data = await getEnterpriseBaseInfo()
  if (!data) return
  imgList.value = data.albumList
}
getInfo()

// 预览
const showPreview = ref(false)
const current = ref(0)
const handleClick = (index) => {
  showPreview.value = !showPreview.value
  current.value = index
}

// 删除
const handleDelete = async (url) => {
  const index = imgList.value.indexOf(url)
  if (index === -1) return
  imgList.value.splice(index, 1)
  Confirm('系统提示', '是否确认删除？').then(async () => {
    await updateEnterpriseAlbum({ albumList: imgList.value })
  })
}

// 选择文件
const fileInput = ref()
const clicked = ref(false)
const openFileInput = () => {
  if (clicked.value) return
  clicked.value = true
  fileInput.value.click()
  clicked.value = false
}

// 上传
const handleUploadFile = async (e) => {
  const file = e.target.files[0]
  const size = file.size
  if (size / (1024*1024) > 10) {
    Snackbar.warning(t('common.fileSizeExceed'))
    return
  }
  const formData = new FormData()
  formData.append('file', file)
  const { data } = await uploadFile(formData)
  if (!data) return
  Snackbar.success(t('common.uploadSucMsg'))
  imgList.value.push(data)
  await updateEnterpriseAlbum({ albumList: imgList.value })
  getInfo()
}
</script>

<style lang="scss" scoped>
.imgItem {
  width: 172px; 
  height: 172px;
  border: 1px solid rgba(188, 188, 188, 0.5);
  border-radius: 5px;
  margin-right: 24px;
  margin-bottom: 24px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  .operate {
    display: none;
  }
  &:hover {
    .operate {
      position: absolute;
      bottom: 0;
      line-height: 32px;
      background-color: #00000080;
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 0 4px;
      span {
        color: #fff;
        cursor: pointer;
      }
    }
  }
}
.mdi-image-broken-variant {
  font-size: 24px;
  color: rgba(188, 188, 188, 0.8);
}
</style>